DevTools: [shadow-editor] Make color swatches clickable for shadow properties

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 swatch = WebInspector.ColorSwatch.create();
+        swatch.setColorText(text);
+        swatch.setFormat(WebInspector.Color.detectColorFormat(swatch.color()));
+        var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
 
         /**
          * @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;
@@ skipping 13 matching lines @@
             }
 
             swatchIcon.setContrastColor(bgColor);
         }
 
         if (Runtime.experiments.isEnabled("colorContrastRatio") && 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 swatch;
     },
 
     /**
      * @return {string}
      */
     renderedPropertyText: function()
     {
         return this.nameElement.textContent + ": " + this.valueElement.textContent;
     },
 
@@ skipping 27 matching lines @@
         if (!shadows.length)
             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.
             // TODO(flandy): editing the property value should use the original value with all spaces.
             var cssShadowSwatch = WebInspector.CSSShadowSwatch.create();
             cssShadowSwatch.setCSSShadow(shadows[i]);
+            if (cssShadowSwatch.colorSwatch())
+                var colorSwatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, cssShadowSwatch.colorSwatch());
             container.appendChild(cssShadowSwatch);
         }
         return container;
     },
 
     _updateState: function()
     {
         if (!this.listItemElement)
             return;
 
@@ skipping 1089 matching lines @@
 
     /**
      * @override
      * @return {!WebInspector.ToolbarItem}
      */
     item: function()
     {
         return this._button;
     }
 }