Updated the in-page UI for date related types.

This CL contains the following changes:
- removed the clear button and spinner buttons from the in-page UI for
date, datetime-local, month, week and time types
- updated the calendar-picker-indicator to use a calendar icon for
date related types

For time the calendar-picker-indicator will be updated when popup
support will be introduced for this type.

Bug: 987050
Change-Id: Ic7849a323ebb3723c5b6a467463a8604058f72ca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1716161
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#681392}

third_party/blink/public/blink_resources.grd

@@ -24,7 +24,7 @@
       <include name="IDR_UASTYLE_THEME_INPUT_MULTIPLE_FIELDS_CSS" file="../renderer/core/html/resources/input_multiple_fields.css" type="BINDATA" compress="gzip"/>
       <include name="IDR_UASTYLE_THEME_WIN_CSS" file="../renderer/core/html/resources/win.css" type="BINDATA" compress="gzip"/>
       <include name="IDR_UASTYLE_THEME_WIN_QUIRKS_CSS" file="../renderer/core/html/resources/win_quirks.css" type="BINDATA" compress="gzip"/>
-      <include name="IDR_UASTYLE_THEME_CONTROLS_REFRESH_CSS" file="../renderer/core/html/resources/controls_refresh.css" type="BINDATA" compress="gzip"/>
+      <include name="IDR_UASTYLE_THEME_CONTROLS_REFRESH_CSS" file="../renderer/core/html/resources/controls_refresh.css" flattenhtml="true" type="BINDATA" compress="gzip"/>
       <include name="IDR_UASTYLE_THEME_FORCED_COLORS_CSS" file="../renderer/core/html/resources/forced_colors.css" type="BINDATA" compress="gzip"/>
       <include name="IDR_UASTYLE_SVG_CSS" file="../renderer/core/css/svg.css" type="BINDATA" compress="gzip"/>
       <include name="IDR_UASTYLE_MATHML_CSS" file="../renderer/core/css/mathml.css" type="BINDATA" compress="gzip"/>

third_party/blink/renderer/core/html/forms/multiple_fields_temporal_input_type_view.cc

@@ -366,15 +366,17 @@ void MultipleFieldsTemporalInputTypeView::CreateShadowSubtree() {
       MakeGarbageCollected<DateTimeEditElement, Document&,
                            DateTimeEditElement::EditControlOwner&>(document,
                                                                    *this));
-  GetElement().UpdateView();
-  container->AppendChild(
-      MakeGarbageCollected<ClearButtonElement, Document&,
-                           ClearButtonElement::ClearButtonOwner&>(document,
+  if (!RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+    GetElement().UpdateView();
+    container->AppendChild(
+        MakeGarbageCollected<ClearButtonElement, Document&,
+                             ClearButtonElement::ClearButtonOwner&>(document,
+                                                                    *this));
+    container->AppendChild(
+        MakeGarbageCollected<SpinButtonElement, Document&,
+                             SpinButtonElement::SpinButtonOwner&>(document,
                                                                   *this));
-  container->AppendChild(
-      MakeGarbageCollected<SpinButtonElement, Document&,
-                           SpinButtonElement::SpinButtonOwner&>(document,
-                                                                *this));
+  }
 
   if (LayoutTheme::GetTheme().SupportsCalendarPicker(
           input_type_->FormControlType()))
@@ -446,7 +448,8 @@ void MultipleFieldsTemporalInputTypeView::ForwardEvent(Event& event) {
 
 void MultipleFieldsTemporalInputTypeView::DisabledAttributeChanged() {
   EventQueueScope scope;
-  GetSpinButtonElement()->ReleaseCapture();
+  if (SpinButtonElement* spin_button = GetSpinButtonElement())
+    spin_button->ReleaseCapture();
   if (DateTimeEditElement* edit = GetDateTimeEditElement())
     edit->DisabledStateChanged();
 }
@@ -492,7 +495,8 @@ void MultipleFieldsTemporalInputTypeView::MinOrMaxAttributeChanged() {
 
 void MultipleFieldsTemporalInputTypeView::ReadonlyAttributeChanged() {
   EventQueueScope scope;
-  GetSpinButtonElement()->ReleaseCapture();
+  if (SpinButtonElement* spin_button = GetSpinButtonElement())
+    spin_button->ReleaseCapture();
   if (DateTimeEditElement* edit = GetDateTimeEditElement())
     edit->ReadOnlyStateChanged();
 }

third_party/blink/renderer/core/html/forms/picker_indicator_element.cc

@@ -57,8 +57,12 @@ PickerIndicatorElement::~PickerIndicatorElement() {
   DCHECK(!chooser_);
 }
 
-LayoutObject* PickerIndicatorElement::CreateLayoutObject(const ComputedStyle&,
-                                                         LegacyLayout) {
+LayoutObject* PickerIndicatorElement::CreateLayoutObject(
+    const ComputedStyle& style,
+    LegacyLayout legacy) {
+  if (RuntimeEnabledFeatures::FormControlsRefreshEnabled())
+    return HTMLDivElement::CreateLayoutObject(style, legacy);
+
   return new LayoutDetailsMarker(this);
 }
 

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

@@ -79,3 +79,39 @@ meter::-webkit-meter-even-less-good-value {
   background: #d83b01;
   border-radius: 1px 0px 0px 1px;
 }
+
+input[type="date" i]::-webkit-calendar-picker-indicator,
+input[type="datetime-local" i]::-webkit-calendar-picker-indicator,
+input[type="month" i]::-webkit-calendar-picker-indicator,
+input[type="week" i]::-webkit-calendar-picker-indicator {
+  background-image: -webkit-image-set(url(images/calendar_icon.svg) 1x);
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 1.2em;
+  opacity: 1;
+  outline: none;
+  padding-bottom: 2px;
+  padding-inline-start: 27px;
+  padding-inline-end: 3px;
+  padding-top: 2px;
+  width: 1.2em;
+}
+
+input::-webkit-calendar-picker-indicator:hover {
+  background-color: initial;
+}
+
+/* Remove focus ring from fields and use highlight color */
+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: rgba(0, 120, 212, 0.4);
+  outline: none;
+}

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"/>
+</svg>

third_party/blink/web_tests/fast/forms/controls-new-ui/date/date-appearance-basic.html

+<!DOCTYPE html>
+<script src="../../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../resources/common.js"></script>
+<body>
+
+<!-- no style for reference -->
+<ul>
+  <li>Date: <input type="date" /></li>
+</ul>
+
+<!-- disabled, readonly -->
+<ul>
+  <li>Date disabled: <input type="date" disabled/></li>
+  <li>Date readonly: <input type="date" readonly/></li>
+</ul>
+
+<!-- RTL -->
+<ul>
+  <li>Date RTL: <input type="date" value="2019-02-14" dir="rtl"/></li>
+</ul>
+
+<!-- font-size, font-weight -->
+<ul>
+  <li>Date font-size, font-weight: <input type="date" value="2019-02-14" style="font-size: 36px; font-weight: bold;"/> </li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Date hover: <input type="date" id="hoverTarget" value="2019-02-14"/></li>
+</ul>
+
+<!-- small width -->
+<ul>
+  <li>Date width: 10px: <input type="date" value="2019-02-14" style="width: 10px;"/> </li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Date zoom: 1.5: <input type="date" style="zoom: 1.5;"/></li>
+  <li>Date zoom: 3: <input type="date" style="zoom: 3;"/></li>
+</ul>
+
+<script>
+
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+
+runAfterLayoutAndPaint(function() {
+  var target = document.getElementById('hoverTarget');
+  hoverOverElement(target);
+}, true);
+
+</script>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/date/date-with-csp-expected.html

+<!DOCTYPE html>
+<head>
+<style>
+#custom-icon::-webkit-calendar-picker-indicator {
+  background-image: none;
+}
+</style>
+</head>
+<body>
+
+<!-- no style for reference -->
+<input type="date" />
+
+<!-- date with custom icon blocked by CSP -->
+<input type="data" id="custom-icon"/>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/date/date-with-csp.html

+<!DOCTYPE html>
+<head>
+<style>
+#custom-icon::-webkit-calendar-picker-indicator {
+  background-image: -webkit-image-set(url(resources/time_icon.svg) 1x);
+}
+</style>
+<link rel="match" href="date-with-csp-expected.html">
+<meta http-equiv="content-security-policy" content="default-src 'none'">
+</head>
+<body>
+
+<!-- no style for reference -->
+<input type="date" />
+
+<!-- date with custom icon blocked by CSP -->
+<input type="data" id="custom-icon"/>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/date/resources/time_icon.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"/>
+</svg>

third_party/blink/web_tests/fast/forms/controls-new-ui/datetimelocal/datetimelocal-appearance-basic.html

+<!DOCTYPE html>
+<script src="../../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../resources/common.js"></script>
+<body>
+
+<!-- no style for reference -->
+<ul>
+  <li>Datetime-local: <input type="datetime-local" /></li>
+</ul>
+
+<!-- disabled, readonly -->
+<ul>
+  <li>Datetime-local disabled: <input type="datetime-local" disabled/></li>
+  <li>Datetime-local readonly: <input type="datetime-local" readonly/></li>
+</ul>
+
+<!-- RTL -->
+<ul>
+  <li>Datetime-local RTL: <input type="datetime-local" value="2019-02-14T13:02" dir="rtl"/></li>
+</ul>
+
+<!-- font-size, font-weight -->
+<ul>
+  <li>Datetime-local font-size, font-weight: <input type="datetime-local" value="2019-02-14T13:02" style="font-size: 36px; font-weight: bold;"/> </li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Datetime-local hover: <input type="datetime-local" id="hoverTarget" value="2019-02-14T13:02"/></li>
+</ul>
+
+<!-- small width -->
+<ul>
+  <li>Datetime-local width: 10px: <input type="datetime-local" style="width: 10px;"/> </li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Datetime-local zoom: 1.5: <input type="datetime-local" style="zoom: 1.5;"/></li>
+  <li>Datetime-local zoom: 3: <input type="datetime-local" style="zoom: 3;"/></li>
+</ul>
+
+<script>
+
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+
+runAfterLayoutAndPaint(function() {
+  var target = document.getElementById('hoverTarget');
+  hoverOverElement(target);
+}, true);
+
+</script>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/month/month-appearance-basic.html

+<!DOCTYPE html>
+<script src="../../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../resources/common.js"></script>
+<body>
+
+<!-- no style for reference -->
+<ul>
+  <li>Month: <input type="month" /></li>
+</ul>
+
+<!-- disabled, readonly -->
+<ul>
+  <li>Month disabled: <input type="month" disabled/></li>
+  <li>Month readonly: <input type="month" readonly/></li>
+</ul>
+
+<!-- RTL -->
+<ul>
+  <li>Month RTL: <input type="month" value="2019-02" dir="rtl"/></li>
+</ul>
+
+<!-- font-size, font-weight -->
+<ul>
+  <li>Month font-size, font-weight: <input type="month" value="2019-02" style="font-size: 36px; font-weight: bold;"/> </li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Month hover: <input type="month" id="hoverTarget" value="2019-02"/></li>
+</ul>
+
+<!-- small width -->
+<ul>
+  <li>Month width: 10px: <input type="month" style="width: 10px;"/> </li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Month zoom: 1.5: <input type="month" style="zoom: 1.5;"/></li>
+  <li>Month zoom: 3: <input type="month" style="zoom: 3;"/></li>
+</ul>
+
+<script>
+
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+
+runAfterLayoutAndPaint(function() {
+  var target = document.getElementById('hoverTarget');
+  hoverOverElement(target);
+}, true);
+
+</script>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/time/time-appearance-basic.html

+<!DOCTYPE html>
+<script src="../../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../resources/common.js"></script>
+<body>
+
+<!-- no style for reference -->
+<ul>
+  <li>Time: <input type="time" /></li>
+</ul>
+
+<!-- disabled, readonly -->
+<ul>
+  <li>Time disabled: <input type="time" disabled/></li>
+  <li>Time readonly: <input type="time" readonly/></li>
+</ul>
+
+<!-- RTL -->
+<ul>
+  <li>Time RTL: <input type="time" value="13:00" dir="rtl"/></li>
+</ul>
+
+<!-- font-size, font-weight -->
+<ul>
+  <li>Time font-size, font-weight: <input type="time" value="13:00" style="font-size: 36px; font-weight: bold;"/> </li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Time hover: <input type="time" id="hoverTarget" value="13:00"/></li>
+</ul>
+
+<!-- small width -->
+<ul>
+  <li>Time width: 10px: <input type="time" style="width: 10px;"/> </li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Time zoom: 1.5: <input type="time" style="zoom: 1.5;"/></li>
+  <li>Time zoom: 3: <input type="time" style="zoom: 3;"/></li>
+</ul>
+
+<script>
+
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+
+runAfterLayoutAndPaint(function() {
+  var target = document.getElementById('hoverTarget');
+  hoverOverElement(target);
+}, true);
+
+</script>
+
+</body>
\ No newline at end of file

third_party/blink/web_tests/fast/forms/controls-new-ui/week/week-appearance-basic.html

+<!DOCTYPE html>
+<script src="../../../../resources/run-after-layout-and-paint.js"></script>
+<script src="../../resources/common.js"></script>
+<body>
+
+<!-- no style for reference -->
+<ul>
+  <li>Week: <input type="week" /></li>
+</ul>
+
+<!-- disabled, readonly -->
+<ul>
+  <li>Week disabled: <input type="week" disabled/></li>
+  <li>Week readonly: <input type="week" readonly/></li>
+</ul>
+
+<!-- RTL -->
+<ul>
+  <li>Week RTL: <input type="week" value="2019-W08" dir="rtl"/></li>
+</ul>
+
+<!-- font-size, font-weight -->
+<ul>
+  <li>Week font-size, font-weight: <input type="week" value="2019-W08" style="font-size: 36px; font-weight: bold;"/> </li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Week hover: <input type="week" id="hoverTarget" value="2019-W08"/></li>
+</ul>
+
+<!-- small width -->
+<ul>
+  <li>Week width: 10px: <input type="week" style="width: 10px;"/> </li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Week zoom: 1.5: <input type="week" style="zoom: 1.5;"/></li>
+  <li>Week zoom: 3: <input type="week" style="zoom: 3;"/></li>
+</ul>
+
+<script>
+
+if (window.testRunner)
+  testRunner.setUseMockTheme(false);
+
+runAfterLayoutAndPaint(function() {
+  var target = document.getElementById('hoverTarget');
+  hoverOverElement(target);
+}, true);
+
+</script>
+
+</body>
\ No newline at end of file