[DevTools] Initial implementation of device modes.

Source/devtools/front_end/emulation/OverridesUI.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.
 
 WebInspector.OverridesUI = {}
 
 /**
+ * @param {function(!WebInspector.EmulatedDevice, !WebInspector.EmulatedDevice.Mode)=} callback
  * @return {!Element}
  */
-WebInspector.OverridesUI.createDeviceSelect = function()
+WebInspector.OverridesUI.createDeviceSelect = function(callback)
 {
     var p = createElement("p");
 
     var deviceSelectElement = p.createChild("select");
-    deviceSelectElement.addEventListener("change", deviceSelected, false);
+    deviceSelectElement.classList.add("device-select");
+    deviceSelectElement.addEventListener("change", deviceSelected.bind(null, true), false);
+
+    var modeSelectElement = p.createChild("select");
+    modeSelectElement.classList.add("mode-select");
+    modeSelectElement.addEventListener("change", modeSelected, false);
 
     // This has to be object, not boolean, otherwise its value doesn't update properly.
     var emulatedSettingChangedMuted = { muted: false };
     WebInspector.overridesSupport.settings.emulateResolution.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.emulateMobile.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.emulateTouch.addChangeListener(emulatedSettingChanged);
     WebInspector.overridesSupport.settings.userAgent.addChangeListener(emulatedSettingChanged);
 
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.CustomDevicesUpdated, deviceListChanged);
     WebInspector.emulatedDevicesList.addEventListener(WebInspector.EmulatedDevicesList.Events.StandardDevicesUpdated, deviceListChanged);
     deviceListChanged();
 
-    function deviceSelected()
+    /**
+     * @param {boolean} apply
+     */
+    function deviceSelected(apply)
     {
-        if (deviceSelectElement.selectedIndex === 0)
+        modeSelectElement.removeChildren();
+        var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
+        var device = /** @type {!WebInspector.EmulatedDevice} */ (option.device);
+
+        if (deviceSelectElement.selectedIndex === 0) {
+            addMode(null, "");
+            modeSelectElement.classList.add("invisible");
             return;
+        }
 
-        var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
+        if (device.modes.length === 1) {
+            addMode(device.modes[0], WebInspector.UIString("Default"));
+            modeSelectElement.classList.add("invisible");
+        } else {
+            addOrientation(WebInspector.EmulatedDevice.Vertical, WebInspector.UIString("Portrait"));
+            addOrientation(WebInspector.EmulatedDevice.Horizontal, WebInspector.UIString("Landscape"));
+            modeSelectElement.classList.remove("invisible");
+        }
+
+        modeSelectElement.selectedIndex = option.lastSelectedIndex;
+        if (apply)
+            modeSelected();
+
+        /**
+         * @param {string} orientation
+         * @param {string} title
+         */
+        function addOrientation(orientation, title)
+        {
+            var modes = device.modesForOrientation(orientation);
+            if (!modes.length)
+                return;
+            if (modes.length === 1) {
+                addMode(modes[0], title);
+            } else {
+                for (var index = 0; index < modes.length; index++) {
+                    addMode(modes[index], title + " \u2013 " + modes[index].title);
+                }
+            }
+        }
+
+        /**
+         * @param {?WebInspector.EmulatedDevice.Mode} mode
+         * @param {string} title
+         */
+        function addMode(mode, title)
+        {
+            var option = new Option(title, title);
+            option.mode = mode;
+            option.device = device;
+            modeSelectElement.appendChild(option);
+        }
+    }
+
+    function saveLastSelectedIndex()
+    {
+        deviceSelectElement.options[deviceSelectElement.selectedIndex].lastSelectedIndex = modeSelectElement.selectedIndex;
+    }
+
+    function modeSelected()
+    {
+        saveLastSelectedIndex();
+        var option = modeSelectElement.options[modeSelectElement.selectedIndex];
+        if (callback)
+            callback(option.device, option.mode);
         emulatedSettingChangedMuted.muted = true;
-        WebInspector.overridesSupport.emulateDevice(option.overridesDevice);
+        WebInspector.overridesSupport.emulateDevice(option.device.modeToOverridesDevice(option.mode));
         emulatedSettingChangedMuted.muted = false;
     }
 
     function emulatedSettingChanged()
     {
         if (emulatedSettingChangedMuted.muted)
             return;
 
-        var index = 0;
         for (var i = 1; i < deviceSelectElement.options.length; ++i) {
             var option = deviceSelectElement.options[i];
-            if (WebInspector.overridesSupport.isEmulatingDevice(option.overridesDevice)) {
-                index = i;
-                break;
+            var device = /** @type {!WebInspector.EmulatedDevice} */ (option.device);
+            for (var j = 0; j < device.modes.length; j++) {
+                if (WebInspector.overridesSupport.isEmulatingDevice(device.modeToOverridesDevice(device.modes[j]))) {
+                    select(i, j);
+                    return;
+                }
             }
         }
-        deviceSelectElement.selectedIndex = index;
+
+        select(0, 0);
+
+        /**
+         * @param {number} deviceIndex
+         * @param {number} modeIndex
+         */
+        function select(deviceIndex, modeIndex)
+        {
+            deviceSelectElement.selectedIndex = deviceIndex;
+            deviceSelected(false);
+            modeSelectElement.selectedIndex = modeIndex;
+            saveLastSelectedIndex();
+            if (callback) {
+                var option = modeSelectElement.options[modeSelectElement.selectedIndex];
+                callback(option.device, option.mode);
+            }
+        }
     }
 
     function deviceListChanged()
     {
         deviceSelectElement.removeChildren();
 
         var selectDeviceOption = new Option(WebInspector.UIString("<Select model>"), WebInspector.UIString("<Select model>"));
-        selectDeviceOption.device = {title: WebInspector.UIString("<Select model>"), width: 0, height: 0, deviceScaleFactor: 0, userAgent: "", touch: false, mobile: false};
+        selectDeviceOption.device = null;
         selectDeviceOption.disabled = true;
         deviceSelectElement.appendChild(selectDeviceOption);
 
         addGroup(WebInspector.UIString("Custom"), WebInspector.emulatedDevicesList.custom(), true);
-        addGroup(WebInspector.UIString("Devices"), WebInspector.emulatedDevicesList.standard());
+        addGroup(WebInspector.UIString("Devices"), WebInspector.emulatedDevicesList.standard(), false);
 
         /**
          * @param {string} name
          * @param {!Array.<!WebInspector.EmulatedDevice>} devices
-         * @param {boolean=} custom
+         * @param {boolean} custom
          */
         function addGroup(name, devices, custom)
         {
             devices = devices.filter(function (d) { return d.show(); });
             if (!devices.length)
                 return;
             devices.sort(WebInspector.EmulatedDevice.compareByTitle);
             var groupElement = deviceSelectElement.createChild("optgroup");
             groupElement.label = name;
             for (var i = 0; i < devices.length; ++i) {
                 var option = new Option(devices[i].title, devices[i].title);
                 option.device = devices[i];
-                option.overridesDevice = devices[i].toOverridesDevice();
-                option.custom = custom;
+                option.lastSelectedIndex = 0;
                 groupElement.appendChild(option);
             }
         }
 
         emulatedSettingChanged();
     }
 
     return p;
 }
 
@@ skipping 195 matching lines @@
     {title: "iPhone \u2014 iOS 7", value: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_2 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A4449d Safari/9537.53"},
     {title: "iPhone \u2014 iOS 6", value: "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25"},
     {title: "MeeGo \u2014 Nokia N9", value: "Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13"},
     {title: "Opera 18 \u2014 Mac", value: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 OPR/18.0.1284.68"},
     {title: "Opera 18 \u2014 Windows", value: "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 OPR/18.0.1284.68"},
     {title: "Opera 12 \u2014 Mac", value: "Opera/9.80 (Macintosh; Intel Mac OS X 10.9.1) Presto/2.12.388 Version/12.16"},
     {title: "Opera 12 \u2014 Windows", value: "Opera/9.80 (Windows NT 6.1) Presto/2.12.388 Version/12.16"},
     {title: "Silk \u2014 Kindle Fire (Desktop view)", value: "Mozilla/5.0 (Linux; U; en-us; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true"},
     {title: "Silk \u2014 Kindle Fire (Mobile view)", value: "Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Mobile Safari/535.19 Silk-Accelerated=true"}
 ];