- Revision
- 254094
- Author
- nvasil...@apple.com
- Date
- 2020-01-06 15:55:35 -0800 (Mon, 06 Jan 2020)
Log Message
Web Inspector: Color picker: make it keyboard accessible
https://bugs.webkit.org/show_bug.cgi?id=205572
<rdar://problem/58169943>
Reviewed by Brian Burg.
For the color square, make up, down, left, and right keys move the crosshair.
For the hue and opacity sliders:
- Pressing up and down keys should adjust the value by 1%.
- When holding Shift, up and down keys adjust the value by 10%.
* UserInterface/Views/ColorPicker.js:
(WI.ColorPicker.prototype.focus):
* UserInterface/Views/ColorSquare.css:
(.color-square):
Match the border of the hue and opacity sliders.
* UserInterface/Views/ColorSquare.js:
(WI.ColorSquare):
Make the color square focusable.
(WI.ColorSquare.prototype._handleMousedown):
(WI.ColorSquare.prototype._handleKeyDown):
* UserInterface/Views/InlineSwatch.js:
* UserInterface/Views/Slider.css:
(.slider:focus):
* UserInterface/Views/Slider.js:
(WI.Slider):
(WI.Slider.prototype._handleMousedown):
Drive-by: right clicking the slider shouldn't move the thumb.
(WI.Slider.prototype._handleKeyDown):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (254093 => 254094)
--- trunk/Source/WebInspectorUI/ChangeLog 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/ChangeLog 2020-01-06 23:55:35 UTC (rev 254094)
@@ -1,5 +1,41 @@
2020-01-06 Nikita Vasilyev <nvasil...@apple.com>
+ Web Inspector: Color picker: make it keyboard accessible
+ https://bugs.webkit.org/show_bug.cgi?id=205572
+ <rdar://problem/58169943>
+
+ Reviewed by Brian Burg.
+
+ For the color square, make up, down, left, and right keys move the crosshair.
+
+ For the hue and opacity sliders:
+ - Pressing up and down keys should adjust the value by 1%.
+ - When holding Shift, up and down keys adjust the value by 10%.
+
+ * UserInterface/Views/ColorPicker.js:
+ (WI.ColorPicker.prototype.focus):
+ * UserInterface/Views/ColorSquare.css:
+ (.color-square):
+ Match the border of the hue and opacity sliders.
+
+ * UserInterface/Views/ColorSquare.js:
+ (WI.ColorSquare):
+ Make the color square focusable.
+
+ (WI.ColorSquare.prototype._handleMousedown):
+ (WI.ColorSquare.prototype._handleKeyDown):
+ * UserInterface/Views/InlineSwatch.js:
+ * UserInterface/Views/Slider.css:
+ (.slider:focus):
+ * UserInterface/Views/Slider.js:
+ (WI.Slider):
+ (WI.Slider.prototype._handleMousedown):
+ Drive-by: right clicking the slider shouldn't move the thumb.
+
+ (WI.Slider.prototype._handleKeyDown):
+
+2020-01-06 Nikita Vasilyev <nvasil...@apple.com>
+
REGRESSION(r218839): Web Inspector: Color picker: pressing Esc should hide color picker
https://bugs.webkit.org/show_bug.cgi?id=205570
<rdar://problem/58169820>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorPicker.js 2020-01-06 23:55:35 UTC (rev 254094)
@@ -143,6 +143,11 @@
this._showColorComponentInputs();
}
+ focus()
+ {
+ this._colorSquare.element.focus();
+ }
+
colorSquareColorDidChange(colorSquare)
{
this._updateColor();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.css 2020-01-06 23:55:35 UTC (rev 254094)
@@ -25,6 +25,7 @@
.color-square {
position: relative;
+ outline: 0.5px solid hsl(0, 0%, 70%);
--stroke-opacity: 0.8;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ColorSquare.js 2020-01-06 23:55:35 UTC (rev 254094)
@@ -37,6 +37,7 @@
this._element = document.createElement("div");
this._element.className = "color-square";
+ this._element.tabIndex = 0;
let saturationGradientElement = this._element.appendChild(document.createElement("div"));
saturationGradientElement.className = "saturation-gradient fill";
@@ -49,6 +50,7 @@
this._polylineElement = null;
this._element.addEventListener("mousedown", this);
+ this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
this._crosshairElement = this._element.appendChild(document.createElement("div"));
this._crosshairElement.className = "crosshair";
@@ -172,6 +174,7 @@
// Prevent text selection.
event.stop();
+ this._element.focus();
}
_handleMousemove(event)
@@ -185,6 +188,36 @@
window.removeEventListener("mouseup", this, true);
}
+ _handleKeyDown(event)
+ {
+ let dx = 0;
+ let dy = 0;
+ let step = event.shiftKey ? 10 : 1;
+
+ switch (event.keyIdentifier) {
+ case "Right":
+ dx += step;
+ break;
+ case "Left":
+ dx -= step;
+ break;
+ case "Down":
+ dy += step;
+ break;
+ case "Up":
+ dy -= step;
+ break;
+ }
+
+ if (dx || dy) {
+ event.preventDefault();
+ this._setCrosshairPosition(new WI.Point(this._x + dx, this._y + dy));
+
+ if (this._delegate && this._delegate.colorSquareColorDidChange)
+ this._delegate.colorSquareColorDidChange(this);
+ }
+ }
+
_updateColorForMouseEvent(event)
{
let point = window.webkitConvertPointFromPageToNode(this._element, new WebKitPoint(event.pageX, event.pageY));
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.js 2020-01-06 23:55:35 UTC (rev 254094)
@@ -269,6 +269,7 @@
switch (this._type) {
case WI.InlineSwatch.Type.Color:
this._valueEditor.color = value;
+ this._valueEditor.focus();
break;
case WI.InlineSwatch.Type.Gradient:
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Slider.css 2020-01-06 23:55:35 UTC (rev 254094)
@@ -51,6 +51,11 @@
content: image-set(url(../Images/SliderThumbPressed.png) 1x, url(../Images/sliderthumbpres...@2x.png) 2x);
}
+.slider:focus {
+ outline: none;
+ border-color: -apple-system-control-accent;
+}
+
@media (-webkit-min-device-pixel-ratio: 2) {
.slider {
border: 0.5px solid hsl(0, 0%, 50%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js (254093 => 254094)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2020-01-06 23:49:21 UTC (rev 254093)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Slider.js 2020-01-06 23:55:35 UTC (rev 254094)
@@ -31,6 +31,7 @@
this._element = document.createElement("div");
this._element.className = "slider";
+ this._element.tabIndex = 0;
this._knob = this._element.appendChild(document.createElement("img"));
@@ -39,6 +40,7 @@
this._maxY = 0;
this._element.addEventListener("mousedown", this);
+ this._element.addEventListener("keydown", this._handleKeyDown.bind(this));
}
// Public
@@ -108,6 +110,9 @@
_handleMousedown(event)
{
+ if (event.button !== 0 || event.ctrlKey)
+ return;
+
if (event.target !== this._knob)
this.value = 1 - ((this._localPointForEvent(event).y - 3) / this.maxY);
@@ -118,6 +123,8 @@
window.addEventListener("mousemove", this, true);
window.addEventListener("mouseup", this, true);
+
+ this._element.focus();
}
_handleMousemove(event)
@@ -136,6 +143,26 @@
window.removeEventListener("mouseup", this, true);
}
+ _handleKeyDown(event)
+ {
+ let y = 0;
+ let step = event.shiftKey ? 0.1 : 0.01;
+
+ switch (event.keyIdentifier) {
+ case "Down":
+ y -= step;
+ break;
+ case "Up":
+ y += step;
+ break;
+ }
+
+ if (y) {
+ event.preventDefault();
+ this.value += y;
+ }
+ }
+
_localPointForEvent(event)
{
// We convert all event coordinates from page coordinates to local coordinates such that the slider
