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

third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 1942 matching lines @@
         if (!color)
             return createTextNode(text);
 
         if (!this._editable()) {
             var swatch = WebInspector.ColorSwatch.create();
             swatch.setColorText(text);
             return swatch;
         }
 
         var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
-        var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, text);
+        var colorSwatch = WebInspector.ColorSwatch.create();
+        colorSwatch.setColorText(text);
+        colorSwatch.setFormat(WebInspector.Color.detectColorFormat(colorSwatch.color()));
+        var swatchPopoverIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, colorSwatch);
 
         /**
          * @param {?Array<string>} backgroundColors
          */
         function computedCallback(backgroundColors)
         {
             // TODO(aboxhall): distinguish between !backgroundColors (no text) and
             // !backgroundColors.length (no computed bg color)
             if (!backgroundColors || !backgroundColors.length)
                 return;
             // TODO(samli): figure out what to do in the case of multiple background colors (i.e. gradients)
             var bgColorText = backgroundColors[0];
             var bgColor = WebInspector.Color.parse(bgColorText);
             if (!bgColor)
                 return;
 
             // If we have a semi-transparent background color over an unknown
             // background, draw the line for the "worst case" scenario: where
             // the unknown background is the same color as the text.
             if (bgColor.hasAlpha) {
                 var blendedRGBA = [];
                 WebInspector.Color.blendColors(bgColor.rgba(), color.rgba(), blendedRGBA);
                 bgColor = new WebInspector.Color(blendedRGBA, WebInspector.Color.Format.RGBA);
             }
 
-            swatchIcon.setContrastColor(bgColor);
+            swatchPopoverIcon.setContrastColor(bgColor);
         }
 
         if (this.property.name === "color" && this._parentPane.cssModel() && this.node()) {
             var cssModel = this._parentPane.cssModel();
             cssModel.backgroundColorsPromise(this.node().id).then(computedCallback);
         }
 
-        return swatchIcon.element();
+        return colorSwatch;
     },
 
     /**
      * @return {string}
      */
     renderedPropertyText: function()
     {
         return this.nameElement.textContent + ": " + this.valueElement.textContent;
     },
 
     /**
      * @param {string} text
      * @return {!Node}
      */
     _processBezier: function(text)
     {
         var geometry = WebInspector.Geometry.CubicBezier.parse(text);
         if (!geometry || !this._editable())
             return createTextNode(text);
         var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
         return new WebInspector.BezierPopoverIcon(this, swatchPopoverHelper, text).element();
     },
 
+    /**
+     * @param {string} propertyValue
+     * @param {string} propertyName
+     * @return {!Node}
+     */
+    _processShadow: function(propertyValue, propertyName)
+    {
+        var shadows;
+        if (propertyName === "box-shadow")
+            shadows = WebInspector.CSSShadowModel.parseBoxShadow(propertyValue);
+        else
+            shadows = WebInspector.CSSShadowModel.parseTextShadow(propertyValue);
+        if (!shadows || !this._editable())
+            return createTextNode(propertyValue);
+        var container = createDocumentFragment();
+        var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
+        for (var i = 0; i < shadows.length; i++) {
+            if (i !== 0)
+                container.appendChild(createTextNode(", ")); // Add back commas and spaces between each shadow.
+            var cssShadowSwatch = WebInspector.CSSShadowSwatch.create();
+            cssShadowSwatch.setCSSShadow(shadows[i]);
+            new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, cssShadowSwatch.colorSwatch());
+            container.appendChild(cssShadowSwatch);
+        }
+        return container;
+    },
+
     _updateState: function()
     {
         if (!this.listItemElement)
             return;
 
         if (this._style.isPropertyImplicit(this.name))
             this.listItemElement.classList.add("implicit");
         else
             this.listItemElement.classList.remove("implicit");
 
@@ skipping 143 matching lines @@
     updateTitle: function()
     {
         this._updateState();
         this._expandElement = createElement("span");
         this._expandElement.className = "expand-element";
 
         var propertyRenderer = new WebInspector.StylesSidebarPropertyRenderer(this._style.parentRule, this.node(), this.name, this.value);
         if (this.property.parsedOk) {
             propertyRenderer.setColorHandler(this._processColor.bind(this));
             propertyRenderer.setBezierHandler(this._processBezier.bind(this));
+            propertyRenderer.setShadowHandler(this._processShadow.bind(this));
         }
 
         this.listItemElement.removeChildren();
         this.nameElement = propertyRenderer.renderName();
         this.valueElement = propertyRenderer.renderValue();
         if (!this.treeOutline)
             return;
 
         var indent = WebInspector.moduleSetting("textEditorIndent").get();
         this.listItemElement.createChild("span", "styles-clipboard-only").createTextChild(indent + (this.property.disabled ? "/* " : ""));
@@ skipping 791 matching lines @@
 
     /**
      * @param {function(string):!Node} handler
      */
     setBezierHandler: function(handler)
     {
         this._bezierHandler = handler;
     },
 
     /**
+     * @param {function(string, string):!Node} handler
+     */
+    setShadowHandler: function(handler)
+    {
+        this._shadowHandler = handler;
+    },
+
+    /**
      * @return {!Element}
      */
     renderName: function()
     {
         var nameElement = createElement("span");
         nameElement.className = "webkit-css-property";
         nameElement.textContent = this._propertyName;
         nameElement.normalize();
         return nameElement;
     },
 
     /**
      * @return {!Element}
      */
     renderValue: function()
     {
         var valueElement = createElement("span");
         valueElement.className = "value";
         if (!this._propertyValue)
             return valueElement;
 
+        if (this._shadowHandler && (this._propertyName === "box-shadow" || this._propertyName === "text-shadow")
+                && !WebInspector.CSSMetadata.VariableRegex.test(this._propertyValue) && Runtime.experiments.isEnabled("shadowEditor")) {
+            valueElement.appendChild(this._shadowHandler(this._propertyValue, this._propertyName));
+            valueElement.normalize();
+            return valueElement;
+        }
+
         var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex];
         var processors = [createTextNode, this._processURL.bind(this)];
         if (this._bezierHandler && WebInspector.cssMetadata().isBezierAwareProperty(this._propertyName)) {
             regexes.push(WebInspector.Geometry.CubicBezier.Regex);
             processors.push(this._bezierHandler);
         }
         if (this._colorHandler && WebInspector.cssMetadata().isColorAwareProperty(this._propertyName)) {
             regexes.push(WebInspector.Color.Regex);
             processors.push(this._colorHandler);
         }
@@ skipping 73 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }