Skip to content

GitLab

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

Enable color selection submission/cancellation via keyboard 

After this change, users of the color picker can submit their color
selection via the enter key. They can also cancel their selection via
the escape key.

Additionally, to support tests for this scenario, a custom delay
parameter is being added to waitUntilClosing. When a value is submitted
in the color picker, a callback to set the input type color's value and
close the popup is issued, with a 100ms delay. So, in order to validate
behavior after the value change and popup closure, the callback delay
needs to be at least 100ms. So the enter and escape keyboard input
tests pass a 100ms custom delay to waitUntilClosing.

The reason for using an optional custom delay parameter rather than
just increasing the delay for all tests is to avoid breaking existing
tests (specifically "datetimelocal-change-type-on-input-crash.html")
that rely on a shorter delay.

Bug: 1007426
Change-Id: I9596bd4cc5955f02124d6c820a7b60444a1e1fcc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1822843Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#700457}
parent cf1a128d
Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 3 deletions
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ 2726aa1f
...@@ -441,6 +441,8 @@ class ColorPicker extends HTMLElement { ...@@ -441,6 +441,8 @@ class ColorPicker extends HTMLElement {
.addEventListener('manual-color-change', this.onManualColorChange_); .addEventListener('manual-color-change', this.onManualColorChange_);
this.addEventListener('visual-color-change', this.onVisualColorChange_); this.addEventListener('visual-color-change', this.onVisualColorChange_);
document.documentElement.addEventListener('keydown', this.onKeyDown_);
} }
get selectedColor() { get selectedColor() {
...@@ -494,11 +496,29 @@ class ColorPicker extends HTMLElement { ...@@ -494,11 +496,29 @@ class ColorPicker extends HTMLElement {
} }
} }
/**
* @param {!Event} event
*/
onKeyDown_ = (event) => {
switch(event.key) {
case 'Enter':
this.submissionControls_.submitButton.click();
break;
case 'Escape':
this.submissionControls_.cancelButton.click();
break;
}
}
static get COMMIT_DELAY_MS() {
return 100;
}
onSubmitButtonClick_ = () => { onSubmitButtonClick_ = () => {
const selectedValue = this.selectedColor_.asHex(); const selectedValue = this.selectedColor_.asHex();
window.setTimeout(function() { window.setTimeout(function() {
window.pagePopupController.setValueAndClosePopup(0, selectedValue); window.pagePopupController.setValueAndClosePopup(0, selectedValue);
}, 100); }, ColorPicker.COMMIT_DELAY_MS);
} }
onCancelButtonClick_ = () => { onCancelButtonClick_ = () => {
...@@ -1825,6 +1845,14 @@ class SubmissionControls extends HTMLElement { ...@@ -1825,6 +1845,14 @@ class SubmissionControls extends HTMLElement {
); );
this.append(this.submitButton_, this.cancelButton_); this.append(this.submitButton_, this.cancelButton_);
} }
get submitButton() {
return this.submitButton_;
}
get cancelButton() {
return this.cancelButton_;
}
} }
window.customElements.define('submission-controls', SubmissionControls); window.customElements.define('submission-controls', SubmissionControls);
......
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-enter-submission.html 0 → 100644
View file @ 2726aa1f
<!DOCTYPE html>
<html>
<head>
<script src='../../../../resources/testharness.js'></script>
<script src='../../../../resources/testharnessreport.js'></script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#80d9ff'>
<script>
'use strict';
let t = async_test('Color picker: Pressing enter to submit color selection.');
t.step(() => {
let colorControl = document.getElementById('color');
openPicker(colorControl, t.step_func(() => {
popupWindow.focus();
const popupDocument = popupWindow.document;
const colorWell = popupDocument.querySelector('color-well');
const colorWellRect = colorWell.getBoundingClientRect();
eventSender.mouseMoveTo(colorWellRect.left, colorWellRect.top);
eventSender.mouseDown();
eventSender.mouseMoveTo(colorWellRect.left + (colorWellRect.width * 4 / 10), colorWellRect.top + (colorWellRect.height * 6 / 10));
eventSender.mouseUp();
eventSender.keyDown('Enter');
waitUntilClosing(t.step_func_done(() => {
assert_equals(colorControl.value, '#3d5a66', 'Color control value should update after pressing enter.');
}), popupWindow.eval('ColorPicker').COMMIT_DELAY_MS);
}), t.step_func_done(() => {
assert_true(true, 'Popup did not open.');
}));
});
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/controls-new-ui/color/color-picker-escape-cancellation.html 0 → 100644
View file @ 2726aa1f
<!DOCTYPE html>
<html>
<head>
<script src='../../../../resources/testharness.js'></script>
<script src='../../../../resources/testharnessreport.js'></script>
<script src='../../../forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#80d9ff'>
<script>
'use strict';
let t = async_test('Color picker: Pressing escape to discard color selection.');
t.step(() => {
let colorControl = document.getElementById('color');
openPicker(colorControl, t.step_func(() => {
popupWindow.focus();
const popupDocument = popupWindow.document;
const colorWell = popupDocument.querySelector('color-well');
const colorWellRect = colorWell.getBoundingClientRect();
eventSender.mouseMoveTo(colorWellRect.left, colorWellRect.top);
eventSender.mouseDown();
eventSender.mouseMoveTo(colorWellRect.left + (colorWellRect.width * 4 / 10), colorWellRect.top + (colorWellRect.height * 6 / 10));
eventSender.mouseUp();
eventSender.keyDown('Escape');
waitUntilClosing(t.step_func_done(() => {
assert_equals(colorControl.value, '#80d9ff', 'Color control value should remain the same after pressing escape.');
}), popupWindow.eval('ColorPicker').COMMIT_DELAY_MS);
}), t.step_func_done(() => {
assert_true(true, 'Popup did not open.');
}));
});
</script>
</body>
</html>
\ No newline at end of file
third_party/blink/web_tests/fast/forms/resources/picker-common.js
View file @ 2726aa1f
...@@ -11,8 +11,8 @@ function popupOpenCallbackWrapper() { ...@@ -11,8 +11,8 @@ function popupOpenCallbackWrapper() {
setTimeout(popupOpenCallback, 20); setTimeout(popupOpenCallback, 20);
} }
function waitUntilClosing(callback) { function waitUntilClosing(callback, customDelay) {
setTimeout(callback, 1); setTimeout(callback, (customDelay !== undefined) ? customDelay : 1);
} }
function rootWindow() { function rootWindow() {
......
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