DevTools: Autocomplete CSS variables in StylesSidebar

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

Index: third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
index 4b004f4ce8fb1d03721c3667beb04141005c17f4..6d6df159851cb8f5f470cdb5b2f60b0cdfab1ab1 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -2768,6 +2768,7 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
     super();
     this.initialize(this._buildPropertyCompletions.bind(this), UI.StyleValueDelimiters);
     this._cssCompletions = cssCompletions;
+    this._cssVariables = Elements.StylesSidebarPane.findCSSVariables();
     this._treeElement = treeElement;
     this._isEditingName = isEditingName;
 
@@ -2887,7 +2888,7 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
     if (!word)
       return false;
     word = word.toLowerCase();
-    return this._cssCompletions.indexOf(word) !== -1;
+    return this._cssCompletions.indexOf(word) !== -1 || word.startsWith('--');
   }
 
   /**
@@ -2898,36 +2899,55 @@ Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
    */
   _buildPropertyCompletions(expression, query, force) {
     var lowerQuery = query.toLowerCase();
-    if (!query && !force && (this._isEditingName || expression))
+    var editingName = this._isEditingName;
+    var editingVariable = expression.trim().endsWith('var(');
+    if (!query && !force && !editingVariable && (editingName || expression))
       return Promise.resolve([]);
 
     var prefixResults = [];
     var anywhereResults = [];
-    this._cssCompletions.forEach(filterCompletions.bind(this));
-    var results = prefixResults.concat(anywhereResults);
+    if (!editingVariable)
+      this._cssCompletions.forEach(filterCompletions);
 
-    if (!this._isEditingName && !results.length && query.length > 1 && '!important'.startsWith(lowerQuery))
-      results.push({title: '!important'});
-    var userEnteredText = query.replace('-', '');
-    if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
-      for (var i = 0; i < results.length; ++i)
-        results[i].title = results[i].title.toUpperCase();
+    if (editingName || editingVariable) {
+      return this._cssVariables.then(variables => {
+        variables.forEach(filterCompletions);
+        return returnResults();
+      });
     }
-    return Promise.resolve(results);
+    return Promise.resolve(returnResults());
 
     /**
      * @param {string} completion
-     * @this {Elements.StylesSidebarPane.CSSPropertyPrompt}
      */
     function filterCompletions(completion) {
-      var index = completion.indexOf(lowerQuery);
+      var index = completion.toLowerCase().indexOf(lowerQuery);
       if (index === 0) {
-        var priority = this._isEditingName ? SDK.cssMetadata().propertyUsageWeight(completion) : 1;
+        var priority = editingName ? SDK.cssMetadata().propertyUsageWeight(completion) : 1;
         prefixResults.push({title: completion, priority: priority});
       } else if (index > -1) {
         anywhereResults.push({title: completion});
       }
     }
+
+    /**
+     * @return {!UI.SuggestBox.Suggestions}
+     */
+    function returnResults() {
+      var results = prefixResults.concat(anywhereResults);
+      if (!editingName && !results.length && query.length > 1 && '!important'.startsWith(lowerQuery))
+        results.push({title: '!important'});
+      var userEnteredText = query.replace('-', '');
+      if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
+        for (var i = 0; i < results.length; ++i) {
+          if (!results[i].title.startsWith('--'))
+            results[i].title = results[i].title.toUpperCase();
+        }
+      }
+      if (editingVariable)
+        results.forEach(result => result.title += ')');
+      return results;
+    }
   }
 };
 
@@ -3087,3 +3107,29 @@ Elements.StylesSidebarPane.ButtonProvider = class {
     return this._button;
   }
 };
+
+/**
+ * @return {!Promise<!Array<string>>}
+ */
+Elements.StylesSidebarPane.findCSSVariables = function() {

[lushnikov, 2017/01/23 05:06:47]

fetching & parsing everything is a lot of work. can we rather pull the css
variables from the backend? It should be
available for us almost for free

+  var stylesheetPromises = [];
+  /** @type {!Set<string>} */
+  var variables = new Set();
+  for (var target of SDK.targetManager.targets(SDK.Target.Capability.DOM)) {
+    var cssModel = SDK.CSSModel.fromTarget(target);
+    for (var stylesheet of cssModel.allStyleSheets())
+      stylesheetPromises.push(stylesheet.requestContent().then(parseContent));
+  }
+  return Promise.all(stylesheetPromises).then(() => Array.from(variables));
+
+  /**
+   * @param {?string} text
+   */
+  function parseContent(text) {
+    if (!text)
+      return;
+    var regexResult = text.match(/[^A-Za-z0-9\-]--[A-Za-z0-9\-]+/g) || [];

[dgozman, 2017/01/18 16:29:38]

I see we now show defined variables in SSP unless it's in a rule which does not
inherit anything except for variables. Should we instead show those rules as
well? And also not dim the variable to indicate it's actually inherited.

Then you don't have to parse anything - just show suggestions from the variables
currently displayed in SSP, since those are exactly the ones which are available
for specific element. WDYT?

+    for (var v of regexResult)
+      variables.add(v.substring(1));
+  }
+};