Devtools: Don't show color swatch for variables like var(--blue)

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 bd44f0f35ad954a24f9e45391e6e9d5e309c9e3a..40ced1c76f3faeb433735d1cc6547f43ae8299c5 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -2978,6 +2978,7 @@ WebInspector.StylesSidebarPropertyRenderer = function(rule, node, name, value)
     this._propertyValue = value;
 }
 
+WebInspector.StylesSidebarPropertyRenderer._variableRegex = /(var\(--.*?\))/g;
 WebInspector.StylesSidebarPropertyRenderer._colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?!-))/g;
 WebInspector.StylesSidebarPropertyRenderer._bezierRegex = /((cubic-bezier\([^)]+\))|\b(linear|ease-in-out|ease-in|ease-out|ease)\b)/g;
 
@@ -3036,6 +3037,7 @@ WebInspector.StylesSidebarPropertyRenderer.prototype = {
             return valueElement;
 
         var formatter = new WebInspector.StringFormatter();
+        formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._variableRegex, createTextNode);
         formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._urlRegex(this._propertyValue), this._processURL.bind(this));
         if (this._bezierHandler && WebInspector.CSSMetadata.isBezierAwareProperty(this._propertyName))
             formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._bezierRegex, this._bezierHandler);