DevTools: Reduce color parsing by passing in Color to ColorSwatch

Often times we are doing double work parsing color text to handle invalid
colors and then parsing color text again in setColorText. We should just
parse once and pass in the Color object to ColorSwatch.

BUG=642782

Review-Url: https://codereview.chromium.org/2310633002
Cr-Commit-Position: refs/heads/master@{#417488}

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

@@ -182,8 +182,10 @@ WebInspector.ColorSwatchPopoverIcon.prototype = {
      */
     _spectrumChanged: function(event)
     {
-        var colorString = /** @type {string} */ (event.data);
-        this._swatch.setColorText(colorString);
+        var color = WebInspector.Color.parse(/** @type {string} */ (event.data));
+        if (!color)
+            return;
+        this._swatch.setColor(color);
         this._treeElement.applyStyleText(this._treeElement.renderedPropertyText(), false);
     },
 

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

@@ -129,7 +129,7 @@ WebInspector.ComputedStyleWidget.prototype = {
         if (!color)
             return createTextNode(text);
         var swatch = WebInspector.ColorSwatch.create();
-        swatch.setColorText(text);
+        swatch.setColor(color);
         swatch.setFormat(WebInspector.Color.detectColorFormat(color));
         return swatch;
     },

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

@@ -1955,13 +1955,13 @@ WebInspector.StylePropertyTreeElement.prototype = {
 
         if (!this._editable()) {
             var swatch = WebInspector.ColorSwatch.create();
-            swatch.setColorText(text);
+            swatch.setColor(color);
             return swatch;
         }
 
         var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
         var swatch = WebInspector.ColorSwatch.create();
-        swatch.setColorText(text);
+        swatch.setColor(color);
         swatch.setFormat(WebInspector.Color.detectColorFormat(swatch.color()));
         var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
 
@@ -2048,8 +2048,9 @@ WebInspector.StylePropertyTreeElement.prototype = {
             var cssShadowSwatch = WebInspector.CSSShadowSwatch.create();
             cssShadowSwatch.setCSSShadow(shadows[i]);
             new WebInspector.ShadowSwatchPopoverHelper(this, swatchPopoverHelper, cssShadowSwatch);
-            if (cssShadowSwatch.colorSwatch())
-                var colorSwatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, cssShadowSwatch.colorSwatch());
+            var colorSwatch = cssShadowSwatch.colorSwatch();
+            if (colorSwatch)
+                new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, colorSwatch);
             container.appendChild(cssShadowSwatch);
         }
         return container;

third_party/WebKit/Source/devtools/front_end/resources/AppManifestView.js

@@ -98,9 +98,11 @@ WebInspector.AppManifestView.prototype = {
             this._startURLField.appendChild(WebInspector.linkifyResourceAsNode(/** @type {string} */(WebInspector.ParsedURL.completeURL(url, startURL)), undefined, undefined, undefined, undefined, startURL));
 
         this._themeColorSwatch.classList.toggle("hidden", !stringProperty("theme_color"));
-        this._themeColorSwatch.setColorText(stringProperty("theme_color") || "white");
+        var themeColor = WebInspector.Color.parse(stringProperty("theme_color") || "white") || WebInspector.Color.parse("white");
+        this._themeColorSwatch.setColor(/** @type {!WebInspector.Color} */ (themeColor));
         this._backgroundColorSwatch.classList.toggle("hidden", !stringProperty("background_color"));
-        this._backgroundColorSwatch.setColorText(stringProperty("background_color") || "white");
+        var backgroundColor = WebInspector.Color.parse(stringProperty("background_color") || "white") || WebInspector.Color.parse("white");
+        this._backgroundColorSwatch.setColor(/** @type {!WebInspector.Color} */ (backgroundColor));
 
         this._orientationField.textContent = stringProperty("orientation");
         this._displayField.textContent = stringProperty("display");

third_party/WebKit/Source/devtools/front_end/sources/CSSSourceFrame.js

@@ -166,10 +166,11 @@ WebInspector.CSSSourceFrame.prototype = {
      */
     _createColorSwatch: function(text)
     {
-        if (!WebInspector.Color.parse(text))
+        var color = WebInspector.Color.parse(text);
+        if (!color)
             return null;
         var swatch = WebInspector.ColorSwatch.create();
-        swatch.setColorText(text);
+        swatch.setColor(color);
         swatch.iconElement().title = WebInspector.UIString("Open color picker.");
         swatch.iconElement().addEventListener("click", this._swatchIconClicked.bind(this, swatch), false);
         swatch.hideText(true);
@@ -241,7 +242,10 @@ WebInspector.CSSSourceFrame.prototype = {
     _spectrumChanged: function(event)
     {
         var colorString = /** @type {string} */ (event.data);
-        this._currentSwatch.setColorText(colorString);
+        var color = WebInspector.Color.parse(colorString);
+        if (!color)
+            return;
+        this._currentSwatch.setColor(color);
         this._changeSwatchText(colorString);
     },
 

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

@@ -31,15 +31,15 @@ WebInspector.ColorSwatch.prototype = {
     },
 
     /**
-     * @param {string} colorText
+     * @param {!WebInspector.Color} color
      */
-    setColorText: function(colorText)
+    setColor: function(color)
     {
-        this._color = WebInspector.Color.parse(colorText);
-        console.assert(this._color, "Color text could not be parsed.");
+        this._color = color;
         this._format = this._color.format();
-        this._colorValueElement.textContent = this._color.asString(this._format);
-        this._swatchInner.style.backgroundColor = colorText;
+        var colorString = this._color.asString(this._format);
+        this._colorValueElement.textContent = colorString;
+        this._swatchInner.style.backgroundColor = colorString;
     },
 
     /**
@@ -97,8 +97,6 @@ WebInspector.ColorSwatch.prototype = {
 
         root.createChild("content");
         this._colorValueElement = this.createChild("span");
-
-        this.setColorText("white");
     },
 
     /**
@@ -261,14 +259,14 @@ WebInspector.CSSShadowSwatch.prototype = {
     setCSSShadow: function(model)
     {
         this._model = model;
-        this._colorSwatch = null;
         this._contentElement.removeChildren();
         var results = WebInspector.TextUtils.splitStringByRegexes(model.asCSSText(), [/inset/g, WebInspector.Color.Regex]);
         for (var i = 0; i < results.length; i++) {
             var result = results[i];
             if (result.regexIndex === 1) {
-                this._colorSwatch = WebInspector.ColorSwatch.create();
-                this._colorSwatch.setColorText(result.value);
+                if (!this._colorSwatch)
+                    this._colorSwatch = WebInspector.ColorSwatch.create();
+                this._colorSwatch.setColor(model.color());
                 this._contentElement.appendChild(this._colorSwatch);
             } else {
                 this._contentElement.appendChild(createTextNode(result.value));
@@ -293,7 +291,7 @@ WebInspector.CSSShadowSwatch.prototype = {
     },
 
     /**
-     * @return {!WebInspector.ColorSwatch}
+     * @return {?WebInspector.ColorSwatch}
      */
     colorSwatch: function()
     {