[DevTools] Hide clear button for empty fields

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 556 matching lines @@
     this._isSearchField = !!isSearchField;
     if (growFactor)
       this.element.style.flexGrow = growFactor;
     if (shrinkFactor)
       this.element.style.flexShrink = shrinkFactor;
     if (placeholder)
       this.input.setAttribute('placeholder', placeholder);
 
     if (isSearchField)
       this._setupSearchControls();
+
+    this._updateIfEmpty();
   }
 
   _setupSearchControls() {
     var clearButton = this.element.createChild('div', 'toolbar-input-clear-button');
     clearButton.appendChild(UI.Icon.create('smallicon-clear-input', 'search-cancel-button'));
     clearButton.addEventListener('click', () => this._internalSetValue('', true));
     this.input.addEventListener('keydown', event => this._onKeydownCallback(event));
   }
 
   /**
    * @param {string} value
    */
   setValue(value) {
     this._internalSetValue(value, false);
   }
 
   /**
    * @param {string} value
    * @param {boolean} notify
    */
   _internalSetValue(value, notify) {
     this.input.value = value;
     if (notify)
       this._onChangeCallback();
+    this._updateIfEmpty();
   }
 
   /**
    * @return {string}
    */
   value() {
     return this.input.value;
   }
 
   /**
    * @param {!Event} event
    */
   _onKeydownCallback(event) {
     if (this.isSearchField || !isEscKey(event) || !this.input.value)
       return;
     this._internalSetValue('', true);
     event.consume(true);
   }
 
   _onChangeCallback() {
+    this._updateIfEmpty();
     this.dispatchEventToListeners(UI.ToolbarInput.Event.TextChanged, this.input.value);
   }
+
+  _updateIfEmpty() {

[phulce, 2017/02/09 18:43:10]

not a huge fan of the name, can we specify what we're updating here?
updateEmptyStyles, updateClassesIfEmpty, idk something that makes it clearer why
we're calling it.

[pfeldman, 2017/02/09 18:45:15]

+1 _updateEmptyStyles

+    this.element.classList.toggle('toolbar-input-empty', !this.input.value);
+  }
 };
 
 UI.ToolbarInput.Event = {
   TextChanged: Symbol('TextChanged')
 };
 
 /**
  * @unrestricted
  */
 UI.ToolbarToggle = class extends UI.ToolbarButton {
@@ skipping 399 matching lines @@
 
   /**
    * @override
    * @param {boolean} enabled
    */
   _applyEnabledState(enabled) {
     super._applyEnabledState(enabled);
     this.inputElement.disabled = !enabled;
   }
 };