[DevTools] Option to show device frames in emulation mode

third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @param {function()} updateCallback
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.DeviceModeModel = function(updateCallback)
@@ skipping 27 matching lines @@
         this._heightSetting.set(WebInspector.DeviceModeModel.MinDeviceSize);
     if (this._heightSetting.get() > WebInspector.DeviceModeModel.MaxDeviceSize)
         this._heightSetting.set(WebInspector.DeviceModeModel.MaxDeviceSize);
     this._heightSetting.addChangeListener(this._heightSettingChanged, this);
 
     this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA", WebInspector.DeviceModeModel.UA.Mobile);
     this._uaSetting.addChangeListener(this._uaSettingChanged, this);
     this._deviceScaleFactorSetting = WebInspector.settings.createSetting("emulation.deviceScaleFactor", 0);
     this._deviceScaleFactorSetting.addChangeListener(this._deviceScaleFactorSettingChanged, this);
 
+    this._deviceOutlineSetting = WebInspector.settings.createSetting("emulation.deviceOutline", true);
+    this._deviceOutlineSetting.addChangeListener(this._deviceOutlineSettingChanged, this);
+
     /** @type {!WebInspector.DeviceModeModel.Type} */
     this._type = WebInspector.DeviceModeModel.Type.None;
     /** @type {?WebInspector.EmulatedDevice} */
     this._device = null;
     /** @type {?WebInspector.EmulatedDevice.Mode} */
     this._mode = null;
     /** @type {number} */
     this._fitScale = 1;
 
     /** @type {?WebInspector.Target} */
@@ skipping 163 matching lines @@
 
     /**
      * @return {string}
      */
     screenImage: function()
     {
         return (this._device && this._mode) ? this._device.modeImage(this._mode) : "";
     },
 
     /**
+     * @return {string}
+     */
+    outlineImage: function()
+    {
+        return (this._device && this._mode && Runtime.experiments.isEnabled("deviceFrames")) ?
+            this._device.outlineImage(this._mode) : "";
+    },
+
+    /**
+     * @return {!WebInspector.Rect}
+     */
+    outlineRect: function()
+    {
+        return this._outlineRect;
+    },
+
+    /**
      * @return {!WebInspector.Rect}
      */
     screenRect: function()
     {
         return this._screenRect;
     },
 
     /**
      * @return {!WebInspector.Rect}
      */
@@ skipping 67 matching lines @@
     },
 
     /**
      * @return {!WebInspector.Setting}
      */
     deviceScaleFactorSetting: function()
     {
         return this._deviceScaleFactorSetting;
     },
 
+    /**
+     * @return {!WebInspector.Setting}
+     */
+    deviceOutlineSetting: function()
+    {
+        return this._deviceOutlineSetting;
+    },
+
     reset: function()
     {
         this._deviceScaleFactorSetting.set(0);
         this._scaleSetting.set(1);
         this.setWidth(400);
         this.setHeight(0);
         this._uaSetting.set(WebInspector.DeviceModeModel.UA.Mobile);
     },
 
     /**
@@ skipping 40 matching lines @@
     _uaSettingChanged: function()
     {
         this._calculateAndEmulate(true);
     },
 
     _deviceScaleFactorSettingChanged: function()
     {
         this._calculateAndEmulate(false);
     },
 
+    _deviceOutlineSettingChanged: function()
+    {
+        this._calculateAndEmulate(false);
+    },
+
     /**
      * @return {number}
      */
     _preferredScaledWidth: function()
     {
         return Math.floor(this._preferredSize.width / (this._scaleSetting.get() || 1));
     },
 
     /**
      * @return {number}
      */
     _preferredScaledHeight: function()
     {
         return Math.floor(this._preferredSize.height / (this._scaleSetting.get() || 1));
     },
 
     /**
      * @param {boolean} resetPageScaleFactor
      */
     _calculateAndEmulate: function(resetPageScaleFactor)
     {
         if (!this._target)
             this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageScaleFactor);
 
         if (this._type === WebInspector.DeviceModeModel.Type.Device) {
             var orientation = this._device.orientationByName(this._mode.orientation);
+            var outline = (this._deviceOutlineSetting.get() && Runtime.experiments.isEnabled("deviceFrames"))? orientation.outlineInsets : new Insets(0,0,0,0);
             this._fitScale = this._calculateFitScale(orientation.width, orientation.height);
             if (this._device.mobile())
                 this._appliedUserAgentType = this._device.touch() ? WebInspector.DeviceModeModel.UA.Mobile : WebInspector.DeviceModeModel.UA.MobileNoTouch;
             else
                 this._appliedUserAgentType = this._device.touch() ? WebInspector.DeviceModeModel.UA.DesktopTouch : WebInspector.DeviceModeModel.UA.Desktop;
-            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), this._mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), this._mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary", resetPageScaleFactor);
+            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), this._mode.insets, outline, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), this._mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary", resetPageScaleFactor);
             this._applyUserAgent(this._device.userAgent);
             this._applyTouch(this._device.touch(), this._device.mobile());
         } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
             this._fitScale = this._calculateFitScale(this._availableSize.width, this._availableSize.height);
             this._appliedUserAgentType = WebInspector.DeviceModeModel.UA.Desktop;
-            this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), 1, 0, false, "", resetPageScaleFactor);
+            this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1, 0, false, "", resetPageScaleFactor);
             this._applyUserAgent("");
             this._applyTouch(false, false);
         } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) {
             var screenWidth = this._widthSetting.get();
             if (!screenWidth || screenWidth > this._preferredScaledWidth())
                 screenWidth = this._preferredScaledWidth();
             var screenHeight = this._heightSetting.get();
             if (!screenHeight || screenHeight > this._preferredScaledHeight())
                 screenHeight = this._preferredScaledHeight();
             var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile || this._uaSetting.get() === WebInspector.DeviceModeModel.UA.MobileNoTouch;
             var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel.defaultMobileScaleFactor : 0;
             this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._heightSetting.get());
             this._appliedUserAgentType = this._uaSetting.get();
-            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary", resetPageScaleFactor);
+            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary", resetPageScaleFactor);
             this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultMobileUserAgent : "");
             this._applyTouch(this._uaSetting.get() === WebInspector.DeviceModeModel.UA.DesktopTouch || this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile, this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile);
         }
         if (this._target)
             this._target.renderingAgent().setShowViewportSizeOnResize(this._type === WebInspector.DeviceModeModel.Type.None);
         this._updateCallback.call(null);
     },
 
     /**
      * @param {number} screenWidth
@@ skipping 20 matching lines @@
      * @param {string} userAgent
      */
     _applyUserAgent: function(userAgent)
     {
         WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent);
     },
 
     /**
      * @param {!Size} screenSize
      * @param {!Insets} insets
+     * @param {!Insets|null} outline
      * @param {number} scale
      * @param {number} deviceScaleFactor
      * @param {boolean} mobile
      * @param {string} screenOrientation
      * @param {boolean} resetPageScaleFactor
      */
-    _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor, mobile, screenOrientation, resetPageScaleFactor)
+    _applyDeviceMetrics: function(screenSize, insets, outline, scale, deviceScaleFactor, mobile, screenOrientation, resetPageScaleFactor)
     {
         screenSize.width = Math.max(1, Math.floor(screenSize.width));
         screenSize.height = Math.max(1, Math.floor(screenSize.height));
 
         var pageWidth = screenSize.width - insets.left - insets.right;
         var pageHeight = screenSize.height - insets.top - insets.bottom;
+
         var positionX = insets.left;
         var positionY = insets.top;
         var screenOrientationAngle = screenOrientation === "landscapePrimary" ? 90 : 0;
 
         this._appliedDeviceSize = screenSize;
         this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRatio;
         this._screenRect = new WebInspector.Rect(
             Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2),
-            0,
+            outline.top * scale,
             screenSize.width * scale,
             screenSize.height * scale);
+        this._outlineRect = new WebInspector.Rect(
+            Math.max(0, this._screenRect.left - outline.left * scale),
+            0,
+            (outline.left + screenSize.width + outline.right) * scale,
+            (outline.top + screenSize.height + outline.bottom) * scale);
         this._visiblePageRect = new WebInspector.Rect(
             positionX * scale,
             positionY * scale,
             Math.min(pageWidth * scale, this._availableSize.width - this._screenRect.left - positionX * scale),
             Math.min(pageHeight * scale, this._availableSize.height - this._screenRect.top - positionY * scale));
         this._scale = scale;
 
         if (scale === 1 && this._availableSize.width >= screenSize.width && this._availableSize.height >= screenSize.height) {
             // When we have enough space, no page size override is required. This will speed things up and remove lag.
             pageWidth = 0;
@@ skipping 41 matching lines @@
 
     /**
      * @param {boolean} touchEnabled
      * @param {boolean} mobile
      */
     _applyTouch: function(touchEnabled, mobile)
     {
         WebInspector.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mobile);
     }
 }