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();
+
+    this._frameClasses = new Map();
+    this._selectedNode = null;
+    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);
+    WebInspector.targetManager.addEventListener(WebInspector.TargetManager.Events.MainFrameNavigated, this._mainFrameNavigated, 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.innerText;
         if (isEscKey(event)) {
-            event.target.value = "";
+            this._hidePrompt();
+            event.target.innerText = "";
             if (!text.isWhitespace())
                 event.consume(true);
             return;
         }
-
+        if (!this._prompt.isSuggestBoxVisible()) {
+            this._collectFrameClasses(this._selectedFrameId());
+        }
         if (!isEnterKey(event))
             return;
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         if (!node)
             return;
-
-        event.target.value = "";
+        this._hidePrompt();
+        event.target.innerText = "";
         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);
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
+    _mainFrameNavigated: function(event)
+    {
+        this._selectedNode = null;
+        this._frameClasses = new Map();
+        this._prompt.clearCompletions();
+    },
+
+    _hidePrompt: function()

[lushnikov, 2016/09/20 17:11:09]

let's inline this

+    {
+        this._prompt.clearAutoComplete();
+    },
+
+    _getDomClasses: function()

[lushnikov, 2016/09/20 16:46:21]

Can we move all the logic inside the ClassNamePrompt?
Something along the lines:

_buildClassNameCompletions: function(completionsReady)
{
    var selectedNode = WebInspector.context.flavor(WI.DOMNode);
    var allClasses = new Set();
    var stylesheets = cssModel.allStyleSheets();
    var promises = [];
    for (var stylesheet of stylesheets) {
        var promise = stylesheet.getClassNames().then(classes =>
allClasses.addAll(classes));
        promises.push(promise);
    }
    var domClassesPromise =
selectedNode.ownerDocument.getClassNames().then(classes =>
allClasses.addAll(classes));
    promises.push(domClassesPromise);
    Promise.all(promises).then(() => completionsReady(allClasses.valuesArray()))
}

[ahmetemirercin, 2016/09/20 18:38:40]

Correct me if I'm wrong: cssModel will collect stylesheets from all frames but
we have to suggest only for selected node's owner frame so need that
frameToClassName stuff.Beside this promises can resolve after selected frame is
changed so resulting in suggesting invalid classes for node. If these are wrong
I will simplify my patch according to your suggestion otherwise it seems there
is no need to further simplify and move it. Wdyt?

+    {
+        if (!this._selectedNode)
+            return;
+
+        var inspectedDocument = this._selectedNode.ownerDocument;
+
+        if (!inspectedDocument)
+            return;
+
+        var frameId = this._getNodeFrameId(inspectedDocument);
+        /**
+         * @param {!Array.<string>} classNames
+         * @this {!WebInspector.ClassesPaneWidget}
+         */
+        function classNamesCallback(classNames)
+        {
+            this._addFrameClasses(frameId, classNames);
+        }
+
+        inspectedDocument.domModel().classNamesPromise(inspectedDocument.id).then(classNamesCallback.bind(this));
+    },
+
+    _getCssClasses: function()
+    {
+        if (!this._selectedNode)
+            return;
+
+        var frameId = this._selectedFrameId();
+        var cssModel = WebInspector.CSSModel.fromTarget(this._selectedNode.target());
+        var headers = cssModel.allStyleSheets();
+        for (var stylesheet of cssModel.allStyleSheets())
+            if (stylesheet.frameId === frameId)
+                this._getStylesheetClasses(stylesheet);
+    },
+
+    /**
+     * @param {?PageAgent.FrameId} frameId
+     * @return {!Set<string>}
+     */
+    _getFrameClasses: function(frameId)
+    {
+        if (!this._frameClasses.get(frameId))
+            this._frameClasses.set(frameId, new Set());
+
+        return this._frameClasses.get(frameId);
+    },
+
+    /**
+     * @return {?PageAgent.FrameId}
+     */
+    _selectedFrameId: function()
+    {
+        return this._getNodeFrameId(this._selectedNode);
+    },
+
+    /**
+     * @param {?WebInspector.DOMNode} node
+     * @return {?PageAgent.FrameId}
+     */
+    _getNodeFrameId: function(node){
+        return node ? node.frameId() || WebInspector.ResourceTreeModel.fromTarget(node.target()).mainFrame.id : 0;
+    },
+
+    /**
+     * @param {!WebInspector.CSSStyleSheetHeader} stylesheet
+     */
+    _getStylesheetClasses: function(stylesheet)
+    {
+        /**
+         * @param {!WebInspector.CSSStyleSheetHeader} stylsheet
+         * @param {!Array.<string>} classNames
+         * @this {!WebInspector.ClassesPaneWidget}
+         */
+        function classNamesCallback(stylsheet, classNames)
+        {
+            this._addFrameClasses(stylsheet.frameId, classNames);
+        }
+
+        var cssModel = stylesheet.cssModel();
+        cssModel.classNamesPromise(stylesheet.id).then(classNamesCallback.bind(this, stylesheet));
+    },
+
+    /**
+     * @param {?PageAgent.FrameId} frameId
+     * @param {!Array.<string>} classNames
+     */
+    _addFrameClasses: function(frameId, classNames)
+    {
+        if (!classNames)
+            return;
+        this._getFrameClasses(frameId).addAll(classNames);
+        this._updateCompletions(frameId);
+    },
+
+    /**
+     * @param {?PageAgent.FrameId} frameId
+     */
+    _updateCompletions: function(frameId)
+    {
+        if (frameId === this._selectedFrameId())
+            this._prompt.updateCompletions(this._getFrameClasses(frameId).valuesArray().sort());
+    },
+
+    /**
+     * @param {?PageAgent.FrameId} frameId
+     */
+    _collectFrameClasses: function(frameId)
+    {
+        this._getDomClasses();
+        this._getCssClasses();
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
     _onDOMMutated: function(event)
     {
         var node = /** @type {!WebInspector.DOMNode} */(event.data);
         if (this._mutatingNodes.has(node))
             return;
         delete node[WebInspector.ClassesPaneWidget._classesSymbol];
         this._update();
     },
 
     /**
      * @override
      */
     wasShown: function()
     {
         this._update();
     },
 
     _update: function()
     {
         if (!this.isShowing())
             return;
-
         var node = WebInspector.context.flavor(WebInspector.DOMNode);
         if (node)
             node = node.enclosingElementOrSelf();
 
         this._classesContainer.removeChildren();
         this._input.disabled = !node;
 
         if (!node)
             return;
 
+        this._selectedNode = node;
         var classes = this._nodeClasses(node);
         var keys = classes.keysArray();
         keys.sort(String.caseInsensetiveComparator);
         for (var i = 0; i < keys.length; ++i) {
             var className = keys[i];
             var label = createCheckboxLabel(className, classes.get(className));
             label.visualizeFocus = true;
             label.classList.add("monospace");
             label.checkboxElement.addEventListener("click", this._onClick.bind(this, className), false);
             this._classesContainer.appendChild(label);
@@ skipping 97 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();
+    this._classNameCompletions = [];
+}
+
+WebInspector.ClassesPaneWidget.ClassNamePrompt.prototype = {
+    /**
+     * @override
+     * @param {!Event} event
+     */
+    onKeyDown: function(event)
+    {
+        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 {!Array.<string>} classNameList
+     */
+    updateCompletions: function(classNameList)
+    {
+        this._classNameCompletions = classNameList;
+    },
+
+    clearCompletions: function()
+    {
+        this._classNameCompletions = [];
+    },
+
+    /**
+     * @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 results = this._classNameCompletions.filter((value) => value.startsWith(prefix));
+        var selectedIndex = 0;
+        completionsReadyCallback(results, selectedIndex);
+    },
+
+    __proto__: WebInspector.TextPrompt.prototype
+}