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

third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js

Index: third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
index cc0645ffa7f83f29ab17de60bc3f31a808dd8218..e53138b7b121ccdbb0085f4536180d1ed1b3cd9a 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/Toolbar.js
@@ -55,7 +55,7 @@ WebInspector.Toolbar = class {
    * @return {!WebInspector.ToolbarItem}
    */
   static createActionButton(action, toggledOptions, untoggledOptions) {
-    var button = new WebInspector.ToolbarToggle(action.title(), action.icon());
+    var button = new WebInspector.ToolbarToggle(action.title(), action.icon(), '', action.toggledIcon());
     button.addEventListener('click', action.execute, action);
     action.addEventListener(WebInspector.Action.Events.Enabled, enabledChanged);
     action.addEventListener(WebInspector.Action.Events.Toggled, toggled);
@@ -104,7 +104,7 @@ WebInspector.Toolbar = class {
 
     function showOptions() {
       var buttons = longClickButtons.slice();
-      var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon());
+      var mainButtonClone = new WebInspector.ToolbarToggle(action.title(), action.icon(), undefined, action.toggledIcon());
       mainButtonClone.addEventListener('click', clicked);
 
       /**
@@ -460,7 +460,6 @@ WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
     if (glyph)
       this.setGlyph(glyph);
     this.setText(text || '');
-    this._state = '';
     this._title = '';
   }
 
@@ -498,24 +497,6 @@ WebInspector.ToolbarButton = class extends WebInspector.ToolbarItem {
   }
 
   /**
-   * @return {string}
-   */
-  state() {
-    return this._state;
-  }
-
-  /**
-   * @param {string} state
-   */
-  setState(state) {
-    if (this._state === state)
-      return;
-    this.element.classList.remove('toolbar-state-' + this._state);
-    this.element.classList.add('toolbar-state-' + state);
-    this._state = state;
-  }
-
-  /**
    * @param {number=} width
    */
   turnIntoSelect(width) {
@@ -598,11 +579,15 @@ WebInspector.ToolbarToggle = class extends WebInspector.ToolbarButton {
    * @param {string} title
    * @param {string=} glyph
    * @param {string=} text
+   * @param {string=} toggledGlyph
    */
-  constructor(title, glyph, text) {
+  constructor(title, glyph, text, toggledGlyph) {

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

Does it make sense to pass toggledTitle as well?

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

Tooltips are done in a various of techniques - someone set them explicitly,
someone employs action.options. I'd rather not touch them.


Instead, I removed the third "text" argument - it's mostly unused.

     super(title, glyph, text);
     this._toggled = false;
-    this.setState('off');
+    this._untoggledGlyph = glyph;
+    this._toggledGlyph = toggledGlyph;
+    this._state = '';

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

Unused.

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

Done.

+    this.element.classList.add('toolbar-state-off');
   }
 
   /**
@@ -619,7 +604,17 @@ WebInspector.ToolbarToggle = class extends WebInspector.ToolbarButton {
     if (this._toggled === toggled)
       return;
     this._toggled = toggled;
-    this.setState(toggled ? 'on' : 'off');
+    this.element.classList.toggle('toolbar-state-on', toggled);
+    this.element.classList.toggle('toolbar-state-off', !toggled);
+    if (this._toggledGlyph && this._untoggledGlyph)
+      this.setGlyph(toggled ? this._toggledGlyph : this._untoggledGlyph);
+  }
+
+  /**
+   * @param {boolean} active
+   */
+  setActive(active) {
+    this.element.classList.toggle('toolbar-state-active', active);
   }
 };