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..1817bb42c491c58e25039b76ee6cf5a7421889ce 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,63 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
         delete this._originalPropertyText;
     }
 }
+
+/**
+ * @constructor
+ * @param {!WebInspector.StylePropertyTreeElement} treeElement
+ * @param {!WebInspector.SwatchPopoverHelper} swatchPopoverHelper
+ * @param {string} shadowText
+ * @param {string} shadowType
+ */
+WebInspector.ShadowPopoverIcon = function(treeElement, swatchPopoverHelper, shadowText, shadowType)
+{
+    this._treeElement = treeElement;
+    this._swatchPopoverHelper = swatchPopoverHelper;
+    this._shadowType = shadowType;
+    this._createDOM(shadowText);
+}
+
+WebInspector.ShadowPopoverIcon.prototype = {
+    /**
+     * @return {!Element}
+     */
+    element: function()
+    {
+        return this._element;
+    },
+
+    /**
+     * @param {string} shadowText
+     */
+    _createDOM: function(shadowText)
+    {
+        this._element = createElement("span");
+
+        var regexes = [/inset/g, WebInspector.Color.Regex, /([0-9]+)([a-zA-Z]{2,4})|0/g];
+        var results = WebInspector.TextUtils.splitStringByRegexes(shadowText, regexes);
+        var currentElement = this._element;
+        for (var i = 0; i < results.length; i++) {
+            var result = results[i];
+            var newChild = createTextNode(result.value);
+            if (!this._iconElement && result.regexIndex !== -1) {
+                this._iconElement = WebInspector.ShadowSwatch.create();
+                this._element.appendChild(this._iconElement);
+            }
+            if (result.regexIndex === 0) {
+                this._insetElement = this._element.createChild("span");
+                currentElement = this._insetElement;
+            } else if (result.regexIndex === 1) {
+                if (WebInspector.Color.parse(result.value)) {
+                    this._colorSwatchPopoverIcon = new WebInspector.ColorSwatchPopoverIcon(this._treeElement, this._swatchPopoverHelper, result.value);
+                    newChild = this._colorSwatchPopoverIcon.element();
+                }
+                currentElement = this._element;
+            } else if (result.regexIndex === 2) {
+                if (!this._lengthElement)
+                    this._lengthElement = this._element.createChild("span");
+                currentElement = this._lengthElement;
+            }
+            currentElement.appendChild(newChild);
+        }
+    }
+}