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

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

Index: third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css b/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
index a0aa2efa7840d37ed1511f10e3c8683fd12b2651..f9357564ee00b938a563f827ee96fc63900b8bbc 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
+++ b/third_party/WebKit/Source/devtools/front_end/ui/toolbar.css
@@ -318,7 +318,7 @@ input.toolbar-item.hover {
     -webkit-mask-position: -288px 0;
 }
 
-.toolbar-state-on .record-toolbar-item.toolbar-glyph {
+.active-recording-toolbar-item.toolbar-glyph {
     -webkit-mask-position: -288px -24px;
 }
 
@@ -359,15 +359,15 @@ input.toolbar-item.hover {
     -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;
 }
 
@@ -419,18 +419,16 @@ input.toolbar-item.hover {
     -webkit-mask-position: -224px -120px;
 }
 
-.toolbar-state-pause-outline .animation-control-toolbar-item.toolbar-glyph {
-    -webkit-mask-position: -320px 0px;
+.animation-play-item.toolbar-glyph {
+    -webkit-mask-position: -320px -48px;
 }
 
-.toolbar-state-replay-outline .animation-control-toolbar-item.toolbar-glyph {
+.animation-replay-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;
+.animation-pause-item.toolbar-glyph {
+    -webkit-mask-position: -320px 0px;
 }
 
 .box-shadow-toolbar-item.toolbar-glyph {
@@ -489,43 +487,45 @@ input.toolbar-item.hover {
     -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;
@@ -533,7 +533,7 @@ input.toolbar-item.hover {
 
 :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;
 }