[DevTools] Add groups to device select.

Source/devtools/front_end/sdk/OverridesSupport.js

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 404 matching lines @@
      "Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/525.10 (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2",
      "1280x800x1"],
     ["Samsung Galaxy Tab 7.7, 8.9, 10.1",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
      "1280x800x1"],
     ["Samsung Galaxy Tab",
      "Mozilla/5.0 (Linux; U; Android 2.2; en-us; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
      "1024x600x1"],
 ];
 
 WebInspector.OverridesSupport._desktops = [

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

_notebooks?

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

Done.

     ["Chromebook Pixel",

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

We should not list particular models here, I'd rather list "Notebook" and
"Notebook HiDPI". Both with 1280x800 resolution.

      "Mozilla/5.0 (X11; CrOS x86_64 3912.23.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.46 Safari/537.36",
      "1280x950x2x1x0"],
     ["Apple MacBook Pro",
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.46 Safari/537.36",
      "1280x800x1x0x0"],
     ["Apple MacBook Pro Retina",
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.46 Safari/537.36",
      "1440x900x2x0x0"],
     ["Apple MacBook Air",
      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.46 Safari/537.36",
@@ skipping 414 matching lines @@
     },
 
     /**
      * @return {string}
      */
     warningMessage: function()
     {
         return this._deviceMetricsWarningMessage || this._userAgentWarningMessage || "";
     },
 
+    clearWarningMessage: function()
+    {
+        this._deviceMetricsWarningMessage = "";
+        this._userAgentWarningMessage = "";
+        this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.OverridesWarningUpdated);
+    },
+
     /**
      * @param {!WebInspector.Target} target
      */
     targetAdded: function(target)
     {
         // FIXME: adapt this to multiple targets.
         if (this._target)
             return;
         this._target = target;
 
@@ skipping 113 matching lines @@
 
     /**
      * @param {!Document} document
      * @return {!Element}
      */
     createDeviceSelect: function(document)
     {
         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);
 
-        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);
+        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);
+
+        /**
+         * @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);
 
         var emulatedSettingChangedMuted = false;
         WebInspector.overridesSupport.settings.deviceWidth.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.deviceHeight.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.deviceScaleFactor.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.deviceTextAutosizing.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.emulateTouch.addChangeListener(emulatedSettingChanged);
         WebInspector.overridesSupport.settings.userAgent.addChangeListener(emulatedSettingChanged);
         emulatedSettingChanged();
 
         function deviceSelected()
         {
-            if (deviceSelectElement.selectedIndex === devices.length - 1)
+            if (deviceSelectElement.selectedIndex === 0)
                 return;
 
             var option = deviceSelectElement.options[deviceSelectElement.selectedIndex];
             emulatedSettingChangedMuted = true;
             WebInspector.overridesSupport.emulateDevice(option.device);
             emulatedSettingChangedMuted = false;
         }
 
         function emulatedSettingChanged()
         {
             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;
                     break;
                 }
             }
             deviceSelectElement.selectedIndex = index;
         }
 
         return deviceSelectElement;
@@ skipping 48 matching lines @@
     },
 
     __proto__: WebInspector.Object.prototype
 }
 
 
 /**
  * @type {!WebInspector.OverridesSupport}
  */
 WebInspector.overridesSupport;