Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (251486 => 251487)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-10-23 19:25:01 UTC (rev 251487)
@@ -1,3 +1,61 @@
+2019-10-23 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: Replace color wheel with square HSB color picker
+ https://bugs.webkit.org/show_bug.cgi?id=203169
+ <rdar://problem/56449832>
+
+ Reviewed by Devin Rousso.
+
+ Replace the color wheel with a square HSB color picker.
+
+ The square HSB color picker provides more precision for choosing saturation,
+ and it's more familiar to most web developers.
+
+ * UserInterface/Main.html:
+ * UserInterface/Views/ColorPicker.css:
+ (.color-picker):
+ (.color-picker > .hue):
+ (body[dir=ltr] .color-picker > .hue):
+ (body[dir=rtl] .color-picker > .hue):
+ * UserInterface/Views/ColorPicker.js:
+ (WI.ColorPicker):
+ (WI.ColorPicker.prototype.get colorSquare):
+ (WI.ColorPicker.prototype.set color):
+ (WI.ColorPicker.prototype.colorSquareColorDidChange):
+ (WI.ColorPicker.prototype.sliderValueDidChange):
+ (WI.ColorPicker.prototype._updateColor):
+ (WI.ColorPicker.prototype._updateSliders):
+ Add a hue slider. The new color picker has the hue slider instead of the brightness slider.
+
+ * UserInterface/Views/ColorSquare.css: Renamed from Source/WebInspectorUI/UserInterface/Views/ColorWheel.css.
+ (.color-square):
+ (.color-square > .saturation-gradient):
+ (.color-square > .lightness-gradient):
+ (.color-square > .fill):
+ (.color-square > .crosshair):
+ * UserInterface/Views/ColorSquare.js: Added.
+ (WI.ColorSquare):
+ (WI.ColorSquare.prototype.get element):
+ (WI.ColorSquare.prototype.set dimension):
+ (WI.ColorSquare.prototype.get hue):
+ (WI.ColorSquare.prototype.set hue):
+ (WI.ColorSquare.prototype.get tintedColor):
+ (WI.ColorSquare.prototype.set tintedColor):
+ (WI.ColorSquare.prototype.get rawColor):
+ (WI.ColorSquare.prototype.handleEvent):
+ (WI.ColorSquare.prototype.get _saturation):
+ (WI.ColorSquare.prototype.get _brightness):
+ (WI.ColorSquare.prototype.get _lightness):
+ (WI.ColorSquare.prototype._handleMousedown):
+ (WI.ColorSquare.prototype._handleMousemove):
+ (WI.ColorSquare.prototype._handleMouseup):
+ (WI.ColorSquare.prototype._updateColorForMouseEvent):
+ (WI.ColorSquare.prototype._setCrosshairPosition):
+ (WI.ColorSquare.prototype._updateBaseColor):
+ * UserInterface/Views/ColorWheel.js: Removed.
+ * UserInterface/Views/GradientEditor.js:
+ (WI.GradientEditor):
+
2019-10-23 Yury Semikhatsky <yu...@chromium.org>
Web Inspector: frontend tests should clear output before resending results
Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2019-10-23 19:25:01 UTC (rev 251487)
@@ -66,7 +66,7 @@
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
- <link rel="stylesheet" href=""
+ <link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
<link rel="stylesheet" href=""
@@ -628,7 +628,7 @@
<script src=""
<script src=""
<script src=""
- <script src=""
+ <script src=""
<script src=""
<script src=""
<script src=""
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.css 2019-10-23 19:25:01 UTC (rev 251487)
@@ -30,7 +30,7 @@
padding: 5px;
--color-picker-width: 256px;
- --color-picker-brightness-offset-start: 41px;
+ --color-picker-hue-offset-start: 41px;
--color-picker-opacity-offset-start: 18px;
}
@@ -54,14 +54,18 @@
top: 0;
}
-body[dir=ltr] .color-picker > .brightness {
- left: calc(var(--color-picker-width) - var(--color-picker-brightness-offset-start));
+.color-picker > .hue {
+ background-image: linear-gradient(to right, red 0%, yellow 16.6%, lime 33.2%, aqua 50%, blue 66.6%, fuchsia 83.2%, red 100%);
}
-body[dir=rtl] .color-picker > .brightness {
- left: calc(var(--color-picker-brightness-offset-start) - var(--slider-height));
+body[dir=ltr] .color-picker > .hue {
+ left: calc(var(--color-picker-width) - var(--color-picker-hue-offset-start));
}
+body[dir=rtl] .color-picker > .hue {
+ left: calc(var(--color-picker-hue-offset-start) - var(--slider-height));
+}
+
body[dir=ltr] .color-picker > .opacity {
left: calc(var(--color-picker-width) - var(--color-picker-opacity-offset-start));
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2019-10-23 19:25:01 UTC (rev 251487)
@@ -29,11 +29,11 @@
{
super();
- this._colorWheel = new WI.ColorWheel(this, 200);
+ this._colorSquare = new WI.ColorSquare(this, 200);
- this._brightnessSlider = new WI.Slider;
- this._brightnessSlider.delegate = this;
- this._brightnessSlider.element.classList.add("brightness");
+ this._hueSlider = new WI.Slider;
+ this._hueSlider.delegate = this;
+ this._hueSlider.element.classList.add("hue");
this._opacitySlider = new WI.Slider;
this._opacitySlider.delegate = this;
@@ -73,8 +73,9 @@
this._element = document.createElement("div");
this._element.classList.add("color-picker");
- this._element.appendChild(this._colorWheel.element);
- this._element.appendChild(this._brightnessSlider.element);
+ this._element.append(this._colorSquare.element);
+ this._element.append(this._hueSlider.element);
+
this._element.appendChild(this._opacitySlider.element);
this._element.appendChild(colorInputsContainerElement);
@@ -90,22 +91,9 @@
// Public
- get element()
- {
- return this._element;
- }
+ get element() { return this._element; }
+ get colorSquare() { return this._colorSquare; }
- set brightness(brightness)
- {
- if (brightness === this._brightness)
- return;
-
- this._colorWheel.brightness = brightness;
-
- this._updateColor();
- this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
- }
-
set opacity(opacity)
{
if (opacity === this._opacity)
@@ -115,11 +103,6 @@
this._updateColor();
}
- get colorWheel()
- {
- return this._colorWheel;
- }
-
get color()
{
return this._color;
@@ -135,11 +118,12 @@
this._color = color;
- this._colorWheel.tintedColor = this._color;
- this._brightnessSlider.value = this._colorWheel.brightness / 100;
+ this._colorSquare.tintedColor = this._color;
+ this._hueSlider.value = this._color.hsl[0] / 360;
+
this._opacitySlider.value = this._color.alpha;
- this._updateSliders(this._colorWheel.rawColor, this._color);
+ this._updateSliders(this._colorSquare.rawColor, this._color);
this._showColorComponentInputs();
@@ -156,10 +140,10 @@
this._showColorComponentInputs();
}
- colorWheelColorDidChange(colorWheel)
+ colorSquareColorDidChange(colorSquare)
{
this._updateColor();
- this._updateSliders(this._colorWheel.rawColor, this._colorWheel.tintedColor);
+ this._updateSliders(this._colorSquare.rawColor, this._colorSquare.tintedColor);
}
sliderValueDidChange(slider, value)
@@ -166,8 +150,10 @@
{
if (slider === this._opacitySlider)
this.opacity = value;
- else if (slider === this._brightnessSlider)
- this.brightness = value * 100;
+ else if (slider === this._hueSlider) {
+ this._colorSquare.hue = value * 360;
+ this._updateColor();
+ }
}
// Private
@@ -182,11 +168,11 @@
let format = this._color.format;
let components = null;
if (format === WI.Color.Format.HSL || format === WI.Color.Format.HSLA) {
- components = this._colorWheel.tintedColor.hsl.concat(opacity);
+ components = this._colorSquare.tintedColor.hsl.concat(opacity);
if (opacity !== 1)
format = WI.Color.Format.HSLA;
} else {
- components = this._colorWheel.tintedColor.rgb.concat(opacity);
+ components = this._colorSquare.tintedColor.rgb.concat(opacity);
if (opacity !== 1 && format === WI.Color.Format.RGB)
format = WI.Color.Format.RGBA;
}
@@ -205,12 +191,9 @@
_updateSliders(rawColor, tintedColor)
{
- var rgb = this._colorWheel.tintedColor.rgb;
+ var rgb = this._colorSquare.tintedColor.rgb;
var opaque = new WI.Color(WI.Color.Format.RGBA, rgb.concat(1)).toString();
var transparent = new WI.Color(WI.Color.Format.RGBA, rgb.concat(0)).toString();
-
- this._brightnessSlider.element.style.setProperty("background-image", `linear-gradient(90deg, black, ${rawColor}, white)`);
-
this._opacitySlider.element.style.setProperty("background-image", "linear-gradient(90deg, " + transparent + ", " + opaque + "), " + this._opacityPattern);
}
Copied: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css (from rev 251486, trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css) (0 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css 2019-10-23 19:25:01 UTC (rev 251487)
@@ -0,0 +1,58 @@
+/*
+ * Copyright (C) 2019 Apple Inc. 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-square {
+ position: relative;
+}
+
+.color-square > .saturation-gradient {
+ background-image: linear-gradient(to right, white, hsla(0, 0%, 100%, 0));
+}
+
+.color-square > .lightness-gradient {
+ background-image: linear-gradient(to top, black, hsla(0, 0%, 0%, 0));
+}
+
+.color-square > .fill {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.color-square > .crosshair {
+ position: absolute;
+ top: calc(-1 * var(--crosshair-size) / 2);
+ left: calc(-1 * var(--crosshair-size) / 2);
+ width: var(--crosshair-size);
+ height: var(--crosshair-size);
+ background-color: white;
+ border: 0.5px solid black;
+ border-radius: 3px;
+ pointer-events: none;
+
+ --crosshair-size: 7px;
+}
Added: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js (0 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js 2019-10-23 19:25:01 UTC (rev 251487)
@@ -0,0 +1,192 @@
+/*
+ * Copyright (C) 2019 Apple Inc. 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.
+ */
+
+WI.ColorSquare = class ColorSquare
+{
+ constructor(delegate, dimension)
+ {
+ this._delegate = delegate;
+
+ this._hue = 0;
+ this._x = 0;
+ this._y = 0;
+ this._crosshairPosition = null;
+
+ this._element = document.createElement("div");
+ this._element.className = "color-square";
+
+ let saturationGradientElement = this._element.appendChild(document.createElement("div"));
+ saturationGradientElement.className = "saturation-gradient fill";
+
+ let lightnessGradientElement = this._element.appendChild(document.createElement("div"));
+ lightnessGradientElement.className = "lightness-gradient fill";
+
+ this._element.addEventListener("mousedown", this);
+
+ this._crosshairElement = this._element.appendChild(document.createElement("div"));
+ this._crosshairElement.className = "crosshair";
+
+ this.dimension = dimension;
+ }
+
+ // Public
+
+ get element() { return this._element; }
+
+ set dimension(dimension)
+ {
+ console.assert(!isNaN(dimension));
+ if (dimension === this._dimension)
+ return;
+
+ this._dimension = dimension;
+ this._element.style.width = this.element.style.height = `${this._dimension}px`;
+ this._updateBaseColor();
+ }
+
+ get hue()
+ {
+ return this._hue;
+ }
+
+ set hue(hue)
+ {
+ this._hue = hue;
+ this._updateBaseColor();
+ }
+
+ get tintedColor()
+ {
+ if (this._crosshairPosition)
+ return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, this._lightness]);
+ return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
+ }
+
+ set tintedColor(tintedColor)
+ {
+ console.assert(tintedColor instanceof WI.Color);
+ let hsl = tintedColor.hsl;
+ let saturation = Number.constrain(hsl[1], 0, 100);
+ let x = saturation / 100 * this._dimension;
+
+ let lightness = hsl[2];
+
+ // The color picker is HSB-based. (HSB is also known as HSV.)
+ // Derive lightness by using HSB to HSL equation.
+ let y = 2 * lightness / (200 - saturation);
+ y = -1 * (y - 1) * this._dimension;
+
+ this._setCrosshairPosition(new WI.Point(x, y));
+ }
+
+ get rawColor()
+ {
+ if (this._crosshairPosition)
+ return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, 50]);
+
+ return new WI.Color(WI.Color.Format.HSLA, WI.Color.Keywords.transparent);
+ }
+
+ // Protected
+
+ handleEvent(event)
+ {
+ switch (event.type) {
+ case "mousedown":
+ this._handleMousedown(event);
+ break;
+ case "mousemove":
+ this._handleMousemove(event);
+ break;
+ case "mouseup":
+ this._handleMouseup(event);
+ break;
+ }
+ }
+
+ // Private
+
+ get _saturation()
+ {
+ let saturation = this._x / this._dimension;
+ return Number.constrain(saturation, 0, 1) * 100;
+ }
+
+ get _brightness()
+ {
+ let brightness = 1 - (this._y / this._dimension);
+ return Number.constrain(brightness, 0, 1) * 100;
+ }
+
+ get _lightness()
+ {
+ // The color picker is HSB-based. (HSB is also known as HSV.)
+ // Derive lightness by using HSB to HSL equation.
+ return (200 - this._saturation) * (this._brightness / 100) / 2;
+ }
+
+ _handleMousedown(event)
+ {
+ window.addEventListener("mousemove", this, true);
+ window.addEventListener("mouseup", this, true);
+ this._updateColorForMouseEvent(event);
+
+ // Prevent text selection.
+ event.stop();
+ }
+
+ _handleMousemove(event)
+ {
+ this._updateColorForMouseEvent(event);
+ }
+
+ _handleMouseup(event)
+ {
+ window.removeEventListener("mousemove", this, true);
+ window.removeEventListener("mouseup", this, true);
+ }
+
+ _updateColorForMouseEvent(event)
+ {
+ let point = window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
+ this._setCrosshairPosition(point);
+
+ if (this._delegate && this._delegate.colorSquareColorDidChange)
+ this._delegate.colorSquareColorDidChange(this);
+ }
+
+ _setCrosshairPosition(point)
+ {
+ this._crosshairPosition = point;
+ this._x = Number.constrain(Math.round(point.x), 0, this._dimension);
+ this._y = Number.constrain(Math.round(point.y), 0, this._dimension);
+ this._crosshairElement.style.setProperty("transform", `translate(${this._x}px, ${this._y}px)`);
+ }
+
+ _updateBaseColor()
+ {
+ this._element.style.backgroundColor = `hsl(${this._hue}, 100%, 50%)`;
+ }
+};
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.css 2019-10-23 19:25:01 UTC (rev 251487)
@@ -1,47 +0,0 @@
-/*
- * Copyright (C) 2013 Apple Inc. 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-wheel {
- position: relative;
-}
-
-.color-wheel > canvas {
- width: 100%;
- height: 100%;
-}
-
-.color-wheel > .crosshair {
- position: absolute;
- top: calc(-1 * var(--crosshair-size) / 2);
- left: calc(-1 * var(--crosshair-size) / 2);
- width: var(--crosshair-size);
- height: var(--crosshair-size);
- background-color: white;
- border: 1px solid black;
- border-radius: 3px;
- pointer-events: none;
-
- --crosshair-size: 5px;
-}
Deleted: trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorWheel.js 2019-10-23 19:25:01 UTC (rev 251487)
@@ -1,225 +0,0 @@
-/*
- * Copyright (C) 2013, 2015 Apple Inc. 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.
- */
-
-WI.ColorWheel = class ColorWheel extends WI.Object
-{
- constructor(delegate, dimension)
- {
- console.assert(!isNaN(dimension));
-
- super();
-
- this._delegate = delegate;
-
- this._brightness = 50;
-
- this._element = document.createElement("div");
- this._element.className = "color-wheel";
-
- this._canvasElement = this._element.appendChild(document.createElement("canvas"));
- this._canvasElement.addEventListener("mousedown", this);
-
- this._canvasContext = this._canvasElement.getContext("2d");
-
- this._crosshairElement = this._element.appendChild(document.createElement("div"));
- this._crosshairElement.className = "crosshair";
-
- this.dimension = dimension;
- }
-
- // Public
-
- get element() { return this._element; }
-
- set dimension(dimension)
- {
- if (dimension === this._dimension)
- return;
-
- this._dimension = dimension;
-
- this._element.style.width = this.element.style.height = `${this._dimension}px`;
- this._canvasElement.width = this._canvasElement.height = this._dimension * window.devicePixelRatio;
-
- let center = this._dimension / 2;
- this._setCrosshairPosition(new WI.Point(center, center));
-
- this._updateCanvas();
- }
-
- get brightness()
- {
- return this._brightness;
- }
-
- set brightness(brightness)
- {
- if (brightness === this._brightness)
- return;
-
- this._brightness = brightness;
-
- this._updateCanvas();
- }
-
- get tintedColor()
- {
- if (this._crosshairPosition)
- return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, this._brightness]);
- return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
- }
-
- set tintedColor(tintedColor)
- {
- let hsl = tintedColor.hsl;
-
- let cosHue = Math.cos(hsl[0] * Math.PI / 180);
- let sinHue = Math.sin(hsl[0] * Math.PI / 180);
- let center = this._dimension / 2;
- let x = center + (sinHue * hsl[1]);
- let y = center - (cosHue * hsl[1]);
- this._setCrosshairPosition(new WI.Point(x, y));
-
- this.brightness = hsl[2];
- }
-
- get rawColor()
- {
- if (this._crosshairPosition)
- return new WI.Color(WI.Color.Format.HSL, [this._hue, this._saturation, 50]);
- return new WI.Color(WI.Color.Format.HSLA, [0, 0, 0, 0]);
- }
-
- // Protected
-
- handleEvent(event)
- {
- switch (event.type) {
- case "mousedown":
- this._handleMousedown(event);
- break;
- case "mousemove":
- this._handleMousemove(event);
- break;
- case "mouseup":
- this._handleMouseup(event);
- break;
- }
- }
-
- // Private
-
- get _hue()
- {
- let center = this._dimension / 2;
- let hue = Math.atan2(this._crosshairPosition.x - center, center - this._crosshairPosition.y) * 180 / Math.PI;
- if (hue < 0)
- hue += 360;
- return hue;
- }
-
- get _saturation()
- {
- let center = this._dimension / 2;
- let xDis = (this._crosshairPosition.x - center) / center;
- let yDis = (this._crosshairPosition.y - center) / center;
- return Math.sqrt(Math.pow(xDis, 2) + Math.pow(yDis, 2)) * 100;
- }
-
- _handleMousedown(event)
- {
- window.addEventListener("mousemove", this, true);
- window.addEventListener("mouseup", this, true);
-
- this._updateColorForMouseEvent(event);
- }
-
- _handleMousemove(event)
- {
- this._updateColorForMouseEvent(event);
- }
-
- _handleMouseup(event)
- {
- window.removeEventListener("mousemove", this, true);
- window.removeEventListener("mouseup", this, true);
- }
-
- _updateColorForMouseEvent(event)
- {
- var point = window.webkitConvertPointFromPageToNode(this._canvasElement, new WebKitPoint(event.pageX, event.pageY));
-
- this._setCrosshairPosition(point);
-
- if (this._delegate && typeof this._delegate.colorWheelColorDidChange === "function")
- this._delegate.colorWheelColorDidChange(this);
- }
-
- _setCrosshairPosition(point)
- {
- let radius = this._dimension / 2;
- let center = new WI.Point(radius, radius);
-
- // Prevents the crosshair from being dragged outside the wheel.
- if (center.distance(point) > radius) {
- let angle = Math.atan2(point.y - center.y, point.x - center.x);
- point = new WI.Point(center.x + radius * Math.cos(angle), center.y + radius * Math.sin(angle));
- }
-
- this._crosshairPosition = point;
- this._crosshairElement.style.setProperty("transform", "translate(" + Math.round(point.x) + "px, " + Math.round(point.y) + "px)");
- }
-
- _updateCanvas()
- {
- let dimension = this._dimension * window.devicePixelRatio;
- let center = dimension / 2;
-
- let imageData = this._canvasContext.createImageData(dimension, dimension);
- for (let y = 0; y < dimension; ++y) {
- for (let x = 0; x < dimension; ++x) {
- let xDis = (x - center) / center;
- let yDis = (y - center) / center;
- let saturation = Math.sqrt(Math.pow(xDis, 2) + Math.pow(yDis, 2)) * 100;
- if (saturation > 100)
- continue;
-
- let hue = Math.atan2(x - center, center - y) * 180 / Math.PI;
- if (hue < 0)
- hue += 360;
-
- let rgb = WI.Color.hsl2rgb(hue, saturation, this._brightness);
-
- let index = ((y * dimension) + x) * 4;
- imageData.data[index] = rgb[0];
- imageData.data[index + 1] = rgb[1];
- imageData.data[index + 2] = rgb[2];
- imageData.data[index + 3] = 255;
- }
- }
-
- this._canvasContext.putImageData(imageData, 0, 0);
- }
-};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js (251486 => 251487)
--- trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2019-10-23 19:13:36 UTC (rev 251486)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/GradientEditor.js 2019-10-23 19:25:01 UTC (rev 251487)
@@ -71,7 +71,7 @@
this._element.appendChild(this._gradientSlider.element);
this._colorPicker = new WI.ColorPicker;
- this._colorPicker.colorWheel.dimension = 190;
+ this._colorPicker.colorSquare.dimension = 190;
this._colorPicker.enableColorComponentInputs = false;
this._colorPicker.addEventListener(WI.ColorPicker.Event.ColorChanged, this._colorPickerColorChanged, this);
