DevTools: Autocomplete CSS variables in StylesSidebar

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 2750 matching lines @@
   /**
    * @param {!Array<string>} cssCompletions
    * @param {!Elements.StylePropertyTreeElement} treeElement
    * @param {boolean} isEditingName
    */
   constructor(cssCompletions, treeElement, isEditingName) {
     // Use the same callback both for applyItemCallback and acceptItemCallback.
     super();
     this.initialize(this._buildPropertyCompletions.bind(this), UI.StyleValueDelimiters);
     this._cssCompletions = cssCompletions;
+    this._cssVariables = Elements.StylesSidebarPane.findCSSVariables();
     this._treeElement = treeElement;
     this._isEditingName = isEditingName;
 
     if (!isEditingName) {
       this.disableDefaultSuggestionForEmptyInput();
 
       // If a CSS value is being edited that has a numeric or hex substring, hint that precision modifier shortcuts are available.
       if (treeElement && treeElement.valueElement) {
         var cssValueText = treeElement.valueElement.textContent;
         if (cssValueText.match(/#[\da-f]{3,6}$/i)) {
@@ skipping 99 matching lines @@
   }
 
   /**
    * @param {string} word
    * @return {boolean}
    */
   _isValueSuggestion(word) {
     if (!word)
       return false;
     word = word.toLowerCase();
-    return this._cssCompletions.indexOf(word) !== -1;
+    return this._cssCompletions.indexOf(word) !== -1 || word.startsWith('--');
   }
 
   /**
    * @param {string} expression
    * @param {string} query
    * @param {boolean=} force
    * @return {!Promise<!UI.SuggestBox.Suggestions>}
    */
   _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;
+    }
   }
 };
 
 /**
  * @unrestricted
  */
 Elements.StylesSidebarPropertyRenderer = class {
   /**
    * @param {?SDK.CSSRule} rule
    * @param {?SDK.DOMNode} node
@@ skipping 139 matching lines @@
   }
 
   /**
    * @override
    * @return {!UI.ToolbarItem}
    */
   item() {
     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));
+  }
+};