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

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

+// 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() {}
+
+/**
+ * @param {string} text
+ * @return {!Array<string>}
+ */
+WebInspector.ShadowEditor.Shadow.splitShadows = function(text)

[lushnikov, 2016/08/11 01:40:07]

I don't like this - it seems to be a utility method which will be utilized only
in StylesSidebarPane.

The WI.ShadowEditor should have a ShadowModel which it edits (see
WI.Geometry.CubicBezier / WI.Color).

Then you can introduce methods like WI.ShadowModel.parse(text) -> which returns
an array of WI.ShadowModel objects.

Once edited, every WI.ShadowModel has asCSSText() method which returns
appropriate css text.

[flandy, 2016/08/12 19:31:42]

Yes I was planning on adding much to the Shadow Model just in a later patch.
I've gone ahead and introduced more to the shadow model now, which simplifies
the ShadowPopoverIcon. 

I think it makes sense to return the css text in parts/chunks, so that we can
add the color swatch in front of the color. 

+{
+    var shadows = [];
+    // Split by commas that aren't inside of color values to get the individual shadow values.
+    var results = WebInspector.TextUtils.splitStringByRegexes(text, [WebInspector.Color.Regex, /,/g]);
+    var currentIndex = 0;
+    for (var i = 0; i < results.length; i++) {
+        if (results[i].regexIndex === 1) {
+            var comma = results[i];
+            shadows.push(text.substring(currentIndex, comma.position));
+            currentIndex = comma.position + 1;
+        }
+    }
+    shadows.push(text.substring(currentIndex, text.length));
+    return shadows;
+}