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

third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js

Index: third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
diff --git a/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js b/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
index ccc42c2023cafe7731b82ba5e7bb0857eacda85f..54bde3f357bf16d36d745528006c6d43c9ff8c23 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
@@ -246,3 +246,48 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
         delete this._originalPropertyText;
     }
 }
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylePropertyTreeElement} treeElement
+ * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
+ * @param {!WebInspector.ShadowEditor.Shadow} shadow
+ */
+WebInspector.ShadowPopoverIcon = function(treeElement, swatchPopoverHelper, shadow)
+{
+    this._treeElement = treeElement;
+    this._swatchPopoverHelper = swatchPopoverHelper;
+    this._shadow = shadow;
+    this._element = createElement("span");
+    this._replaceDOM();
+}
+
+WebInspector.ShadowPopoverIcon.prototype = {
+    /**
+     * @return {!Element}
+     */
+    element: function()
+    {
+        return this._element;
+    },
+
+    _replaceDOM: function()
+    {
+        this._element.removeChildren();

[lushnikov, 2016/08/16 22:53:19]

let's not do this. Instead, we should create a real shadowSwatch custom
component, like the
WI.ColorSwatch:

WI.CSSShadowSwatch.prototype = {
    colorSwatch: function() { .. }
    setCSSShadow: function(cssShadowModel) ...
}

With the colorSwatch exposed, you would be able to bind clicks.

[flandy, 2016/08/18 22:00:41]

Done.

+        this._iconElement = WebInspector.ShadowSwatch.create();
+        this._element.appendChild(this._iconElement);
+
+        var shadowParts = this._shadow.textParts();
+        for (var i = 0; i < shadowParts.length; i++) {
+            if (i !== 0)
+                this._element.appendChild(createTextNode(" ")); // Add back spaces between each part.
+            var shadowPart = shadowParts[i];
+            if (shadowPart.type === WebInspector.ShadowEditor.Shadow.Parts.Color) {
+                this._colorSwatchPopoverIcon = new WebInspector.ColorSwatchPopoverIcon(this._treeElement, this._swatchPopoverHelper, shadowPart.text);
+                this._element.appendChild(this._colorSwatchPopoverIcon.element());
+            } else {
+                this._element.appendChild(createTextNode(shadowPart.text));
+            }
+        }
+    }
+}