Devtools: Add device frames to device mode

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

Index: third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
index 5367ff81d836d79bdfb42b95e4446f2a5ce8f8e3..7ca892faa90eb075c7c263d1789d7bdd394e465b 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeModel.js
@@ -44,6 +44,9 @@ WebInspector.DeviceModeModel = function(updateCallback)
     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} */
@@ -233,6 +236,22 @@ WebInspector.DeviceModeModel.prototype = {
     },
 
     /**
+     * @return {string}
+     */
+    outlineImage: function()
+    {
+        return this._deviceOutlineSetting.get() && this._device && this._device.outlineImage(this._mode.orientation) || "";
+    },
+
+    /**
+     * @return {!WebInspector.Rect}
+     */
+    outlineRect: function()
+    {
+        return this._outlineRect;
+    },
+
+    /**
      * @return {!WebInspector.Rect}
      */
     screenRect: function()
@@ -305,6 +324,14 @@ WebInspector.DeviceModeModel.prototype = {
     },
 
     /**
+     * @return {!WebInspector.Setting}
+     */
+    deviceOutlineSetting: function()
+    {
+        return this._deviceOutlineSetting;
+    },
+
+    /**
      * @return {number}
      */
     defaultDeviceScaleFactor: function()
@@ -398,6 +425,11 @@ WebInspector.DeviceModeModel.prototype = {
         this._calculateAndEmulate(false);
     },
 
+    _deviceOutlineSettingChanged: function()
+    {
+        this._calculateAndEmulate(false);
+    },
+
     /**
      * @return {number}
      */
@@ -424,14 +456,17 @@ WebInspector.DeviceModeModel.prototype = {
 
         if (this._type === WebInspector.DeviceModeModel.Type.Device) {
             var orientation = this._device.orientationByName(this._mode.orientation);
-            this._fitScale = this._calculateFitScale(orientation.width, orientation.height);
-            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), this._mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), resetPageScaleFactor);
+            var outline = this._deviceOutlineSetting.get() ? orientation.outlineInsets : null;
+            var width = outline ? outline.left + orientation.width + outline.right : orientation.width;
+            var height = outline ? outline.top + orientation.height + outline.bottom : orientation.height;
+            this._fitScale = this._calculateFitScale(width, height);
+            this._applyDeviceMetrics(new Size(orientation.width, orientation.height), this._mode.insets, outline || new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._device.deviceScaleFactor, this._device.mobile(), resetPageScaleFactor);
             this._applyUserAgent(this._device.userAgent);
             this._applyTouch(this._device.touch(), this._device.mobile());
             this._applyScreenOrientation(this._mode.orientation == WebInspector.EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary");
         } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
             this._fitScale = this._calculateFitScale(this._availableSize.width, this._availableSize.height);
-            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);
             this._applyScreenOrientation("");
@@ -445,7 +480,7 @@ WebInspector.DeviceModeModel.prototype = {
             var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mobile;
             var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : 0;
             this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._heightSetting.get());
-            this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, 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, resetPageScaleFactor);
             this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultMobileUserAgent : "");
             this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeModel.UA.Desktop, mobile);
             this._applyScreenOrientation(screenHeight >= screenWidth ? "portraitPrimary" : "landscapePrimary");
@@ -485,12 +520,13 @@ WebInspector.DeviceModeModel.prototype = {
     /**
      * @param {!Size} screenSize
      * @param {!Insets} insets
+     * @param {!Insets} outline
      * @param {number} scale
      * @param {number} deviceScaleFactor
      * @param {boolean} mobile
      * @param {boolean} resetPageScaleFactor
      */
-    _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor, mobile, resetPageScaleFactor)
+    _applyDeviceMetrics: function(screenSize, insets, outline, scale, deviceScaleFactor, mobile, resetPageScaleFactor)
     {
         screenSize.width = Math.max(1, Math.floor(screenSize.width));
         screenSize.height = Math.max(1, Math.floor(screenSize.height));
@@ -503,9 +539,14 @@ WebInspector.DeviceModeModel.prototype = {
         this._appliedDeviceSize = screenSize;
         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(
+            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,