[DevTools] Improve Device Mode icons.

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 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.
  */
 
 :host {
     flex: none;
     padding: 0 2px;
 }
 
 .toolbar-shadow {
     position: relative;
     white-space: nowrap;
     height: 26px;
     overflow: hidden;
     z-index: 12;
     display: flex;
     flex: none;
     align-items: center;
 }
 
 .toolbar-shadow.wrappable {
     flex-wrap: wrap;
 }
 
+.toolbar-shadow.wrappable-reverse {
+    flex-direction: row-reverse;
+}
+
 .toolbar-shadow.vertical {
     flex-direction: column;
     height: auto;
     width: 26px;
 }
 
 .toolbar-item {
     position: relative;
     display: flex;
     background-color: transparent;
@@ skipping 22 matching lines @@
 }
 
 .toolbar-has-glyph .toolbar-text {
     margin-left: 0;
 }
 
 .toolbar-bold .toolbar-text {
     font-weight: bold;
 }
 
+.toolbar-dimmed .toolbar-text {
+    color: #999;
+}
+
 .toolbar-glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 168px;
     background-color: #5a5a5a;
     width: 28px;
     height: 24px;
     flex: none;
     transform: translateX(-2px);
 }
 
@@ skipping 175 matching lines @@
 }
 
 .menu-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -192px -24px;
 }
 
 .node-search-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -320px -120px;
 }
 
-.emulation-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -288px -144px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.emulation-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -160px 0;
-}
-}
-
-.emulation-toolbar-item.warning::after {
-    background-image: url(Images/toolbarButtonGlyphs.png);
-    background-size: 352px 168px;
-    width: 10px;
-    height: 12px;
-    content: "";
-    position: absolute;
-    right: 3px;
-    bottom: 2px;
-    background-position: -202px -107px;
-    z-index: 1;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.emulation-toolbar-item.warning::before {
-    background-image: url(Images/toolbarButtonGlyphs_2x.png);
-}
-} /* media */
-
 .delete-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -128px 0;
 }
 
 .clear-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -64px 0;
 }
 
 .refresh-toolbar-item.toolbar-glyph {
     -webkit-mask-position: 0 0;
 }
 
 .visibility-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -96px 0;
 }
 
 .visibility-off-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -192px 0;
 }
 
 .large-list-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -224px 0;
 }
 
 .edit-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -224px -72px;
 }
 
-.screencast-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -160px 0;
-}
-
 .record-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px 0;
 }
 
 .toolbar-state-on .record-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px -24px;
 }
 
 .camera-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -96px -24px;
@@ skipping 143 matching lines @@
 }
 
 .layout-editor-toolbar-item.toolbar-glyph {
     -webkit-mask-position: 0 -144px;
 }
 
 .block-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -32px -144px;
 }
 
-.desktop-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -256px -144px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.5) {
-.desktop-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -160px -144px;
-}
+.phone-toolbar-item.toolbar-glyph {
+    -webkit-mask-position: -288px -144px;
 }
 
 .rotate-screen-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -192px -144px;
 }
 
-.resize-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -224px -144px;
-}
-
 .enter-fullscreen-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -256px -96px;
 }
 
-.exit-fullscreen-toolbar-item.toolbar-glyph {
+.responsive-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px -96px;
 }
 
 .toolbar-state-on .record-toolbar-item.toolbar-glyph,
 .toolbar-state-active .filter-toolbar-item.toolbar-glyph,
 .toolbar-state-active .block-toolbar-item.toolbar-glyph {
     background-color: rgb(216, 0, 0) !important;
 }
 
 :host-context(.-theme-with-dark-background) .toolbar-state-active .filter-toolbar-item.toolbar-glyph,
 :host-context(.-theme-with-dark-background) .toolbar-state-active .block-toolbar-item.toolbar-glyph,
 :host-context(.-theme-with-dark-background) .toolbar-state-on .record-toolbar-item.toolbar-glyph {
     background-color: hsl(0, 100%, 65%) !important;
 }