<!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>[194568] trunk</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/194568">194568</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-01-04 17:48:00 -0800 (Mon, 04 Jan 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: add context menu items to switch CSS color property value syntax between RGB, HSL, etc
https://bugs.webkit.org/show_bug.cgi?id=151918
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2016-01-04
Reviewed by Timothy Hatcher.
Source/WebInspectorUI:
Created a ColorSwatch class to hold all functionality for color swatches,
allowing all context menu and popover events to be centralized.
* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Main.html:
* UserInterface/Models/Color.js:
Changed all 'var' to 'let' and 'nickname' to 'keyword' as per the spec.
Mostly mechanical changes.
(WebInspector.Color.prototype.isKeyword):
Looks at the RGB values of each keyword to see if the current color
matches any of them.
(WebInspector.Color.prototype.canBeSerializedAsShortHEX):
Fixed to account for alpha values, since HEXAlpha is now supported.
* UserInterface/Views/CSSStyleDeclarationTextEditor.css:
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch): Deleted.
(@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span): Deleted.
(.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span): Deleted.
* UserInterface/Views/CSSStyleDeclarationTextEditor.js:
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged):
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked.updateCodeMirror.update): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked.updateCodeMirror): Deleted.
(WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked): Deleted.
* UserInterface/Views/ColorSwatch.css: Copied from Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css.
(.color-swatch):
(@media (-webkit-max-device-pixel-ratio: 1)):
(.color-swatch > span):
(.color-swatch:hover > span):
(.color-swatch:active > span):
* UserInterface/Views/ColorSwatch.js: Added.
(WebInspector.ColorSwatch):
(WebInspector.ColorSwatch.prototype.get element):
(WebInspector.ColorSwatch.prototype.set color):
(WebInspector.ColorSwatch.prototype.get color):
(WebInspector.ColorSwatch.prototype._colorSwatchClicked):
(WebInspector.ColorSwatch.prototype._colorPickerColorDidChange):
(WebInspector.ColorSwatch.prototype._handleContextMenuEvent):
(WebInspector.ColorSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
(WebInspector.ColorSwatch.prototype._getNextValidHEXFormat):
Loops through the list of HEX formats to find the first format that is valid
for the current color in the list after the current format.
(WebInspector.ColorSwatch.prototype._updateSwatch):
* UserInterface/Views/VisualStyleColorPicker.css:
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch):
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span):
* UserInterface/Views/VisualStyleColorPicker.js:
(WebInspector.VisualStyleColorPicker):
(WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
(WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
(WebInspector.VisualStyleColorPicker.prototype._colorSwatchClicked): Deleted.
(WebInspector.VisualStyleColorPicker.prototype._colorPickerColorDidChange): Deleted.
LayoutTests:
* inspector/model/color-expected.html:
* inspector/model/color.html:
Changed "nickname" to "keyword".</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectormodelcolorexpectedtxt">trunk/LayoutTests/inspector/model/color-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectormodelcolorhtml">trunk/LayoutTests/inspector/model/color.html</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsColorjs">trunk/Source/WebInspectorUI/UserInterface/Models/Color.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchcss">trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchjs">trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/LayoutTests/ChangeLog 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2016-01-04 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: add context menu items to switch CSS color property value syntax between RGB, HSL, etc
+ https://bugs.webkit.org/show_bug.cgi?id=151918
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/model/color-expected.html:
+ * inspector/model/color.html:
+ Changed "nickname" to "keyword".
+
</ins><span class="cx"> 2016-01-04 Brady Eidson <beidson@apple.com>
</span><span class="cx">
</span><span class="cx"> Modern IDB: Memory indexes aren't deleted when their owning memory object stores are deleted.
</span></span></pre></div>
<a id="trunkLayoutTestsinspectormodelcolorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/model/color-expected.txt (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/model/color-expected.txt 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/LayoutTests/inspector/model/color-expected.txt 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -52,17 +52,17 @@
</span><span class="cx"> PASS: 'hsla( 0 , 0% , 50% , 0.5 )' should be detected
</span><span class="cx"> PASS: 'hsla( 0 , 0% , 50% , 0.5 )' was the expected 'HSLA' format
</span><span class="cx"> PASS: 'blue' should be detected
</span><del>-PASS: 'blue' was the expected 'Nickname' format
</del><ins>+PASS: 'blue' was the expected 'Keyword' format
</ins><span class="cx"> PASS: 'BLuE' should be detected
</span><del>-PASS: 'BLuE' was the expected 'Nickname' format
</del><ins>+PASS: 'BLuE' was the expected 'Keyword' format
</ins><span class="cx"> PASS: 'midnightblue' should be detected
</span><del>-PASS: 'midnightblue' was the expected 'Nickname' format
</del><ins>+PASS: 'midnightblue' was the expected 'Keyword' format
</ins><span class="cx"> PASS: 'royalblue' should be detected
</span><del>-PASS: 'royalblue' was the expected 'Nickname' format
</del><ins>+PASS: 'royalblue' was the expected 'Keyword' format
</ins><span class="cx"> PASS: 'steelblue' should be detected
</span><del>-PASS: 'steelblue' was the expected 'Nickname' format
</del><ins>+PASS: 'steelblue' was the expected 'Keyword' format
</ins><span class="cx"> PASS: 'transparent' should be detected
</span><del>-PASS: 'transparent' was the expected 'Nickname' format
</del><ins>+PASS: 'transparent' was the expected 'Keyword' format
</ins><span class="cx">
</span><span class="cx"> PASS: ' #000 ' should not be detected
</span><span class="cx"> PASS: '#rgb' should not be detected
</span><span class="lines">@@ -80,16 +80,26 @@
</span><span class="cx"> -- Running test case: WebInspector.Color properties
</span><span class="cx"> PASS: 'red' should have alpha of 1.
</span><span class="cx"> PASS: 'red' should be simple.
</span><ins>+PASS: 'red' should be a keyword.
</ins><span class="cx"> PASS: 'red' has rgb of [255, 0, 0].
</span><span class="cx"> PASS: 'red' has rgba of [255, 0, 0, 1].
</span><span class="cx"> PASS: 'red' has hsl of [0, 100, 50].
</span><span class="cx"> PASS: 'red' has hsla of [0, 100, 50, 1].
</span><ins>+PASS: 'red' should be serializable as a short Hex
</ins><span class="cx"> PASS: 'transparent' should have alpha of 0.
</span><del>-PASS: 'transparent' should be not be simple.
</del><ins>+PASS: 'transparent' should not be simple.
+PASS: 'transparent' should be a keyword.
</ins><span class="cx"> PASS: 'transparent' has rgb of [0, 0, 0].
</span><span class="cx"> PASS: 'transparent' has rgba of [0, 0, 0, 0].
</span><span class="cx"> PASS: 'transparent' has hsl of [0, 0, 0].
</span><span class="cx"> PASS: 'transparent' has hsla of [0, 0, 0, 0].
</span><ins>+PASS: 'transparent' should be serializable as a short Hex
+PASS: '#11122233' should not have alpha of 0.
+PASS: '#11122233' should be not be simple.
+PASS: '#11122233' should not be a keyword.
+PASS: '#11122233' has rgba of [17, 18, 34, 0.2].
+PASS: '#11122233' has hsla of [236, 33, 10, 0.2].
+PASS: '#11122233' should not be serializable as a short Hex
</ins><span class="cx">
</span><span class="cx"> -- Running test case: WebInspector.Color.prototype.nextFormat
</span><span class="cx"> PASS: All format phases of 'transparent' should be as expected.
</span><span class="lines">@@ -99,7 +109,7 @@
</span><span class="cx">
</span><span class="cx"> -- Running test case: WebInspector.Color.prototype.toString
</span><span class="cx"> PASS: Color as 'Original' should be 'RED'
</span><del>-PASS: Color as 'Nickname' should be 'red'
</del><ins>+PASS: Color as 'Keyword' should be 'red'
</ins><span class="cx"> PASS: Color as 'Short HEX' should be '#f00'
</span><span class="cx"> PASS: Color as 'HEX' should be '#ff0000'
</span><span class="cx"> PASS: Color as 'Short HEX with Alpha' should be '#f00f'
</span><span class="lines">@@ -109,7 +119,7 @@
</span><span class="cx"> PASS: Color as 'HSL' should be 'hsl(0, 100%, 50%)'
</span><span class="cx"> PASS: Color as 'HSLA' should be 'hsla(0, 100%, 50%, 1)'
</span><span class="cx"> PASS: Color as 'Original' should be 'rgba(100, 200, 255, 0.5)'
</span><del>-PASS: Color as 'Nickname' should be 'rgba(100, 200, 255, 0.5)'
</del><ins>+PASS: Color as 'Keyword' should be 'rgba(100, 200, 255, 0.5)'
</ins><span class="cx"> PASS: Color as 'Short HEX' should be 'rgba(100, 200, 255, 0.5)'
</span><span class="cx"> PASS: Color as 'HEX' should be 'rgba(100, 200, 255, 0.5)'
</span><span class="cx"> PASS: Color as 'Short HEX with Alpha' should be '#64c8ff80'
</span></span></pre></div>
<a id="trunkLayoutTestsinspectormodelcolorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/model/color.html (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/model/color.html 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/LayoutTests/inspector/model/color.html 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -9,8 +9,8 @@
</span><span class="cx"> switch (format) {
</span><span class="cx"> case WebInspector.Color.Format.Original:
</span><span class="cx"> return "Original";
</span><del>- case WebInspector.Color.Format.Nickname:
- return "Nickname";
</del><ins>+ case WebInspector.Color.Format.Keyword:
+ return "Keyword";
</ins><span class="cx"> case WebInspector.Color.Format.HEX:
</span><span class="cx"> return "HEX";
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><span class="lines">@@ -80,12 +80,12 @@
</span><span class="cx"> testGood("hsla(999, 999%, 999%, 999)", WebInspector.Color.Format.HSLA);
</span><span class="cx"> testGood("hsla( 0 , 0% , 50% , 0.5 )", WebInspector.Color.Format.HSLA);
</span><span class="cx">
</span><del>- testGood("blue", WebInspector.Color.Format.Nickname);
- testGood("BLuE", WebInspector.Color.Format.Nickname);
- testGood("midnightblue", WebInspector.Color.Format.Nickname);
- testGood("royalblue", WebInspector.Color.Format.Nickname);
- testGood("steelblue", WebInspector.Color.Format.Nickname);
- testGood("transparent", WebInspector.Color.Format.Nickname);
</del><ins>+ testGood("blue", WebInspector.Color.Format.Keyword);
+ testGood("BLuE", WebInspector.Color.Format.Keyword);
+ testGood("midnightblue", WebInspector.Color.Format.Keyword);
+ testGood("royalblue", WebInspector.Color.Format.Keyword);
+ testGood("steelblue", WebInspector.Color.Format.Keyword);
+ testGood("transparent", WebInspector.Color.Format.Keyword);
</ins><span class="cx">
</span><span class="cx"> InspectorTest.log("");
</span><span class="cx">
</span><span class="lines">@@ -100,7 +100,7 @@
</span><span class="cx"> testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values
</span><span class="cx"> testBad("hsl(0, 0%, 50%, 1)"); // extra value
</span><span class="cx"> testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
</span><del>- testBad("superblue"); // not a nickname
</del><ins>+ testBad("superblue"); // not a keyword
</ins><span class="cx">
</span><span class="cx"> // FIXME: currentColor?
</span><span class="cx"> // FIXME: Should we consider missing %s as bad? Currently we just strip them.
</span><span class="lines">@@ -132,19 +132,31 @@
</span><span class="cx"> color = WebInspector.Color.fromString("red");
</span><span class="cx"> InspectorTest.expectThat(color.alpha === 1, "'red' should have alpha of 1.");
</span><span class="cx"> InspectorTest.expectThat(color.simple === true, "'red' should be simple.");
</span><ins>+ InspectorTest.expectThat(color.isKeyword() === true, "'red' should be a keyword.");
</ins><span class="cx"> InspectorTest.expectThat(shallowEqual(color.rgb, [255, 0, 0]), "'red' has rgb of [255, 0, 0].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.rgba, [255, 0, 0, 1]), "'red' has rgba of [255, 0, 0, 1].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.hsl, [0, 100, 50]), "'red' has hsl of [0, 100, 50].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.hsla, [0, 100, 50, 1]), "'red' has hsla of [0, 100, 50, 1].");
</span><ins>+ InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'red' should be serializable as a short Hex");
</ins><span class="cx">
</span><span class="cx"> color = WebInspector.Color.fromString("transparent");
</span><span class="cx"> InspectorTest.expectThat(color.alpha === 0, "'transparent' should have alpha of 0.");
</span><del>- InspectorTest.expectThat(color.simple === false, "'transparent' should be not be simple.");
</del><ins>+ InspectorTest.expectThat(color.simple === false, "'transparent' should not be simple.");
+ InspectorTest.expectThat(color.isKeyword() === true, "'transparent' should be a keyword.");
</ins><span class="cx"> InspectorTest.expectThat(shallowEqual(color.rgb, [0, 0, 0]), "'transparent' has rgb of [0, 0, 0].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.rgba, [0, 0, 0, 0]), "'transparent' has rgba of [0, 0, 0, 0].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.hsl, [0, 0, 0]), "'transparent' has hsl of [0, 0, 0].");
</span><span class="cx"> InspectorTest.expectThat(shallowEqual(color.hsla, [0, 0, 0, 0]), "'transparent' has hsla of [0, 0, 0, 0].");
</span><ins>+ InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'transparent' should be serializable as a short Hex");
</ins><span class="cx">
</span><ins>+ color = WebInspector.Color.fromString("#11122233");
+ InspectorTest.expectThat(color.alpha !== 0, "'#11122233' should not have alpha of 0.");
+ InspectorTest.expectThat(color.simple === false, "'#11122233' should be not be simple.");
+ InspectorTest.expectThat(color.isKeyword() === false, "'#11122233' should not be a keyword.");
+ InspectorTest.expectThat(shallowEqual(color.rgba, [17, 18, 34, 0.2]), "'#11122233' has rgba of [17, 18, 34, 0.2].");
+ InspectorTest.expectThat(shallowEqual(color.hsla, [236, 33, 10, 0.2]), "'#11122233' has hsla of [236, 33, 10, 0.2].");
+ InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11122233' should not be serializable as a short Hex");
+
</ins><span class="cx"> resolve();
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="lines">@@ -172,7 +184,7 @@
</span><span class="cx"> test("transparent", [
</span><span class="cx"> WebInspector.Color.Format.RGBA,
</span><span class="cx"> WebInspector.Color.Format.HSLA,
</span><del>- WebInspector.Color.Format.Nickname,
</del><ins>+ WebInspector.Color.Format.Keyword,
</ins><span class="cx"> WebInspector.Color.Format.ShortHEXAlpha,
</span><span class="cx"> WebInspector.Color.Format.HEXAlpha,
</span><span class="cx"> WebInspector.Color.Format.Original,
</span><span class="lines">@@ -182,13 +194,13 @@
</span><span class="cx"> test("red", [
</span><span class="cx"> WebInspector.Color.Format.RGB,
</span><span class="cx"> WebInspector.Color.Format.HSL,
</span><del>- WebInspector.Color.Format.Nickname,
</del><ins>+ WebInspector.Color.Format.Keyword,
</ins><span class="cx"> WebInspector.Color.Format.ShortHEX,
</span><span class="cx"> WebInspector.Color.Format.HEX,
</span><span class="cx"> WebInspector.Color.Format.Original,
</span><span class="cx"> ]);
</span><span class="cx">
</span><del>- // No short hex or nickname.
</del><ins>+ // No short hex or keyword.
</ins><span class="cx"> test("rgb(100, 150, 200)", [
</span><span class="cx"> WebInspector.Color.Format.RGB,
</span><span class="cx"> WebInspector.Color.Format.HSL,
</span><span class="lines">@@ -196,7 +208,7 @@
</span><span class="cx"> WebInspector.Color.Format.Original,
</span><span class="cx"> ]);
</span><span class="cx">
</span><del>- // No short hex alpha or nickname.
</del><ins>+ // No short hex alpha or keyword.
</ins><span class="cx"> test("rgba(100, 150, 200, 0.5)", [
</span><span class="cx"> WebInspector.Color.Format.RGBA,
</span><span class="cx"> WebInspector.Color.Format.HSLA,
</span><span class="lines">@@ -222,7 +234,7 @@
</span><span class="cx"> // A color with all formats.
</span><span class="cx"> color = WebInspector.Color.fromString("RED");
</span><span class="cx"> test("RED", WebInspector.Color.Format.Original);
</span><del>- test("red", WebInspector.Color.Format.Nickname);
</del><ins>+ test("red", WebInspector.Color.Format.Keyword);
</ins><span class="cx"> test("#f00", WebInspector.Color.Format.ShortHEX);
</span><span class="cx"> test("#ff0000", WebInspector.Color.Format.HEX);
</span><span class="cx"> test("#f00f", WebInspector.Color.Format.ShortHEXAlpha);
</span><span class="lines">@@ -235,7 +247,7 @@
</span><span class="cx"> // A color which cannot be some formats, those fallback to something else.
</span><span class="cx"> color = WebInspector.Color.fromString("rGbA( 100, 200, 255, 0.5 )");
</span><span class="cx"> test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Original); // Original text ignored for some formats.
</span><del>- test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Nickname); // fallback (rgba)
</del><ins>+ test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.Keyword); // fallback (rgba)
</ins><span class="cx"> test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.ShortHEX); // fallback (rgba)
</span><span class="cx"> test("rgba(100, 200, 255, 0.5)", WebInspector.Color.Format.HEX); // fallback (rgba)
</span><span class="cx"> test("#64c8ff80", WebInspector.Color.Format.ShortHEXAlpha); // fallback (hex alpha)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -1,3 +1,76 @@
</span><ins>+2016-01-04 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: add context menu items to switch CSS color property value syntax between RGB, HSL, etc
+ https://bugs.webkit.org/show_bug.cgi?id=151918
+
+ Reviewed by Timothy Hatcher.
+
+ Created a ColorSwatch class to hold all functionality for color swatches,
+ allowing all context menu and popover events to be centralized.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Main.html:
+
+ * UserInterface/Models/Color.js:
+ Changed all 'var' to 'let' and 'nickname' to 'keyword' as per the spec.
+ Mostly mechanical changes.
+
+ (WebInspector.Color.prototype.isKeyword):
+ Looks at the RGB values of each keyword to see if the current color
+ matches any of them.
+
+ (WebInspector.Color.prototype.canBeSerializedAsShortHEX):
+ Fixed to account for alpha values, since HEXAlpha is now supported.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.css:
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch): Deleted.
+ (@media (-webkit-max-device-pixel-ratio: 1)): Deleted.
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span): Deleted.
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span): Deleted.
+ (.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span): Deleted.
+
+ * UserInterface/Views/CSSStyleDeclarationTextEditor.js:
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._createColorSwatches):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged.update):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchColorChanged):
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked.updateCodeMirror.update): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked.updateCodeMirror): Deleted.
+ (WebInspector.CSSStyleDeclarationTextEditor.prototype._colorSwatchClicked): Deleted.
+
+ * UserInterface/Views/ColorSwatch.css: Copied from Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css.
+ (.color-swatch):
+ (@media (-webkit-max-device-pixel-ratio: 1)):
+ (.color-swatch > span):
+ (.color-swatch:hover > span):
+ (.color-swatch:active > span):
+
+ * UserInterface/Views/ColorSwatch.js: Added.
+ (WebInspector.ColorSwatch):
+ (WebInspector.ColorSwatch.prototype.get element):
+ (WebInspector.ColorSwatch.prototype.set color):
+ (WebInspector.ColorSwatch.prototype.get color):
+ (WebInspector.ColorSwatch.prototype._colorSwatchClicked):
+ (WebInspector.ColorSwatch.prototype._colorPickerColorDidChange):
+ (WebInspector.ColorSwatch.prototype._handleContextMenuEvent):
+ (WebInspector.ColorSwatch.prototype._getNextValidHEXFormat.hexMatchesCurrentColor):
+ (WebInspector.ColorSwatch.prototype._getNextValidHEXFormat):
+ Loops through the list of HEX formats to find the first format that is valid
+ for the current color in the list after the current format.
+
+ (WebInspector.ColorSwatch.prototype._updateSwatch):
+
+ * UserInterface/Views/VisualStyleColorPicker.css:
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch):
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span):
+
+ * UserInterface/Views/VisualStyleColorPicker.js:
+ (WebInspector.VisualStyleColorPicker):
+ (WebInspector.VisualStyleColorPicker.prototype._colorSwatchColorChanged):
+ (WebInspector.VisualStyleColorPicker.prototype._updateColorSwatch):
+ (WebInspector.VisualStyleColorPicker.prototype._colorSwatchClicked): Deleted.
+ (WebInspector.VisualStyleColorPicker.prototype._colorPickerColorDidChange): Deleted.
+
</ins><span class="cx"> 2016-01-04 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Mark last parameter of webkitGetUserMedia as non-optional to match updated IDL
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -299,6 +299,15 @@
</span><span class="cx"> localizedStrings["Fonts"] = "Fonts";
</span><span class="cx"> localizedStrings["Forced Layout"] = "Forced Layout";
</span><span class="cx"> localizedStrings["Forced Pseudo-Classes"] = "Forced Pseudo-Classes";
</span><ins>+localizedStrings["Format: HSL"] = "Format: HSL";
+localizedStrings["Format: HSLA"] = "Format: HSLA";
+localizedStrings["Format: Hex"] = "Format: Hex";
+localizedStrings["Format: Hex with Alpha"] = "Format: Hex with Alpha";
+localizedStrings["Format: Keyword"] = "Format: Keyword";
+localizedStrings["Format: RGB"] = "Format: RGB";
+localizedStrings["Format: RGBA"] = "Format: RGBA";
+localizedStrings["Format: Short Hex"] = "Format: Short Hex";
+localizedStrings["Format: Short Hex with Alpha"] = "Format: Short Hex with Alpha";
</ins><span class="cx"> localizedStrings["Forward (%s)"] = "Forward (%s)";
</span><span class="cx"> localizedStrings["Fragment"] = "Fragment";
</span><span class="cx"> localizedStrings["Frame %d"] = "Frame %d";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -48,6 +48,7 @@
</span><span class="cx"> <link rel="stylesheet" href="Views/ClusterContentView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/CodeMirrorOverrides.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ColorPicker.css">
</span><ins>+ <link rel="stylesheet" href="Views/ColorSwatch.css">
</ins><span class="cx"> <link rel="stylesheet" href="Views/ColorWheel.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/CompletionSuggestionsView.css">
</span><span class="cx"> <link rel="stylesheet" href="Views/ComputedStyleDetailsPanel.css">
</span><span class="lines">@@ -435,6 +436,7 @@
</span><span class="cx"> <script src="Views/CodeMirrorFormatters.js"></script>
</span><span class="cx"> <script src="Views/CodeMirrorTextMarkers.js"></script>
</span><span class="cx"> <script src="Views/ColorPicker.js"></script>
</span><ins>+ <script src="Views/ColorSwatch.js"></script>
</ins><span class="cx"> <script src="Views/ColorWheel.js"></script>
</span><span class="cx"> <script src="Views/CompletionSuggestionsView.js"></script>
</span><span class="cx"> <script src="Views/ComputedStyleDetailsPanel.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsColorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Color.js (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Color.js 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -45,22 +45,22 @@
</span><span class="cx">
</span><span class="cx"> static fromString(colorString)
</span><span class="cx"> {
</span><del>- var value = colorString.toLowerCase().replace(/%|\s+/g, "");
- var transparentNicknames = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
- if (transparentNicknames.includes(value)) {
- var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, [0, 0, 0, 0]);
- color.nickname = "transparent";
</del><ins>+ let value = colorString.toLowerCase().replace(/%|\s+/g, "");
+ let transparentKeywords = ["transparent", "rgba(0,0,0,0)", "hsla(0,0,0,0)"];
+ if (transparentKeywords.includes(value)) {
+ let color = new WebInspector.Color(WebInspector.Color.Format.Keyword, [0, 0, 0, 0]);
+ color.keyword = "transparent";
</ins><span class="cx"> color.original = colorString;
</span><span class="cx"> return color;
</span><span class="cx"> }
</span><span class="cx">
</span><del>- // Simple - #hex, rgb(), nickname, hsl()
- var simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
- var match = colorString.match(simple);
</del><ins>+ // Simple - #hex, rgb(), keyword, hsl()
+ let simple = /^(?:#([0-9a-f]{3,8})|rgb\(([^)]+)\)|(\w+)|hsl\(([^)]+)\))$/i;
+ let match = colorString.match(simple);
</ins><span class="cx"> if (match) {
</span><span class="cx"> if (match[1]) { // hex
</span><del>- var hex = match[1].toUpperCase();
- var len = hex.length;
</del><ins>+ let hex = match[1].toUpperCase();
+ let len = hex.length;
</ins><span class="cx"> if (len === 3) {
</span><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.ShortHEX, [
</span><span class="cx"> parseInt(hex.charAt(0) + hex.charAt(0), 16),
</span><span class="lines">@@ -92,7 +92,7 @@
</span><span class="cx"> } else
</span><span class="cx"> return null;
</span><span class="cx"> } else if (match[2]) { // rgb
</span><del>- var rgb = match[2].split(/\s*,\s*/);
</del><ins>+ let rgb = match[2].split(/\s*,\s*/);
</ins><span class="cx"> if (rgb.length !== 3)
</span><span class="cx"> return null;
</span><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.RGB, [
</span><span class="lines">@@ -101,17 +101,16 @@
</span><span class="cx"> parseInt(rgb[2]),
</span><span class="cx"> 1
</span><span class="cx"> ]);
</span><del>- } else if (match[3]) { // nickname
- var nickname = match[3].toLowerCase();
- if (WebInspector.Color.Nicknames.hasOwnProperty(nickname)) {
- var color = new WebInspector.Color(WebInspector.Color.Format.Nickname, WebInspector.Color.Nicknames[nickname].concat(1));
- color.nickname = nickname;
- color.original = colorString;
- return color;
- } else
</del><ins>+ } else if (match[3]) { // keyword
+ let keyword = match[3].toLowerCase();
+ if (!WebInspector.Color.Keywords[keyword])
</ins><span class="cx"> return null;
</span><ins>+ let color = new WebInspector.Color(WebInspector.Color.Format.Keyword, WebInspector.Color.Keywords[keyword].concat(1));
+ color.keyword = keyword;
+ color.original = colorString;
+ return color;
</ins><span class="cx"> } else if (match[4]) { // hsl
</span><del>- var hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
</del><ins>+ let hsl = match[4].replace(/%/g, "").split(/\s*,\s*/);
</ins><span class="cx"> if (hsl.length !== 3)
</span><span class="cx"> return null;
</span><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.HSL, [
</span><span class="lines">@@ -124,11 +123,11 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Advanced - rgba(), hsla()
</span><del>- var advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
</del><ins>+ let advanced = /^(?:rgba\(([^)]+)\)|hsla\(([^)]+)\))$/i;
</ins><span class="cx"> match = colorString.match(advanced);
</span><span class="cx"> if (match) {
</span><span class="cx"> if (match[1]) { // rgba
</span><del>- var rgba = match[1].split(/\s*,\s*/);
</del><ins>+ let rgba = match[1].split(/\s*,\s*/);
</ins><span class="cx"> if (rgba.length !== 4)
</span><span class="cx"> return null;
</span><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.RGBA, [
</span><span class="lines">@@ -138,7 +137,7 @@
</span><span class="cx"> Number.constrain(parseFloat(rgba[3]), 0, 1)
</span><span class="cx"> ]);
</span><span class="cx"> } else if (match[2]) { // hsla
</span><del>- var hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
</del><ins>+ let hsla = match[2].replace(/%/g, "").split(/\s*,\s*/);
</ins><span class="cx"> if (hsla.length !== 4)
</span><span class="cx"> return null;
</span><span class="cx"> return new WebInspector.Color(WebInspector.Color.Format.HSLA, [
</span><span class="lines">@@ -159,14 +158,15 @@
</span><span class="cx"> g /= 255;
</span><span class="cx"> b /= 255;
</span><span class="cx">
</span><del>- var min = Math.min(Math.min(r, g), b);
- var max = Math.max(Math.max(r, g), b);
- var delta = max - min;
</del><ins>+ let min = Math.min(Math.min(r, g), b);
+ let max = Math.max(Math.max(r, g), b);
+ let delta = max - min;
</ins><span class="cx">
</span><del>- var v = max;
- var s, h;
</del><ins>+ let h;
+ let s;
+ let v = max;
</ins><span class="cx">
</span><del>- if (max === min)
</del><ins>+ if (delta === 0)
</ins><span class="cx"> h = 0;
</span><span class="cx"> else if (max === r)
</span><span class="cx"> h = (60 * ((g - b) / delta)) % 360;
</span><span class="lines">@@ -193,13 +193,13 @@
</span><span class="cx"> return [v, v, v];
</span><span class="cx">
</span><span class="cx"> h /= 60;
</span><del>- var i = Math.floor(h);
- var data = [
</del><ins>+ let i = Math.floor(h);
+ let data = [
</ins><span class="cx"> v * (1 - s),
</span><span class="cx"> v * (1 - s * (h - i)),
</span><span class="cx"> v * (1 - s * (1 - (h - i)))
</span><span class="cx"> ];
</span><del>- var rgb;
</del><ins>+ let rgb;
</ins><span class="cx">
</span><span class="cx"> switch (i) {
</span><span class="cx"> case 0:
</span><span class="lines">@@ -242,11 +242,11 @@
</span><span class="cx">
</span><span class="cx"> case WebInspector.Color.Format.HSL:
</span><span class="cx"> case WebInspector.Color.Format.HSLA:
</span><del>- if (this.nickname)
- return WebInspector.Color.Format.Nickname;
</del><ins>+ if (this.keyword)
+ return WebInspector.Color.Format.Keyword;
</ins><span class="cx"> if (this.simple)
</span><del>- return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
- return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</del><ins>+ return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+ return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</ins><span class="cx">
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><span class="cx"> return WebInspector.Color.Format.HEX;
</span><span class="lines">@@ -258,10 +258,10 @@
</span><span class="cx"> case WebInspector.Color.Format.HEXAlpha:
</span><span class="cx"> return WebInspector.Color.Format.Original;
</span><span class="cx">
</span><del>- case WebInspector.Color.Format.Nickname:
</del><ins>+ case WebInspector.Color.Format.Keyword:
</ins><span class="cx"> if (this.simple)
</span><del>- return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
- return this._canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</del><ins>+ return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEX : WebInspector.Color.Format.HEX;
+ return this.canBeSerializedAsShortHEX() ? WebInspector.Color.Format.ShortHEXAlpha : WebInspector.Color.Format.HEXAlpha;
</ins><span class="cx">
</span><span class="cx"> default:
</span><span class="cx"> console.error("Unknown color format.");
</span><span class="lines">@@ -281,14 +281,14 @@
</span><span class="cx">
</span><span class="cx"> get rgb()
</span><span class="cx"> {
</span><del>- var rgb = this.rgba.slice();
</del><ins>+ let rgb = this.rgba.slice();
</ins><span class="cx"> rgb.pop();
</span><span class="cx"> return rgb;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> get hsl()
</span><span class="cx"> {
</span><del>- var hsl = this.hsla.slice();
</del><ins>+ let hsl = this.hsla.slice();
</ins><span class="cx"> hsl.pop();
</span><span class="cx"> return hsl;
</span><span class="cx"> }
</span><span class="lines">@@ -315,7 +315,7 @@
</span><span class="cx"> case WebInspector.Color.Format.ShortHEX:
</span><span class="cx"> case WebInspector.Color.Format.HEXAlpha:
</span><span class="cx"> case WebInspector.Color.Format.ShortHEXAlpha:
</span><del>- case WebInspector.Color.Format.Nickname:
</del><ins>+ case WebInspector.Color.Format.Keyword:
</ins><span class="cx"> case WebInspector.Color.Format.RGBA:
</span><span class="cx"> return new WebInspector.Color(this.format, this.rgba);
</span><span class="cx"> case WebInspector.Color.Format.HSL:
</span><span class="lines">@@ -348,40 +348,77 @@
</span><span class="cx"> return this._toHEXAlphaString();
</span><span class="cx"> case WebInspector.Color.Format.ShortHEXAlpha:
</span><span class="cx"> return this._toShortHEXAlphaString();
</span><del>- case WebInspector.Color.Format.Nickname:
- return this._toNicknameString();
</del><ins>+ case WebInspector.Color.Format.Keyword:
+ return this._toKeywordString();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> throw "invalid color format";
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ isKeyword()
+ {
+ if (this.keyword)
+ return true;
+
+ if (!this.simple)
+ return Object.shallowEqual(this._rgba, [0, 0, 0, 0]) || Object.shallowEqual(this._hsla, [0, 0, 0, 0]);
+
+ let rgb = (this._rgba && this._rgba.slice(0, 3)) || this._hslToRGB(this._hsla);
+ return Object.keys(WebInspector.Color.Keywords).some(key => Object.shallowEqual(WebInspector.Color.Keywords[key], rgb));
+ }
+
+ canBeSerializedAsShortHEX()
+ {
+ let rgba = this.rgba || this._hslaToRGBA(this._hsla);
+
+ let r = this._componentToHexValue(rgba[0]);
+ if (r[0] !== r[1])
+ return false;
+
+ let g = this._componentToHexValue(rgba[1]);
+ if (g[0] !== g[1])
+ return false;
+
+ let b = this._componentToHexValue(rgba[2]);
+ if (b[0] !== b[1])
+ return false;
+
+ if (!this.simple) {
+ let a = this._componentToHexValue(Math.round(rgba[3] * 255));
+ if (a[0] !== a[1])
+ return false;
+ }
+
+ return true;
+ }
+
</ins><span class="cx"> // Private
</span><span class="cx">
</span><span class="cx"> _toOriginalString()
</span><span class="cx"> {
</span><del>- return this.original || this._toNicknameString();
</del><ins>+ return this.original || this._toKeywordString();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- _toNicknameString()
</del><ins>+ _toKeywordString()
</ins><span class="cx"> {
</span><del>- if (this.nickname)
- return this.nickname;
</del><ins>+ if (this.keyword)
+ return this.keyword;
</ins><span class="cx">
</span><del>- var rgba = this.rgba;
</del><ins>+ let rgba = this.rgba;
</ins><span class="cx"> if (!this.simple) {
</span><span class="cx"> if (rgba[0] === 0 && rgba[1] === 0 && rgba[2] === 0 && rgba[3] === 0)
</span><span class="cx"> return "transparent";
</span><span class="cx"> return this._toRGBAString();
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var nicknames = WebInspector.Color.Nicknames;
- for (var nickname in nicknames) {
- if (!nicknames.hasOwnProperty(nickname))
</del><ins>+ let keywords = WebInspector.Color.Keywords;
+ for (let keyword in keywords) {
+ if (!keywords.hasOwnProperty(keyword))
</ins><span class="cx"> continue;
</span><span class="cx">
</span><del>- var nicknameRGB = nicknames[nickname];
- if (nicknameRGB[0] === rgba[0] && nicknameRGB[1] === rgba[1] && nicknameRGB[2] === rgba[2])
- return nickname;
</del><ins>+ let keywordRGB = keywords[keyword];
+ if (keywordRGB[0] === rgba[0] && keywordRGB[1] === rgba[1] && keywordRGB[2] === rgba[2])
+ return keyword;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return this._toRGBString();
</span><span class="lines">@@ -392,10 +429,10 @@
</span><span class="cx"> if (!this.simple)
</span><span class="cx"> return this._toRGBAString();
</span><span class="cx">
</span><del>- var rgba = this.rgba;
- var r = this._componentToHexValue(rgba[0]);
- var g = this._componentToHexValue(rgba[1]);
- var b = this._componentToHexValue(rgba[2]);
</del><ins>+ let rgba = this.rgba;
+ let r = this._componentToHexValue(rgba[0]);
+ let g = this._componentToHexValue(rgba[1]);
+ let b = this._componentToHexValue(rgba[2]);
</ins><span class="cx">
</span><span class="cx"> if (r[0] === r[1] && g[0] === g[1] && b[0] === b[1])
</span><span class="cx"> return "#" + r[0] + g[0] + b[0];
</span><span class="lines">@@ -408,10 +445,10 @@
</span><span class="cx"> if (!this.simple)
</span><span class="cx"> return this._toRGBAString();
</span><span class="cx">
</span><del>- var rgba = this.rgba;
- var r = this._componentToHexValue(rgba[0]);
- var g = this._componentToHexValue(rgba[1]);
- var b = this._componentToHexValue(rgba[2]);
</del><ins>+ let rgba = this.rgba;
+ let r = this._componentToHexValue(rgba[0]);
+ let g = this._componentToHexValue(rgba[1]);
+ let b = this._componentToHexValue(rgba[2]);
</ins><span class="cx">
</span><span class="cx"> return "#" + r + g + b;
</span><span class="cx"> }
</span><span class="lines">@@ -446,8 +483,8 @@
</span><span class="cx"> if (!this.simple)
</span><span class="cx"> return this._toRGBAString();
</span><span class="cx">
</span><del>- var rgba = this.rgba;
- return "rgb(" + [rgba[0], rgba[1], rgba[2]].join(", ") + ")";
</del><ins>+ let rgba = this.rgba.slice(0, -1);
+ return "rgb(" + rgba.join(", ") + ")";
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _toRGBAString()
</span><span class="lines">@@ -460,35 +497,16 @@
</span><span class="cx"> if (!this.simple)
</span><span class="cx"> return this._toHSLAString();
</span><span class="cx">
</span><del>- var hsla = this.hsla;
</del><ins>+ let hsla = this.hsla;
</ins><span class="cx"> return "hsl(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%)";
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _toHSLAString()
</span><span class="cx"> {
</span><del>- var hsla = this.hsla;
</del><ins>+ let hsla = this.hsla;
</ins><span class="cx"> return "hsla(" + hsla[0] + ", " + hsla[1] + "%, " + hsla[2] + "%, " + hsla[3] + ")";
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _canBeSerializedAsShortHEX()
- {
- var rgba = this.rgba;
-
- var r = this._componentToHexValue(rgba[0]);
- if (r[0] !== r[1])
- return false;
-
- var g = this._componentToHexValue(rgba[1]);
- if (g[0] !== g[1])
- return false;
-
- var b = this._componentToHexValue(rgba[2]);
- if (b[0] !== b[1])
- return false;
-
- return true;
- }
-
</del><span class="cx"> _componentToNumber(value)
</span><span class="cx"> {
</span><span class="cx"> return Number.constrain(value, 0, 255);
</span><span class="lines">@@ -496,7 +514,7 @@
</span><span class="cx">
</span><span class="cx"> _componentToHexValue(value)
</span><span class="cx"> {
</span><del>- var hex = this._componentToNumber(value).toString(16);
</del><ins>+ let 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="lines">@@ -504,49 +522,51 @@
</span><span class="cx">
</span><span class="cx"> _rgbToHSL(rgb)
</span><span class="cx"> {
</span><del>- var r = this._componentToNumber(rgb[0]) / 255;
- var g = this._componentToNumber(rgb[1]) / 255;
- var b = this._componentToNumber(rgb[2]) / 255;
- var max = Math.max(r, g, b);
- var min = Math.min(r, g, b);
- var diff = max - min;
- var add = max + min;
</del><ins>+ let r = this._componentToNumber(rgb[0]) / 255;
+ let g = this._componentToNumber(rgb[1]) / 255;
+ let b = this._componentToNumber(rgb[2]) / 255;
+ let max = Math.max(r, g, b);
+ let min = Math.min(r, g, b);
+ let diff = max - min;
+ let add = max + min;
</ins><span class="cx">
</span><ins>+ let h;
+ let s;
+ let l = 0.5 * add;
+
</ins><span class="cx"> if (min === max)
</span><del>- var h = 0;
</del><ins>+ h = 0;
</ins><span class="cx"> else if (r === max)
</span><del>- var h = ((60 * (g - b) / diff) + 360) % 360;
</del><ins>+ h = ((60 * (g - b) / diff) + 360) % 360;
</ins><span class="cx"> else if (g === max)
</span><del>- var h = (60 * (b - r) / diff) + 120;
</del><ins>+ h = (60 * (b - r) / diff) + 120;
</ins><span class="cx"> else
</span><del>- var h = (60 * (r - g) / diff) + 240;
</del><ins>+ h = (60 * (r - g) / diff) + 240;
</ins><span class="cx">
</span><del>- var l = 0.5 * add;
-
</del><span class="cx"> if (l === 0)
</span><del>- var s = 0;
</del><ins>+ s = 0;
</ins><span class="cx"> else if (l === 1)
</span><del>- var s = 1;
</del><ins>+ s = 1;
</ins><span class="cx"> else if (l <= 0.5)
</span><del>- var s = diff / add;
</del><ins>+ s = diff / add;
</ins><span class="cx"> else
</span><del>- var s = diff / (2 - add);
</del><ins>+ s = diff / (2 - add);
</ins><span class="cx">
</span><del>- h = Math.round(h);
- s = Math.round(s * 100);
- l = Math.round(l * 100);
-
- return [h, s, l];
</del><ins>+ return [
+ Math.round(h),
+ Math.round(s * 100),
+ Math.round(l * 100)
+ ];
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _hslToRGB(hsl)
</span><span class="cx"> {
</span><del>- var h = parseFloat(hsl[0]) / 360;
- var s = parseFloat(hsl[1]) / 100;
- var l = parseFloat(hsl[2]) / 100;
</del><ins>+ let h = parseFloat(hsl[0]) / 360;
+ let s = parseFloat(hsl[1]) / 100;
+ let l = parseFloat(hsl[2]) / 100;
</ins><span class="cx">
</span><span class="cx"> h *= 6;
</span><del>- var sArray = [
</del><ins>+ let sArray = [
</ins><span class="cx"> l += s *= l < .5 ? l : 1 - l,
</span><span class="cx"> l - h % 1 * s * 2,
</span><span class="cx"> l -= s *= 2,
</span><span class="lines">@@ -563,14 +583,14 @@
</span><span class="cx">
</span><span class="cx"> _rgbaToHSLA(rgba)
</span><span class="cx"> {
</span><del>- var hsl = this._rgbToHSL(rgba);
</del><ins>+ let hsl = this._rgbToHSL(rgba);
</ins><span class="cx"> hsl.push(rgba[3]);
</span><span class="cx"> return hsl;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _hslaToRGBA(hsla)
</span><span class="cx"> {
</span><del>- var rgba = this._hslToRGB(hsla);
</del><ins>+ let rgba = this._hslToRGB(hsla);
</ins><span class="cx"> rgba.push(hsla[3]);
</span><span class="cx"> return rgba;
</span><span class="cx"> }
</span><span class="lines">@@ -578,7 +598,7 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.Color.Format = {
</span><span class="cx"> Original: "color-format-original",
</span><del>- Nickname: "color-format-nickname",
</del><ins>+ Keyword: "color-format-keyword",
</ins><span class="cx"> HEX: "color-format-hex",
</span><span class="cx"> ShortHEX: "color-format-short-hex",
</span><span class="cx"> HEXAlpha: "color-format-hex-alpha",
</span><span class="lines">@@ -589,7 +609,7 @@
</span><span class="cx"> HSLA: "color-format-hsla"
</span><span class="cx"> };
</span><span class="cx">
</span><del>-WebInspector.Color.Nicknames = {
</del><ins>+WebInspector.Color.Keywords = {
</ins><span class="cx"> "aliceblue": [240, 248, 255],
</span><span class="cx"> "antiquewhite": [250, 235, 215],
</span><span class="cx"> "aquamarine": [127, 255, 212],
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.css 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -150,55 +150,6 @@
</span><span class="cx"> visibility: visible;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch {
- display: inline-block;
-
- margin-right: 3px;
- vertical-align: -2px;
-
- width: 1em;
- height: 1em;
-
- position: relative;
-
- /* Make a checkered background for transparent colors to show against. */
- background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
- linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
- background-color: white;
- background-size: calc(50%);
- background-position: top left, bottom right;
- background-repeat: no-repeat;
-
- cursor: default;
-}
-
-@media (-webkit-max-device-pixel-ratio: 1) {
- /* Ensure the color swatch is even by even so that it looks okay checkered. */
- .css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch {
- vertical-align: -1px;
- width: 10px;
- height: 10px;
- }
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch > span {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
-
- border: 1px solid hsla(0, 0%, 25%, 0.4);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:hover > span {
- border: 1px solid hsla(0, 0%, 25%, 0.8);
-}
-
-.css-style-text-editor > .CodeMirror .CodeMirror-lines .color-swatch:active > span {
- border: 1px solid hsl(0, 0%, 25%);
-}
-
</del><span class="cx"> .css-style-text-editor > .CodeMirror .cm-link {
</span><span class="cx"> /* Style url(...) links as if they are strings. */
</span><span class="cx"> color: var(--syntax-highlight-string-color);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationTextEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationTextEditor.js 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -876,24 +876,19 @@
</span><span class="cx"> {
</span><span class="cx"> function update()
</span><span class="cx"> {
</span><del>- var range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</del><ins>+ let range = typeof lineNumber === "number" ? new WebInspector.TextRange(lineNumber, 0, lineNumber + 1, 0) : null;
</ins><span class="cx">
</span><span class="cx"> // Look for color strings and add swatches in front of them.
</span><span class="cx"> createCodeMirrorColorTextMarkers(this._codeMirror, range, function(marker, color, colorString) {
</span><del>- var swatchElement = document.createElement("span");
- swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
- swatchElement.className = WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName;
- swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
</del><ins>+ let swatch = new WebInspector.ColorSwatch(color, this._codeMirror.getOption("readOnly"));
+ swatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
</ins><span class="cx">
</span><del>- var swatchInnerElement = document.createElement("span");
- swatchInnerElement.style.backgroundColor = colorString;
- swatchElement.appendChild(swatchInnerElement);
</del><ins>+ let codeMirrorTextMarker = marker.codeMirrorTextMarker;
+ let codeMirrorTextMarkerRange = codeMirrorTextMarker.find();
+ this._codeMirror.setUniqueBookmark(codeMirrorTextMarkerRange.from, swatch.element);
</ins><span class="cx">
</span><del>- var codeMirrorTextMarker = marker.codeMirrorTextMarker;
- this._codeMirror.setUniqueBookmark(codeMirrorTextMarker.find().from, swatchElement);
-
- swatchInnerElement.__colorTextMarker = codeMirrorTextMarker;
- swatchInnerElement.__color = color;
</del><ins>+ swatch.__colorTextMarker = codeMirrorTextMarker;
+ swatch.__colorTextMarkerRange = codeMirrorTextMarkerRange;
</ins><span class="cx"> }.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -1324,107 +1319,68 @@
</span><span class="cx"> this._codeMirror.operation(update.bind(this));
</span><span class="cx"> }
</span><span class="cx">
</span><del>- _colorSwatchClicked(event)
</del><ins>+ _colorSwatchColorChanged(event)
</ins><span class="cx"> {
</span><del>- if (this._colorPickerPopover)
</del><ins>+ let swatch = event && event.target;
+ console.assert(swatch);
+ if (!swatch)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- var swatch = event.target;
-
- var color = swatch.__color;
- console.assert(color);
- if (!color)
</del><ins>+ let colorString = event && event.data && event.data.color && event.data.color.toString();
+ console.assert(colorString);
+ if (!colorString)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- var colorTextMarker = swatch.__colorTextMarker;
- console.assert(colorTextMarker);
- if (!colorTextMarker)
- return;
-
- var range = colorTextMarker.find();
</del><ins>+ let colorTextMarker = swatch.__colorTextMarker;
+ let range = swatch.__colorTextMarkerRange;
</ins><span class="cx"> console.assert(range);
</span><span class="cx"> if (!range)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- function updateCodeMirror(newColorText)
</del><ins>+ function update()
</ins><span class="cx"> {
</span><del>- function update()
- {
- // The original text marker might have been cleared by a style update,
- // in this case we need to find the new color text marker so we know
- // the right range for the new style color text.
- if (!colorTextMarker || !colorTextMarker.find()) {
- colorTextMarker = null;
</del><ins>+ // The original text marker might have been cleared by a style update,
+ // in this case we need to find the new color text marker so we know
+ // the right range for the new style color text.
+ if (!colorTextMarker || !colorTextMarker.find()) {
+ colorTextMarker = null;
</ins><span class="cx">
</span><del>- var marks = this._codeMirror.findMarksAt(range.from);
- if (!marks.length)
- return;
-
- for (var i = 0; i < marks.length; ++i) {
- var mark = marks[i];
- if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.Color)
- continue;
- colorTextMarker = mark;
- break;
- }
- }
-
- if (!colorTextMarker)
</del><ins>+ let marks = this._codeMirror.findMarksAt(range.from);
+ if (!marks.length)
</ins><span class="cx"> return;
</span><span class="cx">
</span><del>- // Sometimes we still might find a stale text marker with findMarksAt.
- var newRange = colorTextMarker.find();
- if (!newRange)
- return;
-
- range = newRange;
-
- colorTextMarker.clear();
-
- this._codeMirror.replaceRange(newColorText, range.from, range.to);
-
- // The color's text format could have changed, so we need to update the "range"
- // variable to anticipate a different "range.to" property.
- range.to.ch = range.from.ch + newColorText.length;
-
- colorTextMarker = this._codeMirror.markText(range.from, range.to);
-
- swatch.__colorTextMarker = colorTextMarker;
</del><ins>+ for (let mark of marks) {
+ if (WebInspector.TextMarker.textMarkerForCodeMirrorTextMarker(mark).type !== WebInspector.TextMarker.Type.Color)
+ continue;
+ colorTextMarker = mark;
+ break;
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- this._codeMirror.operation(update.bind(this));
- }
</del><ins>+ if (!colorTextMarker)
+ return;
</ins><span class="cx">
</span><del>- if (event.shiftKey || this._codeMirror.getOption("readOnly")) {
- var nextFormat = color.nextFormat();
- console.assert(nextFormat);
- if (!nextFormat)
</del><ins>+ // Sometimes we still might find a stale text marker with findMarksAt.
+ let newRange = colorTextMarker.find();
+ if (!newRange)
</ins><span class="cx"> return;
</span><del>- color.format = nextFormat;
</del><span class="cx">
</span><del>- var newColorText = color.toString();
</del><ins>+ range = newRange;
</ins><span class="cx">
</span><del>- // Ignore the change so we don't commit the format change. However, any future user
- // edits will commit the color format.
- this._ignoreCodeMirrorContentDidChangeEvent = true;
- updateCodeMirror.call(this, newColorText);
- delete this._ignoreCodeMirrorContentDidChangeEvent;
- } else {
- this._colorPickerPopover = new WebInspector.Popover(this);
</del><ins>+ colorTextMarker.clear();
</ins><span class="cx">
</span><del>- var colorPicker = new WebInspector.ColorPicker;
</del><ins>+ this._codeMirror.replaceRange(colorString, range.from, range.to);
</ins><span class="cx">
</span><del>- colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, function(event) {
- updateCodeMirror.call(this, event.data.color.toString());
- }.bind(this));
</del><ins>+ // The color's text format could have changed, so we need to update the "range"
+ // variable to anticipate a different "range.to" property.
+ range.to.ch = range.from.ch + colorString.length;
</ins><span class="cx">
</span><del>- var bounds = WebInspector.Rect.rectFromClientRect(swatch.getBoundingClientRect());
</del><ins>+ colorTextMarker = this._codeMirror.markText(range.from, range.to);
</ins><span class="cx">
</span><del>- this._colorPickerPopover.content = colorPicker.element;
- this._colorPickerPopover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
-
- colorPicker.color = color;
</del><ins>+ swatch.__colorTextMarker = colorTextMarker;
</ins><span class="cx"> }
</span><ins>+
+ this._codeMirror.operation(update.bind(this));
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _cubicBezierMarkerClicked(event)
</span><span class="lines">@@ -1815,7 +1771,6 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.StyleClassName = "css-style-text-editor";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.ReadOnlyStyleClassName = "read-only";
</span><del>-WebInspector.CSSStyleDeclarationTextEditor.ColorSwatchElementStyleClassName = "color-swatch";
</del><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.BezierEditorClassName = "cubic-bezier-marker";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.CheckboxPlaceholderElementStyleClassName = "checkbox-placeholder";
</span><span class="cx"> WebInspector.CSSStyleDeclarationTextEditor.EditingLineStyleClassName = "editing-line";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchcssfromrev194567trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss"></a>
<div class="copfile"><h4>Copied: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css (from rev 194567, trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css) (0 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.css 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -0,0 +1,70 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2015 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+.color-swatch {
+ display: inline-block;
+ position: relative;
+ width: 1em;
+ height: 1em;
+ margin-right: 3px;
+ vertical-align: -2px;
+ /* Make a checkered background for transparent colors to show against. */
+ background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
+ linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
+ background-color: white;
+ background-size: 50%;
+ background-position: top left, bottom right;
+ background-repeat: no-repeat;
+ cursor: default;
+ overflow: hidden;
+}
+
+@media (-webkit-max-device-pixel-ratio: 1) {
+ /* Ensure the color swatch is even by even so that it looks okay checkered. */
+ .color-swatch {
+ vertical-align: -1px;
+ width: 10px;
+ height: 10px;
+ }
+}
+
+.color-swatch > span {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border: 1px solid hsla(0, 0%, 25%, 0.4);
+}
+
+.color-swatch:hover > span {
+ border-color: hsla(0, 0%, 25%, 0.8);
+}
+
+.color-swatch:active > span {
+ border-color: hsl(0, 0%, 25%);
+}
+
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorSwatchjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js (0 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSwatch.js 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -0,0 +1,206 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ *
+ * 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.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+WebInspector.ColorSwatch = class ColorSwatch extends WebInspector.Object
+{
+ constructor(color, readOnly)
+ {
+ super();
+
+ this._swatchElement = document.createElement("span");
+ this._swatchElement.classList.add("color-swatch");
+ this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
+ if (!readOnly) {
+ this._swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
+ this._swatchElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
+ }
+
+ this._swatchInnerElement = document.createElement("span");
+ this._swatchElement.appendChild(this._swatchInnerElement);
+
+ this._color = color || WebInspector.Color.fromString("transparent");
+
+ this._updateSwatch();
+ }
+
+ // Public
+
+ get element()
+ {
+ return this._swatchElement;
+ }
+
+ set color(color)
+ {
+ this._color = color || WebInspector.Color.fromString("transparent");
+ this._updateSwatch(true);
+ }
+
+ get color()
+ {
+ return this._color;
+ }
+
+ // Private
+
+ _colorSwatchClicked(event)
+ {
+ if (event.shiftKey) {
+ let nextFormat = this._color.nextFormat();
+ console.assert(nextFormat);
+ if (!nextFormat)
+ return;
+
+ this._color.format = nextFormat;
+ this._updateSwatch();
+ return;
+ }
+
+ let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
+
+ let colorPicker = new WebInspector.ColorPicker;
+ colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorDidChange, this);
+
+ let popover = new WebInspector.Popover(this);
+ popover.content = colorPicker.element;
+ popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
+
+ colorPicker.color = this._color;
+ }
+
+ _colorPickerColorDidChange(event)
+ {
+ this._color = event.data.color;
+ this._updateSwatch();
+ }
+
+ _handleContextMenuEvent(event)
+ {
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+ if (this._color.isKeyword() && this._color.format !== WebInspector.Color.Format.Keyword) {
+ contextMenu.appendItem(WebInspector.UIString("Format: Keyword"), () => {
+ this._color.format = WebInspector.Color.Format.Keyword;
+ this._updateSwatch();
+ });
+ }
+
+ let hexInfo = this._getNextValidHEXFormat();
+ if (hexInfo) {
+ contextMenu.appendItem(hexInfo.title, () => {
+ this._color.format = hexInfo.format;
+ this._updateSwatch();
+ });
+ }
+
+ if (this._color.simple && this._color.format !== WebInspector.Color.Format.HSL) {
+ contextMenu.appendItem(WebInspector.UIString("Format: HSL"), () => {
+ this._color.format = WebInspector.Color.Format.HSL;
+ this._updateSwatch();
+ });
+ } else if (this._color.format !== WebInspector.Color.Format.HSLA) {
+ contextMenu.appendItem(WebInspector.UIString("Format: HSLA"), () => {
+ this._color.format = WebInspector.Color.Format.HSLA;
+ this._updateSwatch();
+ });
+ }
+
+ if (this._color.simple && this._color.format !== WebInspector.Color.Format.RGB) {
+ contextMenu.appendItem(WebInspector.UIString("Format: RGB"), () => {
+ this._color.format = WebInspector.Color.Format.RGB;
+ this._updateSwatch();
+ });
+ } else if (this._color.format !== WebInspector.Color.Format.RGBA) {
+ contextMenu.appendItem(WebInspector.UIString("Format: RGBA"), () => {
+ this._color.format = WebInspector.Color.Format.RGBA;
+ this._updateSwatch();
+ });
+ }
+ }
+
+ _getNextValidHEXFormat()
+ {
+ function hexMatchesCurrentColor(hexInfo) {
+ let nextIsSimple = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.HEX;
+ if (nextIsSimple && !this._color.simple)
+ return false;
+
+ let nextIsShort = hexInfo.format === WebInspector.Color.Format.ShortHEX || hexInfo.format === WebInspector.Color.Format.ShortHEXAlpha;
+ if (nextIsShort && !this._color.canBeSerializedAsShortHEX())
+ return false;
+
+ return true;
+ }
+
+ const hexFormats = [
+ {
+ format: WebInspector.Color.Format.ShortHEX,
+ title: WebInspector.UIString("Format: Short Hex")
+ },
+ {
+ format: WebInspector.Color.Format.ShortHEXAlpha,
+ title: WebInspector.UIString("Format: Short Hex with Alpha")
+ },
+ {
+ format: WebInspector.Color.Format.HEX,
+ title: WebInspector.UIString("Format: Hex")
+ },
+ {
+ format: WebInspector.Color.Format.HEXAlpha,
+ title: WebInspector.UIString("Format: Hex with Alpha")
+ }
+ ];
+
+ // FIXME: <https://webkit.org/b/152497> Arrow functions: "this" isn't lexically bound
+ let currentColorIsHEX = hexFormats.some(function(info) {
+ return info.format === this._color.format;
+ }.bind(this));
+
+ for (let i = 0; i < hexFormats.length; ++i) {
+ if (currentColorIsHEX && this._color.format !== hexFormats[i].format)
+ continue;
+
+ for (let j = ~~currentColorIsHEX; j < hexFormats.length; ++j) {
+ let nextIndex = (i + j) % hexFormats.length;
+ if (hexMatchesCurrentColor.call(this, hexFormats[nextIndex]))
+ return hexFormats[nextIndex];
+ }
+ return null;
+ }
+ return hexFormats[0];
+ }
+
+ _updateSwatch(dontFireEvents)
+ {
+ this._swatchInnerElement.style.backgroundColor = this._color.toString() || null;
+ if (!dontFireEvents)
+ this.dispatchEventToListeners(WebInspector.ColorSwatch.Event.ColorChanged, {color: this._color});
+ }
+};
+
+WebInspector.ColorSwatch.Event = {
+ ColorChanged: "color-swatch-color-changed"
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -32,22 +32,12 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch {
</span><del>- display: block;
- position: relative;
</del><span class="cx"> width: 22px;
</span><span class="cx"> height: 18px;
</span><span class="cx"> margin-top: 1px;
</span><del>- /* Make a checkered background for transparent colors to show against. */
- background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
- linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
- background-color: white;
- background-size: 50%;
- background-position: top left, bottom right;
- background-repeat: no-repeat;
</del><ins>+ margin-right: 0;
</ins><span class="cx"> border: 1px solid hsla(0, 0%, 25%, 0.4);
</span><span class="cx"> border-radius: 4px;
</span><del>- overflow: hidden;
- cursor: default;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch:hover {
</span><span class="lines">@@ -59,11 +49,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.input-color-picker > .visual-style-property-value-container > .color-swatch > span {
</span><del>- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
</del><ins>+ border: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .visual-style-property-container.input-color-picker > .visual-style-property-value-container > input {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleColorPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js (194567 => 194568)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js 2016-01-05 00:50:56 UTC (rev 194567)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.js 2016-01-05 01:48:00 UTC (rev 194568)
</span><span class="lines">@@ -29,16 +29,10 @@
</span><span class="cx"> {
</span><span class="cx"> super(propertyNames, text, null, null, "input-color-picker", layoutReversed);
</span><span class="cx">
</span><del>- this._swatchElement = document.createElement("span");
- this._swatchElement.classList.add("color-swatch");
- this._swatchElement.title = WebInspector.UIString("Click to select a color. Shift-click to switch color formats.");
- this._swatchElement.addEventListener("click", this._colorSwatchClicked.bind(this));
</del><ins>+ this._colorSwatch = new WebInspector.ColorSwatch;
+ this._colorSwatch.addEventListener(WebInspector.ColorSwatch.Event.ColorChanged, this._colorSwatchColorChanged, this);
+ this.contentElement.appendChild(this._colorSwatch.element);
</ins><span class="cx">
</span><del>- this._swatchInnerElement = document.createElement("span");
- this._swatchElement.appendChild(this._swatchInnerElement);
-
- this.contentElement.appendChild(this._swatchElement);
-
</del><span class="cx"> this._textInputElement = document.createElement("input");
</span><span class="cx"> this._textInputElement.spellcheck = false;
</span><span class="cx"> this._textInputElement.addEventListener("keydown", this._textInputKeyDown.bind(this));
</span><span class="lines">@@ -103,48 +97,20 @@
</span><span class="cx">
</span><span class="cx"> // Private
</span><span class="cx">
</span><del>- _updateColorSwatch()
</del><ins>+ _colorSwatchColorChanged(event)
</ins><span class="cx"> {
</span><del>- let value = this._textInputElement.value;
- this._color = WebInspector.Color.fromString(value || "transparent");
- this._swatchInnerElement.style.backgroundColor = this._color ? value : null;
- }
-
- _colorSwatchClicked(event)
- {
- let color = this._color;
- if (event.shiftKey) {
- let nextFormat = color.nextFormat();
-
- console.assert(nextFormat);
- if (!nextFormat)
- return;
-
- color.format = nextFormat;
- this.value = color.toString();
-
- this._formatChanged = true;
- this._valueDidChange();
</del><ins>+ let colorString = event && event.data && event.data.color && event.data.color.toString();
+ if (!colorString)
</ins><span class="cx"> return;
</span><del>- }
</del><span class="cx">
</span><del>- let bounds = WebInspector.Rect.rectFromClientRect(this._swatchElement.getBoundingClientRect());
-
- let colorPicker = new WebInspector.ColorPicker;
- colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorDidChange, this);
-
- let popover = new WebInspector.Popover(this);
- popover.content = colorPicker.element;
- popover.present(bounds.pad(2), [WebInspector.RectEdge.MIN_X]);
-
- colorPicker.color = color;
</del><ins>+ this.value = colorString;
+ this._valueDidChange();
</ins><span class="cx"> }
</span><span class="cx">
</span><del>- _colorPickerColorDidChange(event)
</del><ins>+ _updateColorSwatch()
</ins><span class="cx"> {
</span><del>- let format = !this._formatChanged ? WebInspector.Color.Format.HEX : null;
- this.value = event.data.color.toString(format);
- this._valueDidChange();
</del><ins>+ let value = this._textInputElement.value;
+ this._colorSwatch.color = WebInspector.Color.fromString(value || "transparent");
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _completionClicked(event)
</span></span></pre>
</div>
</div>
</body>
</html>