DevTools: introduce CSS Variable palette to Spectrum.

This patch adds CSS Variable palette to Spectrum in Styles Sidebar Pane.

R=dgozman

Change-Id: I5327b875d65039e8955e804e4b1b3208cd683a33
Reviewed-on: https://chromium-review.googlesource.com/1008998Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Andrey Lushnikov <lushnikov@chromium.org>
Cr-Commit-Position: refs/heads/master@{#550070}

third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-3/spectrum.js

@@ -21,7 +21,7 @@
   function checkAlphaChange(inputColor, format) {
     setColor(inputColor, format);
     spectrum._hsv[3] = 0;
-    spectrum._innerSetColor(spectrum._hsv, undefined, undefined, ColorPicker.Spectrum._ChangeSource.Other);
+    spectrum._innerSetColor(spectrum._hsv, undefined, undefined /* colorName */, undefined, ColorPicker.Spectrum._ChangeSource.Other);
     TestRunner.addResult(spectrum.colorString());
   }
 

third_party/WebKit/LayoutTests/http/tests/devtools/sources/color-swatch-position.js

@@ -20,7 +20,7 @@
         var swatch = sourceFrame.textEditor._codeMirrorElement.querySelector('span[is=color-swatch]');
         swatch.shadowRoot.querySelector('.color-swatch-inner').click();
         cssPlugin._spectrum._innerSetColor(
-            Common.Color.parse('#008000').hsva(), '', Common.Color.Format.HEX,
+            Common.Color.parse('#008000').hsva(), '', undefined /* colorName */, Common.Color.Format.HEX,
             ColorPicker.Spectrum._ChangeSource.Other);
         cssPlugin._swatchPopoverHelper.hide(true);
         SourcesTestRunner.dumpSwatchPositions(sourceFrame, Sources.CSSPlugin.SwatchBookmark);

third_party/blink/renderer/devtools/front_end/color_picker/spectrum.css

@@ -479,7 +479,7 @@
 }
 
 .palette-panel-showing > .palette-panel {
-    transform: translateY(calc(-100% + 117px));
+    transform: translateY(calc(-100% + 104px));
     transition-delay: 0s;
     visibility: visible;
 }

third_party/blink/renderer/devtools/front_end/elements/ColorSwatchPopoverIcon.js

@@ -110,6 +110,30 @@ Elements.ColorSwatchPopoverIcon = class {
     this._boundOnScroll = this._onScroll.bind(this);
   }
 
+  /**
+   * @return {!ColorPicker.Spectrum.Palette}
+   */
+  _generateCSSVariablesPalette() {
+    const matchedStyles = this._treeElement.matchedStyles();
+    const style = this._treeElement.property.ownerStyle;
+    const cssVariables = matchedStyles.availableCSSVariables(style);
+    const colors = [];
+    const colorNames = [];
+    for (const cssVariable of cssVariables) {
+      if (cssVariable === this._treeElement.property.name)
+        continue;
+      const value = matchedStyles.computeCSSVariable(style, cssVariable);
+      if (!value)
+        continue;
+      const color = Common.Color.parse(value);
+      if (!color)
+        continue;
+      colors.push(value);
+      colorNames.push(cssVariable);
+    }
+    return {title: 'CSS Variables', mutable: false, matchUserFormat: true, colors: colors, colorNames: colorNames};
+  }
+
   /**
    * @param {!Elements.StylePropertyTreeElement} treeElement
    * @return {?Elements.ColorSwatchPopoverIcon}
@@ -147,6 +171,7 @@ Elements.ColorSwatchPopoverIcon = class {
       format = color.format();
     this._spectrum = new ColorPicker.Spectrum();
     this._spectrum.setColor(color, format);
+    this._spectrum.addPalette(this._generateCSSVariablesPalette());
     if (this._contrastInfo)
       this._spectrum.setContrastInfo(this._contrastInfo);
 
@@ -179,6 +204,10 @@ Elements.ColorSwatchPopoverIcon = class {
     if (!color)
       return;
     this._swatch.setColor(color);
+    const colorName = this._spectrum.colorName();
+    if (colorName && colorName.startsWith('--'))
+      this._swatch.setText(`var(${colorName})`);
+
     this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
   }
 

third_party/blink/renderer/devtools/front_end/elements/StylePropertyTreeElement.js

@@ -37,6 +37,13 @@ Elements.StylePropertyTreeElement = class extends UI.TreeElement {
     this._lastComputedValue = null;
   }
 
+  /**
+   * @return {!SDK.CSSMatchedStyles}
+   */
+  matchedStyles() {
+    return this._matchedStyles;
+  }
+
   /**
    * @return {boolean}
    */