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 9cb007d04cda3049c167b6ef1c689d785c290b6b..9b0ccf52b3381d55a69e311c8d66041d2e9f2cee 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -2353,8 +2353,16 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     } else {
       cssCompletions = SDK.cssMetadata().propertyValues(this.nameElement.textContent);
     }
+    var cssVariables = [];

[lushnikov, 2017/01/24 01:35:03]

nit: this makes sense as a method on MatchedStyles

[einbinder, 2017/02/03 01:51:54]

Done.

+    for (var style of this._matchedStyles.nodeStyles()) {
+      for (var property of style.allProperties) {
+        if (property.name.startsWith('--'))
+          cssVariables.push(property.name);
+      }
+    }
+    cssVariables.sort(String.naturalOrderComparator);
 
-    this._prompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(cssCompletions, this, isEditingName);
+    this._prompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(cssCompletions, cssVariables, this, isEditingName);
     this._prompt.setAutocompletionTimeout(0);
     if (applyItemCallback) {
       this._prompt.addEventListener(UI.TextPrompt.Events.ItemApplied, applyItemCallback, this);
@@ -2760,14 +2768,16 @@ Elements.StylePropertyTreeElement.Context;
 Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
   /**
    * @param {!Array<string>} cssCompletions
+   * @param {!Array<string>} cssVariables
    * @param {!Elements.StylePropertyTreeElement} treeElement
    * @param {boolean} isEditingName
    */
-  constructor(cssCompletions, treeElement, isEditingName) {
+  constructor(cssCompletions, cssVariables, 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 = cssVariables;
     this._treeElement = treeElement;
     this._isEditingName = isEditingName;
 
@@ -2887,7 +2897,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,31 +2908,39 @@ 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;

[lushnikov, 2017/01/24 01:35:03]

nit: i understand this is to avoid binding of filterCompletions, but it is a bit
confusing. Let's just use this._isEditingName

[einbinder, 2017/02/03 01:51:54]

Done.

+    var editingVariable = expression.trim().endsWith('var(');

[lushnikov, 2017/01/24 01:35:03]

nit: let's move this down to where it is actually used? Also, should it be

var editingVariable = !this._isEditingName &&
expression.trim().endsWith('var(');

[einbinder, 2017/02/03 01:51:54]

It is used in the next line.

+    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)

[lushnikov, 2017/01/24 01:35:04]

should it be:

if (editingVariable)
    this._cssVariables.forEach(filterCompletions);
else
    this._cssCompletions.forEach(filterCompletions);

[einbinder, 2017/02/03 01:51:54]

When we are editing the name, we want to show both css completions and css
variables.

+      this._cssCompletions.forEach(filterCompletions);
 
-    if (!this._isEditingName && !results.length && query.length > 1 && '!important'.startsWith(lowerQuery))
+    if (editingName || editingVariable)
+      this._cssVariables.forEach(filterCompletions);
+    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)
-        results[i].title = results[i].title.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 Promise.resolve(results);
 
     /**
      * @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});