Skip to content

GitLab

T
tangled
Commit d3196799 authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot
Browse files
Options

Scroll time columns to the 2nd half to allow users to scroll up. 

Since in the time picker each column has the list of cells doubled we can
start with each column scrolled to the middle in order to allow scrolling up.

The new behavior is validated by time-picker-appearance-wheel.html and other
existing tests.

Bug: 1021343
Change-Id: I65b04f3f1fec79c2efc75f54a7798726c6ab1200
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1907522
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714401}
parent 6b28f41d
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 1 deletion
third_party/blink/renderer/core/html/forms/resources/time_picker.css
View file @ d3196799
......@@ -103,6 +103,7 @@ body {
background-color: Window;
color: WindowText;
forced-color-adjust: none;
scroll-margin: 0px;
}
.time-cell:hover {
......
third_party/blink/renderer/core/html/forms/resources/time_picker.js
View file @ d3196799
......@@ -256,6 +256,8 @@ class TimePicker extends HTMLElement {
};
onWindowResize_ = (event) => {
// Scroll columns to the second half to allow scrolling up.
this.timeColumns_.scrollColumnsToMiddle();
this.timeColumns_.firstChild.focus();
};
......@@ -376,6 +378,18 @@ class TimeColumns extends HTMLElement {
}
return new Time(hour, minute, second, millisecond);
};
scrollColumnsToMiddle = () => {
this.hourColumn_.scrollTop = this.hourColumn_.scrollHeight / 2;
this.minuteColumn_.scrollTop = this.minuteColumn_.scrollHeight / 2;
if (this.secondColumn_) {
this.secondColumn_.scrollTop = this.secondColumn_.scrollHeight / 2;
}
if (this.millisecondColumn_) {
this.millisecondColumn_.scrollTop =
this.millisecondColumn_.scrollHeight / 2;
}
}
}
TimeColumns.ClassName = 'time-columns';
TimeColumns.Margin = 1;
......@@ -417,7 +431,7 @@ class TimeColumn extends HTMLUListElement {
duplicateCells.push(duplicatedTimeCell);
currentTime.next(this.columnType_);
}
this.selectedTimeCell = cells[0];
this.selectedTimeCell = duplicateCells[0];
this.middleTimeCell_ = duplicateCells[0];
this.append(...cells, ...duplicateCells);
};
......
third_party/blink/web_tests/virtual/controls-refresh/time-picker/time-picker-wheel.html 0 → 100644
View file @ d3196799
<!DOCTYPE html>
<script>
if (window.internals)
internals.settings.setLangAttributeAwareFormControlUIEnabled(true);
</script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<script src="../../../fast/forms/resources/picker-common.js"></script>
<script src="../../../fast/forms/calendar-picker/resources/calendar-picker-common.js"></script>
<script src="../../../fast/forms/resources/common-wheel-event.js"></script>
<input type="time" id="time" value="14:15" lang="ru">
<script>
let t = async_test('Test scrolling in time picker.');
function test1() {
let hourColumn = popupWindow.global.picker.timeColumns.firstChild;
const scrollHourTopBeforeWheelEvent = hourColumn.scrollTop;
// scroll up by 2 ticks ~ 2 cells
dispatchWheelEvent(hourColumn, 0, 2);
let minuteColumn = hourColumn.nextSibling;
const scrollMinuteTopBeforeWheelEvent = minuteColumn.scrollTop;
// scroll up by 3 ticks ~ 3 cells
dispatchWheelEvent(minuteColumn, 0, 3);
t.step_timeout(function() {
// verify that both columns have been scrolled up.
assert_true(scrollHourTopBeforeWheelEvent > hourColumn.scrollTop);
assert_true(scrollMinuteTopBeforeWheelEvent > minuteColumn.scrollTop);
t.done();
}, 200);
}
openPicker(document.getElementById('time'), t.step_func(test1), t.step_func_done(() => {
assert_false(internals.runtimeFlags.formControlsRefreshEnabled, "Popup did not open.");
}));
</script>
\ 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