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 300 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);
+.hide-bottom-sidebar-item.toolbar-glyph {
+    -webkit-mask-position: -192px -72px;
+    transform: translate(4px, 1px) rotate(-90deg);
 }
 
-.toolbar-state-on .record-toolbar-item.toolbar-glyph,
+.active-recording-toolbar-item.toolbar-glyph,

[lushnikov, 2016/11/05 17:36:38]

this should be just 

.toolbar-state-active {
    background-color: rgb(216, 0, 0) !important;
}

[lushnikov, 2016/11/07 05:05:06]

Nah, this has to stay like this to support dark theme.

[dgozman, 2016/11/07 18:32:45]

I don't get it.

[lushnikov, 2016/11/08 01:44:45]

Removed the active state at all. Now there's a setToggleWithRed!

 .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,

[lushnikov, 2016/11/05 17:36:38]

ditto here:

:host-context(.-theme-with-dark-background) .toolbar-state-active {
    background-color: hsl(0, 100%, 65%) !important;
}

[lushnikov, 2016/11/07 05:05:06]

Ditto.

 :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 {
+:host-context(.-theme-with-dark-background) .active-recording-toolbar-item.toolbar-glyph {
     background-color: hsl(0, 100%, 65%) !important;
 }
 
 span.toolbar-select-container.toolbar-item.warning {
     background: #ffd7d7;
     padding: 0 5px 0 0;
     margin-right: 1px;
 }