<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[160132] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/160132">160132</a></dd>
<dt>Author</dt> <dd>graouts@apple.com</dd>
<dt>Date</dt> <dd>2013-12-04 15:16:59 -0800 (Wed, 04 Dec 2013)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: edited color should serialize back to original format when possible
https://bugs.webkit.org/show_bug.cgi?id=125244
Reviewed by Joseph Pecoraro.
Profoundly reworked WebInspector.Color to be more efficient and more flexible when
serializing the color to the various supported formats.
* UserInterface/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
Use new WebInspector.Color.fromString() factory and check for a null return value
rather than an exception to identify invalid color tokens.
* UserInterface/Color.js:
(WebInspector.Color):
Rewrote WebInspector.Color such that it would have, at all times, a canonical
representation in terms of either RGBA or HSLA depending on the format used to
create the color. The new constructor parameters lets the user pass a format
and the RGBA or HSLA components, allowing to bypass the string-only creation
system which was sub-optimal for the new color picker. Additionally, the toString()
method now can provide the most accurate serialization of the color based on the
provided format with a fallback mechanism to RGB/RGBA in cases where the desired
format would incur a loss of fidelity. Finally, simplified the API to only feature
essential features.
(WebInspector.Color.fromString):
New factory method used to create a color from a string.
* UserInterface/ColorPicker.js:
(WebInspector.ColorPicker.prototype.set color):
Keep track of the original color format so that we can use it as the preferred format
when serializing the updated color in _updateColor().
(WebInspector.ColorPicker.prototype._updateColor):
Use the original color format as the prefered formation for color serialization. Also,
use the new WebInspector.Color constructor in lieu of the removed .fromRGBA factory.
(WebInspector.ColorPicker.prototype._updateSliders):
Use the new WebInspector.Color constructor in lieu of the removed .fromRGBA factory.
* UserInterface/ColorWheel.js:
(WebInspector.ColorWheel.prototype._colorAtPointWithBrightness):
Use the new WebInspector.Color constructor in lieu of the removed .fromRGB factory.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorjs">trunk/Source/WebInspectorUI/UserInterface/Color.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceColorWheeljs">trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (160131 => 160132)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2013-12-04 23:07:04 UTC (rev 160131)
+++ trunk/Source/WebInspectorUI/ChangeLog 2013-12-04 23:16:59 UTC (rev 160132)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2013-12-04 Antoine Quint <graouts@apple.com>
+
+ Web Inspector: edited color should serialize back to original format when possible
+ https://bugs.webkit.org/show_bug.cgi?id=125244
+
+ Reviewed by Joseph Pecoraro.
+
+ Profoundly reworked WebInspector.Color to be more efficient and more flexible when
+ serializing the color to the various supported formats.
+
+ * UserInterface/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+ Use new WebInspector.Color.fromString() factory and check for a null return value
+ rather than an exception to identify invalid color tokens.
+
+ * UserInterface/Color.js:
+ (WebInspector.Color):
+ Rewrote WebInspector.Color such that it would have, at all times, a canonical
+ representation in terms of either RGBA or HSLA depending on the format used to
+ create the color. The new constructor parameters lets the user pass a format
+ and the RGBA or HSLA components, allowing to bypass the string-only creation
+ system which was sub-optimal for the new color picker. Additionally, the toString()
+ method now can provide the most accurate serialization of the color based on the
+ provided format with a fallback mechanism to RGB/RGBA in cases where the desired
+ format would incur a loss of fidelity. Finally, simplified the API to only feature
+ essential features.
+
+ (WebInspector.Color.fromString):
+ New factory method used to create a color from a string.
+
+ * UserInterface/ColorPicker.js:
+ (WebInspector.ColorPicker.prototype.set color):
+ Keep track of the original color format so that we can use it as the preferred format
+ when serializing the updated color in _updateColor().
+
+ (WebInspector.ColorPicker.prototype._updateColor):
+ Use the original color format as the prefered formation for color serialization. Also,
+ use the new WebInspector.Color constructor in lieu of the removed .fromRGBA factory.
+
+ (WebInspector.ColorPicker.prototype._updateSliders):
+ Use the new WebInspector.Color constructor in lieu of the removed .fromRGBA factory.
+
+ * UserInterface/ColorWheel.js:
+ (WebInspector.ColorWheel.prototype._colorAtPointWithBrightness):
+ Use the new WebInspector.Color constructor in lieu of the removed .fromRGB factory.
+
</ins><span class="cx"> 2013-12-03 Seokju Kwon <seokju@webkit.org>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Remove '_attachedWindowHeight' property in InspectorFrontendHostStub.js
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js (160131 => 160132)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js 2013-12-04 23:07:04 UTC (rev 160131)
+++ trunk/Source/WebInspectorUI/UserInterface/CSSStyleDeclarationTextEditor.js 2013-12-04 23:16:59 UTC (rev 160132)
</span><span class="lines">@@ -426,9 +426,9 @@
</span><span class="cx"> continue;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- try {
- var color = new WebInspector.Color(match[0]);
- } catch (e) {
</del><ins>+
+ var color = WebInspector.Color.fromString(match[0]);
+ if (!color) {
</ins><span class="cx"> match = colorRegex.exec(lineContent);
</span><span class="cx"> continue;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Color.js (160131 => 160132)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Color.js 2013-12-04 23:07:04 UTC (rev 160131)
+++ trunk/Source/WebInspectorUI/UserInterface/Color.js 2013-12-04 23:16:59 UTC (rev 160132)
</span><span class="lines">@@ -27,13 +27,13 @@
</span><span class="cx"> * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx"> */
</span><span class="cx">
</span><del>-/**
- * @constructor
- */
-WebInspector.Color = function(str)
</del><ins>+WebInspector.Color = function(format, components)
</ins><span class="cx"> {
</span><del>- this.value = str;
- this._parse();
</del><ins>+ this.format = format;
+ if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA)
+ this._hsla = components;
+ else
+ this._rgba = components;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> WebInspector.Color.Format = {
</span><span class="lines">@@ -47,17 +47,90 @@
</span><span class="cx"> HSLA: "color-format-hsla"
</span><span class="cx"> };
</span><span class="cx">
</span><del>-/**
- * @param {number=} a
- */
-WebInspector.Color.fromRGBA = function(r, g, b, a)
</del><ins>+WebInspector.Color.fromString = function(colorString)
</ins><span class="cx"> {
</span><del>- return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
-}
</del><ins>+ var value = colorString.toLowerCase().replace(/%|\s+/g, "");
+ const transparentNicknames = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
+ if (transparentNicknames.contains(value)) {
+ var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, [0, 0, 0, 0]);
+ color.nickname = "transparent";
+ color.original = colorString;
+ return color;
+ }
</ins><span class="cx">
</span><del>-WebInspector.Color.fromRGB = function(r, g, b)
-{
- return new WebInspector.Color("rgb(" + r + "," + g + "," + b + ")");
</del><ins>+ // Simple - #hex, rgb(), nickname, hsl()
+ var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
+ var match = colorString.match(simple);
+ if (match) {
+ if (match[1]) { // hex
+ var hex = match[1].toUpperCase();
+ if (hex.length === 3) {
+ return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
+ parseInt(hex.charAt(0) + hex.charAt(0), 16) * 255,
+ parseInt(hex.charAt(1) + hex.charAt(1), 16) * 255,
+ parseInt(hex.charAt(2) + hex.charAt(2), 16) * 255,
+ 1
+ ]);
+ } else {
+ return new WebInspector.Color(WebInspector.Color.Format.HEX, [
+ parseInt(hex.substring(0, 2), 16) * 255,
+ parseInt(hex.substring(2, 4), 16) * 255,
+ parseInt(hex.substring(4, 6), 16) * 255,
+ 1
+ ]);
+ }
+ } else if (match[2]) { // rgb
+ var rgb = match[2].split(/\s*,\s*/);
+ return new WebInspector.Color(WebInspector.Color.Format.RGB, [
+ parseInt(rgb[0]),
+ parseInt(rgb[1]),
+ parseInt(rgb[2]),
+ 1
+ ]);
+ } else if (match[3]) { // nickname
+ var nickname = match[3].toLowerCase();
+ if (nickname in WebInspector.Color.Nicknames) {
+ var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, WebInspector.Color.Nicknames[nickname].concat(1));
+ color.nickname = nickname;
+ color.original = colorString;
+ return color;
+ } else
+ return null;
+ } else if (match[4]) { // hsl
+ var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
+ return new WebInspector.Color(WebInspector.Color.Format.HSL, [
+ parseInt(hsl[0]),
+ parseInt(hsl[1]),
+ parseInt(hsl[2]),
+ 1
+ ]);
+ }
+ }
+
+ // Advanced - rgba(), hsla()
+ var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
+ match = colorString.match(advanced);
+ if (match) {
+ if (match[1]) { // rgba
+ var rgba = match[1].split(/\s*,\s*/);
+ return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
+ parseInt(rgba[0]),
+ parseInt(rgba[1]),
+ parseInt(rgba[2]),
+ Number.constrain(parseFloat(rgba[3]), 0, 1)
+ ]);
+ } else if (match[2]) { // hsla
+ var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
+ return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
+ parseInt(hsla[0]),
+ parseInt(hsla[1]),
+ parseInt(hsla[2]),
+ Number.constrain(parseFloat(hsla[3]), 0, 1)
+ ]);
+ }
+ }
+
+ return null;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> WebInspector.Color.prototype = {
</span><span class="lines">@@ -78,7 +151,7 @@
</span><span class="cx"> if (this.nickname)
</span><span class="cx"> return WebInspector.Color.Format.Nickname;
</span><span class="cx"> if (this.simple)
</span><del>- return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</del><ins>+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</ins><span class="cx"> else
</span><span class="cx"> return WebInspector.Color.Format.Original;
</span><span class="cx">
</span><span class="lines">@@ -90,7 +163,7 @@
</span><span class="cx">
</span><span class="cx"> case WebInspector.Color.Format.Nickname:
</span><span class="cx"> if (this.simple)
</span><del>- return this.hasShortHex() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</del><ins>+ return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
</ins><span class="cx"> else
</span><span class="cx"> return WebInspector.Color.Format.Original;
</span><span class="cx">
</span><span class="lines">@@ -100,277 +173,193 @@
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {string}
- */
- get shorthex()
</del><ins>+ get alpha()
</ins><span class="cx"> {
</span><del>- if ("_short" in this)
- return this._short;
</del><ins>+ return this._rgba ? this._rgba[3] : this._hsla[3];
+ },
</ins><span class="cx">
</span><del>- if (!this.simple)
- return "";
</del><ins>+ get simple()
+ {
+ return this.alpha === 1;
+ },
</ins><span class="cx">
</span><del>- var hex = this.hex;
- if (hex.charAt(0) === hex.charAt(1) && hex.charAt(2) === hex.charAt(3) && hex.charAt(4) === hex.charAt(5))
- this._short = hex.charAt(0) + hex.charAt(2) + hex.charAt(4);
- else
- this._short = hex;
-
- return this._short;
</del><ins>+ get rgb()
+ {
+ var rgb = this.rgba.slice();
+ rgb.pop();
+ return rgb;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {string}
- */
- get hex()
</del><ins>+ get hsl()
</ins><span class="cx"> {
</span><del>- if (!this.simple)
- return "";
</del><ins>+ var hsl = this.hsla.slice();
+ hsl.pop();
+ return hsl;
+ },
</ins><span class="cx">
</span><del>- return this._hex;
</del><ins>+ get rgba()
+ {
+ if (!this._rgba)
+ this._rgba = this._hslaToRGBA(this._hsla);
+ return this._rgba;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set hex(x)
</del><ins>+ get hsla()
</ins><span class="cx"> {
</span><del>- this._hex = x;
</del><ins>+ if (!this._hsla)
+ this._hsla = this._rgbaToHSLA(this.rgba);
+ return this._hsla;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {Array.<number>}
- */
- get rgb()
</del><ins>+ toString: function(format)
</ins><span class="cx"> {
</span><del>- if (this._rgb)
- return this._rgb;
</del><ins>+ if (!format)
+ format = this.format;
</ins><span class="cx">
</span><del>- if (this.simple)
- this._rgb = this._hexToRGB(this.hex);
- else {
- var rgba = this.rgba;
- this._rgb = [rgba[0], rgba[1], rgba[2]];
</del><ins>+ switch (format) {
+ case WebInspector.Color.Format.Original:
+ return this._toOriginalString();
+ case WebInspector.Color.Format.RGB:
+ return this._toRGBString();
+ case WebInspector.Color.Format.RGBA:
+ return this._toRGBAString();
+ case WebInspector.Color.Format.HSL:
+ return this._toHSLString();
+ case WebInspector.Color.Format.HSLA:
+ return this._toHSLAString();
+ case WebInspector.Color.Format.HEX:
+ return this._toHEXString();
+ case WebInspector.Color.Format.ShortHEX:
+ return this._toShortHEXString();
+ case WebInspector.Color.Format.Nickname:
+ return this._toNicknameString();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- return this._rgb;
</del><ins>+ throw "invalid color format";
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set rgb(x)
</del><ins>+ _toOriginalString: function()
</ins><span class="cx"> {
</span><del>- this._rgb = x;
</del><ins>+ return this.original || this._toNicknameString();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {Array.<number>}
- */
- get hsl()
</del><ins>+ _toNicknameString: function()
</ins><span class="cx"> {
</span><del>- if (this._hsl)
- return this._hsl;
</del><ins>+ if (this.nickname)
+ return this.nickname;
</ins><span class="cx">
</span><del>- this._hsl = this._rgbToHSL(this.rgb);
- return this._hsl;
- },
</del><ins>+ var rgba = this.rgba;
+ if (!this.simple) {
+ if (rgba[0] === 0 && rgba[1] === 0 && rgba[2] === 0 && rgba[3] === 0)
+ return "transparent";
+ return this._toRGBAString();
+ }
</ins><span class="cx">
</span><del>- set hsl(x)
- {
- this._hsl = x;
</del><ins>+ var nicknames = WebInspector.Color.Nicknames;
+ for (var nickname in nicknames) {
+ var nicknameRGB = nicknames[nickname];
+ if (nicknameRGB[0] === rgba[0] && nicknameRGB[1] === rgba[1] && nicknameRGB[2] === rgba[2])
+ return nickname;
+ }
+
+ return this._toRGBString();
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {string}
- */
- get nickname()
</del><ins>+ _toShortHEXString: function()
</ins><span class="cx"> {
</span><del>- if (typeof this._nickname !== "undefined") // would be set on parse if there was a nickname
- return this._nickname;
</del><ins>+ if (!this.simple)
+ return this._toRGBAString();
+
+ var rgba = this.rgba;
+ var r = this._componentToHexValue(rgba[0]);
+ var g = this._componentToHexValue(rgba[1]);
+ var b = this._componentToHexValue(rgba[2]);
+
+ if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1])
+ return "#" + r[0] + g[0] + b[0];
</ins><span class="cx"> else
</span><del>- return "";
</del><ins>+ return "#" + r + g + b;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set nickname(x)
</del><ins>+ _toHEXString: function()
</ins><span class="cx"> {
</span><del>- this._nickname = x;
- },
</del><ins>+ if (!this.simple)
+ return this._toRGBAString();
</ins><span class="cx">
</span><del>- /**
- * @return {Array.<number>}
- */
- get rgba()
- {
- return this._rgba;
</del><ins>+ var rgba = this.rgba;
+ var r = this._componentToHexValue(rgba[0]);
+ var g = this._componentToHexValue(rgba[1]);
+ var b = this._componentToHexValue(rgba[2]);
+
+ return "#" + r + g + b;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set rgba(x)
</del><ins>+ _toRGBString: function()
</ins><span class="cx"> {
</span><del>- this._rgba = x;
</del><ins>+ if (!this.simple)
+ return this._toRGBAString();
+
+ var rgba = this.rgba;
+ return "rgb(" + [rgba[0], rgba[1], rgba[2]].join(", ") + ")";
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {Array.<number>}
- */
- get hsla()
</del><ins>+ _toRGBAString: function()
</ins><span class="cx"> {
</span><del>- return this._hsla;
</del><ins>+ return "rgba(" + this.rgba.join(", ") + ")";
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- set hsla(x)
</del><ins>+ _toHSLString: function()
</ins><span class="cx"> {
</span><del>- this._hsla = x;
</del><ins>+ if (!this.simple)
+ return this._toHSLAString();
+
+ var hsla = this.hsla;
+ return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {boolean}
- */
- hasShortHex: function()
</del><ins>+ _toHSLAString: function()
</ins><span class="cx"> {
</span><del>- var shorthex = this.shorthex;
- return (!!shorthex && shorthex.length === 3);
</del><ins>+ var hsla = this.hsla;
+ return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @return {string}
- */
- toString: function(format)
</del><ins>+ _canBeSerializedAsShortHEX: function()
</ins><span class="cx"> {
</span><del>- if (!format)
- format = this.format;
</del><ins>+ var rgba = this.rgba;
</ins><span class="cx">
</span><del>- switch (format) {
- case WebInspector.Color.Format.Original:
- return this.value;
- case WebInspector.Color.Format.RGB:
- return "rgb(" + this.rgb.join(", ") + ")";
- case WebInspector.Color.Format.RGBA:
- return "rgba(" + (this.rgba ? this.rgba : this.rgb.concat(1)).join(", ") + ")";
- case WebInspector.Color.Format.HSL:
- var hsl = this.hsl;
- return "hsl(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%)";
- case WebInspector.Color.Format.HSLA:
- var hsla = this.hsla;
- if (!hsla)
- return "hsla(" + hsl[0] + ", " + hsl[1] + "%, " + hsl[2] + "%, 1)";
- return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
- case WebInspector.Color.Format.HEX:
- return "#" + this.hex;
- case WebInspector.Color.Format.ShortHEX:
- return "#" + this.shorthex;
- case WebInspector.Color.Format.Nickname:
- return this.nickname;
- }
</del><ins>+ var r = this._componentToHexValue(rgba[0]);
+ if (r[0] !== r[1])
+ return false;
</ins><span class="cx">
</span><del>- throw "invalid color format";
- },
</del><ins>+ var g = this._componentToHexValue(rgba[1]);
+ if (g[0] !== g[1])
+ return false;
</ins><span class="cx">
</span><del>- /**
- * @return {Object}
- */
- toProtocolRGBA: function()
- {
- if (this._protocolRGBA)
- return this._protocolRGBA;
</del><ins>+ var b = this._componentToHexValue(rgba[2]);
+ if (b[0] !== b[1])
+ return false;
</ins><span class="cx">
</span><del>- var components = this.rgba;
- if (components)
- this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]), a: Number(components[3]) };
- else {
- components = this.rgb;
- this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]) };
- }
- return this._protocolRGBA;
</del><ins>+ return true;
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {number} value
- * @param {number} min
- * @param {number} max
- * @return {number}
- */
- _clamp: function(value, min, max)
</del><ins>+ _componentToNumber: function(value)
</ins><span class="cx"> {
</span><del>- if (value < min)
- return min;
- if (value > max)
- return max;
- return value;
</del><ins>+ return Number.constrain(value, 0, 255);
</ins><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {number|string} rgbValue
- * @return {number}
- */
- _individualRGBValueToFloatValue: function(rgbValue)
</del><ins>+ _componentToHexValue: function(value)
</ins><span class="cx"> {
</span><del>- if (typeof rgbValue === "number")
- return this._clamp(rgbValue, 0, 255);
-
- if (rgbValue.indexOf("%") === -1) {
- var intValue = parseInt(rgbValue, 10);
- return this._clamp(intValue, 0, 255);
- }
-
- var percentValue = parseFloat(rgbValue);
- return this._clamp(percentValue, 0, 100) * 2.55;
- },
-
- /**
- * @param {number|string} rgbValue
- * @return {string}
- */
- _individualRGBValueToHexValue: function(rgbValue)
- {
- var floatValue = this._individualRGBValueToFloatValue(rgbValue);
- var hex = Math.round(floatValue).toString(16);
</del><ins>+ var hex = this._componentToNumber(value).toString(16);
</ins><span class="cx"> if (hex.length === 1)
</span><span class="cx"> hex = "0" + hex;
</span><span class="cx"> return hex;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {Array.<string>} rgb
- * @return {string}
- */
- _rgbStringsToHex: function(rgb)
- {
- var r = this._individualRGBValueToHexValue(rgb[0]);
- var g = this._individualRGBValueToHexValue(rgb[1]);
- var b = this._individualRGBValueToHexValue(rgb[2]);
- return (r + g + b).toUpperCase();
- },
-
- /**
- * @param {Array.<number>} rgb
- * @return {string}
- */
- _rgbToHex: function(rgb)
- {
- var r = this._individualRGBValueToHexValue(rgb[0]);
- var g = this._individualRGBValueToHexValue(rgb[1]);
- var b = this._individualRGBValueToHexValue(rgb[2]);
- return (r + g + b).toUpperCase();
- },
-
- /**
- * @param {string} hex
- * @return {Array.<number>}
- */
- _hexToRGB: function(hex)
- {
- var r = parseInt(hex.substring(0,2), 16);
- var g = parseInt(hex.substring(2,4), 16);
- var b = parseInt(hex.substring(4,6), 16);
-
- return [r, g, b];
- },
-
- /**
- * @param {Array.<string|number>} rgb
- * @return {Array.<number>}
- */
</del><span class="cx"> _rgbToHSL: function(rgb)
</span><span class="cx"> {
</span><del>- var r = this._individualRGBValueToFloatValue(rgb[0]) / 255;
- var g = this._individualRGBValueToFloatValue(rgb[1]) / 255;
- var b = this._individualRGBValueToFloatValue(rgb[2]) / 255;
</del><ins>+ var r = this._componentToNumber(rgb[0]) / 255;
+ var g = this._componentToNumber(rgb[1]) / 255;
+ var b = this._componentToNumber(rgb[2]) / 255;
</ins><span class="cx"> var max = Math.max(r, g, b);
</span><span class="cx"> var min = Math.min(r, g, b);
</span><span class="cx"> var diff = max - min;
</span><span class="lines">@@ -397,16 +386,12 @@
</span><span class="cx"> var s = diff / (2 - add);
</span><span class="cx">
</span><span class="cx"> h = Math.round(h);
</span><del>- s = Math.round(s*100);
- l = Math.round(l*100);
</del><ins>+ s = Math.round(s * 100);
+ l = Math.round(l * 100);
</ins><span class="cx">
</span><span class="cx"> return [h, s, l];
</span><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {Array.<number>} hsl
- * @return {Array.<number>}
- */
</del><span class="cx"> _hslToRGB: function(hsl)
</span><span class="cx"> {
</span><span class="cx"> var h = parseFloat(hsl[0]) / 360;
</span><span class="lines">@@ -429,409 +414,162 @@
</span><span class="cx"> ];
</span><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {Array.<number>} rgba
- * @return {Array.<number>}
- */
- _rgbaToHSLA: function(rgba, alpha)
</del><ins>+ _rgbaToHSLA: function(rgba)
</ins><span class="cx"> {
</span><span class="cx"> var hsl = this._rgbToHSL(rgba);
</span><del>- hsl.push(alpha);
</del><ins>+ hsl.push(rgba[3]);
</ins><span class="cx"> return hsl;
</span><span class="cx"> },
</span><span class="cx">
</span><del>- /**
- * @param {Array.<number>} hsla
- * @param {number} alpha
- * @return {Array.<number>}
- */
- _hslaToRGBA: function(hsla, alpha)
</del><ins>+ _hslaToRGBA: function(hsla)
</ins><span class="cx"> {
</span><del>- var rgb = this._hslToRGB(hsla);
- rgb.push(alpha);
- return rgb;
- },
-
- _parse: function()
- {
- // Special Values - Advanced but Must Be Parsed First - transparent
- var value = this.value.toLowerCase().replace(/%|\s+/g, "");
- if (value in WebInspector.Color.AdvancedNickNames) {
- this.format = WebInspector.Color.Format.Nickname;
- var set = WebInspector.Color.AdvancedNickNames[value];
- this.simple = false;
- this.rgba = set[0];
- this.hsla = set[1];
- this.nickname = set[2];
- this.alpha = set[0][3];
- return;
- }
-
- // Simple - #hex, rgb(), nickname, hsl()
- var simple = /^(?:#([0-9a-f]{3,6})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
- var match = this.value.match(simple);
- if (match) {
- this.simple = true;
-
- if (match[1]) { // hex
- var hex = match[1].toUpperCase();
- if (hex.length === 3) {
- this.format = WebInspector.Color.Format.ShortHEX;
- this.hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
- } else {
- this.format = WebInspector.Color.Format.HEX;
- this.hex = hex;
- }
- } else if (match[2]) { // rgb
- this.format = WebInspector.Color.Format.RGB;
- var rgb = match[2].split(/\s*,\s*/);
- this.rgb = rgb;
- this.hex = this._rgbStringsToHex(rgb);
- } else if (match[3]) { // nickname
- var nickname = match[3].toLowerCase();
- if (nickname in WebInspector.Color.Nicknames) {
- this.format = WebInspector.Color.Format.Nickname;
- this.hex = WebInspector.Color.Nicknames[nickname];
- } else // unknown name
- throw "unknown color name";
- } else if (match[4]) { // hsl
- this.format = WebInspector.Color.Format.HSL;
- var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
- this.hsl = hsl;
- this.rgb = this._hslToRGB(hsl);
- this.hex = this._rgbToHex(this.rgb);
- }
-
- // Fill in the values if this is a known hex color
- var hex = this.hex;
- if (hex && hex in WebInspector.Color.HexTable) {
- var set = WebInspector.Color.HexTable[hex];
- this.rgb = set[0];
- this.hsl = set[1];
- this.nickname = set[2];
- }
-
- return;
- }
-
- // Advanced - rgba(), hsla()
- var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/;
- match = this.value.match(advanced);
- if (match) {
- this.simple = false;
- if (match[1]) { // rgba
- this.format = WebInspector.Color.Format.RGBA;
- this.rgba = match[1].split(/\s*,\s*/);
- this.rgba[3] = this.alpha = this._clamp(this.rgba[3], 0, 1);
- this.hsla = this._rgbaToHSLA(this.rgba, this.alpha);
- } else if (match[2]) { // hsla
- this.format = WebInspector.Color.Format.HSLA;
- this.hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
- this.hsla[3] = this.alpha = this._clamp(this.hsla[3], 0, 1);
- this.rgba = this._hslaToRGBA(this.hsla, this.alpha);
- }
-
- return;
- }
-
- // Could not parse as a valid color
- throw "could not parse color";
</del><ins>+ var rgba = this._hslToRGB(hsla);
+ rgba.push(hsla[3]);
+ return rgba;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>-// Simple Values: [rgb, hsl, nickname]
-WebInspector.Color.HexTable = {
- "000000": [[0, 0, 0], [0, 0, 0], "black"],
- "000080": [[0, 0, 128], [240, 100, 25], "navy"],
- "00008B": [[0, 0, 139], [240, 100, 27], "darkBlue"],
- "0000CD": [[0, 0, 205], [240, 100, 40], "mediumBlue"],
- "0000FF": [[0, 0, 255], [240, 100, 50], "blue"],
- "006400": [[0, 100, 0], [120, 100, 20], "darkGreen"],
- "008000": [[0, 128, 0], [120, 100, 25], "green"],
- "008080": [[0, 128, 128], [180, 100, 25], "teal"],
- "008B8B": [[0, 139, 139], [180, 100, 27], "darkCyan"],
- "00BFFF": [[0, 191, 255], [195, 100, 50], "deepSkyBlue"],
- "00CED1": [[0, 206, 209], [181, 100, 41], "darkTurquoise"],
- "00FA9A": [[0, 250, 154], [157, 100, 49], "mediumSpringGreen"],
- "00FF00": [[0, 255, 0], [120, 100, 50], "lime"],
- "00FF7F": [[0, 255, 127], [150, 100, 50], "springGreen"],
- "00FFFF": [[0, 255, 255], [180, 100, 50], "cyan"],
- "191970": [[25, 25, 112], [240, 64, 27], "midnightBlue"],
- "1E90FF": [[30, 144, 255], [210, 100, 56], "dodgerBlue"],
- "20B2AA": [[32, 178, 170], [177, 70, 41], "lightSeaGreen"],
- "228B22": [[34, 139, 34], [120, 61, 34], "forestGreen"],
- "2E8B57": [[46, 139, 87], [146, 50, 36], "seaGreen"],
- "2F4F4F": [[47, 79, 79], [180, 25, 25], "darkSlateGray"],
- "32CD32": [[50, 205, 50], [120, 61, 50], "limeGreen"],
- "3CB371": [[60, 179, 113], [147, 50, 47], "mediumSeaGreen"],
- "40E0D0": [[64, 224, 208], [174, 72, 56], "turquoise"],
- "4169E1": [[65, 105, 225], [225, 73, 57], "royalBlue"],
- "4682B4": [[70, 130, 180], [207, 44, 49], "steelBlue"],
- "483D8B": [[72, 61, 139], [248, 39, 39], "darkSlateBlue"],
- "48D1CC": [[72, 209, 204], [178, 60, 55], "mediumTurquoise"],
- "4B0082": [[75, 0, 130], [275, 100, 25], "indigo"],
- "556B2F": [[85, 107, 47], [82, 39, 30], "darkOliveGreen"],
- "5F9EA0": [[95, 158, 160], [182, 25, 50], "cadetBlue"],
- "6495ED": [[100, 149, 237], [219, 79, 66], "cornflowerBlue"],
- "66CDAA": [[102, 205, 170], [160, 51, 60], "mediumAquaMarine"],
- "696969": [[105, 105, 105], [0, 0, 41], "dimGray"],
- "6A5ACD": [[106, 90, 205], [248, 53, 58], "slateBlue"],
- "6B8E23": [[107, 142, 35], [80, 60, 35], "oliveDrab"],
- "708090": [[112, 128, 144], [210, 13, 50], "slateGray"],
- "778899": [[119, 136, 153], [210, 14, 53], "lightSlateGray"],
- "7B68EE": [[123, 104, 238], [249, 80, 67], "mediumSlateBlue"],
- "7CFC00": [[124, 252, 0], [90, 100, 49], "lawnGreen"],
- "7FFF00": [[127, 255, 0], [90, 100, 50], "chartreuse"],
- "7FFFD4": [[127, 255, 212], [160, 100, 75], "aquamarine"],
- "800000": [[128, 0, 0], [0, 100, 25], "maroon"],
- "800080": [[128, 0, 128], [300, 100, 25], "purple"],
- "808000": [[128, 128, 0], [60, 100, 25], "olive"],
- "808080": [[128, 128, 128], [0, 0, 50], "gray"],
- "87CEEB": [[135, 206, 235], [197, 71, 73], "skyBlue"],
- "87CEFA": [[135, 206, 250], [203, 92, 75], "lightSkyBlue"],
- "8A2BE2": [[138, 43, 226], [271, 76, 53], "blueViolet"],
- "8B0000": [[139, 0, 0], [0, 100, 27], "darkRed"],
- "8B008B": [[139, 0, 139], [300, 100, 27], "darkMagenta"],
- "8B4513": [[139, 69, 19], [25, 76, 31], "saddleBrown"],
- "8FBC8F": [[143, 188, 143], [120, 25, 65], "darkSeaGreen"],
- "90EE90": [[144, 238, 144], [120, 73, 75], "lightGreen"],
- "9370D8": [[147, 112, 219], [260, 60, 65], "mediumPurple"],
- "9400D3": [[148, 0, 211], [282, 100, 41], "darkViolet"],
- "98FB98": [[152, 251, 152], [120, 93, 79], "paleGreen"],
- "9932CC": [[153, 50, 204], [280, 61, 50], "darkOrchid"],
- "9ACD32": [[154, 205, 50], [80, 61, 50], "yellowGreen"],
- "A0522D": [[160, 82, 45], [19, 56, 40], "sienna"],
- "A52A2A": [[165, 42, 42], [0, 59, 41], "brown"],
- "A9A9A9": [[169, 169, 169], [0, 0, 66], "darkGray"],
- "ADD8E6": [[173, 216, 230], [195, 53, 79], "lightBlue"],
- "ADFF2F": [[173, 255, 47], [84, 100, 59], "greenYellow"],
- "AFEEEE": [[175, 238, 238], [180, 65, 81], "paleTurquoise"],
- "B0C4DE": [[176, 196, 222], [214, 41, 78], "lightSteelBlue"],
- "B0E0E6": [[176, 224, 230], [187, 52, 80], "powderBlue"],
- "B22222": [[178, 34, 34], [0, 68, 42], "fireBrick"],
- "B8860B": [[184, 134, 11], [43, 89, 38], "darkGoldenrod"],
- "BA55D3": [[186, 85, 211], [288, 59, 58], "mediumOrchid"],
- "BC8F8F": [[188, 143, 143], [0, 25, 65], "rosyBrown"],
- "BDB76B": [[189, 183, 107], [56, 38, 58], "darkKhaki"],
- "C0C0C0": [[192, 192, 192], [0, 0, 75], "silver"],
- "C71585": [[199, 21, 133], [322, 81, 43], "mediumVioletRed"],
- "CD5C5C": [[205, 92, 92], [0, 53, 58], "indianRed"],
- "CD853F": [[205, 133, 63], [30, 59, 53], "peru"],
- "D2691E": [[210, 105, 30], [25, 75, 47], "chocolate"],
- "D2B48C": [[210, 180, 140], [34, 44, 69], "tan"],
- "D3D3D3": [[211, 211, 211], [0, 0, 83], "lightGrey"],
- "D87093": [[219, 112, 147], [340, 60, 65], "paleVioletRed"],
- "D8BFD8": [[216, 191, 216], [300, 24, 80], "thistle"],
- "DA70D6": [[218, 112, 214], [302, 59, 65], "orchid"],
- "DAA520": [[218, 165, 32], [43, 74, 49], "goldenrod"],
- "DC143C": [[237, 164, 61], [35, 83, 58], "crimson"],
- "DCDCDC": [[220, 220, 220], [0, 0, 86], "gainsboro"],
- "DDA0DD": [[221, 160, 221], [300, 47, 75], "plum"],
- "DEB887": [[222, 184, 135], [34, 57, 70], "burlyWood"],
- "E0FFFF": [[224, 255, 255], [180, 100, 94], "lightCyan"],
- "E6E6FA": [[230, 230, 250], [240, 67, 94], "lavender"],
- "E9967A": [[233, 150, 122], [15, 72, 70], "darkSalmon"],
- "EE82EE": [[238, 130, 238], [300, 76, 72], "violet"],
- "EEE8AA": [[238, 232, 170], [55, 67, 80], "paleGoldenrod"],
- "F08080": [[240, 128, 128], [0, 79, 72], "lightCoral"],
- "F0E68C": [[240, 230, 140], [54, 77, 75], "khaki"],
- "F0F8FF": [[240, 248, 255], [208, 100, 97], "aliceBlue"],
- "F0FFF0": [[240, 255, 240], [120, 100, 97], "honeyDew"],
- "F0FFFF": [[240, 255, 255], [180, 100, 97], "azure"],
- "F4A460": [[244, 164, 96], [28, 87, 67], "sandyBrown"],
- "F5DEB3": [[245, 222, 179], [39, 77, 83], "wheat"],
- "F5F5DC": [[245, 245, 220], [60, 56, 91], "beige"],
- "F5F5F5": [[245, 245, 245], [0, 0, 96], "whiteSmoke"],
- "F5FFFA": [[245, 255, 250], [150, 100, 98], "mintCream"],
- "F8F8FF": [[248, 248, 255], [240, 100, 99], "ghostWhite"],
- "FA8072": [[250, 128, 114], [6, 93, 71], "salmon"],
- "FAEBD7": [[250, 235, 215], [34, 78, 91], "antiqueWhite"],
- "FAF0E6": [[250, 240, 230], [30, 67, 94], "linen"],
- "FAFAD2": [[250, 250, 210], [60, 80, 90], "lightGoldenrodYellow"],
- "FDF5E6": [[253, 245, 230], [39, 85, 95], "oldLace"],
- "FF0000": [[255, 0, 0], [0, 100, 50], "red"],
- "FF00FF": [[255, 0, 255], [300, 100, 50], "magenta"],
- "FF1493": [[255, 20, 147], [328, 100, 54], "deepPink"],
- "FF4500": [[255, 69, 0], [16, 100, 50], "orangeRed"],
- "FF6347": [[255, 99, 71], [9, 100, 64], "tomato"],
- "FF69B4": [[255, 105, 180], [330, 100, 71], "hotPink"],
- "FF7F50": [[255, 127, 80], [16, 100, 66], "coral"],
- "FF8C00": [[255, 140, 0], [33, 100, 50], "darkOrange"],
- "FFA07A": [[255, 160, 122], [17, 100, 74], "lightSalmon"],
- "FFA500": [[255, 165, 0], [39, 100, 50], "orange"],
- "FFB6C1": [[255, 182, 193], [351, 100, 86], "lightPink"],
- "FFC0CB": [[255, 192, 203], [350, 100, 88], "pink"],
- "FFD700": [[255, 215, 0], [51, 100, 50], "gold"],
- "FFDAB9": [[255, 218, 185], [28, 100, 86], "peachPuff"],
- "FFDEAD": [[255, 222, 173], [36, 100, 84], "navajoWhite"],
- "FFE4B5": [[255, 228, 181], [38, 100, 85], "moccasin"],
- "FFE4C4": [[255, 228, 196], [33, 100, 88], "bisque"],
- "FFE4E1": [[255, 228, 225], [6, 100, 94], "mistyRose"],
- "FFEBCD": [[255, 235, 205], [36, 100, 90], "blanchedAlmond"],
- "FFEFD5": [[255, 239, 213], [37, 100, 92], "papayaWhip"],
- "FFF0F5": [[255, 240, 245], [340, 100, 97], "lavenderBlush"],
- "FFF5EE": [[255, 245, 238], [25, 100, 97], "seaShell"],
- "FFF8DC": [[255, 248, 220], [48, 100, 93], "cornsilk"],
- "FFFACD": [[255, 250, 205], [54, 100, 90], "lemonChiffon"],
- "FFFAF0": [[255, 250, 240], [40, 100, 97], "floralWhite"],
- "FFFAFA": [[255, 250, 250], [0, 100, 99], "snow"],
- "FFFF00": [[255, 255, 0], [60, 100, 50], "yellow"],
- "FFFFE0": [[255, 255, 224], [60, 100, 94], "lightYellow"],
- "FFFFF0": [[255, 255, 240], [60, 100, 97], "ivory"],
- "FFFFFF": [[255, 255, 255], [0, 100, 100], "white"]
-};
-
-// Simple Values
</del><span class="cx"> WebInspector.Color.Nicknames = {
</span><del>- "aliceblue": "F0F8FF",
- "antiquewhite": "FAEBD7",
- "aqua": "00FFFF",
- "aquamarine": "7FFFD4",
- "azure": "F0FFFF",
- "beige": "F5F5DC",
- "bisque": "FFE4C4",
- "black": "000000",
- "blanchedalmond": "FFEBCD",
- "blue": "0000FF",
- "blueviolet": "8A2BE2",
- "brown": "A52A2A",
- "burlywood": "DEB887",
- "cadetblue": "5F9EA0",
- "chartreuse": "7FFF00",
- "chocolate": "D2691E",
- "coral": "FF7F50",
- "cornflowerblue": "6495ED",
- "cornsilk": "FFF8DC",
- "crimson": "DC143C",
- "cyan": "00FFFF",
- "darkblue": "00008B",
- "darkcyan": "008B8B",
- "darkgoldenrod": "B8860B",
- "darkgray": "A9A9A9",
- "darkgreen": "006400",
- "darkkhaki": "BDB76B",
- "darkmagenta": "8B008B",
- "darkolivegreen": "556B2F",
- "darkorange": "FF8C00",
- "darkorchid": "9932CC",
- "darkred": "8B0000",
- "darksalmon": "E9967A",
- "darkseagreen": "8FBC8F",
- "darkslateblue": "483D8B",
- "darkslategray": "2F4F4F",
- "darkturquoise": "00CED1",
- "darkviolet": "9400D3",
- "deeppink": "FF1493",
- "deepskyblue": "00BFFF",
- "dimgray": "696969",
- "dodgerblue": "1E90FF",
- "firebrick": "B22222",
- "floralwhite": "FFFAF0",
- "forestgreen": "228B22",
- "fuchsia": "FF00FF",
- "gainsboro": "DCDCDC",
- "ghostwhite": "F8F8FF",
- "gold": "FFD700",
- "goldenrod": "DAA520",
- "gray": "808080",
- "green": "008000",
- "greenyellow": "ADFF2F",
- "honeydew": "F0FFF0",
- "hotpink": "FF69B4",
- "indianred": "CD5C5C",
- "indigo": "4B0082",
- "ivory": "FFFFF0",
- "khaki": "F0E68C",
- "lavender": "E6E6FA",
- "lavenderblush": "FFF0F5",
- "lawngreen": "7CFC00",
- "lemonchiffon": "FFFACD",
- "lightblue": "ADD8E6",
- "lightcoral": "F08080",
- "lightcyan": "E0FFFF",
- "lightgoldenrodyellow": "FAFAD2",
- "lightgreen": "90EE90",
- "lightgrey": "D3D3D3",
- "lightpink": "FFB6C1",
- "lightsalmon": "FFA07A",
- "lightseagreen": "20B2AA",
- "lightskyblue": "87CEFA",
- "lightslategray": "778899",
- "lightsteelblue": "B0C4DE",
- "lightyellow": "FFFFE0",
- "lime": "00FF00",
- "limegreen": "32CD32",
- "linen": "FAF0E6",
- "magenta": "FF00FF",
- "maroon": "800000",
- "mediumaquamarine": "66CDAA",
- "mediumblue": "0000CD",
- "mediumorchid": "BA55D3",
- "mediumpurple": "9370DB",
- "mediumseagreen": "3CB371",
- "mediumslateblue": "7B68EE",
- "mediumspringgreen": "00FA9A",
- "mediumturquoise": "48D1CC",
- "mediumvioletred": "C71585",
- "midnightblue": "191970",
- "mintcream": "F5FFFA",
- "mistyrose": "FFE4E1",
- "moccasin": "FFE4B5",
- "navajowhite": "FFDEAD",
- "navy": "000080",
- "oldlace": "FDF5E6",
- "olive": "808000",
- "olivedrab": "6B8E23",
- "orange": "FFA500",
- "orangered": "FF4500",
- "orchid": "DA70D6",
- "palegoldenrod": "EEE8AA",
- "palegreen": "98FB98",
- "paleturquoise": "AFEEEE",
- "palevioletred": "DB7093",
- "papayawhip": "FFEFD5",
- "peachpuff": "FFDAB9",
- "peru": "CD853F",
- "pink": "FFC0CB",
- "plum": "DDA0DD",
- "powderblue": "B0E0E6",
- "purple": "800080",
- "red": "FF0000",
- "rosybrown": "BC8F8F",
- "royalblue": "4169E1",
- "saddlebrown": "8B4513",
- "salmon": "FA8072",
- "sandybrown": "F4A460",
- "seagreen": "2E8B57",
- "seashell": "FFF5EE",
- "sienna": "A0522D",
- "silver": "C0C0C0",
- "skyblue": "87CEEB",
- "slateblue": "6A5ACD",
- "slategray": "708090",
- "snow": "FFFAFA",
- "springgreen": "00FF7F",
- "steelblue": "4682B4",
- "tan": "D2B48C",
- "teal": "008080",
- "thistle": "D8BFD8",
- "tomato": "FF6347",
- "turquoise": "40E0D0",
- "violet": "EE82EE",
- "wheat": "F5DEB3",
- "white": "FFFFFF",
- "whitesmoke": "F5F5F5",
- "yellow": "FFFF00",
- "yellowgreen": "9ACD32"
</del><ins>+ "aliceblue": [240, 248, 255],
+ "antiquewhite": [250, 235, 215],
+ "aquamarine": [127, 255, 212],
+ "azure": [240, 255, 255],
+ "beige": [245, 245, 220],
+ "bisque": [255, 228, 196],
+ "black": [0, 0, 0],
+ "blanchedalmond": [255, 235, 205],
+ "blue": [0, 0, 255],
+ "blueviolet": [138, 43, 226],
+ "brown": [165, 42, 42],
+ "burlywood": [222, 184, 135],
+ "cadetblue": [95, 158, 160],
+ "chartreuse": [127, 255, 0],
+ "chocolate": [210, 105, 30],
+ "coral": [255, 127, 80],
+ "cornflowerblue": [100, 149, 237],
+ "cornsilk": [255, 248, 220],
+ "crimson": [237, 164, 61],
+ "cyan": [0, 255, 255],
+ "darkblue": [0, 0, 139],
+ "darkcyan": [0, 139, 139],
+ "darkgoldenrod": [184, 134, 11],
+ "darkgray": [169, 169, 169],
+ "darkgreen": [0, 100, 0],
+ "darkkhaki": [189, 183, 107],
+ "darkmagenta": [139, 0, 139],
+ "darkolivegreen": [85, 107, 47],
+ "darkorange": [255, 140, 0],
+ "darkorchid": [153, 50, 204],
+ "darkred": [139, 0, 0],
+ "darksalmon": [233, 150, 122],
+ "darkseagreen": [143, 188, 143],
+ "darkslateblue": [72, 61, 139],
+ "darkslategray": [47, 79, 79],
+ "darkturquoise": [0, 206, 209],
+ "darkviolet": [148, 0, 211],
+ "deeppink": [255, 20, 147],
+ "deepskyblue": [0, 191, 255],
+ "dimgray": [105, 105, 105],
+ "dodgerblue": [30, 144, 255],
+ "firebrick": [178, 34, 34],
+ "floralwhite": [255, 250, 240],
+ "forestgreen": [34, 139, 34],
+ "gainsboro": [220, 220, 220],
+ "ghostwhite": [248, 248, 255],
+ "gold": [255, 215, 0],
+ "goldenrod": [218, 165, 32],
+ "gray": [128, 128, 128],
+ "green": [0, 128, 0],
+ "greenyellow": [173, 255, 47],
+ "honeydew": [240, 255, 240],
+ "hotpink": [255, 105, 180],
+ "indianred": [205, 92, 92],
+ "indigo": [75, 0, 130],
+ "ivory": [255, 255, 240],
+ "khaki": [240, 230, 140],
+ "lavender": [230, 230, 250],
+ "lavenderblush": [255, 240, 245],
+ "lawngreen": [124, 252, 0],
+ "lemonchiffon": [255, 250, 205],
+ "lightblue": [173, 216, 230],
+ "lightcoral": [240, 128, 128],
+ "lightcyan": [224, 255, 255],
+ "lightgoldenrodyellow": [250, 250, 210],
+ "lightgreen": [144, 238, 144],
+ "lightgrey": [211, 211, 211],
+ "lightpink": [255, 182, 193],
+ "lightsalmon": [255, 160, 122],
+ "lightseagreen": [32, 178, 170],
+ "lightskyblue": [135, 206, 250],
+ "lightslategray": [119, 136, 153],
+ "lightsteelblue": [176, 196, 222],
+ "lightyellow": [255, 255, 224],
+ "lime": [0, 255, 0],
+ "limegreen": [50, 205, 50],
+ "linen": [250, 240, 230],
+ "magenta": [255, 0, 255],
+ "maroon": [128, 0, 0],
+ "mediumaquamarine": [102, 205, 170],
+ "mediumblue": [0, 0, 205],
+ "mediumorchid": [186, 85, 211],
+ "mediumpurple": [147, 112, 219],
+ "mediumseagreen": [60, 179, 113],
+ "mediumslateblue": [123, 104, 238],
+ "mediumspringgreen": [0, 250, 154],
+ "mediumturquoise": [72, 209, 204],
+ "mediumvioletred": [199, 21, 133],
+ "midnightblue": [25, 25, 112],
+ "mintcream": [245, 255, 250],
+ "mistyrose": [255, 228, 225],
+ "moccasin": [255, 228, 181],
+ "navajowhite": [255, 222, 173],
+ "navy": [0, 0, 128],
+ "oldlace": [253, 245, 230],
+ "olive": [128, 128, 0],
+ "olivedrab": [107, 142, 35],
+ "orange": [255, 165, 0],
+ "orangered": [255, 69, 0],
+ "orchid": [218, 112, 214],
+ "palegoldenrod": [238, 232, 170],
+ "palegreen": [152, 251, 152],
+ "paleturquoise": [175, 238, 238],
+ "palevioletred": [219, 112, 147],
+ "papayawhip": [255, 239, 213],
+ "peachpuff": [255, 218, 185],
+ "peru": [205, 133, 63],
+ "pink": [255, 192, 203],
+ "plum": [221, 160, 221],
+ "powderblue": [176, 224, 230],
+ "purple": [128, 0, 128],
+ "red": [255, 0, 0],
+ "rosybrown": [188, 143, 143],
+ "royalblue": [65, 105, 225],
+ "saddlebrown": [139, 69, 19],
+ "salmon": [250, 128, 114],
+ "sandybrown": [244, 164, 96],
+ "seagreen": [46, 139, 87],
+ "seashell": [255, 245, 238],
+ "sienna": [160, 82, 45],
+ "silver": [192, 192, 192],
+ "skyblue": [135, 206, 235],
+ "slateblue": [106, 90, 205],
+ "slategray": [112, 128, 144],
+ "snow": [255, 250, 250],
+ "springgreen": [0, 255, 127],
+ "steelblue": [70, 130, 180],
+ "tan": [210, 180, 140],
+ "teal": [0, 128, 128],
+ "thistle": [216, 191, 216],
+ "tomato": [255, 99, 71],
+ "turquoise": [64, 224, 208],
+ "violet": [238, 130, 238],
+ "wheat": [245, 222, 179],
+ "white": [255, 255, 255],
+ "whitesmoke": [245, 245, 245],
+ "yellow": [255, 255, 0],
+ "yellowgreen": [154, 205, 50]
</ins><span class="cx"> };
</span><span class="cx">
</span><del>-// Advanced Values [rgba, hsla, nickname]
-WebInspector.Color.AdvancedNickNames = {
- "transparent": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
- "rgba(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
- "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
-};
-
</del><span class="cx"> WebInspector.Color.rgb2hsv = function(r, g, b)
</span><span class="cx"> {
</span><span class="cx"> r /= 255;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js (160131 => 160132)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js 2013-12-04 23:07:04 UTC (rev 160131)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorPicker.js 2013-12-04 23:16:59 UTC (rev 160132)
</span><span class="lines">@@ -95,10 +95,12 @@
</span><span class="cx"> {
</span><span class="cx"> this._dontUpdateColor = true;
</span><span class="cx">
</span><ins>+ this._colorFormat = color.format;
+
</ins><span class="cx"> this._colorWheel.tintedColor = color;
</span><span class="cx"> this._brightnessSlider.value = this._colorWheel.brightness;
</span><span class="cx">
</span><del>- this._opacitySlider.value = isNaN(color.alpha) ? 1 : color.alpha;
</del><ins>+ this._opacitySlider.value = color.alpha;
</ins><span class="cx"> this._updateSliders(this._colorWheel.rawColor, color);
</span><span class="cx">
</span><span class="cx"> delete this._dontUpdateColor;
</span><span class="lines">@@ -125,15 +127,15 @@
</span><span class="cx"> if (this._dontUpdateColor)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var rgb = this._colorWheel.tintedColor.rgb;
- this._color = WebInspector.Color.fromRGBA(rgb[0], rgb[1], rgb[2], this._opacity).toString();
</del><ins>+ var rgba = this._colorWheel.tintedColor.rgb.concat(this._opacity);
+ this._color = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgba).toString(this._colorFormat);
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
</span><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _updateSliders: function(rawColor, tintedColor)
</span><span class="cx"> {
</span><del>- var rgb = this._colorWheel.tintedColor.rgb;
- var transparent = WebInspector.Color.fromRGBA(rgb[0], rgb[1], rgb[2], 0).toString();
</del><ins>+ var rgba = this._colorWheel.tintedColor.rgb.concat(0);
+ var transparent = new WebInspector.Color(WebInspector.Color.Format.RGBA, rgba).toString();
</ins><span class="cx">
</span><span class="cx"> this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + tintedColor + "), " + this._opacityPattern;
</span><span class="cx"> this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceColorWheeljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js (160131 => 160132)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js 2013-12-04 23:07:04 UTC (rev 160131)
+++ trunk/Source/WebInspectorUI/UserInterface/ColorWheel.js 2013-12-04 23:16:59 UTC (rev 160132)
</span><span class="lines">@@ -240,11 +240,12 @@
</span><span class="cx"> var s = Math.max(0, distance) / center;
</span><span class="cx">
</span><span class="cx"> var rgb = WebInspector.Color.hsv2rgb(h, s, v);
</span><del>- return WebInspector.Color.fromRGB(
</del><ins>+ return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
</ins><span class="cx"> Math.round(rgb[0] * 255),
</span><span class="cx"> Math.round(rgb[1] * 255),
</span><del>- Math.round(rgb[2] * 255)
- );
</del><ins>+ Math.round(rgb[2] * 255),
+ 1
+ ]);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _drawTintedCanvas: function()
</span></span></pre>
</div>
</div>
</body>
</html>