DevTools: Box-shadow editor initial implementation

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 54bde3f357bf16d36d745528006c6d43c9ff8c23..4a7dfbabadee3a2093e03e542a5b2f21b9a23194 100644
--- a/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
+++ b/third_party/WebKit/Source/devtools/front_end/elements/ColorSwatchPopoverIcon.js
@@ -260,6 +260,9 @@ WebInspector.ShadowPopoverIcon = function(treeElement, swatchPopoverHelper, shad
     this._shadow = shadow;
     this._element = createElement("span");
     this._replaceDOM();
+
+    this._boundShadowChanged = this._shadowChanged.bind(this);
+    this._boundOnScroll = this._onScroll.bind(this);
 }
 
 WebInspector.ShadowPopoverIcon.prototype = {
@@ -275,6 +278,8 @@ WebInspector.ShadowPopoverIcon.prototype = {
     {
         this._element.removeChildren();
         this._iconElement = WebInspector.ShadowSwatch.create();
+        this._iconElement.title = WebInspector.UIString("Open shadow editor");
+        this._iconElement.addEventListener("click", this._iconClick.bind(this), false);
         this._element.appendChild(this._iconElement);
 
         var shadowParts = this._shadow.textParts();
@@ -289,5 +294,59 @@ WebInspector.ShadowPopoverIcon.prototype = {
                 this._element.appendChild(createTextNode(shadowPart.text));
             }
         }
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _iconClick: function(event)
+    {
+        event.consume(true);
+        if (this._swatchPopoverHelper.isShowing()) {
+            this._swatchPopoverHelper.hide(true);
+            return;
+        }
+
+        this._shadowEditor = new WebInspector.ShadowEditor(this._shadow);
+        this._shadowEditor.addEventListener(WebInspector.ShadowEditor.Events.ShadowChanged, this._boundShadowChanged);
+        this._swatchPopoverHelper.show(this._shadowEditor, this._iconElement, this._onPopoverHidden.bind(this));
+
+        this._scrollerElement = this._iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper");
+        if (this._scrollerElement)
+            this._scrollerElement.addEventListener("scroll", this._boundOnScroll, false);
+
+        this._originalPropertyText = this._treeElement.property.propertyText;
+        this._treeElement.parentPane().setEditingStyle(true);
+        var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(this._treeElement.property, false /* forName */);
+        if (uiLocation)
+            WebInspector.Revealer.reveal(uiLocation, true /* omitFocus */);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _shadowChanged: function(event)
+    {
+        this._shadow = /** @type {!WebInspector.ShadowEditor.Shadow} */ (event.data);
+        this._replaceDOM();
+        this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
+    },
+
+    /**
+     * @param {!Event} event
+     */
+    _onScroll: function(event)
+    {
+        this._swatchPopoverHelper.reposition();
+    },
+
+    /**
+     * @param {boolean} commitEdit
+     */
+    _onPopoverHidden: function(commitEdit)
+    {
+        if (this._scrollerElement)
+            this._scrollerElement.removeEventListener("scroll", this._boundOnScroll, false);
+        // TODO: Handle popover hidden.
     }
 }