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..bd3b1fe7bdec7b6c5ce7be8e47193bf8e9d681bd 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,65 @@ 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)

[dgozman, 2016/08/10 22:03:45]

Do you plan to use the same editor for box shadow and text shadow?

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

Yes, as much as possible.

+{
+    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 = this._element.createChild("span", "shadow-swatch");
+                var root = WebInspector.createShadowRootWithCoreStyles(this._iconElement, "ui/colorSwatch.css");
+                root.createChild("span", "shadow-swatch");
+            }
+            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);

[dgozman, 2016/08/10 22:03:44]

I thought this will be handled outside of shadow-related code. Andrey?

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

It is usually handled in StylesSidebarPropertyRenderer.renderValue but I skip
that and do separate handling for box/text shadows. The shadow handler should
also know about the color, in case we want to add opacity controls to the shadow
editor, for example.

+                    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);
+        }
+    }
+}