[DevTools] Refactor emulated devices modes.

Source/devtools/front_end/emulation/EmulatedDevices.js

 // Copyright 2014 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
  */
 WebInspector.EmulatedDevice = function()
 {
     /** @type {string} */
@@ skipping 15 matching lines @@
 
     /** @type {string} */
     this._show = WebInspector.EmulatedDevice._Show.Default;
     /** @type {boolean} */
     this._showByDefault = true;
 
     /** @type {?Runtime.Extension} */
     this._extension = null;
 }
 
-/** @typedef {!{title: string, orientation: string, pageRect: !WebInspector.Geometry.Rect, images: ?WebInspector.EmulatedDevice.Images}} */
+/** @typedef {!{title: string, orientation: string, insets: !Insets, images: ?WebInspector.EmulatedDevice.Images}} */
 WebInspector.EmulatedDevice.Mode;
 
-/** @typedef {!{width: number, height: number, outlineInsets: ?WebInspector.Geometry.Insets, outlineImages: ?WebInspector.EmulatedDevice.Images}} */
+/** @typedef {!{width: number, height: number, outlineInsets: ?Insets, outlineImages: ?WebInspector.EmulatedDevice.Images}} */
 WebInspector.EmulatedDevice.Orientation;
 
 WebInspector.EmulatedDevice.Horizontal = "horizontal";
 WebInspector.EmulatedDevice.Vertical = "vertical";
 
 WebInspector.EmulatedDevice.Type = {
     Phone: "phone",
     Tablet: "tablet",
     Notebook: "notebook",
     Desktop: "desktop",
@@ skipping 46 matching lines @@
         function parseIntValue(object, key)
         {
             var value = /** @type {number} */ (parseValue(object, key, "number"));
             if (value !== Math.abs(value))
                 throw new Error("Emulated device value '" + key + "' must be integer");
             return value;
         }
 
         /**
          * @param {*} json
-         * @return {!WebInspector.Geometry.Rect}
+         * @return {!Insets}
          */
-        function parseIntRect(json)
+        function parseInsets(json)
         {
-            var result = {};
-            result.top = parseIntValue(json, "top");
-            result.left = parseIntValue(json, "left");
-            result.width = parseIntValue(json, "width");
-            result.height = parseIntValue(json, "height");
-            return /** @type {!WebInspector.Geometry.Rect} */ (result);
+            return new Insets(parseIntValue(json, "left"), parseIntValue(json, "top"), parseIntValue(json, "right"), parseIntValue(json, "bottom"));
         }
 
         /**
-         * @param {*} json
-         * @return {?WebInspector.Geometry.Insets}
-         */
-        function parseIntInsets(json)
-        {
-            if (json === null)
-                return null;
-            var result = {};
-            result.top = parseIntValue(json, "top");
-            result.left = parseIntValue(json, "left");
-            return /** @type {?WebInspector.Geometry.Insets} */ (result);
-        }
-
-        /**
          * @param {*} json
          * @return {!WebInspector.EmulatedDevice.Images}
          */
         function parseImages(json)
         {
             if (!Array.isArray(json))
                 throw new Error("Emulated device images is not an array");
             var result = new WebInspector.EmulatedDevice.Images();
             for (var i = 0; i < json.length; ++i) {
                 var src = /** @type {string} */ (parseValue(json[i], "src", "string"));
@@ skipping 14 matching lines @@
             var result = {};
 
             result.width = parseIntValue(json, "width");
             if (result.width < 0 || result.width > WebInspector.OverridesSupport.MaxDeviceSize)
                 throw new Error("Emulated device has wrong width: " + result.width);
 
             result.height = parseIntValue(json, "height");
             if (result.height < 0 || result.height > WebInspector.OverridesSupport.MaxDeviceSize)
                 throw new Error("Emulated device has wrong height: " + result.height);
 
-            result.outlineInsets = parseIntInsets(parseValue(json["outline"], "insets", "object", null));
-            if (result.outlineInsets) {
+            var outlineInsets = parseValue(json["outline"], "insets", "object", null);
+            if (outlineInsets) {
+                result.outlineInsets = parseInsets(outlineInsets);
                 if (result.outlineInsets.left < 0 || result.outlineInsets.top < 0)
                     throw new Error("Emulated device has wrong outline insets");
                 result.outlineImages = parseImages(parseValue(json["outline"], "images", "object"));
             }
 
             return /** @type {!WebInspector.EmulatedDevice.Orientation} */ (result);
         }
 
         var result = new WebInspector.EmulatedDevice();
         result.title = /** @type {string} */ (parseValue(json, "title", "string"));
@@ skipping 21 matching lines @@
         if (!Array.isArray(modes))
             throw new Error("Emulated device modes must be an array");
         result.modes = [];
         for (var i = 0; i < modes.length; ++i) {
             var mode = {};
             mode.title = /** @type {string} */ (parseValue(modes[i], "title", "string"));
             mode.orientation = /** @type {string} */ (parseValue(modes[i], "orientation", "string"));
             if (mode.orientation !== WebInspector.EmulatedDevice.Vertical && mode.orientation !== WebInspector.EmulatedDevice.Horizontal)
                 throw new Error("Emulated device mode has wrong orientation '" + mode.orientation + "'");
             var orientation = result.orientationByName(mode.orientation);
-            mode.pageRect = parseIntRect(parseValue(modes[i], "page-rect", "object"));
-            if (mode.pageRect.top < 0 || mode.pageRect.left < 0 || mode.pageRect.width < 0 || mode.pageRect.height < 0 ||
-                mode.pageRect.top + mode.pageRect.height > orientation.height || mode.pageRect.left + mode.pageRect.width > orientation.width) {
-                throw new Error("Emulated device mode '" + mode.title + "'has wrong page rect");
+            mode.insets = parseInsets(parseValue(modes[i], "insets", "object"));
+            if (mode.insets.top < 0 || mode.insets.left < 0 || mode.insets.right < 0 || mode.insets.bottom < 0 ||
+                mode.insets.top + mode.insets.bottom > orientation.height || mode.insets.left + mode.insets.right > orientation.width) {
+                throw new Error("Emulated device mode '" + mode.title + "'has wrong mode insets");
             }
             if (modes[i].hasOwnProperty("images"))
                 mode.images = parseImages(parseValue(modes[i], "images", "object"));
             result.modes.push(mode);
         }
 
         result._showByDefault = /** @type {boolean} */ (parseValue(json, "show-by-default", "boolean", true));
         result._show = /** @type {string} */ (parseValue(json, "show", "string", WebInspector.EmulatedDevice._Show.Default));
 
-        result.createImplicitModes();
         return result;
     } catch (e) {
         WebInspector.console.error("Failed to update emulated device list. " + String(e));
         return null;
     }
 }
 
 /**
  * @param {!WebInspector.OverridesSupport.Device} device
  * @param {string} title
  * @param {string=} type
  * @return {!WebInspector.EmulatedDevice}
  */
 WebInspector.EmulatedDevice.fromOverridesDevice = function(device, title, type)
 {
     var result = new WebInspector.EmulatedDevice();
     result.title = title;
     result.type = type || WebInspector.EmulatedDevice.Type.Unknown;
     result.vertical.width = device.width;
     result.vertical.height = device.height;
     result.horizontal.width = device.height;
     result.horizontal.height = device.width;
     result.deviceScaleFactor = device.deviceScaleFactor;
     result.userAgent = device.userAgent;
     result.capabilities = [];
     if (device.touch)
         result.capabilities.push(WebInspector.EmulatedDevice.Capability.Touch);
     if (device.mobile)
         result.capabilities.push(WebInspector.EmulatedDevice.Capability.Mobile);
-    result.createImplicitModes();
     return result;
 }
 
 /**
  * @param {!WebInspector.EmulatedDevice} device1
  * @param {!WebInspector.EmulatedDevice} device2
  * @return {number}
  */
 WebInspector.EmulatedDevice.compareByTitle = function(device1, device2)
 {
@@ skipping 10 matching lines @@
     },
 
     /**
      * @param {?Runtime.Extension} extension
      */
     setExtension: function(extension)
     {
         this._extension = extension;
     },
 
-    createImplicitModes: function()
-    {
-        // TODO(dgozman): this whole method should be removed once we have modes for all devices.
-        if (this.modes.length)
-            return;
-        this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, pageRect: {top: 0, left: 0, width: this.horizontal.width, height: this.horizontal.height}, images: null});
-        if (this.type === WebInspector.EmulatedDevice.Type.Phone || this.type === WebInspector.EmulatedDevice.Type.Tablet || this.type === WebInspector.EmulatedDevice.Type.Unknown)
-            this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, pageRect: {top: 0, left: 0, width: this.vertical.width, height: this.vertical.height}, images: null});
-    },
-
     /**
      * @param {string} orientation
      * @return {!Array.<!WebInspector.EmulatedDevice.Mode>}
      */
     modesForOrientation: function(orientation)
     {
         var result = [];
         for (var index = 0; index < this.modes.length; index++) {
             if (this.modes[index].orientation === orientation)
                 result.push(this.modes[index]);
@@ skipping 15 matching lines @@
         json["screen"] = {};
         json["screen"]["device-pixel-ratio"] = this.deviceScaleFactor;
         json["screen"]["vertical"] = this._orientationToJSON(this.vertical);
         json["screen"]["horizontal"] = this._orientationToJSON(this.horizontal);
 
         json["modes"] = [];
         for (var i = 0; i < this.modes.length; ++i) {
             var mode = {};
             mode["title"] = this.modes[i].title;
             mode["orientation"] = this.modes[i].orientation;
-            mode["page-rect"] = this.modes[i].pageRect;
+            mode["insets"] = {};
+            mode["insets"]["left"] = this.modes[i].insets.left;
+            mode["insets"]["top"] = this.modes[i].insets.top;
+            mode["insets"]["right"] = this.modes[i].insets.right;
+            mode["insets"]["bottom"] = this.modes[i].insets.bottom;
             if (this.modes[i].images)
                 mode["images"] = this.modes[i].images._toJSON();
             json["modes"].push(mode);
         }
 
         json["show-by-default"] = this._showByDefault;
         json["show"] = this._show;
 
         return json;
     },
 
     /**
      * @param {!WebInspector.EmulatedDevice.Orientation} orientation
      * @return {*}
      */
     _orientationToJSON: function(orientation)
     {
         var json = {};
         json["width"] = orientation.width;
         json["height"] = orientation.height;
         if (orientation.outlineInsets) {
             json["outline"] = {};
-            json["outline"]["insets"] = orientation.outlineInsets;
+            json["outline"]["insets"] = {};
+            json["outline"]["insets"]["left"] = orientation.outlineInsets.left;
+            json["outline"]["insets"]["top"] = orientation.outlineInsets.top;
+            json["outline"]["insets"]["right"] = orientation.outlineInsets.right;
+            json["outline"]["insets"]["bottom"] = orientation.outlineInsets.bottom;
             json["outline"]["images"] = orientation.outlineImages._toJSON();
         }
         return json;
     },
 
     /**
      * @param {!WebInspector.EmulatedDevice.Mode} mode
      * @return {!WebInspector.OverridesSupport.Device}
      */
     modeToOverridesDevice: function(mode)
     {
         var result = {};
-        result.width = mode.pageRect.width;
-        result.height = mode.pageRect.height;
+        var orientation = this.orientationByName(mode.orientation);
+        result.width = orientation.width - mode.insets.left - mode.insets.right;
+        result.height = orientation.height - mode.insets.top - mode.insets.bottom;
         result.deviceScaleFactor = this.deviceScaleFactor;
         result.userAgent = this.userAgent;
         result.touch = this.touch();
         result.mobile = this.mobile();
         return result;
     },
 
     /**
      * @param {string} name
      * @return {!WebInspector.EmulatedDevice.Orientation}
@@ skipping 128 matching lines @@
      * @param {!Array.<*>} jsonArray
      * @return {!Array.<!WebInspector.EmulatedDevice>}
      */
     _listFromJSONV1: function(jsonArray)
     {
         var result = [];
         if (!Array.isArray(jsonArray))
             return result;
         for (var i = 0; i < jsonArray.length; ++i) {
             var device = WebInspector.EmulatedDevice.fromJSONV1(jsonArray[i]);
-            if (device)
+            if (device) {
                 result.push(device);
+                if (!device.modes.length) {
+                    device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, insets: new Insets(0, 0, 0, 0), images: null});
+                    device.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, insets: new Insets(0, 0, 0, 0), images: null});
+                }
+            }
         }
         return result;
     },
 
     /**
      * @return {!Array.<!WebInspector.EmulatedDevice>}
      */
     standard: function()
     {
         return this._standard;
@@ skipping 54 matching lines @@
             if (deviceById.has(title))
                 to[i].copyShowFrom(/** @type {!WebInspector.EmulatedDevice} */ (deviceById.get(title)));
         }
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /** @type {!WebInspector.EmulatedDevicesList} */
 WebInspector.emulatedDevicesList;