Web Inspector: Replace color wheel with square HSB color picker
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 23 Oct 2019 19:25:01 +0000 (19:25 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 23 Oct 2019 19:25:01 +0000 (19:25 +0000)
commitb081530e622f40433a2ef41d1a90848e6e99edde
treef4369eb51a3df6c6d42306ed2a2c8e07940738af
parent2916ab3cf4fe1e7d3148780de0f4efe9d8db3f4a
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):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@251487 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Views/ColorPicker.css
Source/WebInspectorUI/UserInterface/Views/ColorPicker.js
Source/WebInspectorUI/UserInterface/Views/ColorSquare.css [moved from Source/WebInspectorUI/UserInterface/Views/ColorWheel.css with 76% similarity]
Source/WebInspectorUI/UserInterface/Views/ColorSquare.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Views/ColorWheel.js [deleted file]
Source/WebInspectorUI/UserInterface/Views/GradientEditor.js