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

third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js

Index: third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js b/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
index d696846f17f47e24198abda5a76ed4eb08a17acf..453d0e23841088c24cea6675db9f1c52279e9429 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/ColorSwatch.js
@@ -164,6 +164,7 @@ WebInspector.ColorSwatch._nextColorFormat = function(color, curFormat)
     }
 }
 
+
 WebInspector.BezierSwatch = {}
 
 /**
@@ -176,3 +177,80 @@ WebInspector.BezierSwatch.create = function()
     root.createChild("span", "bezier-swatch");
     return element;
 }
+
+
+/**
+ * @constructor
+ * @extends {HTMLSpanElement}
+ */
+WebInspector.CSSShadowSwatch = function()
+{
+}
+
+/**
+ * @return {!WebInspector.CSSShadowSwatch}
+ */
+WebInspector.CSSShadowSwatch.create = function()
+{
+    if (!WebInspector.CSSShadowSwatch._constructor)
+        WebInspector.CSSShadowSwatch._constructor = registerCustomElement("span", "css-shadow-swatch", WebInspector.CSSShadowSwatch.prototype);
+
+    return /** @type {!WebInspector.CSSShadowSwatch} */(new WebInspector.CSSShadowSwatch._constructor());
+}
+
+WebInspector.CSSShadowSwatch.prototype = {
+    /**
+     * @param {!WebInspector.CSSShadowModel} cssShadowModel
+     */
+    setCSSShadow: function(cssShadowModel)
+    {
+        this._cssShadowModel = cssShadowModel;
+        this._contentElement.removeChildren();
+        var results = WebInspector.TextUtils.splitStringByRegexes(cssShadowModel.asCSSText(), [/inset/g, WebInspector.Color.Regex]);
+        for (var i = 0; i < results.length; i++) {
+            var result = results[i];
+            if (result.regexIndex === 1) {
+                this._colorSwatch = WebInspector.ColorSwatch.create();
+                this._colorSwatch.setColorText(result.value);
+                this._contentElement.appendChild(this._colorSwatch);
+            } else {
+                this._contentElement.appendChild(createTextNode(result.value));
+            }
+        }
+    },
+
+    /**
+     * @param {boolean} hide
+     */
+    hideText: function(hide)
+    {
+        this._contentElement.hidden = hide;
+    },
+
+    /**
+     * @return {!Element}
+     */
+    iconElement: function()
+    {
+        return this._iconElement;
+    },
+
+    /**
+     * @return {!WebInspector.ColorSwatch}
+     */
+    colorSwatch: function()
+    {
+        return this._colorSwatch;
+    },
+
+    createdCallback: function()
+    {
+        var root = WebInspector.createShadowRootWithCoreStyles(this, "ui/cssShadowSwatch.css");
+        this._iconElement = root.createChild("span", "shadow-swatch-icon");
+        root.createChild("content");
+        this._contentElement = this.createChild("span");
+        this.setCSSShadow(new WebInspector.CSSShadowModel());
+    },
+
+    __proto__: HTMLSpanElement.prototype
+}