[DevTools] Add groups to device select.

This also fixes small UI problems.

BUG=327641

Review URL: https://codereview.chromium.org/346583002

git-svn-id: svn://svn.chromium.org/blink/trunk@176444 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js

@@ -29,7 +29,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     this._warningMessage.createChild("div", "warning-icon-small");
     this._warningMessage.createChild("span");
     var warningCloseButton = this._warningMessage.createChild("div", "close-button");
-    warningCloseButton.addEventListener("click", this._closeOverridesWarning.bind(this), false);
+    warningCloseButton.addEventListener("click", WebInspector.overridesSupport.clearWarningMessage.bind(WebInspector.overridesSupport), false);
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
 
     this._slidersContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-sliders-container");
@@ -405,7 +405,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");
 
         // Device.
-        var deviceElement = deviceSection.createChild("div", "responsive-design-suite").createChild("div");
+        var deviceElement = deviceSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");
         var fieldsetElement = deviceElement.createChild("fieldset");
         fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");
         fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
@@ -417,21 +417,25 @@ WebInspector.ResponsiveDesignView.prototype = {
         // Dimensions.
         var screenElement = detailsElement.createChild("div", "");
         fieldsetElement = screenElement.createChild("fieldset");
-        fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution");
+        var resolutionButton = new WebInspector.StatusBarButton(WebInspector.UIString("Screen resolution"), "responsive-design-icon responsive-design-icon-resolution");
+        resolutionButton.setEnabled(false);
+        fieldsetElement.appendChild(resolutionButton.element);
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));
         fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("\u2013")));
 
-        this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-icon responsive-design-icon-swap");
-        this._swapDimensionsElement.tabIndex = -1;
-        this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
-        this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
+        var swapButton = new WebInspector.StatusBarButton(WebInspector.UIString("Swap dimensions"), "responsive-design-icon responsive-design-icon-swap");
+        swapButton.element.tabIndex = -1;
+        swapButton.addEventListener("click", WebInspector.overridesSupport.swapDimensions, WebInspector.overridesSupport);
+        fieldsetElement.appendChild(swapButton.element);
 
         // Device pixel ratio.
         detailsElement.createChild("div", "responsive-design-suite-separator");
         var dprElement = detailsElement.createChild("div", "");
         fieldsetElement = dprElement.createChild("fieldset");
-        fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
+        var dprButton = new WebInspector.StatusBarButton(WebInspector.UIString("Device pixel ratio"), "responsive-design-icon responsive-design-icon-dpr");
+        dprButton.setEnabled(false);
+        fieldsetElement.appendChild(dprButton.element);
         fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("\u2013")));
     },
 
@@ -440,7 +444,7 @@ WebInspector.ResponsiveDesignView.prototype = {
         var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");
 
         // Bandwidth.
-        var bandwidthElement = networkSection.createChild("div", "responsive-design-suite").createChild("div");
+        var bandwidthElement = networkSection.createChild("div", "responsive-design-suite responsive-design-suite-top").createChild("div");
         var fieldsetElement = bandwidthElement.createChild("fieldset");
         var networkCheckbox = fieldsetElement.createChild("label");
         networkCheckbox.textContent = WebInspector.UIString("Network");
@@ -481,12 +485,6 @@ WebInspector.ResponsiveDesignView.prototype = {
         this.onResize();
     },
 
-    _closeOverridesWarning: function()
-    {
-        this._warningMessage.querySelector("span").textContent = "";
-        this._warningMessage.classList.add("hidden");
-    },
-
     _showEmulationInDrawer: function()
     {
         WebInspector.overridesSupport.reveal();

third_party/WebKit/Source/devtools/front_end/overrides.css

@@ -304,11 +304,14 @@ button.overrides-swap {
 }
 
 .overrides-splash-screen {
-    display: flex;
-    align-items: center;
+    display: block;
     padding: 3px 10px;
 }
 
+.overrides-splash-screen > button {
+    margin: -4px 0;
+}
+
 .overrides-reset-button {
     margin: 9px 0 0 17px;
 }

third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css

@@ -78,16 +78,8 @@
     padding: 0 10px;
 }
 
-.responsive-design-section .status-bar-item {
-    margin: 2px 0;
-}
-
-.responsive-design-section .status-bar-item .glyph {
-    background-color: white;
-}
-
 .responsive-design-section .status-bar-item .glyph.shadow {
-    background-color: black;
+    background-color: black !important;
 }
 
 
@@ -100,6 +92,11 @@
     flex-direction: row;
     padding-top: 2px;
     padding-bottom: 2px;
+    color: rgb(180, 180, 180);
+}
+
+.responsive-design-suite.responsive-design-suite-top {
+    color: rgb(255, 255, 255);
 }
 
 .responsive-design-suite-separator {
@@ -115,7 +112,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    height: 22px;
+    height: 23px;
     overflow: hidden;
 }
 
@@ -142,8 +139,7 @@
     text-align: left;
     background-color: transparent;
     border: none;
-    margin: 0;
-    margin-bottom: 4px;
+    margin: 0 1px 1px 0;
     padding: 3px 2px;
 }
 
@@ -208,21 +204,28 @@ body.platform-mac .responsive-design-toolbar select {
 
 /* Toolbar icons */
 
-.responsive-design-icon {
+.responsive-design-icon.status-bar-item > .glyph {
     background-color: rgb(180, 180, 180);
     -webkit-mask-image: url(Images/responsiveDesign.png);
     -webkit-mask-size: 64px 16px;
+}
+
+.responsive-design-icon.status-bar-item {
     display: inline-block;
     width: 16px;
     height: 16px;
     position: relative;
-    top: 3px;
+    top: 4px;
 }
 
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.responsive-design-icon {
-    -webkit-mask-image: url(Images/responsiveDesign_2x.png);
+.responsive-design-icon.status-bar-item:disabled .glyph {
+    opacity: 1 !important;
 }
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+    .responsive-design-icon.status-bar-item > .glyph {
+        -webkit-mask-image: url(Images/responsiveDesign_2x.png);
+    }
 } /* media */
 
 .responsive-design-toolbar input[type='checkbox']:after {
@@ -232,30 +235,29 @@ body.platform-mac .responsive-design-toolbar select {
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
-.responsive-design-toolbar input[type='checkbox']:after {
-    -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
-}
+    .responsive-design-toolbar input[type='checkbox']:after {
+        -webkit-mask-image: url(Images/statusbarButtonGlyphs_2x.png);
+    }
 } /* media */
 
-.responsive-design-icon-resolution {
+.responsive-design-icon-resolution.status-bar-item > .glyph {
     -webkit-mask-position: 0 0;
 }
 
-.responsive-design-icon-dpr {
+.responsive-design-icon-dpr.status-bar-item > .glyph {
     -webkit-mask-position: -16px 0;
 }
 
-.responsive-design-icon-swap {
-    opacity: 0.9;
-    background-color: rgb(255, 156, 0);
+.responsive-design-icon-swap.status-bar-item > .glyph {
+    background-color: rgb(255, 170, 0);
     -webkit-mask-position: -32px 0;
     -webkit-appearance: none;
     padding: 0;
     border: 0;
 }
 
-.responsive-design-icon-swap:hover {
-    opacity: 1;
+.responsive-design-icon-swap.status-bar-item:hover > .glyph {
+    background-color: rgb(255, 180, 0);
 }
 
 .responsive-design-icon-swap:active {
@@ -268,6 +270,14 @@ body.platform-mac .responsive-design-toolbar select {
     padding: 0;
 }
 
+.responsive-design-section-buttons .status-bar-item {
+    margin: 2px 0;
+}
+
+.responsive-design-section-buttons .status-bar-item .glyph {
+    background-color: white;
+}
+
 .responsive-design-more-button {
     -webkit-appearance: none;
     border: 0;
@@ -275,6 +285,7 @@ body.platform-mac .responsive-design-toolbar select {
     color: white;
     opacity: 0.8;
     font-size: 16px;
+    text-shadow: black 1px 1px;
 }
 
 .responsive-design-more-button:hover {
@@ -292,7 +303,7 @@ body.platform-mac .responsive-design-toolbar select {
 }
 
 .responsive-design-section-device select {
-    width: 220px;
+    width: 180px;
 }
 
 .responsive-design-section-device input[type='text'],
@@ -344,4 +355,9 @@ body.platform-mac .responsive-design-toolbar select {
 .responsive-design-warning > span {
     flex: auto;
     padding-left: 3px;
+    overflow: hidden;
+}
+
+.responsive-design-warning > div {
+    flex: none;
 }

third_party/WebKit/Source/devtools/front_end/sdk/OverridesSupport.js

@@ -422,19 +422,16 @@ WebInspector.OverridesSupport._tablets = [
      "1024x600x1"],
 ];
 
-WebInspector.OverridesSupport._desktops = [
-    ["Chromebook Pixel",
-     "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",
+WebInspector.OverridesSupport._notebooks = [
+    ["Notebook with touch",
+     "",
+     "1280x950x1x1x0"],
+    ["Notebook with HiDPI screen",
+     "",
      "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",
-     "1366x768x1x0x0"],
+    ["Generic notebook",
+     "",
+     "1280x800x1x0x0"],
 ];
 
 WebInspector.OverridesSupport._networkThroughputUnlimitedValue = -1;
@@ -858,6 +855,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 +995,29 @@ 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("Devices"), WebInspector.OverridesSupport._phones.concat(WebInspector.OverridesSupport._tablets));
+        addGroup(WebInspector.UIString("Notebooks"), WebInspector.OverridesSupport._notebooks);
 
-        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 +1034,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 +1048,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;