DevTools: eliminate ToolbarButton.setState method; cleanup toolbar.css

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;
 }
@@ skipping 163 matching lines @@
 
 .toolbar-button.toolbar-state-on:enabled.hover:not(:active) .toolbar-text,
 .-theme-selection-color {
     color: hsl(218, 96%, 54%);
 }
 
 .toolbar-toggled-gray .toolbar-button.toolbar-state-on {
     background-color: #f3f3f3 !important;
 }
 
+.toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph {
+    background-color: rgb(216, 0, 0) !important;
+}
+
+:host-context(.-theme-with-dark-background) .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph {
+    background-color: hsl(0, 100%, 65%) !important;
+}
+
+
 /* Checkbox */
 
 .toolbar-item.checkbox {
     padding: 0 5px 0 2px;
 }
 
 .toolbar-item.checkbox.hover {
     color: #333;
 }
 
@@ skipping 117 matching lines @@
 }
 
 .large-list-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -224px 0;
 }
 
 .record-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px 0;
 }
 
-.toolbar-state-on .record-toolbar-item.toolbar-glyph {
+.active-recording-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px -24px;
 }
 
 .camera-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -96px -24px;
 }
 
 .step-in-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -64px -72px;
 }
@@ skipping 20 matching lines @@
 }
 
 .pause-on-exceptions-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -256px 0;
 }
 
 .pause-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -32px -72px;
 }
 
-.toolbar-state-on .pause-toolbar-item.toolbar-glyph {
+.resume-toolbar-item.toolbar-glyph {
     -webkit-mask-position: 0 -72px;
 }
 
-.toolbar-state-on .breakpoint-toolbar-item.toolbar-glyph {
+.breakpoint-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -32px 0;
 }
 
-.breakpoint-toolbar-item.toolbar-glyph {
+.deactivate-breakpoint-toolbar-item.toolbar-glyph {
     -webkit-mask-position: 0 -24px;
 }
 
 .notification-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -32px -120px;
 }
 
 .format-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -256px -24px;
 }
@@ skipping 31 matching lines @@
 }
 
 .eyedropper-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px -120px;
 }
 
 .add-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -224px -120px;
 }
 
-.toolbar-state-pause-outline .animation-control-toolbar-item.toolbar-glyph {
+.animation-play-item.toolbar-glyph {
+    -webkit-mask-position: -320px -48px;
+}
+
+.animation-replay-item.toolbar-glyph {
+    -webkit-mask-position: -320px -24px;
+}
+
+.animation-pause-item.toolbar-glyph {
     -webkit-mask-position: -320px 0px;
 }
 
-.toolbar-state-replay-outline .animation-control-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -320px -24px;
-    background-color: rgb(66, 129, 235) !important;
-}
-
-.toolbar-state-play-outline .animation-control-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -320px -48px;
-    background-color: rgb(66, 129, 235) !important;
-}
-
 .box-shadow-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -160px -48px;
 }
 
 .text-shadow-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -192px -48px;
 }
 
 .background-color-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -96px -144px;
@@ skipping 36 matching lines @@
 }
 
 .folder-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -224px -144px;
 }
 
 .goto-source-toolbar-item.toolbar-glyph {
     -webkit-mask-position: 0 -120px;
 }
 
-.toolbar-state-left-show .sidebar-toolbar-item.toolbar-glyph {
+.show-left-sidebar-item.toolbar-glyph {
     -webkit-mask-position: -160px -72px;
 }
 
-.toolbar-state-left-hide .sidebar-toolbar-item.toolbar-glyph {
+.hide-left-sidebar-item.toolbar-glyph {
     -webkit-mask-position: -192px -72px;
 }
 
-.toolbar-state-right-show .sidebar-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -288px -72px;
+.show-right-sidebar-item.toolbar-glyph {
+    -webkit-mask-position: -160px -72px;
+    transform: rotate(180deg);
 }
 
-.toolbar-state-right-hide .sidebar-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -256px -72px;
+.hide-right-sidebar-item.toolbar-glyph {
+    -webkit-mask-position: -192px -72px;
+    transform: rotate(180deg);
 }
 
-.toolbar-state-top-show .sidebar-toolbar-item.toolbar-glyph {
+.show-top-sidebar-item.toolbar-glyph {
     -webkit-mask-position: -160px -72px;
     transform: translate(4px, 0) rotate(90deg);
 }
 
-.toolbar-state-top-hide .sidebar-toolbar-item.toolbar-glyph {
+.hide-top-sidebar-item.toolbar-glyph {
     -webkit-mask-position: -192px -72px;
-    transform: translate(4px, -1px) rotate(90deg);
+    transform: translate(4px, 1px) rotate(90deg);
 }
 
-.toolbar-state-bottom-show .sidebar-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -288px -72px;
-    transform: translate(4px, 0) rotate(90deg);
+.show-bottom-sidebar-item.toolbar-glyph {
+    -webkit-mask-position: -160px -72px;
+    transform: translate(4px, 0) rotate(-90deg);
 }
 
-.toolbar-state-bottom-hide .sidebar-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -256px -72px;
-    transform: translate(4px, -1px) rotate(90deg);
-}
-
-.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;
+.hide-bottom-sidebar-item.toolbar-glyph {
+    -webkit-mask-position: -192px -72px;
+    transform: translate(4px, 1px) rotate(-90deg);
 }
 
 span.toolbar-select-container.toolbar-item.warning {
     background: #ffd7d7;
     padding: 0 5px 0 0;
     margin-right: 1px;
 }