ClassesPaneWidget - Add ability to quickly preview autocompleted CSS classes.

third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js

 // Copyright (c) 2015 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.
 /**
  * @unrestricted
  */
 Elements.ClassesPaneWidget = class extends UI.Widget {
   constructor() {
     super();
     this.element.className = 'styles-element-classes-pane';
     var container = this.element.createChild('div', 'title-container');
     this._input = container.createChild('div', 'new-class-input monospace');
     this.setDefaultFocusedElement(this._input);
     this._classesContainer = this.element.createChild('div', 'source-code');
     this._classesContainer.classList.add('styles-element-classes-container');
     this._prompt = new Elements.ClassesPaneWidget.ClassNamePrompt();
     this._prompt.setAutocompletionTimeout(0);
     this._prompt.renderAsBlock();
 
     var proxyElement = this._prompt.attach(this._input);
     this._prompt.setPlaceholder(Common.UIString('Add new class'));
+    this._prompt.on(UI.TextPrompt.TextChangedEvent, this._onTextChanged, this);
     proxyElement.addEventListener('keydown', this._onKeyDown.bind(this), false);
 
     SDK.targetManager.addModelListener(SDK.DOMModel, SDK.DOMModel.Events.DOMMutated, this._onDOMMutated, this);
     /** @type {!Set<!SDK.DOMNode>} */
     this._mutatingNodes = new Set();
-    UI.context.addFlavorChangeListener(SDK.DOMNode, this._update, this);
+    this._updateNodeThrottler = new Common.Throttler(0);
+    /** @type {?SDK.DOMNode} */
+    this._previousTarget = null;
+    UI.context.addFlavorChangeListener(SDK.DOMNode, this._onFlavorChange, this);
+  }
+
+  /**
+   * @param {string} text
+   * @return {!Array.<string>}
+   */
+  _splitTextIntoClasses(text) {
+    return text.split(/[.,\s]/)
+      .map(className => className.trim())
+      .filter(className => className.length);
   }
 
   /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
+    if (!isEnterKey(event) && !isEscKey(event))
+      return;
+
     var text = event.target.textContent;
     if (isEscKey(event)) {
-      event.target.textContent = '';
       if (!text.isWhitespace())
         event.consume(true);
-      return;
+      text = '';
     }
 
-    if (!isEnterKey(event))
-      return;
+    if (isEnterKey(event))
+      event.consume(true);
+
+    this._prompt.clearAutocomplete();
+    event.target.textContent = '';
+
     var node = UI.context.flavor(SDK.DOMNode);
     if (!node)
       return;
 
-    this._prompt.clearAutocomplete();
-    event.target.textContent = '';
-    var classNames = text.split(/[.,\s]/);
-    for (var className of classNames) {
-      var className = className.trim();
-      if (!className.length)
-        continue;
+    var classNames = this._splitTextIntoClasses(text);
+    for (var className of classNames)
       this._toggleClass(node, className, true);
-    }
     this._installNodeClasses(node);
     this._update();
-    event.consume(true);
+  }
+
+  _onTextChanged() {
+    var node = UI.context.flavor(SDK.DOMNode);
+    if (!node)
+      return;
+    var text = this._prompt.textWithCurrentSuggestion();
+    var classes = this._splitTextIntoClasses(text);
+
+    this._installNodeClasses(node, classes);
+    this._update();

[lushnikov, 2017/03/22 01:37:33]

you don't need _update() here, do you?

   }
 
   /**
    * @param {!Common.Event} event
    */
   _onDOMMutated(event) {
     var node = /** @type {!SDK.DOMNode} */ (event.data);
     if (this._mutatingNodes.has(node))
       return;
     delete node[Elements.ClassesPaneWidget._classesSymbol];
     this._update();
   }
 
   /**
+   * @param {!Common.Event} event
+   */
+  _onFlavorChange(event) {

[lushnikov, 2017/03/22 01:37:33]

let's name this _onSelectedNodeChanged

+    if (this._previousTarget && this._prompt.text()) {
+      this._input.textContent = '';
+      this._installNodeClasses(this._previousTarget, [], true);
+    }
+    this._previousTarget = /** @type {?SDK.DOMNode} */ (event.data);
+    this._update();
+  }
+
+  /**
    * @override
    */
   wasShown() {
     this._update();
   }
 
   _update() {
     if (!this.isShowing())
       return;
 
@@ skipping 59 matching lines @@
    * @param {string} className
    * @param {boolean} enabled
    */
   _toggleClass(node, className, enabled) {
     var classes = this._nodeClasses(node);
     classes.set(className, enabled);
   }
 
   /**
    * @param {!SDK.DOMNode} node
+   * @param {!Array.<string>=} additionalClasses
+   * @param {boolean=} immediately
    */
-  _installNodeClasses(node) {
+  _installNodeClasses(node, additionalClasses, immediately) {
     var classes = this._nodeClasses(node);
     var activeClasses = new Set();
     for (var className of classes.keys()) {
       if (classes.get(className))
         activeClasses.add(className);
     }
 
+    if (additionalClasses) {

[lushnikov, 2017/03/22 01:37:33]

it looks like you never want to call "_installNodeClasses" without additional
classes (consider e.g. the _onClick handler here). Let's have the
additionalClasses computed here right away

+      for (className of additionalClasses)
+        activeClasses.add(className);
+    }
     var newClasses = activeClasses.valuesArray();
     newClasses.sort();
+
+    if (immediately)
+      this._updateNodeThrottler.flush();

[lushnikov, 2017/03/22 01:37:33]

i looked closer into the flush() method and it turned out to be broken. I'm
killing it now, sorry for misguidance:
https://codereview.chromium.org/2770523002/

To support the scenario you're fighting here, I'd suggest a different approach,
which I illustrated here: https://codereview.chromium.org/2763833004/. Long
story short, it accumulates pending node classes requests and then sends it to
backend in a batch.

+    this._updateNodeThrottler.schedule(this._setClassValue.bind(this, node, newClasses.join(' ')));
+  }
+
+  /**
+   * @param {!SDK.DOMNode} node
+   * @param {string} value
+   * @return {!Promise}
+   */
+  _setClassValue(node, value) {
+    var fulfill;
+    var promise = new Promise(f => fulfill = f);
+
     this._mutatingNodes.add(node);
-    node.setAttributeValue('class', newClasses.join(' '), onClassNameUpdated.bind(this));
+    node.setAttributeValue('class', value, onClassValueUpdated.bind(this));
 
     /**
      * @this {Elements.ClassesPaneWidget}
      */
-    function onClassNameUpdated() {
+    function onClassValueUpdated() {
       this._mutatingNodes.delete(node);
+      fulfill();
     }
+
+    return promise;
   }
 };
 
 Elements.ClassesPaneWidget._classesSymbol = Symbol('Elements.ClassesPaneWidget._classesSymbol');
 
 /**
  * @implements {UI.ToolbarItem.Provider}
  * @unrestricted
  */
 Elements.ClassesPaneWidget.ButtonProvider = class {
@@ skipping 72 matching lines @@
     if (!this._classNamesPromise || this._selectedFrameId !== selectedNode.frameId())
       this._classNamesPromise = this._getClassNames(selectedNode);
 
     return this._classNamesPromise.then(completions => {
       if (prefix[0] === '.')
         completions = completions.map(value => '.' + value);
       return completions.filter(value => value.startsWith(prefix)).map(completion => ({text: completion}));
     });
   }
 };