<commit_before>define(function(require) {
    'use strict';

    var _ = require('underscore');
    var mediator = require('oroui/js/mediator');
    var viewportManager = require('oroui/js/viewport-manager');

    /**
     * Create panel manager instance
     * @param options
     * @constructor
     */
    var DevicesModule = function(options) {
        _.extend(this, _.pick(options, ['builder']));

        this.init();
    };

    DevicesModule.prototype = {
        /**
         * @property {DOM.Element}
         */
        $builderIframe: null,

        /**
         * @property {Object}
         */
        breakpoints: {},

        /**
         * @property {DOM.Element}
         */
        canvasEl: null,

        /**
         * Run device manager
         */
        init: function() {
            this.$builderIframe = this.builder.Canvas.getFrameEl();
            this.canvasEl = this.builder.Canvas.getElement();

            _.delay(_.bind(this._getCSSBreakpoint, this), 300);

            this.builder.on('changeTheme', _.debounce(_.bind(this._getCSSBreakpoint, this), 300));
        },

        /**
         * Fetch brakpoints from theme stylesheet
         * @private
         */
        _getCSSBreakpoint: function() {
            var frameHead = this.$builderIframe.contentDocument.head;
            var breakpoints = mediator.execute('fetch:head:computedVars', frameHead);

            this.breakpoints = _.filter(viewportManager._collectCSSBreakpoints(breakpoints), function(breakpoint) {
                return breakpoint.name.indexOf('strict') === -1;
            });

            this.createButtons();
        },

        /**
         * Create buttons controls via breakpoints
         */
        createButtons: function() {
            var devicePanel = this.builder.Panels.getPanel('devices-c');
            var deviceButton = devicePanel.get('buttons');
            var DeviceManager = this.builder.DeviceManager;
            var Commands = this.builder.Commands;

            deviceButton.reset();
            DeviceManager.getAll().reset();

            Commands.add('setDevice', {
                run: function(editor, sender) {
                    editor.setDevice(sender.id);
                    var canvas = editor.Canvas.getElement();

                    canvas.classList.add(sender.id);
                },
                stop: function(editor, sender) {
                    var canvas = editor.Canvas.getElement();

                    canvas.classList.remove(sender.id);
                }
            });

            _.each(this.breakpoints, function(breakpoint) {
                if (this.canvasEl.classList.length === 1 && breakpoint.name === 'desktop') {
                    this.canvasEl.classList.add(breakpoint.name);
                }

                var width = breakpoint.max ? breakpoint.max + 'px' : false;
                width = this.calculateDeviceWidth(width);
                var options = {
                    height: this.calculateDeviceHeight(breakpoint.max)
                };

                if (breakpoint.name.indexOf('landscape') !== -1) {
                    options = {
                        height: this.calculateDeviceHeight(breakpoint.max, true),
                        widthMedia: width
                    };
                }

                DeviceManager.add(breakpoint.name, width, options);

                deviceButton.add({
                    id: breakpoint.name,
                    command: 'setDevice',<commit_msg>BB-17283: Code review - fixes<commit_after>define(function(require) {
    'use strict';

    var _ = require('underscore');
    var mediator = require('oroui/js/mediator');
    var viewportManager = require('oroui/js/viewport-manager');

    /**
     * Create panel manager instance
     * @param options
     * @constructor
     */
    var DevicesModule = function(options) {
        _.extend(this, _.pick(options, ['builder']));

        this.init();
    };

    DevicesModule.prototype = {
        /**
         * @property {DOM.Element}
         */
        $builderIframe: null,

        /**
         * @property {Object}
         */
        breakpoints: {},

        /**
         * @property {DOM.Element}
         */
        canvasEl: null,

        /**
         * Run device manager
         */
        init: function() {
            this.$builderIframe = this.builder.Canvas.getFrameEl();
            this.canvasEl = this.builder.Canvas.getElement();

            _.delay(_.bind(this._getCSSBreakpoint, this), 300);

            this.builder.on('changeTheme', _.debounce(_.bind(this._getCSSBreakpoint, this), 300));
        },

        /**
         * Fetch brakpoints from theme stylesheet
         * @private
         */
        _getCSSBreakpoint: function() {
            var frameHead = this.$builderIframe.contentDocument.head;
            var breakpoints = mediator.execute('fetch:head:computedVars', frameHead);

            this.breakpoints = _.filter(viewportManager._collectCSSBreakpoints(breakpoints), function(breakpoint) {
                return breakpoint.name.indexOf('strict') === -1;
            });

            this.createButtons();
        },

        /**
         * Create buttons controls via breakpoints
         */
        createButtons: function() {
            var devicePanel = this.builder.Panels.getPanel('devices-c');
            var deviceButton = devicePanel.get('buttons');
            var DeviceManager = this.builder.DeviceManager;
            var Commands = this.builder.Commands;

            deviceButton.reset();
            DeviceManager.getAll().reset();

            Commands.add('setDevice', {
                run: function(editor, sender) {
                    editor.setDevice(sender.id);
                    var canvas = editor.Canvas.getElement();

                    canvas.classList.add(sender.id);
                },
                stop: function(editor, sender) {
                    var canvas = editor.Canvas.getElement();

                    canvas.classList.remove(sender.id);
                }
            });

            _.each(this.breakpoints, function(breakpoint) {
                if (this.canvasEl.classList.length === 1 && breakpoint.name === 'desktop') {
                    this.canvasEl.classList.add(breakpoint.name);
                }

                var width = breakpoint.max ? breakpoint.max + 'px' : false;
                width = this.calculateDeviceWidth(width);
                var options = {
                    height: this.calculateDeviceHeight(width)
                };

                if (breakpoint.name.indexOf('landscape') !== -1) {
                    options = {
                        height: this.calculateDeviceHeight(width, true),
                        widthMedia: width
                    };
                }

                DeviceManager.add(breakpoint.name, width, options);

                deviceButton.add({
                    id: breakpoint.name,
                    command: 'setDevice',
{'fraction_non_alphanumeric': 0.11911554921540657, 'fraction_numerical': 0.003281027104136947, 'mean_word_length': 1.5503819570753001, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6445928', 'n_tokens_mistral': 1823, 'n_tokens_neox': 1708, 'n_words': 300}