ClassesPaneWidget - Add ability to quickly preview autocompleted CSS classes.

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

Index: third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js b/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
index 6f0e3cb835f9d7ba8aa4883450f0a32a2e59ae93..7e58a88192b53e285524181a8fa9d88a9d746f1d 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
@@ -19,12 +19,27 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
 
     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);
+    /** @type {!Map<!SDK.DOMNode, string>} */
+    this._uncommitedValues = new Map();
+    /** @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);
   }
 
   /**
@@ -47,18 +62,25 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
 
     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();
+  }
+
   /**
    * @param {!Common.Event} event
    */
@@ -71,6 +93,18 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
   }
 
   /**
+   * @param {!Common.Event} event
+   */
+  _onFlavorChange(event) {
+    if (this._previousTarget && this._prompt.text()) {
+      this._prompt.setText('');

[lushnikov, 2017/03/07 02:55:12]

to avoid that issue with selection you had, let's call this only in case of
classesPane.isShowing(). Would it work for you?

[kdzwinel, 2017/03/15 15:23:45]

We will avoid the error this way, but introduce a slightly weird behaviour - see
https://imgur.com/a/XGRj1 (field should have been cleared).

Meanwhile, I came up with different fix and done what `_onKeyDown` is doing -
circumvented the `this._prompt` and cleared `this._input` directly.

+      this._installNodeClasses(this._previousTarget);
+    }
+    this._previousTarget = /** @type {?SDK.DOMNode} */ (event.data);
+    this._update();
+  }
+
+  /**
    * @override
    */
   wasShown() {
@@ -150,8 +184,9 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
 
   /**
    * @param {!SDK.DOMNode} node
+   * @param {!Array.<string>=} additionalClasses
    */
-  _installNodeClasses(node) {
+  _installNodeClasses(node, additionalClasses) {
     var classes = this._nodeClasses(node);
     var activeClasses = new Set();
     for (var className of classes.keys()) {
@@ -159,8 +194,18 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
         activeClasses.add(className);
     }
 
+    if (additionalClasses) {
+      for (className of additionalClasses)
+        activeClasses.add(className);
+    }
     var newClasses = activeClasses.valuesArray();
     newClasses.sort();
+
+    if (this._mutatingNodes.has(node)) {
+      this._uncommitedValues.set(node, newClasses.join(' '));
+      return;
+    }
+
     this._mutatingNodes.add(node);
     node.setAttributeValue('class', newClasses.join(' '), onClassNameUpdated.bind(this));
 
@@ -168,7 +213,12 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
      * @this {Elements.ClassesPaneWidget}
      */
     function onClassNameUpdated() {
-      this._mutatingNodes.delete(node);
+      if (this._uncommitedValues.has(node)) {

[lushnikov, 2017/03/07 02:55:12]

this complicates the _installNodeClasses method, making it behavior
unpredictable.

A better approach would be to use common.Throttler to throttle calls to the
_installNodeClasses.

If you change the _installNodeClasses to return promise on it's complition, then
you'll be able to just use:

    this._throttler.schedule(this._installNodeClasses.bind(node, classes))

everywhere instead of:
   
    this._installNodeClasses(node, classes);

This should eliminate the need for this._uncommittedValues

[kdzwinel, 2017/03/15 15:23:45]

Thanks, I haven't seen common.Throttler before - useful!

+        node.setAttributeValue('class', this._uncommitedValues.get(node), onClassNameUpdated.bind(this));
+        this._uncommitedValues.delete(node);
+      } else {
+        this._mutatingNodes.delete(node);
+      }
     }
   }
 };