<!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>[211057] 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/211057">211057</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2017-01-23 13:27:26 -0800 (Mon, 23 Jan 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: color picker should feature an editable CSS value
https://bugs.webkit.org/show_bug.cgi?id=124356
Patch by Devin Rousso <dcrousso+webkit@gmail.com> on 2017-01-23
Reviewed by Timothy Hatcher.
* UserInterface/Views/ColorPicker.css:
(.color-picker):
(.color-picker.hide-inputs):
(.color-picker > .color-inputs):
(.color-picker > .color-inputs > div):
(.color-picker > .color-inputs > div[hidden]):
(.color-picker > .color-inputs input):
* UserInterface/Views/ColorPicker.js:
(WebInspector.ColorPicker.createColorInput):
(WebInspector.ColorPicker):
(WebInspector.ColorPicker.prototype.set color):
(WebInspector.ColorPicker.prototype.set enableColorComponentInputs):
(WebInspector.ColorPicker.prototype._updateColor):
(WebInspector.ColorPicker.prototype._handleFormatChange):
(WebInspector.ColorPicker.prototype._showColorComponentInputs.updateColorInput):
(WebInspector.ColorPicker.prototype._showColorComponentInputs):
(WebInspector.ColorPicker.prototype._handleColorInputInput):
Add an input element (with a label for the component name and its units) for each component
as part of the current color format (e.g. R, G, B, A). If any of these inputs are changed
then the color is also changed and the "ColorChanged" event is fired.
* UserInterface/Controllers/CodeMirrorColorEditingController.js:
(WebInspector.CodeMirrorColorEditingController.prototype.popoverWillPresent):
* UserInterface/Views/InlineSwatch.js:
(WebInspector.InlineSwatch.prototype._swatchElementClicked):
Add FormatChanged event that fires whenever a new color is set with a different format or
the color value is set for the first time (there is no old format to compare to). This is
needed because if the format becomes RGB, RGBA, HSL, or HSLA from something not in that list
then the size of the containing popover needs to change since the newly added color inputs
will be displayed.
* UserInterface/Views/GradientEditor.js:
(WebInspector.GradientEditor):
Prevent the color inputs from displaying at all, since there aren't individual swatches for
each color in a gradient.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorColorEditingControllerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorPickercss">trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsColorPickerjs">trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsGradientEditorjs">trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchjs">trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -1,3 +1,47 @@
</span><ins>+2017-01-23 Devin Rousso <dcrousso+webkit@gmail.com>
+
+ Web Inspector: color picker should feature an editable CSS value
+ https://bugs.webkit.org/show_bug.cgi?id=124356
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/ColorPicker.css:
+ (.color-picker):
+ (.color-picker.hide-inputs):
+ (.color-picker > .color-inputs):
+ (.color-picker > .color-inputs > div):
+ (.color-picker > .color-inputs > div[hidden]):
+ (.color-picker > .color-inputs input):
+
+ * UserInterface/Views/ColorPicker.js:
+ (WebInspector.ColorPicker.createColorInput):
+ (WebInspector.ColorPicker):
+ (WebInspector.ColorPicker.prototype.set color):
+ (WebInspector.ColorPicker.prototype.set enableColorComponentInputs):
+ (WebInspector.ColorPicker.prototype._updateColor):
+ (WebInspector.ColorPicker.prototype._handleFormatChange):
+ (WebInspector.ColorPicker.prototype._showColorComponentInputs.updateColorInput):
+ (WebInspector.ColorPicker.prototype._showColorComponentInputs):
+ (WebInspector.ColorPicker.prototype._handleColorInputInput):
+ Add an input element (with a label for the component name and its units) for each component
+ as part of the current color format (e.g. R, G, B, A). If any of these inputs are changed
+ then the color is also changed and the "ColorChanged" event is fired.
+
+ * UserInterface/Controllers/CodeMirrorColorEditingController.js:
+ (WebInspector.CodeMirrorColorEditingController.prototype.popoverWillPresent):
+ * UserInterface/Views/InlineSwatch.js:
+ (WebInspector.InlineSwatch.prototype._swatchElementClicked):
+ Add FormatChanged event that fires whenever a new color is set with a different format or
+ the color value is set for the first time (there is no old format to compare to). This is
+ needed because if the format becomes RGB, RGBA, HSL, or HSLA from something not in that list
+ then the size of the containing popover needs to change since the newly added color inputs
+ will be displayed.
+
+ * UserInterface/Views/GradientEditor.js:
+ (WebInspector.GradientEditor):
+ Prevent the color inputs from displaying at all, since there aren't individual swatches for
+ each color in a gradient.
+
</ins><span class="cx"> 2017-01-20 Devin Rousso <dcrousso+webkit@gmail.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Search Tab should display search results immediately when closing and reopening Inspector
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersCodeMirrorColorEditingControllerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/CodeMirrorColorEditingController.js 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -46,6 +46,7 @@
</span><span class="cx"> {
</span><span class="cx"> this._colorPicker = new WebInspector.ColorPicker;
</span><span class="cx"> this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
</span><ins>+ this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.FormatChanged, (event) => popover.update());
</ins><span class="cx"> popover.content = this._colorPicker.element;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorPickercss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -26,10 +26,14 @@
</span><span class="cx"> .color-picker {
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 256px;
</span><del>- height: 210px;
</del><ins>+ height: 236px;
</ins><span class="cx"> padding: 5px;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.color-picker.hide-inputs {
+ height: 210px;
+}
+
</ins><span class="cx"> .color-picker > * {
</span><span class="cx"> position: absolute;
</span><span class="cx"> }
</span><span class="lines">@@ -53,3 +57,27 @@
</span><span class="cx"> .color-picker > .opacity {
</span><span class="cx"> left: 238px;
</span><span class="cx"> }
</span><ins>+
+.color-picker > .color-inputs {
+ display: flex;
+ justify-content: space-between;
+ top: 212px;
+ right: 0;
+ left: 0;
+}
+
+.color-picker > .color-inputs > div {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ margin: 0 4px;
+}
+
+.color-picker > .color-inputs > div[hidden] {
+ display: none;
+}
+
+.color-picker > .color-inputs input {
+ width: 100%;
+ margin: 0 0.25em;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsColorPickerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -41,19 +41,53 @@
</span><span class="cx"> this._opacitySlider.delegate = this;
</span><span class="cx"> this._opacitySlider.element.classList.add("opacity");
</span><span class="cx">
</span><ins>+ let colorInputsContainerElement = document.createElement("div");
+ colorInputsContainerElement.classList.add("color-inputs");
+
+ function createColorInput(label, {min: min = 0, max: max = 100, step: step = 1, units} = {}) {
+ let containerElement = colorInputsContainerElement.createChild("div");
+
+ containerElement.append(label);
+
+ let numberInputElement = containerElement.createChild("input");
+ numberInputElement.type = "number";
+ numberInputElement.min = min;
+ numberInputElement.max = max;
+ numberInputElement.step = step;
+ numberInputElement.addEventListener("input", this._handleColorInputInput.bind(this));
+
+ if (units && units.length)
+ containerElement.append(units);
+
+ return {containerElement, numberInputElement};
+ }
+
+ this._colorInputs = new Map([
+ ["R", createColorInput.call(this, "R", {max: 255})],
+ ["G", createColorInput.call(this, "G", {max: 255})],
+ ["B", createColorInput.call(this, "B", {max: 255})],
+ ["H", createColorInput.call(this, "H", {max: 360})],
+ ["S", createColorInput.call(this, "S", {units: "%"})],
+ ["L", createColorInput.call(this, "L", {units: "%"})],
+ ["A", createColorInput.call(this, "A"), {max: 1, step: 0.01}]
+ ]);
+
</ins><span class="cx"> this._element = document.createElement("div");
</span><del>- this._element.className = "color-picker";
</del><ins>+ this._element.classList.add("color-picker");
</ins><span class="cx">
</span><span class="cx"> this._element.appendChild(this._colorWheel.element);
</span><span class="cx"> this._element.appendChild(this._brightnessSlider.element);
</span><span class="cx"> this._element.appendChild(this._opacitySlider.element);
</span><ins>+ this._element.appendChild(colorInputsContainerElement);
</ins><span class="cx">
</span><span class="cx"> this._opacity = 0;
</span><span class="cx"> this._opacityPattern = "url(Images/Checkers.svg)";
</span><span class="cx">
</span><del>- this._color = "white";
</del><ins>+ this._color = WebInspector.Color.fromString("white");
</ins><span class="cx">
</span><span class="cx"> this._dontUpdateColor = false;
</span><ins>+
+ this._enableColorComponentInputs = true;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="lines">@@ -95,19 +129,35 @@
</span><span class="cx">
</span><span class="cx"> set color(color)
</span><span class="cx"> {
</span><ins>+ console.assert(color instanceof WebInspector.Color);
+
</ins><span class="cx"> this._dontUpdateColor = true;
</span><span class="cx">
</span><del>- this._colorFormat = color.format;
</del><ins>+ let formatChanged = !this._color || this._color.format !== color.format;
</ins><span class="cx">
</span><del>- this._colorWheel.tintedColor = color;
</del><ins>+ this._color = color;
+
+ this._colorWheel.tintedColor = this._color;
</ins><span class="cx"> this._brightnessSlider.value = this._colorWheel.brightness;
</span><span class="cx">
</span><del>- this._opacitySlider.value = color.alpha;
- this._updateSliders(this._colorWheel.rawColor, color);
</del><ins>+ this._opacitySlider.value = this._color.alpha;
+ this._updateSliders(this._colorWheel.rawColor, this._color);
</ins><span class="cx">
</span><ins>+ this._showColorComponentInputs();
+
+ if (formatChanged)
+ this._handleFormatChange();
+
</ins><span class="cx"> this._dontUpdateColor = false;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ set enableColorComponentInputs(value)
+ {
+ this._enableColorComponentInputs = value;
+
+ this._showColorComponentInputs();
+ }
+
</ins><span class="cx"> colorWheelColorDidChange(colorWheel)
</span><span class="cx"> {
</span><span class="cx"> this._updateColor();
</span><span class="lines">@@ -129,16 +179,30 @@
</span><span class="cx"> if (this._dontUpdateColor)
</span><span class="cx"> return;
</span><span class="cx">
</span><del>- var opacity = Math.round(this._opacity * 100) / 100;
</del><ins>+ let opacity = Math.round(this._opacity * 100) / 100;
</ins><span class="cx">
</span><del>- var components;
- if (this._colorFormat === WebInspector.Color.Format.HSL || this._colorFormat === WebInspector.Color.Format.HSLA)
</del><ins>+ let format = this._color.format;
+ let components = null;
+ if (format === WebInspector.Color.Format.HSL || format === WebInspector.Color.Format.HSLA) {
</ins><span class="cx"> components = this._colorWheel.tintedColor.hsl.concat(opacity);
</span><del>- else
</del><ins>+ if (opacity !== 1)
+ format = WebInspector.Color.Format.HSLA;
+ } else {
</ins><span class="cx"> components = this._colorWheel.tintedColor.rgb.concat(opacity);
</span><ins>+ if (opacity !== 1 && format === WebInspector.Color.Format.RGB)
+ format = WebInspector.Color.Format.RGBA;
+ }
</ins><span class="cx">
</span><del>- this._color = new WebInspector.Color(this._colorFormat, components);
</del><ins>+ let formatChanged = this._color.format === format;
+
+ this._color = new WebInspector.Color(format, components);
+
+ this._showColorComponentInputs();
+
</ins><span class="cx"> this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
</span><ins>+
+ if (formatChanged)
+ this._handleFormatChange();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> _updateSliders(rawColor, tintedColor)
</span><span class="lines">@@ -150,8 +214,124 @@
</span><span class="cx"> this._opacitySlider.element.style.backgroundImage = "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern;
</span><span class="cx"> this._brightnessSlider.element.style.backgroundImage = "linear-gradient(90deg, black, " + rawColor + ")";
</span><span class="cx"> }
</span><ins>+
+ _handleFormatChange()
+ {
+ this._element.classList.toggle("hide-inputs", this._color.format !== WebInspector.Color.Format.Keyword
+ && this._color.format !== WebInspector.Color.Format.RGB
+ && this._color.format !== WebInspector.Color.Format.RGBA
+ && this._color.format !== WebInspector.Color.Format.HEX
+ && this._color.format !== WebInspector.Color.Format.ShortHEX
+ && this._color.format !== WebInspector.Color.Format.HEXAlpha
+ && this._color.format !== WebInspector.Color.Format.ShortHEXAlpha
+ && this._color.format !== WebInspector.Color.Format.HSL
+ && this._color.format !== WebInspector.Color.Format.HSLA);
+
+ this.dispatchEventToListeners(WebInspector.ColorPicker.Event.FormatChanged);
+ }
+
+ _showColorComponentInputs()
+ {
+ for (let {containerElement} of this._colorInputs.values())
+ containerElement.hidden = true;
+
+ if (!this._enableColorComponentInputs)
+ return;
+
+ function updateColorInput(key, value) {
+ let {containerElement, numberInputElement} = this._colorInputs.get(key);
+ numberInputElement.value = value;
+ containerElement.hidden = false;
+ }
+
+ switch (this._color.format) {
+ case WebInspector.Color.Format.RGB:
+ case WebInspector.Color.Format.RGBA:
+ case WebInspector.Color.Format.HEX:
+ case WebInspector.Color.Format.ShortHEX:
+ case WebInspector.Color.Format.HEXAlpha:
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ case WebInspector.Color.Format.Keyword:
+ var [r, g, b] = this._color.rgb;
+ updateColorInput.call(this, "R", r);
+ updateColorInput.call(this, "G", g);
+ updateColorInput.call(this, "B", b);
+ break;
+
+ case WebInspector.Color.Format.HSL:
+ case WebInspector.Color.Format.HSLA:
+ var [h, s, l] = this._color.hsl;
+ updateColorInput.call(this, "H", h);
+ updateColorInput.call(this, "S", s);
+ updateColorInput.call(this, "L", l);
+ break;
+
+ default:
+ return;
+ }
+
+ if ((this._color.format === WebInspector.Color.Format.Keyword && this._color.alpha !== 1)
+ || this._color.format === WebInspector.Color.Format.RGBA
+ || this._color.format === WebInspector.Color.Format.HSLA
+ || this._color.format === WebInspector.Color.Format.HEXAlpha
+ || this._color.format === WebInspector.Color.Format.ShortHEXAlpha) {
+ updateColorInput.call(this, "A", this._color.alpha);
+ }
+ }
+
+ _handleColorInputInput(event)
+ {
+ if (!this._enableColorComponentInputs) {
+ WebInspector.reportInternalError("Input event fired for disabled color component input");
+ return;
+ }
+
+ let r = this._colorInputs.get("R").numberInputElement.value;
+ let g = this._colorInputs.get("G").numberInputElement.value;
+ let b = this._colorInputs.get("B").numberInputElement.value;
+ let h = this._colorInputs.get("H").numberInputElement.value;
+ let s = this._colorInputs.get("S").numberInputElement.value;
+ let l = this._colorInputs.get("L").numberInputElement.value;
+ let a = this._colorInputs.get("A").numberInputElement.value;
+
+ let colorString = "";
+ let oldFormat = this._color.format;
+
+ switch (oldFormat) {
+ case WebInspector.Color.Format.RGB:
+ case WebInspector.Color.Format.HEX:
+ case WebInspector.Color.Format.ShortHEX:
+ case WebInspector.Color.Format.Keyword:
+ colorString = `rgb(${r}, ${g}, ${b})`;
+ break;
+
+ case WebInspector.Color.Format.RGBA:
+ case WebInspector.Color.Format.HEXAlpha:
+ case WebInspector.Color.Format.ShortHEXAlpha:
+ colorString = `rgba(${r}, ${g}, ${b}, ${a})`;
+ break;
+
+ case WebInspector.Color.Format.HSL:
+ colorString = `hsl(${h}, ${s}%, ${l}%)`;
+ break;
+
+ case WebInspector.Color.Format.HSLA:
+ colorString = `hsla(${h}, ${s}%, ${l}%, ${a})`;
+ break;
+
+ default:
+ WebInspector.reportInternalError(`Input event fired for invalid color format "${this._color.format}"`);
+ return;
+ }
+
+ this.color = WebInspector.Color.fromString(colorString);
+ this._color.format = oldFormat;
+
+ this.dispatchEventToListeners(WebInspector.ColorPicker.Event.ColorChanged, {color: this._color});
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.ColorPicker.Event = {
</span><del>- ColorChanged: "css-color-picker-color-changed"
</del><ins>+ ColorChanged: "css-color-picker-color-changed",
+ FormatChanged: "css-color-picker-format-changed",
</ins><span class="cx"> };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsGradientEditorjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -72,6 +72,7 @@
</span><span class="cx">
</span><span class="cx"> this._colorPicker = new WebInspector.ColorPicker;
</span><span class="cx"> this._colorPicker.colorWheel.dimension = 190;
</span><ins>+ this._colorPicker.enableColorComponentInputs = false;
</ins><span class="cx"> this._colorPicker.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
</span><span class="cx">
</span><span class="cx"> let angleLabel = this._element.appendChild(document.createElement("label"));
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsInlineSwatchjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (211056 => 211057)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2017-01-23 21:22:13 UTC (rev 211056)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2017-01-23 21:27:26 UTC (rev 211057)
</span><span class="lines">@@ -165,6 +165,7 @@
</span><span class="cx"> } else {
</span><span class="cx"> this._valueEditor = new WebInspector.ColorPicker;
</span><span class="cx"> this._valueEditor.addEventListener(WebInspector.ColorPicker.Event.ColorChanged, this._valueEditorValueDidChange, this);
</span><ins>+ this._valueEditor.addEventListener(WebInspector.ColorPicker.Event.FormatChanged, (event) => popover.update());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> popover.content = this._valueEditor.element;
</span></span></pre>
</div>
</div>
</body>
</html>