Add high contrast support for date, week and month popup UI.

This CL plumbs the forced_colors_ state to the popup document when the
popup is initialized (WebPagePopupImpl::Initialize).

The UI for the date, month and week popups is updated to support high contrast
by using the forced-colors media query.

The in-page UI is also updated to correctly support the highlight color and
the icon is also changed.

Bug: 994219
Change-Id: Ia1460a20d77d4d30e93d81092ab232f84e9edf85
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1819569
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699566}

third_party/blink/renderer/core/exported/web_page_popup_impl.cc

@@ -277,6 +277,7 @@ void WebPagePopupImpl::Initialize(WebViewImpl* web_view,
       main_settings.GetAvailablePointerTypes());
   page_->GetSettings().SetPrimaryPointerType(
       main_settings.GetPrimaryPointerType());
+  page_->GetSettings().SetForcedColors(main_settings.GetForcedColors());
 
   ProvideContextFeaturesTo(*page_, std::make_unique<PagePopupFeaturesClient>());
   DEFINE_STATIC_LOCAL(Persistent<LocalFrameClient>, empty_local_frame_client,

third_party/blink/renderer/core/html/forms/resources/calendarPicker.js

@@ -2147,7 +2147,7 @@ YearListCell.BorderBottomWidth = 1;
 YearListCell.ButtonRows = 3;
 YearListCell.ButtonColumns = 4;
 YearListCell._SelectedHeight = hasInaccuratePointingDevice() ? 127 : 121;
-YearListCell._SelectedHeightRefresh = 121;
+YearListCell._SelectedHeightRefresh = 128;
 YearListCell.GetSelectedHeight = function() {
   if (global.params.isFormControlsRefreshEnabled) {
     return YearListCell._SelectedHeightRefresh;

third_party/blink/renderer/core/html/forms/resources/calendar_picker_refresh.css

@@ -29,7 +29,7 @@ body {
 .calendar-navigation-button {
   -webkit-align-self: center;
   background-color: #ffffff;
-  border: 0;
+  border: 1px solid transparent;
   color: #101010;
   padding: 0;
   text-align: center;
@@ -49,7 +49,7 @@ body {
 }
 
 .calendar-navigation-button:disabled path {
-  fill: rgba(16, 16, 16, 0.3);;
+  fill: rgba(16, 16, 16, 0.3);
 }
 
 .calendar-title {
@@ -83,9 +83,13 @@ body {
   margin-inline-end: 1px;
 }
 
+.week-number-cell {
+  border: 1px solid transparent !important;
+}
+
 .day-cell {
   background-color: #ffffff;
-  border: 0 !important;
+  border: 1px solid transparent !important;
   border-radius: 2px;
   color: #767676;
   padding: 1px;
@@ -132,7 +136,7 @@ body {
 }
 
 .today-button-refresh {
-  border: 0;
+  border: 1px solid transparent;
   bottom: 12px;
   color: #0078D4;
   font-size: 12px;
@@ -171,9 +175,127 @@ body {
 .year-list-cell .label {
   background-color: #EFEFEF;
   border-color: #CECECE;
+  margin-bottom: 1px;
 }
 
 .month-button {
+  border: 1px solid transparent !important;
   border-radius: 2px;
   color: #101010;
 }
+
+/* These forced colors mode styles override the default styling for elements
+ * when forced colors mode is enabled.
+ */
+@media (forced-colors: active) {
+  .calendar-navigation-button {
+    background-color: Window;
+    color: WindowText;
+    forced-color-adjust: none;
+  }
+
+  .calendar-navigation-button:hover {
+    background-color: Window;
+    border-color: Highlight;
+  }
+
+  .calendar-navigation-button:disabled {
+    background-color: Window;
+    border-color: transparent;
+  }
+
+  .calendar-navigation-button path {
+    fill: WindowText;
+  }
+
+  .calendar-navigation-button:disabled path {
+    fill: GrayText;
+  }
+
+  .month-popup-button polygon {
+    fill: WindowText !important;
+  }
+
+  .month-popup-button:disabled polygon {
+    fill: GrayText !important;
+  }
+
+  .week-number-cell  {
+    background-color: Window;
+    color: WindowText;
+    forced-color-adjust: none;
+  }
+
+  .day-cell {
+    background-color: Window;
+    color: GrayText;
+    forced-color-adjust: none;
+  }
+
+  .month-button {
+    background-color: Window;
+    color: WindowText;
+    forced-color-adjust: none;
+  }
+
+  .day-cell.current-month {
+    color: WindowText;
+  }
+
+  .day-cell.highlighted,
+  .month-button.highlighted,
+  .week-number-cell.highlighted {
+    background-color: Window;
+    border-color: Highlight !important;
+  }
+
+  .day-cell.selected,
+  .month-button.selected,
+  .week-number-cell.selected {
+    background-color: Highlight;
+  }
+
+  .day-cell.highlighted.today,
+  .day-cell.today,
+  .month-button.today {
+    background-color: Highlight;
+    border: 2px solid Window !important;
+  }
+
+  .day-cell.selected.today,
+  .month-button.selected.today {
+    border: 1px solid Window !important;
+  }
+
+  .day-cell.disabled,
+  .day-cell.disabled.today,
+  .month-button[aria-disabled="true"],
+  .week-number-cell.disabled {
+    background-color: Window;
+    border: 0 !important;
+    color: GrayText;
+  }
+
+  .today-button-refresh {
+    background-color: Window;
+    color: LinkText;
+    forced-color-adjust: none;
+  }
+
+  .today-button-refresh:hover {
+    background-color: Window;
+    border-color: Highlight;
+  }
+
+  .today-button-refresh:disabled {
+    background-color: Window;
+    border-color: transparent;
+    color: GrayText;
+    forced-color-adjust: none;
+  }
+
+  .scrubby-scroll-thumb {
+    background-color: WindowText;
+    forced-color-adjust: none;
+  }
+}

third_party/blink/renderer/core/html/forms/resources/month_picker.js

@@ -10,6 +10,9 @@
 function initializeMonthPicker(config) {
   global.picker = new MonthPicker(config);
   main.append(global.picker);
+  main.style.border = '1px solid transparent';
+  main.style.height = (MonthPicker.Height - 2) + 'px';
+  main.style.width = (MonthPicker.Width - 2) + 'px';
   resizeWindow(MonthPicker.Width, MonthPicker.Height);
 }
 
@@ -109,10 +112,10 @@ class MonthPicker extends HTMLElement {
     this.yearListView_.element.focus();
   }
 }
-MonthPicker.Width = 230;
+MonthPicker.Width = 232;
 MonthPicker.YearWidth = 194;
-MonthPicker.YearHeight = 120;
+MonthPicker.YearHeight = 128;
 MonthPicker.YearPadding = 12;
-MonthPicker.Height = 172;
+MonthPicker.Height = 182;
 MonthPicker.ClassNameTodayButton = 'today-button-refresh';
 window.customElements.define('month-picker', MonthPicker);
\ No newline at end of file

third_party/blink/renderer/core/html/resources/forced_colors.css

@@ -73,6 +73,20 @@
     color: ButtonText;
   }
 
+  input::-webkit-datetime-edit-ampm-field:focus,
+  input::-webkit-datetime-edit-day-field:focus,
+  input::-webkit-datetime-edit-hour-field:focus,
+  input::-webkit-datetime-edit-millisecond-field:focus,
+  input::-webkit-datetime-edit-minute-field:focus,
+  input::-webkit-datetime-edit-month-field:focus,
+  input::-webkit-datetime-edit-second-field:focus,
+  input::-webkit-datetime-edit-week-field:focus,
+  input::-webkit-datetime-edit-year-field:focus {
+      background-color: highlight;
+      color: highlighttext;
+      outline: none;
+  }
+
   input[type="color"]:disabled {
     border-color: GrayText;
   }

third_party/blink/renderer/core/html/resources/images/calendar_icon.svg

 <svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 6H7V7H6V6ZM9 12H10V13H9V12ZM12 6H13V7H12V6ZM9 6H10V7H9V6ZM6 8H7V9H6V8ZM3 8H4V9H3V8ZM12 8H13V9H12V8ZM9 8H10V9H9V8ZM6 10H7V11H6V10ZM3 10H4V11H3V10ZM12 10H13V11H12V10ZM9 10H10V11H9V10ZM6 12H7V13H6V12ZM3 12H4V13H3V12ZM16 1V15H0V1H3V0H4V1H12V0H13V1H16ZM1 2V4H15V2H13V3H12V2H4V3H3V2H1ZM15 14V5H1V14H15Z" fill="#101010"/>
+<path d="M6 6H7V7H6V6ZM9 12H10V13H9V12ZM12 6H13V7H12V6ZM9 6H10V7H9V6ZM6 8H7V9H6V8ZM3 8H4V9H3V8ZM12 8H13V9H12V8ZM9 8H10V9H9V8ZM6 10H7V11H6V10ZM3 10H4V11H3V10ZM12 10H13V11H12V10ZM9 10H10V11H9V10ZM6 12H7V13H6V12ZM3 12H4V13H3V12ZM16 1V15H0V1H3V0H4V1H12V0H13V1H16ZM1 2V4H15V2H13V3H12V2H4V3H3V2H1ZM15 14V5H1V14H15Z" fill="WindowText"/>
 </svg>

third_party/blink/web_tests/fast/forms/controls-new-ui-high-contrast/date-picker-appearance.html

+<!DOCTYPE html>
+<script>
+testRunner.setUseMockTheme(false);
+testRunner.waitUntilDone();
+</script>
+<script src="../../forms/resources/picker-common.js"></script>
+<input type=date id=date value="10000-12-31">
+<script>
+openPicker(document.getElementById('date'), () => testRunner.notifyDone());
+</script>

third_party/blink/web_tests/fast/forms/controls-new-ui-high-contrast/month-picker-appearance.html

+<!DOCTYPE html>
+<script>
+testRunner.setUseMockTheme(false);
+testRunner.waitUntilDone();
+</script>
+<script src="../../forms/resources/picker-common.js"></script>
+<input type=month id=month value="2018-08">
+<script>
+openPicker(document.getElementById('month'), () => testRunner.notifyDone());
+</script>