[DevTools] Add groups to device select.

Source/devtools/front_end/responsiveDesignView.css

 /*
  * 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.
  */
 
 .responsive-design {
     overflow: hidden;
     position: relative;
 }
@@ skipping 60 matching lines @@
 .responsive-design-section {
     display: flex;
     flex: none;
     flex-direction: column;
     white-space: nowrap;
     align-items: stretch;
     justify-content: flex-start;
     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;
 }
 
 
 .responsive-design-section-separator {
     height: 2px;
 }
 
 .responsive-design-suite {
     display: flex;
     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 {
     flex: none;
     width: 1px;
     background-color: rgb(43, 43, 43);
     margin: 0 3px;
 }
 
 .responsive-design-suite > div:not(.responsive-design-suite-separator) {
     flex: none;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    height: 22px;
+    height: 23px;
     overflow: hidden;
 }
 
 /* Toolbar controls */
 
 .responsive-design-toolbar fieldset,
 .responsive-design-toolbar p {
     margin: 0;
     border: 0;
     padding: 0;
     display: inline-block;
 }
 
 .responsive-design-toolbar .field-error-message {
     display: none;
 }
 
 .responsive-design-toolbar label {
     margin-right: 5px;
     cursor: default !important;
 }
 
 .responsive-design-toolbar input[type='text'] {
     text-align: left;
     background-color: transparent;
     border: none;
-    margin: 0;
-    margin-bottom: 4px;
+    margin: 0 1px 1px 0;
     padding: 3px 2px;
 }
 
 .responsive-design-toolbar input[type='text'].numeric {
     text-align: center;
 }
 
 .responsive-design-toolbar input:focus::-webkit-input-placeholder {
     color: transparent !important;
 }
@@ skipping 44 matching lines @@
     position: relative;
     top: 1px;
 }
 
 .responsive-design-toolbar input:focus {
     background-color: rgb(81, 81, 81);
 }
 
 /* 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;
+}
+
+.responsive-design-icon.status-bar-item:disabled .glyph {
+    opacity: 1 !important;
 }
 
 @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 > .glyph {
+        -webkit-mask-image: url(Images/responsiveDesign_2x.png);
+    }
 } /* media */
 
 .responsive-design-toolbar input[type='checkbox']:after {
     -webkit-mask-image: url(Images/statusbarButtonGlyphs.png);
     -webkit-mask-size: 320px 144px;
     -webkit-mask-position: -128px -110px;
 }
 
 @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 {
     opacity: 0.8;
 }
 
 /* Buttons section */
 
 .responsive-design-section-buttons {
     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;
     background-color: transparent;
     color: white;
     opacity: 0.8;
     font-size: 16px;
+    text-shadow: black 1px 1px;
 }
 
 .responsive-design-more-button:hover {
     opacity: 1;
 }
 
 .responsive-design-more-button:active {
     opacity: 0.8;
 }
 
 /* Device section */
 
 .responsive-design-section-device .responsive-design-section-separator {
     background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0));
 }
 
 .responsive-design-section-device select {
-    width: 220px;
+    width: 180px;
 }
 
 .responsive-design-section-device input[type='text'],
 .responsive-design-section-device input[type='text']::-webkit-input-placeholder,
 .responsive-design-section-device select {
     color: rgb(255, 156, 0);
 }
 
 .responsive-design-section-device input[type='checkbox']:checked:after {
     background: rgb(255, 156, 0);
@@ skipping 31 matching lines @@
     padding: 2px 4px;
     white-space: nowrap;
     display: flex;
     align-items: center;
     border-bottom: 1px solid rgb(171, 171, 171);
 }
 
 .responsive-design-warning > span {
     flex: auto;
     padding-left: 3px;
+    overflow: hidden;
 }
+
+.responsive-design-warning > div {
+    flex: none;
+}