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 6e94cb264d011545036a2b1039fc976e2700d7bf..823feb03db9bc45218a583e251828b9cba169070 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ClassesPaneWidget.js
@@ -15,7 +15,11 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
     this._classesContainer.classList.add('styles-element-classes-container');
     this._prompt = new Elements.ClassesPaneWidget.ClassNamePrompt();
     this._prompt.setAutocompletionTimeout(0);
+    this._prompt.addEventListener(UI.TextPrompt.Events.ItemApplied, this._applyFreeFlowClassListTextEdit.bind(this), this);
+    this._prompt.addEventListener(UI.TextPrompt.Events.ItemAccepted, this._applyFreeFlowClassListTextEdit.bind(this), this);
     this._prompt.renderAsBlock();
+    /** @type {!Set<string>} */
+    this._previewClasses = new Set();

[lushnikov, 2017/02/07 22:01:37]

Why do we need a set? afaiu there's only one suggestion possible at a time

[kdzwinel, 2017/02/07 23:20:05]

One suggestion, but there can be multiple classes in the 'Add new class' field
at the time.

 
     var proxyElement = this._prompt.attach(this._input);
     this._prompt.setPlaceholder(Common.UIString('Add new class'));
@@ -31,25 +35,29 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
    * @param {!Event} event
    */
   _onKeyDown(event) {
-    var text = event.target.textContent;
+    const text = event.target.textContent;

[lushnikov, 2017/02/07 22:01:37]

nit: we don't use consts so far, let's use "var"

[kdzwinel, 2017/02/07 23:20:06]

AFAIK `let` is not yet used, but `const` is fine. I used it in my previous CL (
https://codereview.chromium.org/2567873002 ).

+    const node = UI.context.flavor(SDK.DOMNode);
+    if (!node)
+      return;
+
     if (isEscKey(event)) {
       event.target.textContent = '';
       if (!text.isWhitespace())
         event.consume(true);
+      this._previewClasses.clear();
+      this._installNodeClasses(node);
       return;
     }
 
     if (!isEnterKey(event))
       return;
-    var node = UI.context.flavor(SDK.DOMNode);
-    if (!node)
-      return;
 
     this._prompt.clearAutocomplete();
+    this._previewClasses.clear();
     event.target.textContent = '';
-    var classNames = text.split(/[.,\s]/);
+    const classNames = text.split(/[.,\s]/);
     for (var className of classNames) {
-      var className = className.trim();
+      className = className.trim();
       if (!className.length)
         continue;
       this._toggleClass(node, className, true);
@@ -117,6 +125,40 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
     this._installNodeClasses(node);
   }
 
+  _applyFreeFlowClassListTextEdit() {
+    const text = this._prompt.textWithCurrentSuggestion();
+    const node = UI.context.flavor(SDK.DOMNode);
+    if (!node)
+      return;
+
+    this._previewClasses.clear();
+    const classNames = text.split(/[.,\s]/);

[lushnikov, 2017/02/07 22:01:37]

that's unfortunate we had to copy the regex over here

[kdzwinel, 2017/02/07 23:20:05]

Good point! It should probably be extracted to a constant or a
`_splitIntoClasses` method.

+    for (var className of classNames) {
+      className = className.trim();
+      if (!className.length)
+        continue;
+      this._previewClasses.add(className);
+    }
+    this._installNodeClasses(node);
+  }
+
+  /**
+   * @param {!SDK.DOMNode} node
+   * @return {!Array<string>}
+   */
+  _getActiveClasses(node) {

[lushnikov, 2017/02/07 22:01:37]

why do you need to extract this?

[kdzwinel, 2017/02/07 23:20:05]

No real need, I did it just for the readability of _installNodeClasses, but
maybe it was unnecessary?

+    const classes = this._nodeClasses(node);
+    const activeClasses = new Set();
+    for (var className of classes.keys()) {
+      if (classes.get(className))
+        activeClasses.add(className);
+    }
+    for (className of this._previewClasses)
+      activeClasses.add(className);
+
+    return activeClasses.valuesArray().sort();
+  }
+
   /**
    * @param {!SDK.DOMNode} node
    * @return {!Map<string, boolean>}
@@ -152,17 +194,9 @@ Elements.ClassesPaneWidget = class extends UI.Widget {
    * @param {!SDK.DOMNode} node
    */
   _installNodeClasses(node) {
-    var classes = this._nodeClasses(node);
-    var activeClasses = new Set();
-    for (var className of classes.keys()) {
-      if (classes.get(className))
-        activeClasses.add(className);
-    }
-
-    var newClasses = activeClasses.valuesArray();
-    newClasses.sort();
+    const activeClasses = this._getActiveClasses(node);
     this._mutatingNodes.add(node);
-    node.setAttributeValue('class', newClasses.join(' '), onClassNameUpdated.bind(this));
+    node.setAttributeValue('class', activeClasses.join(' '), onClassNameUpdated.bind(this));
 
     /**
      * @this {Elements.ClassesPaneWidget}