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

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

 /*
  * Copyright (C) 2009 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 37 matching lines @@
     this._insertionPoint = this._contentElement.createChild('content');
   }
 
   /**
    * @param {!WebInspector.Action} action
    * @param {!Array<!WebInspector.ToolbarButton>=} toggledOptions
    * @param {!Array<!WebInspector.ToolbarButton>=} untoggledOptions
    * @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);
     /** @type {?WebInspector.LongClickController} */
     var longClickController = null;
     /** @type {?Array<!WebInspector.ToolbarButton>} */
     var longClickButtons = null;
     /** @type {?Element} */
     var longClickGlyph = null;
     toggled();
@@ skipping 28 matching lines @@
           longClickController = null;
           longClickGlyph.remove();
           longClickGlyph = null;
           longClickButtons = null;
         }
       }
     }
 
     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);
 
       /**
        * @param {!WebInspector.Event} event
        */
       function clicked(event) {
         button._clicked(/** @type {!Event} */ (event.data));
       }
 
       mainButtonClone.setToggled(action.toggled());
@@ skipping 335 matching lines @@
     this.element.addEventListener('mousedown', this._mouseDown.bind(this), false);
     this.element.addEventListener('mouseup', this._mouseUp.bind(this), false);
 
     this._glyphElement = this.element.createChild('div', 'toolbar-glyph hidden');
     this._textElement = this.element.createChild('div', 'toolbar-text hidden');
 
     this.setTitle(title);
     if (glyph)
       this.setGlyph(glyph);
     this.setText(text || '');
-    this._state = '';
     this._title = '';
   }
 
   /**
    * @param {string} text
    */
   setText(text) {
     if (this._text === text)
       return;
     this._textElement.textContent = text;
@@ skipping 17 matching lines @@
   }
 
   /**
    * @param {string} iconURL
    */
   setBackgroundImage(iconURL) {
     this.element.style.backgroundImage = 'url(' + iconURL + ')';
   }
 
   /**
-   * @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) {
     this.element.classList.add('toolbar-has-dropdown');
     this.element.createChild('div', 'toolbar-dropdown-arrow');
     if (width)
       this.element.style.width = width + 'px';
   }
 
   /**
@@ skipping 62 matching lines @@
 };
 
 /**
  * @unrestricted
  */
 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');
   }
 
   /**
    * @return {boolean}
    */
   toggled() {
     return this._toggled;
   }
 
   /**
    * @param {boolean} toggled
    */
   setToggled(toggled) {
     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);
   }
 };
 
 
 /**
  * @unrestricted
  */
 WebInspector.ToolbarMenuButton = class extends WebInspector.ToolbarButton {
   /**
    * @param {function(!WebInspector.ContextMenu)} contextMenuHandler
@@ skipping 268 matching lines @@
     return this.inputElement.checked;
   }
 
   /**
    * @param {boolean} value
    */
   setChecked(value) {
     this.inputElement.checked = value;
   }
 };