DevTools: Autocomplete class names in ClassesPaneWidget

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.
 
 /**
  * @constructor
  * @extends {WebInspector.Widget}
  */
 WebInspector.ClassesPaneWidget = function()
 {
     WebInspector.Widget.call(this);
     this.element.className = "styles-element-classes-pane";
     var container = this.element.createChild("div", "title-container");
-    this._input = container.createChild("input", "new-class-input monospace");
-    this._input.placeholder = WebInspector.UIString("Add new class");
-    this._input.addEventListener("keydown", this._onKeyDown.bind(this), false);
+    this._input = container.createChild("div", "new-class-input monospace");
+    this._input.setAttribute("placeholder", WebInspector.UIString("Add new class"));
     this.setDefaultFocusedElement(this._input);
     this._classesContainer = this.element.createChild("div", "source-code");
     this._classesContainer.classList.add("styles-element-classes-container");
+    this._prompt = new WebInspector.ClassesPaneWidget.ClassNamePrompt();
+    this._prompt.setAutocompletionTimeout(0);
+    this._prompt.renderAsBlock();
+
+    var proxyElement = this._prompt.attach(this._input);
+    proxyElement.addEventListener("keydown", this._onKeyDown.bind(this), false);
 
     WebInspector.targetManager.addModelListener(WebInspector.DOMModel, WebInspector.DOMModel.Events.DOMMutated, this._onDOMMutated, this);
     /** @type {!Set<!WebInspector.DOMNode>} */
     this._mutatingNodes = new Set();
     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._update, this);
 }
 
 WebInspector.ClassesPaneWidget._classesSymbol = Symbol("WebInspector.ClassesPaneWidget._classesSymbol");
 
 WebInspector.ClassesPaneWidget.prototype = {
     /**
      * @param {!Event} event
      */
     _onKeyDown: function(event)
     {
-        var text = event.target.value;
+        var text = event.target.textContent;
         if (isEscKey(event)) {
-            event.target.value = "";
+            event.target.textContent = "";
             if (!text.isWhitespace())
                 event.consume(true);
             return;
         }
 
         if (!isEnterKey(event))
             return;
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         if (!node)
             return;
 
-        event.target.value = "";
+        this._prompt.clearAutocomplete();
+        event.target.textContent = "";
         var classNames = text.split(/[.,\s]/);
         for (var className of classNames) {
             var className = className.trim();
             if (!className.length)
                 continue;
             this._toggleClass(node, className, true);
         }
         this._installNodeClasses(node);
         this._update();
         event.consume(true);
@@ skipping 144 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.TextPrompt}
+ */
+WebInspector.ClassesPaneWidget.ClassNamePrompt = function()
+{
+    WebInspector.TextPrompt.call(this, this._buildClassNameCompletions.bind(this), " ");
+    this.setSuggestBoxEnabled(true);
+    this.disableDefaultSuggestionForEmptyInput();
+}
+
+WebInspector.ClassesPaneWidget.ClassNamePrompt.prototype = {
+    /**
+     * @override
+     * @param {!Event} event
+     */
+    onKeyDown: function(event)

[lushnikov, 2016/09/28 21:19:39]

why do you need to override onKeyDown? Looks like the default behavior will
suite good.

[ahmetemirercin, 2016/09/28 23:40:56]

Done.

+    {
+        switch (event.key) {
+        case "Enter":
+            // Accept any available autocompletions and advance to the next field.
+            if (this.autoCompleteElement && this.autoCompleteElement.textContent.length) {
+                this.acceptAutoComplete();
+                return;
+            }
+            break;
+        }
+
+        WebInspector.TextPrompt.prototype.onKeyDown.call(this, event);
+    },
+
+    /**
+     * @param {!Element} proxyElement
+     * @param {!Range} wordRange
+     * @param {boolean} force
+     * @param {function(!Array.<string>, number=)} completionsReadyCallback
+     */
+    _buildClassNameCompletions: function(proxyElement, wordRange, force, completionsReadyCallback)
+    {
+        var prefix = wordRange.toString();
+        if (!prefix && !force && !proxyElement.textContent.length) {
+            completionsReadyCallback([]);
+            return;
+        }
+
+        var promises = [];
+        var allClasses = new Set();
+        var selectedNode = WebInspector.context.flavor(WebInspector.DOMNode);

[lushnikov, 2016/09/28 21:19:39]

at times selectedNode is null - let's bail out in this case.

[ahmetemirercin, 2016/09/28 23:40:56]

Done.

+        var cssModel = WebInspector.CSSModel.fromTarget(selectedNode.target());
+        var allStyleSheets = cssModel.allStyleSheets();
+        var selectedFrameId = selectedNode.frameId() || WebInspector.ResourceTreeModel.fromTarget(selectedNode.target()).mainFrame.id;
+
+        for (var stylesheet of allStyleSheets) {

[lushnikov, 2016/09/28 21:19:40]

this code runs for every keypress in ClassesPaneWidget. Can we do it less often?

[ahmetemirercin, 2016/09/28 23:40:56]

I propose keeping old completions when user moving forward assuming he probably
found the class name that he is looking for and invalidate while returning back.
Wdyt?

[lushnikov, 2016/09/29 16:03:15]

It's better, but as someone who explores completions via typing-and-deleting, I
feel uneasy.

How would you like invalidating completions if either "force" is true or prefix
is empty? Looks like it should satisfy both of us.

[ahmetemirercin, 2016/09/29 19:25:36]

I was afraid that classnames can be ready when user is already typed something
and it's unusual to clear whole word or ctrl+d if you can't see a suggestion and
try to correct it. I think we can invalidate a little bit more than waiting
!prefix && force.

+            if (stylesheet.frameId !== selectedFrameId)
+                continue;
+            var cssPromise = cssModel.classNamesPromise(stylesheet.id).then(classes => allClasses.addAll(classes));
+            promises.push(cssPromise);
+        }
+
+        var domPromise = selectedNode.domModel().classNamesPromise(selectedNode.ownerDocument.id).then(classes => allClasses.addAll(classes));
+        promises.push(domPromise);
+
+        Promise.all(promises).then(() => {
+            var results = allClasses.valuesArray().filter((value) => value.startsWith(prefix));
+            completionsReadyCallback(results, 0);
+        });
+    },
+
+    __proto__: WebInspector.TextPrompt.prototype
+}