[DevTools] Initial implementation of device 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, pageRect: !WebInspector.Geometry.Rect, images: ?WebInspector.EmulatedDevice.Images}} */
 WebInspector.EmulatedDevice.Mode;
 
 /** @typedef {!{width: number, height: number, outlineInsets: ?WebInspector.Geometry.Insets, outlineImages: ?WebInspector.EmulatedDevice.Images}} */
 WebInspector.EmulatedDevice.Orientation;
 
 WebInspector.EmulatedDevice.Horizontal = "horizontal";
 WebInspector.EmulatedDevice.Vertical = "vertical";
 
 WebInspector.EmulatedDevice.Type = {
     Phone: "phone",
@@ skipping 158 matching lines @@
             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.images = parseImages(parseValue(modes[i], "images", "object"));
+            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()
+    {
+        if (!Runtime.experiments.isEnabled("deviceArt")) {
+            this.modes = [];
+            if (this.type === WebInspector.EmulatedDevice.Type.Tablet)
+                this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, pageRect: {top: 0, left: 0, width: this.horizontal.width, height: this.horizontal.height}, images: null});

[pfeldman, 2015/06/13 06:48:59]

Why would you rotate the tablet and not the phone? Can we format our legacy
data?

[pfeldman, 2015/06/13 06:48:59]

defining rects as array would help readability here as well.

[dgozman, 2015/06/16 15:09:30]

We don't have legacy data anymore. It's all in descriptors. This code will be
removed once experiment is over.

+            else
+                this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, pageRect: {top: 0, left: 0, width: this.vertical.width, height: this.vertical.height}, images: null});
+            return;
+        }
+        if (this.modes.length)
+            return;
+        this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Vertical, pageRect: {top: 0, left: 0, width: this.vertical.width, height: this.vertical.height}, images: null});
+        if (this.type === WebInspector.EmulatedDevice.Type.Phone || this.type === WebInspector.EmulatedDevice.Type.Tablet || this.type === WebInspector.EmulatedDevice.Type.Unknown)

[pfeldman, 2015/06/13 06:48:59]

I don't think there should be a code that would check for Phone or Tablet at
all. They should all be the same.

[dgozman, 2015/06/16 15:09:30]

Added TODO, will remove in next patch.

+            this.modes.push({title: "", orientation: WebInspector.EmulatedDevice.Horizontal, pageRect: {top: 0, left: 0, width: this.horizontal.width, height: this.horizontal.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]);
+        }
+        return result;
+    },
+
     /**
      * @return {*}
      */
     _toJSON: function()
     {
         var json = {};
         json["title"] = this.title;
         json["type"] = this.type;
         json["user-agent"] = this.userAgent;
         json["capabilities"] = this.capabilities;
 
         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["images"] = this.modes[i].images._toJSON();
+            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"]["images"] = orientation.outlineImages._toJSON();
         }
         return json;
     },
 
     /**
+     * @param {!WebInspector.EmulatedDevice.Mode} mode
      * @return {!WebInspector.OverridesSupport.Device}
      */
-    toOverridesDevice: function()
+    modeToOverridesDevice: function(mode)
     {
         var result = {};
-        result.width = this.vertical.width;
-        result.height = this.vertical.height;
+        result.width = mode.pageRect.width;
+        result.height = mode.pageRect.height;
         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 204 matching lines @@
             if (deviceById.has(title))
                 to[i].copyShowFrom(/** @type {!WebInspector.EmulatedDevice} */ (deviceById.get(title)));
         }
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 /** @type {!WebInspector.EmulatedDevicesList} */
 WebInspector.emulatedDevicesList;