[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/EmulatedDevices.js

Index: Source/devtools/front_end/emulation/EmulatedDevices.js
diff --git a/Source/devtools/front_end/emulation/EmulatedDevices.js b/Source/devtools/front_end/emulation/EmulatedDevices.js
index 87157758240acfe5da1ce49751c63b5624bedc04..c13b6a0f8719d31bbe27050fcad9b6d9388f4116 100644
--- a/Source/devtools/front_end/emulation/EmulatedDevices.js
+++ b/Source/devtools/front_end/emulation/EmulatedDevices.js
@@ -33,7 +33,7 @@ WebInspector.EmulatedDevice = function()
     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}} */
@@ -212,13 +212,15 @@ WebInspector.EmulatedDevice.fromJSONV1 = function(json)
                 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));
@@ -248,6 +250,7 @@ WebInspector.EmulatedDevice.fromOverridesDevice = function(device, title, type)
         result.capabilities.push(WebInspector.EmulatedDevice.Capability.Touch);
     if (device.mobile)
         result.capabilities.push(WebInspector.EmulatedDevice.Capability.Mobile);
+    result.createImplicitModes();
     return result;
 }
 
@@ -278,6 +281,37 @@ WebInspector.EmulatedDevice.prototype = {
         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 {*}
      */
@@ -300,7 +334,8 @@ WebInspector.EmulatedDevice.prototype = {
             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);
         }
 
@@ -328,13 +363,14 @@ WebInspector.EmulatedDevice.prototype = {
     },
 
     /**
+     * @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();