Skip to content

GitLab

T
tangled
Commit e109347b authored by Sanket Joshi's avatar Sanket Joshi Committed by Commit Bot
Browse files
Options

Enable color format toggling via the keyboard 

Users should be able to change the active color format in the color
picker via the keyboard. With this CL, users can press the down arrow
or space to select the next color format. Users can also press the up
arrow to select the previous color format.

Bug: 1007048
Change-Id: Id12ef30d80cbc7f56e029847d29d8bcf33f1b8cc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1819840Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#700337}
parent 3664420a
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 25 deletions
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ e109347b
......@@ -46,14 +46,13 @@ const Direction = {
* @enum {number}
*/
const ColorChannel = {
UNDEFINED: 0,
HEX: 1,
R: 2,
G: 3,
B: 4,
H: 5,
S: 6,
L: 7,
HEX: 0,
R: 1,
G: 2,
B: 3,
H: 4,
S: 5,
L: 6,
};
/**
......@@ -61,10 +60,9 @@ const ColorChannel = {
* @enum {number}
*/
const ColorFormat = {
UNDEFINED: 0,
HEX: 1,
RGB: 2,
HSL: 3,
HEX: 0,
RGB: 1,
HSL: 2,
};
/**
......@@ -1662,9 +1660,34 @@ class FormatToggler extends HTMLElement {
this.append(...this.colorFormatLabels_, this.upDownIcon_);
this.addEventListener('click', this.onClick_);
this.addEventListener('keydown', this.onKeyDown_);
this.addEventListener('mousedown', (event) => event.preventDefault());
}
/**
* @param {bool} choosePreviousFormat if true, choose previous format
* instead of next
*/
updateColorFormat_(choosePreviousFormat) {
const numFormats = Object.keys(ColorFormat).length;
const newValue = choosePreviousFormat
? this.currentColorFormat_ - 1
: this.currentColorFormat_ + 1;
const newColorFormatKey = Object.keys(ColorFormat).filter((key) => {
return ColorFormat[key] ===
(((newValue % numFormats) + numFormats) % numFormats);
});
this.currentColorFormat_ = ColorFormat[newColorFormatKey];
this.adjustFormatLabelVisibility_();
this.dispatchEvent(new CustomEvent('format-change', {
detail: {
colorFormat: this.currentColorFormat_
}
}));
}
adjustFormatLabelVisibility_() {
this.colorFormatLabels_.forEach((colorFormatLabel) => {
if (colorFormatLabel.colorFormat === this.currentColorFormat_) {
......@@ -1676,20 +1699,23 @@ class FormatToggler extends HTMLElement {
}
onClick_ = () => {
if (this.currentColorFormat_ == ColorFormat.HEX) {
this.currentColorFormat_ = ColorFormat.RGB;
} else if (this.currentColorFormat_ == ColorFormat.RGB) {
this.currentColorFormat_ = ColorFormat.HSL;
} else if (this.currentColorFormat_ == ColorFormat.HSL) {
this.currentColorFormat_ = ColorFormat.HEX;
}
this.adjustFormatLabelVisibility_();
this.focus();
this.updateColorFormat_(false);
}
this.dispatchEvent(new CustomEvent('format-change', {
detail: {
colorFormat: this.currentColorFormat_
}
}));
/**
* @param {!Event} event
*/
onKeyDown_ = (event) => {
switch(event.key) {
case 'ArrowUp':
this.updateColorFormat_(true);
break;
case 'ArrowDown':
case ' ':
this.updateColorFormat_(false);
break;
}
}
}
window.customElements.define('format-toggler', FormatToggler);
......
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-keyboard-up-down-space-format-toggle.html 0 → 100644
View file @ e109347b
<!DOCTYPE html>
<html>
<head>
<script>
testRunner.dumpAsText();
testRunner.waitUntilDone();
</script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#7EFFC9'>
<p id='description' style='opacity: 0'></p>
<div id='console' style='opacity: 0'></div>
<script>
let descriptionContainer = document.getElementById('description');
openPicker(document.getElementById('color'), openPickerCallback, openPickerCallback);
function openPickerCallback() {
if (internals.pagePopupWindow) {
descriptionContainer.append('Popup opened.', document.createElement('br'));
popupWindow.focus();
const popupDocument = popupWindow.document;
const formatToggler = popupDocument.querySelector('format-toggler');
const formatLabels = formatToggler.colorFormatLabels_;
formatToggler.focus();
toggleFormatsAndLogFormatLabels(formatLabels, 'ArrowDown');
toggleFormatsAndLogFormatLabels(formatLabels, 'ArrowUp');
toggleFormatsAndLogFormatLabels(formatLabels, ' ');
} else {
descriptionContainer.append('Popup did not open.', document.createElement('br'));
}
descriptionContainer.append('TEST COMPLETE');
testRunner.notifyDone();
}
function toggleFormatsAndLogFormatLabels(formatLabels, keyDownString) {
for(let i = 0; i < formatLabels.length; i++) {
eventSender.keyDown(keyDownString);
let currentFormatLabel = formatLabels.filter((formatLabel) => {
return !formatLabel.classList.contains('hidden-format-label');
})[0];
descriptionContainer.append(currentFormatLabel.textContent, document.createElement('br'));
}
}
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment