[DevTools] Option to show device frames in emulation mode

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

Index: third_party/WebKit/Source/devtools/front_end/emulation/EmulatedDevices.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/EmulatedDevices.js b/third_party/WebKit/Source/devtools/front_end/emulation/EmulatedDevices.js
index 70d8a0e11649fd3a4d2dc07abf5bbaa08f4939e0..ebfd4cbe4fc02df4b33d94c55c3fddf10e3d6d57 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/EmulatedDevices.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/EmulatedDevices.js
@@ -12,9 +12,9 @@ WebInspector.EmulatedDevice = function()
     /** @type {string} */
     this.type = WebInspector.EmulatedDevice.Type.Unknown;
     /** @type {!WebInspector.EmulatedDevice.Orientation} */
-    this.vertical = {width: 0, height: 0, outlineInsets: null, outlineImage: null};
+    this.vertical = {width: 0, height: 0, outlineInsets: null, outlineImage: null, outlineWidth: 0, outlineHeight: 0};

[dgozman, 2016/02/01 17:18:27]

I think outlineWidth === width + insets.left + insets.right, so there is no need
to expose it.
Same with height.

[mmccoy, 2016/02/10 20:06:34]

Done!

     /** @type {!WebInspector.EmulatedDevice.Orientation} */
-    this.horizontal = {width: 0, height: 0, outlineInsets: null, outlineImage: null};
+    this.horizontal = {width: 0, height: 0, outlineInsets: null, outlineImage: null, outlineWidth: 0, outlineHeight: 0};
     /** @type {number} */
     this.deviceScaleFactor = 1;
     /** @type {!Array.<string>} */
@@ -36,7 +36,7 @@ WebInspector.EmulatedDevice = function()
 /** @typedef {!{title: string, orientation: string, insets: !Insets, image: ?string}} */
 WebInspector.EmulatedDevice.Mode;
 
-/** @typedef {!{width: number, height: number, outlineInsets: ?Insets, outlineImage: ?string}} */
+/** @typedef {!{width: number, height: number, outlineInsets: ?Insets, outlineImage: ?string, outlineWidth: ?number, outlineHeight: ?number}} */
 WebInspector.EmulatedDevice.Orientation;
 
 WebInspector.EmulatedDevice.Horizontal = "horizontal";
@@ -132,8 +132,9 @@ WebInspector.EmulatedDevice.fromJSONV1 = function(json)
                 if (result.outlineInsets.left < 0 || result.outlineInsets.top < 0)
                     throw new Error("Emulated device has wrong outline insets");
                 result.outlineImage = /** @type {string} */ (parseValue(json["outline"], "image", "string"));
+                result.outlineWidth = /** @type {number} */ (parseIntValue(json["outline"], "width"));
+                result.outlineHeight = /** @type {number} */ (parseIntValue(json["outline"], "height"));
             }
-
             return /** @type {!WebInspector.EmulatedDevice.Orientation} */ (result);
         }
 
@@ -289,6 +290,8 @@ WebInspector.EmulatedDevice.prototype = {
             json["outline"]["insets"]["top"] = orientation.outlineInsets.top;
             json["outline"]["insets"]["right"] = orientation.outlineInsets.right;
             json["outline"]["insets"]["bottom"] = orientation.outlineInsets.bottom;
+            json["outline"]["width"] = orientation.outlineWidth;
+            json["outline"]["height"] = orientation.outlineHeight;
             json["outline"]["image"] = orientation.outlineImage;
         }
         return json;
@@ -308,6 +311,48 @@ WebInspector.EmulatedDevice.prototype = {
     },
 
     /**
+     * @param {!WebInspector.EmulatedDevice.Mode} mode
+     * @return {string}
+     */
+    outlineImage: function(mode)
+    {
+        var orientation = this.orientationByName(mode.orientation);
+        if (!orientation.outlineImage)
+            return "";
+        if (!this._extension)
+            return orientation.outlineImage;
+        return this._extension.module().substituteURL(orientation.outlineImage);
+    },
+
+    /**
+     * @param {!WebInspector.EmulatedDevice.Mode} mode
+     * @return {Insets|string}

[dgozman, 2016/02/01 17:18:27]

?Insets

[mmccoy, 2016/02/10 20:06:34]

Done

+     */
+    outlineInsets: function(mode)
+    {
+        var orientation = this.orientationByName(mode.orientation);
+        if (!orientation.outlineImage)
+            return "";

[dgozman, 2016/02/01 17:18:27]

return null

[mmccoy, 2016/02/10 20:06:33]

Done.

+        return orientation.outlineInsets;
+    },
+
+    /**
+     * @param {!WebInspector.EmulatedDevice.Mode} mode
+     * @return {Object|string}
+     */
+    outlineDimensions: function(mode)
+    {
+        var orientation = this.orientationByName(mode.orientation);
+        if (!orientation)
+            return "";
+        var dimensions = {
+            "width": orientation.outlineWidth,
+            "height": orientation.outlineHeight
+        }
+        return dimensions;
+    },
+
+    /**
      * @param {string} name
      * @return {!WebInspector.EmulatedDevice.Orientation}
      */