[DevTools] Add groups to device select.

Source/devtools/front_end/sdk/OverridesSupport.js

Index: Source/devtools/front_end/sdk/OverridesSupport.js
diff --git a/Source/devtools/front_end/sdk/OverridesSupport.js b/Source/devtools/front_end/sdk/OverridesSupport.js
index af745677827a6a7728709a4aadab1fedb47c7cf4..a357d2bd301e72e24318e0b698ca5619fd103ad8 100644
--- a/Source/devtools/front_end/sdk/OverridesSupport.js
+++ b/Source/devtools/front_end/sdk/OverridesSupport.js
@@ -858,6 +858,13 @@ WebInspector.OverridesSupport.prototype = {
         return this._deviceMetricsWarningMessage || this._userAgentWarningMessage || "";
     },
 
+    clearWarningMessage: function()
+    {
+        this._deviceMetricsWarningMessage = "";
+        this._userAgentWarningMessage = "";
+        this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.OverridesWarningUpdated);
+    },
+
     /**
      * @param {!WebInspector.Target} target
      */
@@ -991,16 +998,30 @@ WebInspector.OverridesSupport.prototype = {
         var deviceSelectElement = document.createElement("select");
         deviceSelectElement.disabled = WebInspector.overridesSupport.isInspectingDevice();
 
-        var devices = WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets).concat(WebInspector.OverridesSupport._desktops);
-        devices.sort();
+        var selectDeviceOption = new Option(WebInspector.UIString("<Select model>"), WebInspector.UIString("<Select model>"));
+        selectDeviceOption.device = new WebInspector.OverridesSupport.Device("", "");
+        deviceSelectElement.add(selectDeviceOption);
+
+        addGroup(WebInspector.UIString("Phones"), WebInspector.OverridesSupport._phones);

[pfeldman, 2014/06/18 16:15:40]

Responsive design assumes that we should not distinguish between phones and
tablets. I wonder if we should not do this at all.

[dgozman, 2014/06/18 16:25:41]

Done.

+        addGroup(WebInspector.UIString("Tablets"), WebInspector.OverridesSupport._tablets);
+        addGroup(WebInspector.UIString("Desktops"), WebInspector.OverridesSupport._desktops);
 
-        var selectDevice = [WebInspector.UIString("<Select model>"), "", ""];
-        devices = devices.concat([selectDevice]);
-        for (var i = 0; i < devices.length; ++i) {
-            var device = devices[i];
-            var option = new Option(device[0], device[0]);
-            option.device = new WebInspector.OverridesSupport.Device(device[2], device[1]);
-            deviceSelectElement.add(option);
+        /**
+         * @param {string} name
+         * @param {!Array.<!Array.<string>>} devices
+         */
+        function addGroup(name, devices)
+        {
+            devices = devices.slice();
+            devices.sort();
+            var groupElement = deviceSelectElement.createChild("optgroup");
+            groupElement.label = name;
+            for (var i = 0; i < devices.length; ++i) {
+                var device = devices[i];
+                var option = new Option(device[0], device[0]);
+                option.device = new WebInspector.OverridesSupport.Device(device[2], device[1]);
+                groupElement.appendChild(option);
+            }
         }
 
         deviceSelectElement.addEventListener("change", deviceSelected, false);
@@ -1017,7 +1038,7 @@ WebInspector.OverridesSupport.prototype = {
 
         function deviceSelected()
         {
-            if (deviceSelectElement.selectedIndex === devices.length - 1)
+            if (deviceSelectElement.selectedIndex === 0)
                 return;
 
             var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
@@ -1031,8 +1052,8 @@ WebInspector.OverridesSupport.prototype = {
             if (emulatedSettingChangedMuted)
                 return;
 
-            var index = devices.length - 1;
-            for (var i = 0; i < devices.length; ++i) {
+            var index = 0;
+            for (var i = 1; i < deviceSelectElement.options.length; ++i) {
                 var option = deviceSelectElement.options[i];
                 if (WebInspector.overridesSupport.isEmulatingDevice(option.device)) {
                     index = i;