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 2335 matching lines @@
 
     var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this) : undefined;
     var cssCompletions = [];
     if (isEditingName) {
       cssCompletions = SDK.cssMetadata().allProperties();
       cssCompletions =
           cssCompletions.filter(property => SDK.cssMetadata().isSVGProperty(property) === this.node().isSVGNode());
     } 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);
       this._prompt.addEventListener(UI.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
     }
     var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
     this._navigateToSource(selectElement, true);
 
     proxyElement.addEventListener('keydown', this._editingNameValueKeyDown.bind(this, context), false);
     proxyElement.addEventListener('keypress', this._editingNameValueKeyPress.bind(this, context), false);
@@ skipping 385 matching lines @@
 
 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
 Elements.StylePropertyTreeElement.Context;
 
 /**
  * @unrestricted
  */
 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;
 
     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;

[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));
+    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 (editingName || editingVariable)
+      this._cssVariables.forEach(filterCompletions);
     var results = prefixResults.concat(anywhereResults);
-
-    if (!this._isEditingName && !results.length && query.length > 1 && '!important'.startsWith(lowerQuery))
+    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});
       }
     }
   }
 };
 
 /**
  * @unrestricted
@@ skipping 144 matching lines @@
   }
 
   /**
    * @override
    * @return {!UI.ToolbarItem}
    */
   item() {
     return this._button;
   }
 };