DevTools: Add shadow-editor swatch/icon before box-shadows and text-shadows

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 a392a8ee3655d86fd46848fd819368876bcaafae..3fda1f3849a171ae1e75435d66382afac5b47d53 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js
@@ -1953,12 +1953,6 @@ WebInspector.StylePropertyTreeElement.prototype = {
         if (!color)
             return createTextNode(text);
 
-        if (!this._editable()) {
-            var swatch = WebInspector.ColorSwatch.create();
-            swatch.setColorText(text);
-            return swatch;
-        }
-
         var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
         var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, text);
 
@@ -1998,6 +1992,20 @@ WebInspector.StylePropertyTreeElement.prototype = {
     },
 
     /**
+     * @param {string} text
+     * @return {!Node}
+     */
+    _processColorUneditable: function(text)
+    {
+        // We can be called with valid non-color values of |text| (like 'none' from border style)
+        if (!WebInspector.Color.parse(text))
+            return createTextNode(text);
+        var swatch = WebInspector.ColorSwatch.create();
+        swatch.setColorText(text);
+        return swatch;
+    },
+
+    /**
      * @return {string}
      */
     renderedPropertyText: function()
@@ -2011,13 +2019,42 @@ WebInspector.StylePropertyTreeElement.prototype = {
      */
     _processBezier: function(text)
     {
-        var geometry = WebInspector.Geometry.CubicBezier.parse(text);
-        if (!geometry || !this._editable())
+        if (!WebInspector.Geometry.CubicBezier.parse(text))
             return createTextNode(text);
         var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
         return new WebInspector.BezierPopoverIcon(this, swatchPopoverHelper, text).element();
     },
 
+    /**
+     * @param {string} propertyValue
+     * @param {string} propertyName
+     * @return {!Node}
+     */
+    _processShadow: function(propertyValue, propertyName)
+    {
+        var shadowValues = [];
+        // Split by commas that aren't inside of color values to get the individual shadow values.
+        var results = WebInspector.TextUtils.splitStringByRegexes(propertyValue, [WebInspector.Color.Regex, /,/g]);

[lushnikov, 2016/08/10 19:29:02]

we should put this logic somewhere else - we might want to reuse it in sources
panel

[flandy, 2016/08/11 00:23:19]

Done.

+        var currentIndex = 0;
+        for (var i = 0; i < results.length; i++) {
+            if (results[i].regexIndex === 1) {
+                var comma = results[i];
+                shadowValues.push(propertyValue.substring(currentIndex, comma.position));
+                currentIndex = comma.position + 1;
+            }
+        }
+        shadowValues.push(propertyValue.substring(currentIndex, propertyValue.length));
+
+        var container = createDocumentFragment();
+        for (var i = 0; i < shadowValues.length; i++) {
+            if (i !== 0)
+                container.appendChild(createTextNode(",")); // Add back the removed commas.
+            var shadowPopoverIcon = new WebInspector.ShadowPopoverIcon(this, this._parentPane._swatchPopoverHelper, shadowValues[i], propertyName);
+            container.appendChild(shadowPopoverIcon.element());
+        }
+        return container;
+    },
+
     _updateState: function()
     {
         if (!this.listItemElement)
@@ -2179,8 +2216,13 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         var propertyRenderer = new WebInspector.StylesSidebarPropertyRenderer(this._style.parentRule, this.node(), this.name, this.value);
         if (this.property.parsedOk) {
-            propertyRenderer.setColorHandler(this._processColor.bind(this));
-            propertyRenderer.setBezierHandler(this._processBezier.bind(this));
+            if (this._editable()) {
+                propertyRenderer.setColorHandler(this._processColor.bind(this));
+                propertyRenderer.setBezierHandler(this._processBezier.bind(this));
+                propertyRenderer.setShadowHandler(this._processShadow.bind(this));
+            } else {
+                propertyRenderer.setColorHandler(this._processColorUneditable.bind(this));

[lushnikov, 2016/08/10 19:29:02]

ideally, we should show bezier and shadow swatches for read-only rules as well;
they
just should not be editable.

This is good thing to address in a follow-up

[flandy, 2016/08/11 00:23:19]

Okay let's hold off on this for now.

+            }
         }
 
         this.listItemElement.removeChildren();
@@ -2992,6 +3034,14 @@ WebInspector.StylesSidebarPropertyRenderer.prototype = {
     },
 
     /**
+     * @param {function(string, string):!Node} handler
+     */
+    setShadowHandler: function(handler)
+    {
+        this._shadowHandler = handler;
+    },
+
+    /**
      * @return {!Element}
      */
     renderName: function()
@@ -3013,6 +3063,13 @@ WebInspector.StylesSidebarPropertyRenderer.prototype = {
         if (!this._propertyValue)
             return valueElement;
 
+        if (this._shadowHandler && (this._propertyName === "box-shadow" || this._propertyName === "text-shadow")
+                && !WebInspector.CSSMetadata.VariableRegex.test(this._propertyValue) && Runtime.experiments.isEnabled("shadowEditor")) {
+            valueElement.appendChild(this._shadowHandler(this._propertyValue, this._propertyName));

[lushnikov, 2016/08/10 19:29:02]

does this mean there could be only one shadow swatch in value?

[flandy, 2016/08/11 00:23:19]

No, value could have multiple shadow swatches if _propertyValue has multiple
shadows separated by commas. 

Should these be plural, _shadowsHandler? _processShadows?

+            valueElement.normalize();
+            return valueElement;
+        }
+
         var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex];
         var processors = [createTextNode, this._processURL.bind(this)];
         if (this._bezierHandler && WebInspector.cssMetadata().isBezierAwareProperty(this._propertyName)) {