Commit e9b26d7a authored by Ionel Popescu's avatar Ionel Popescu Committed by Commit Bot

Add HC support to time picker.

The UI for time picker is updated to support high contrast by using the
forced-colors media query.

The in-page icon is also updated to work correctly in HC.

Bug: 1015096, 1015097
Change-Id: I6eb44b0072239950804a185059de603379c3de9c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1869354
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarKent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#708192}
parent 1ce6abcf
...@@ -9,16 +9,17 @@ body { ...@@ -9,16 +9,17 @@ body {
.time-picker { .time-picker {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid transparent;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 273px; height: 298px;
} }
.time-columns { .time-columns {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 82%; height: 252px;
margin: 2px; margin: 1px;
} }
.time-column { .time-column {
...@@ -39,10 +40,13 @@ body { ...@@ -39,10 +40,13 @@ body {
} }
.time-cell { .time-cell {
border: 1px solid transparent;
color: #101010; color: #101010;
font-size: 14px; font-size: 14px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
margin: 1px;
scroll-margin: 1px;
scroll-snap-align: start; scroll-snap-align: start;
text-align: center; text-align: center;
width: 48px; width: 48px;
...@@ -61,6 +65,7 @@ body { ...@@ -61,6 +65,7 @@ body {
.time-column:focus .time-cell.selected { .time-column:focus .time-cell.selected {
outline: auto 1px -webkit-focus-ring-color; outline: auto 1px -webkit-focus-ring-color;
outline-offset: 0px;
} }
.submission-controls { .submission-controls {
...@@ -69,7 +74,7 @@ body { ...@@ -69,7 +74,7 @@ body {
bottom: 0px; bottom: 0px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 15%; height: 41px;
position: absolute; position: absolute;
width: 100%; width: 100%;
} }
...@@ -81,7 +86,7 @@ body { ...@@ -81,7 +86,7 @@ body {
.submission-button { .submission-button {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 0; border: 1px solid white;
height: 32px; height: 32px;
margin: 4px; margin: 4px;
padding: 8px; padding: 8px;
...@@ -92,3 +97,46 @@ body { ...@@ -92,3 +97,46 @@ body {
background-color: #E5E5E5; background-color: #E5E5E5;
border-radius: 2px; border-radius: 2px;
} }
@media (forced-colors: active) {
.time-cell {
background-color: Window;
color: WindowText;
forced-color-adjust: none;
}
.time-cell:hover {
background-color: Window;
border-color: Highlight;
}
.time-cell.selected {
background-color: Highlight;
color: Window;
}
.time-column:focus .time-cell.selected {
border: 2px solid WindowText;
margin: 0px;
outline: none;
}
.submission-button {
background-color: Window;
border-color: transparent;
forced-color-adjust: none;
}
.submission-button:hover {
background-color: Window;
border-color: Highlight;
}
.submission-button:focus {
outline-color: WindowText;
}
.submission-button path {
fill: WindowText;
}
}
...@@ -252,8 +252,9 @@ class TimePicker extends HTMLElement { ...@@ -252,8 +252,9 @@ class TimePicker extends HTMLElement {
} }
} }
TimePicker.ClassName = 'time-picker'; TimePicker.ClassName = 'time-picker';
TimePicker.Height = 273; TimePicker.Height = 300;
TimePicker.ColumnWidth = 54; TimePicker.ColumnWidth = 56;
TimePicker.BorderWidth = 1;
window.customElements.define('time-picker', TimePicker); window.customElements.define('time-picker', TimePicker);
/** /**
...@@ -266,7 +267,7 @@ class TimeColumns extends HTMLElement { ...@@ -266,7 +267,7 @@ class TimeColumns extends HTMLElement {
this.className = TimeColumns.ClassName; this.className = TimeColumns.ClassName;
this.hourColumn_ = new TimeColumn(TimeColumnType.HOUR, timePicker); this.hourColumn_ = new TimeColumn(TimeColumnType.HOUR, timePicker);
this.width_ = 0; this.width_ = TimePicker.BorderWidth * 2 + TimeColumns.Margin * 2;
this.minuteColumn_ = new TimeColumn(TimeColumnType.MINUTE, timePicker); this.minuteColumn_ = new TimeColumn(TimeColumnType.MINUTE, timePicker);
if (timePicker.hasAMPM) { if (timePicker.hasAMPM) {
this.ampmColumn_ = new TimeColumn(TimeColumnType.AMPM, timePicker); this.ampmColumn_ = new TimeColumn(TimeColumnType.AMPM, timePicker);
...@@ -321,6 +322,7 @@ class TimeColumns extends HTMLElement { ...@@ -321,6 +322,7 @@ class TimeColumns extends HTMLElement {
}; };
} }
TimeColumns.ClassName = 'time-columns'; TimeColumns.ClassName = 'time-columns';
TimeColumns.Margin = 1;
window.customElements.define('time-columns', TimeColumns); window.customElements.define('time-columns', TimeColumns);
/** /**
......
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 14C6.35417 14 5.73177 13.9167 5.13281 13.75C4.53906 13.5833 3.98177 13.349 3.46094 13.0469C2.94531 12.7396 2.47396 12.375 2.04688 11.9531C1.625 11.526 1.26042 11.0547 0.953125 10.5391C0.651042 10.0182 0.416667 9.46094 0.25 8.86719C0.0833333 8.26823 0 7.64583 0 7C0 6.35417 0.0833333 5.73438 0.25 5.14062C0.416667 4.54167 0.651042 3.98438 0.953125 3.46875C1.26042 2.94792 1.625 2.47656 2.04688 2.05469C2.47396 1.6276 2.94531 1.26302 3.46094 0.960938C3.98177 0.653646 4.53906 0.416667 5.13281 0.25C5.73177 0.0833333 6.35417 0 7 0C7.64583 0 8.26562 0.0833333 8.85938 0.25C9.45833 0.416667 10.0156 0.653646 10.5312 0.960938C11.0521 1.26302 11.5234 1.6276 11.9453 2.05469C12.3724 2.47656 12.737 2.94792 13.0391 3.46875C13.3464 3.98438 13.5833 4.54167 13.75 5.14062C13.9167 5.73438 14 6.35417 14 7C14 7.64583 13.9167 8.26823 13.75 8.86719C13.5833 9.46094 13.3464 10.0182 13.0391 10.5391C12.737 11.0547 12.3724 11.526 11.9453 11.9531C11.5234 12.375 11.0521 12.7396 10.5312 13.0469C10.0156 13.349 9.45833 13.5833 8.85938 13.75C8.26562 13.9167 7.64583 14 7 14ZM7 1C6.17188 1 5.39323 1.15885 4.66406 1.47656C3.9401 1.78906 3.30469 2.21875 2.75781 2.76562C2.21615 3.30729 1.78646 3.94271 1.46875 4.67188C1.15625 5.39583 1 6.17188 1 7C1 7.82812 1.15625 8.60677 1.46875 9.33594C1.78646 10.0599 2.21615 10.6953 2.75781 11.2422C3.30469 11.7839 3.9401 12.2135 4.66406 12.5312C5.39323 12.8438 6.17188 13 7 13C7.82812 13 8.60417 12.8438 9.32812 12.5312C10.0573 12.2135 10.6927 11.7839 11.2344 11.2422C11.7812 10.6953 12.2109 10.0599 12.5234 9.33594C12.8411 8.60677 13 7.82812 13 7C13 6.17188 12.8411 5.39583 12.5234 4.67188C12.2109 3.94271 11.7812 3.30729 11.2344 2.76562C10.6927 2.21875 10.0573 1.78906 9.32812 1.47656C8.60417 1.15885 7.82812 1 7 1ZM7 7V3H6V8H10V7H7Z" fill="#101010"/> <path d="M7 14C6.35417 14 5.73177 13.9167 5.13281 13.75C4.53906 13.5833 3.98177 13.349 3.46094 13.0469C2.94531 12.7396 2.47396 12.375 2.04688 11.9531C1.625 11.526 1.26042 11.0547 0.953125 10.5391C0.651042 10.0182 0.416667 9.46094 0.25 8.86719C0.0833333 8.26823 0 7.64583 0 7C0 6.35417 0.0833333 5.73438 0.25 5.14062C0.416667 4.54167 0.651042 3.98438 0.953125 3.46875C1.26042 2.94792 1.625 2.47656 2.04688 2.05469C2.47396 1.6276 2.94531 1.26302 3.46094 0.960938C3.98177 0.653646 4.53906 0.416667 5.13281 0.25C5.73177 0.0833333 6.35417 0 7 0C7.64583 0 8.26562 0.0833333 8.85938 0.25C9.45833 0.416667 10.0156 0.653646 10.5312 0.960938C11.0521 1.26302 11.5234 1.6276 11.9453 2.05469C12.3724 2.47656 12.737 2.94792 13.0391 3.46875C13.3464 3.98438 13.5833 4.54167 13.75 5.14062C13.9167 5.73438 14 6.35417 14 7C14 7.64583 13.9167 8.26823 13.75 8.86719C13.5833 9.46094 13.3464 10.0182 13.0391 10.5391C12.737 11.0547 12.3724 11.526 11.9453 11.9531C11.5234 12.375 11.0521 12.7396 10.5312 13.0469C10.0156 13.349 9.45833 13.5833 8.85938 13.75C8.26562 13.9167 7.64583 14 7 14ZM7 1C6.17188 1 5.39323 1.15885 4.66406 1.47656C3.9401 1.78906 3.30469 2.21875 2.75781 2.76562C2.21615 3.30729 1.78646 3.94271 1.46875 4.67188C1.15625 5.39583 1 6.17188 1 7C1 7.82812 1.15625 8.60677 1.46875 9.33594C1.78646 10.0599 2.21615 10.6953 2.75781 11.2422C3.30469 11.7839 3.9401 12.2135 4.66406 12.5312C5.39323 12.8438 6.17188 13 7 13C7.82812 13 8.60417 12.8438 9.32812 12.5312C10.0573 12.2135 10.6927 11.7839 11.2344 11.2422C11.7812 10.6953 12.2109 10.0599 12.5234 9.33594C12.8411 8.60677 13 7.82812 13 7C13 6.17188 12.8411 5.39583 12.5234 4.67188C12.2109 3.94271 11.7812 3.30729 11.2344 2.76562C10.6927 2.21875 10.0573 1.78906 9.32812 1.47656C8.60417 1.15885 7.82812 1 7 1ZM7 7V3H6V8H10V7H7Z" fill="WindowText"/>
</svg> </svg>
...@@ -81,16 +81,16 @@ function clickDayCellAt(column, row) { ...@@ -81,16 +81,16 @@ function clickDayCellAt(column, row) {
} }
function hoverOverTimeCellAt(column, row) { function hoverOverTimeCellAt(column, row) {
const timeCellWidth = 52; const timeCellWidth = 56;
const timeCellHeight = 32; const timeCellHeight = 36;
skipAnimation(); skipAnimation();
var offset = cumulativeOffset(popupWindow.global.picker.timeColumns); var offset = cumulativeOffset(popupWindow.global.picker.timeColumns);
var x = offset[0]; var x = offset[0];
var y = offset[1]; var y = offset[1];
x += (column + 0.5) * timeCellWidth; x += (column + 0.5) * timeCellWidth;
y += (row + 0.5) * timeCellHeight; y += (row + 0.5) * timeCellHeight;
eventSender.mouseMoveTo(x, y); eventSender.mouseMoveTo(x, y);
} }
function clickTimeCellAt(column, row) { function clickTimeCellAt(column, row) {
......
<!DOCTYPE html>
<script>
testRunner.waitUntilDone();
</script>
<script src="../../forms/resources/picker-common.js"></script>
<input type="time" id="time" value="14:15">
<script>
openPicker(document.getElementById('time'), () => testRunner.notifyDone(), () => testRunner.notifyDone());
</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