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

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

Index: third_party/WebKit/Source/devtools/front_end/ui/ShadowEditor.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ShadowEditor.js b/third_party/WebKit/Source/devtools/front_end/ui/ShadowEditor.js
new file mode 100644
index 0000000000000000000000000000000000000000..d95a9a8eb007e58cfe40c5f947e94758ef6d3897
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/ui/ShadowEditor.js
@@ -0,0 +1,199 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ */
+WebInspector.ShadowEditor = function() {}
+
+/**
+ * @constructor
+ */
+WebInspector.ShadowEditor.Shadow = function(type)

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

Let's make this a real css shadow model:

WebInspector.CSSShadowModel = function(inset, x, y, blurRadius, spreadRadius,
color) 
{
     ...
}

WebInspector.CSSShadowModel.prototype = {
    setInset: ...
    setOffset: function(x, y) ...
    setBlueRadius: ...
    setSpreadRadius: ...
    setColor: ...
    setFormat: function(format) ... // format
    toCSSBoxShadow: function() ...
    toCSSTextShadow: function() ...
}

Where format is one of the permutations of letters "L", "I", "C":
L - lengths
I - inset
C - color

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

Done. I've opted to use more options for the format with "I", "X", "Y", "B",
"S", and "C", and put these in an enum.

+{
+    this.type = type;
+    this.order = [];
+}
+
+/**
+ * @enum {string}
+ */
+WebInspector.ShadowEditor.Shadow.Parts = {
+    Inset: "inset",
+    Length: "length",
+    Color: "color"
+};
+
+/**
+ * @param {string} text
+ * @param {string} type
+ * @return {?Array<!WebInspector.ShadowEditor.Shadow>}
+ */
+WebInspector.ShadowEditor.Shadow.parse = function(text, type)

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

WI.CSSShadowModel.parseBoxShadow = function(text) ...

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

Done.

+{
+    var shadowTexts = [];
+    // Split by commas that aren't inside of color values to get the individual shadow values.
+    var splits = WebInspector.TextUtils.splitStringByRegexes(text, [WebInspector.Color.Regex, /,/g]);
+    var currentIndex = 0;
+    for (var i = 0; i < splits.length; i++) {
+        if (splits[i].regexIndex === 1) {
+            var comma = splits[i];
+            shadowTexts.push(text.substring(currentIndex, comma.position));
+            currentIndex = comma.position + 1;
+        }
+    }
+    shadowTexts.push(text.substring(currentIndex, text.length));
+
+    var shadows = [];
+    for (var i = 0; i < shadowTexts.length; i++) {
+        var shadow = new WebInspector.ShadowEditor.Shadow(type);
+        var regexes = [/inset/g, WebInspector.Color.Regex, WebInspector.ShadowEditor.Length.Regex];
+        var results = WebInspector.TextUtils.splitStringByRegexes(shadowTexts[i], regexes);
+        for (var j = 0; j < results.length; j++) {
+            var result = results[j];
+            if (result.regexIndex === 0) {
+                shadow.setInset(result.value);
+            } else if (result.regexIndex === 1) {
+                var color = WebInspector.Color.parse(result.value);
+                if (!color)
+                    return null;
+                shadow.setColor(color);
+            } else if (result.regexIndex === 2) {
+                var length = WebInspector.ShadowEditor.Length.parse(result.value);
+                if (!length)
+                    return null;
+                shadow.addLength(length);
+            }
+        }
+        shadows.push(shadow);
+    }
+    return shadows;
+}
+
+WebInspector.ShadowEditor.Shadow.prototype = {
+    /**
+     * @param {string} inset
+     */
+    setInset: function(inset)
+    {
+        if (!this.inset)
+            this.order.push(WebInspector.ShadowEditor.Shadow.Parts.Inset);
+        this.inset = inset;
+    },
+
+    /**
+     * @param {!WebInspector.Color} color
+     */
+    setColor: function(color)
+    {
+        if (!this.color)
+            this.order.push(WebInspector.ShadowEditor.Shadow.Parts.Color);
+        this.color = color;
+    },
+
+    /**
+     * @param {!WebInspector.ShadowEditor.Length} length
+     */
+    addLength: function(length)

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

this method should not belong to model; it's a part of model parsing process and
should be inside parsing function

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

Done.

+    {
+        if (!this.xOffset) {
+            this.order.push(WebInspector.ShadowEditor.Shadow.Parts.Length);
+            this.xOffset = length;
+        } else if (!this.yOffset) {
+            this.yOffset = length;
+        } else if (!this.blur) {
+            this.blur = length;
+        } else if (!this.spread) {
+            this.spread = length;
+        }
+    },
+
+    /**
+     * @return {!Array<!WebInspector.ShadowEditor.Length>}
+     */
+    lengths: function()
+    {
+        var lengthValues = [];
+        if (this.xOffset)
+            lengthValues.push(this.xOffset);
+        if (this.yOffset)
+            lengthValues.push(this.yOffset);
+        if (this.blur)
+            lengthValues.push(this.blur);
+        if (this.spread)
+            lengthValues.push(this.spread);
+        return lengthValues;
+    },
+
+    /**
+     * @return {!Array<{type: string, text: string}>}
+     */
+    textParts: function()
+    {
+        var parts = [];
+        for (var i = 0; i < this.order.length; i++) {
+            var currentPart = this.order[i];
+            var textValue;
+            if (currentPart === WebInspector.ShadowEditor.Shadow.Parts.Inset)
+                textValue = this.inset;
+            else if (currentPart === WebInspector.ShadowEditor.Shadow.Parts.Length)
+                textValue = this.lengths().join(" ");
+            else if (currentPart === WebInspector.ShadowEditor.Shadow.Parts.Color)
+                textValue = this.color.asString(this.color.format());
+            parts.push({
+                type: currentPart,
+                text: textValue
+            });
+        }
+        return parts;
+    }
+}
+
+
+/**
+ * @constructor
+ * @param {number} amount
+ * @param {string} unit
+ */
+WebInspector.ShadowEditor.Length = function(amount, unit)

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

WI.CSSLength = function(...)

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

Done.

+{
+    this.amount = amount;
+    this.unit = unit;
+}
+
+/** @type {!RegExp} */
+WebInspector.ShadowEditor.Length.Regex = /([0-9]+)([a-zA-Z]{2,4})|0/g;

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

could it be negative/fractional?

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

Yes, and also scientific notation. Fixed.

+
+/** @type {!Set<string>} */
+WebInspector.ShadowEditor.Length._units = new Set([

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

WI.CSSLengthUnit = {
    Ch: "ch",
    Ex: "ex",
    ...
    None: ""
}

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

Done.

+    "ch", "cm", "em", "ex", "in", "mm", "pc", "pt", "px", "rem", "vh", "vmax", "vmin", "vw"
+]);
+
+/**
+ * @param {string} text
+ * @return {?WebInspector.ShadowEditor.Length}
+ */
+WebInspector.ShadowEditor.Length.parse = function(text)
+{
+    var lengthRegex = new RegExp("^(" + WebInspector.ShadowEditor.Length.Regex.source + ")$");
+    var match = text.match(lengthRegex) || [];
+    if (match.length > 3 && match[3]) {
+        if (WebInspector.ShadowEditor.Length._units.has(match[3].toLowerCase()))
+            return new WebInspector.ShadowEditor.Length(parseFloat(match[2]), match[3]);
+    } else if (match.length > 1) {
+        return new WebInspector.ShadowEditor.Length(0, "");
+    }
+    return null;
+}
+
+WebInspector.ShadowEditor.Length.prototype = {
+    /**
+     * @override
+     * @return {string}
+     */
+    toString: function()

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

let's do toCSSText()

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

Renamed to asCSSText() to keep consistent with WI.Geometry.CubicBezier.

+    {
+        return this.amount + this.unit;
+    }
+}