DevTools: Autocomplete CSS variables in StylesSidebar

third_party/WebKit/Source/devtools/front_end/sdk/CSSMatchedStyles.js

 // Copyright 2016 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.
 /**
  * @unrestricted
  */
 SDK.CSSMatchedStyles = class {
   /**
    * @param {!SDK.CSSModel} cssModel
    * @param {!SDK.DOMNode} node
@@ skipping 288 matching lines @@
 
   /**
    * @param {!SDK.CSSStyleDeclaration} style
    * @return {?SDK.DOMNode}
    */
   nodeForStyle(style) {
     return this._nodeForStyle.get(style) || null;
   }
 
   /**
+   * @return {!Array<string>}
+   */
+  cssVariables() {
+    var cssVariables = [];
+    for (var style of this.nodeStyles()) {
+      for (var property of style.allProperties()) {
+        if (property.name.startsWith('--'))
+          cssVariables.push(property.name);
+      }
+    }
+    return cssVariables;
+  }
+
+  /**
    * @param {!SDK.CSSStyleDeclaration} style
    * @return {boolean}
    */
   isInherited(style) {
     return this._inheritedStyles.has(style);
   }
 
   /**
    * @param {!SDK.CSSProperty} property
    * @return {?SDK.CSSMatchedStyles.PropertyState}
@@ skipping 108 matching lines @@
       }
     }
   }
 };
 
 /** @enum {string} */
 SDK.CSSMatchedStyles.PropertyState = {
   Active: 'Active',
   Overloaded: 'Overloaded'
 };