Added support for adjusting the default styling for HTML elements.

This change adds support for adjusting the default styling for HTML
elements as defined in core/html/resources/html.css in order to provide
an updated style when using the refreshed controls UI.

Also this change is updating the UI for text related types as an example
of how the default styling is adjusted when the FormControlsRefresh is
enabled.

Bug: 981983, 981984
Change-Id: I8fd32cc090cb8e5d785f758acbed7c3900e5e482
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1691321Reviewed-by: ccameron <ccameron@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Kentaro Hara <haraken@chromium.org>
Commit-Queue: Ionel Popescu <iopopesc@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#676232}

content/child/blink_platform_impl.cc

@@ -446,6 +446,8 @@ const DataResource kDataResources[] = {
     {"win.css", IDR_UASTYLE_THEME_WIN_CSS, ui::SCALE_FACTOR_NONE, true},
     {"win_quirks.css", IDR_UASTYLE_THEME_WIN_QUIRKS_CSS, ui::SCALE_FACTOR_NONE,
      true},
+    {"controls_refresh.css", IDR_UASTYLE_THEME_CONTROLS_REFRESH_CSS,
+     ui::SCALE_FACTOR_NONE, true},
     {"svg.css", IDR_UASTYLE_SVG_CSS, ui::SCALE_FACTOR_NONE, true},
     {"mathml.css", IDR_UASTYLE_MATHML_CSS, ui::SCALE_FACTOR_NONE, true},
     {"fullscreen.css", IDR_UASTYLE_FULLSCREEN_CSS, ui::SCALE_FACTOR_NONE, true},

third_party/blink/public/blink_resources.grd

@@ -24,6 +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_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"/>
       <include name="IDR_UASTYLE_FULLSCREEN_CSS" file="../renderer/core/css/fullscreen.css" type="BINDATA" compress="gzip"/>

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

+/* Copyright 2019 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* These styles adjust the default styling for HTML elements as defined in
+ * core/html/resources/html.css in order to provide an updated style when
+ * using the refreshed controls UI.
+ */
+
+input, textarea {
+  background-color: #ffffff;
+  border-color: #cecece;
+}
+
+input:hover, textarea:hover {
+  border-color: #9d9d9d;
+}
+
+input:disabled, textarea:disabled {
+  background-color: #ffffff;
+  border-color: #c5c5c5;
+}

third_party/blink/renderer/core/layout/layout_theme_default.cc

@@ -94,13 +94,18 @@ String LayoutThemeDefault::ExtraDefaultStyleSheet() {
           ? GetDataResourceAsASCIIString("input_multiple_fields.css")
           : String();
   String windows_style_sheet = GetDataResourceAsASCIIString("win.css");
+  String controls_refresh_style_sheet =
+      RuntimeEnabledFeatures::FormControlsRefreshEnabled()
+          ? GetDataResourceAsASCIIString("controls_refresh.css")
+          : String();
   StringBuilder builder;
-  builder.ReserveCapacity(extra_style_sheet.length() +
-                          multiple_fields_style_sheet.length() +
-                          windows_style_sheet.length());
+  builder.ReserveCapacity(
+      extra_style_sheet.length() + multiple_fields_style_sheet.length() +
+      windows_style_sheet.length() + controls_refresh_style_sheet.length());
   builder.Append(extra_style_sheet);
   builder.Append(multiple_fields_style_sheet);
   builder.Append(windows_style_sheet);
+  builder.Append(controls_refresh_style_sheet);
   return builder.ToString();
 }
 

third_party/blink/renderer/core/paint/theme_painter.cc

@@ -96,6 +96,27 @@ ThemePainter::ThemePainter() = default;
 #define COUNT_APPEARANCE(doc, feature) \
   doc.CountUse(WebFeature::kCSSValueAppearance##feature##Rendered)
 
+void CountAppearanceTextFieldPart(const Node* node) {
+  if (!node) {
+    return;
+  }
+  UseCounter::Count(node->GetDocument(),
+                    WebFeature::kCSSValueAppearanceTextFieldRendered);
+  WebFeature feature =
+      WebFeature::kCSSValueAppearanceTextFieldForOthersRendered;
+  if (auto* input = ToHTMLInputElementOrNull(node)) {
+    const AtomicString& type = input->type();
+    if (type == input_type_names::kSearch) {
+      feature = WebFeature::kCSSValueAppearanceTextFieldForSearch;
+    } else if (input->IsTextField()) {
+      feature = WebFeature::kCSSValueAppearanceTextFieldForTextField;
+    } else if (IsMultipleFieldsTemporalInput(type)) {
+      feature = WebFeature::kCSSValueAppearanceTextFieldForTemporalRendered;
+    }
+  }
+  UseCounter::Count(node->GetDocument(), feature);
+}
+
 // Returns true; Needs CSS painting and/or PaintBorderOnly().
 bool ThemePainter::Paint(const LayoutObject& o,
                          const PaintInfo& paint_info,
@@ -214,9 +235,24 @@ bool ThemePainter::Paint(const LayoutObject& o,
     case kMediaVolumeSliderThumbPart:
       return true;
     case kMenulistButtonPart:
+      return true;
     case kTextFieldPart:
+      if (!RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+        return true;
+      }
+      CountAppearanceTextFieldPart(node);
+      return PaintTextField(node, style, paint_info, r);
     case kTextAreaPart:
-      return true;
+      if (!RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+        return true;
+      }
+      if (node) {
+        const auto& doc = node->GetDocument();
+        COUNT_APPEARANCE(doc, TextArea);
+        if (!IsHTMLTextAreaElement(node))
+          COUNT_APPEARANCE(doc, TextAreaForOthers);
+      }
+      return PaintTextArea(node, style, paint_info, r);
     case kSearchFieldPart: {
       COUNT_APPEARANCE(doc, SearchField);
       auto* input = ToHTMLInputElementOrNull(node);
@@ -260,26 +296,15 @@ bool ThemePainter::PaintBorderOnly(const Node* node,
   // Call the appropriate paint method based off the appearance value.
   switch (style.Appearance()) {
     case kTextFieldPart:
-      if (node) {
-        UseCounter::Count(node->GetDocument(),
-                          WebFeature::kCSSValueAppearanceTextFieldRendered);
-        WebFeature feature =
-            WebFeature::kCSSValueAppearanceTextFieldForOthersRendered;
-        if (auto* input = ToHTMLInputElementOrNull(node)) {
-          const AtomicString& type = input->type();
-          if (type == input_type_names::kSearch) {
-            feature = WebFeature::kCSSValueAppearanceTextFieldForSearch;
-          } else if (input->IsTextField()) {
-            feature = WebFeature::kCSSValueAppearanceTextFieldForTextField;
-          } else if (IsMultipleFieldsTemporalInput(type)) {
-            feature =
-                WebFeature::kCSSValueAppearanceTextFieldForTemporalRendered;
-          }
-        }
-        UseCounter::Count(node->GetDocument(), feature);
+      if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+        return false;
       }
+      CountAppearanceTextFieldPart(node);
       return PaintTextField(node, style, paint_info, r);
     case kTextAreaPart:
+      if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+        return false;
+      }
       if (node) {
         const auto& doc = node->GetDocument();
         COUNT_APPEARANCE(doc, TextArea);

third_party/blink/web_tests/fast/forms/controls-new-ui/text/input-basic-box-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>Text: <input type="text" /></li>
+  <li>Number: <input type="number" /></li>
+  <li>Search: <input type="search" /></li>
+  <li>Email: <input type="email" /></li>
+  <li>Password: <input type="password" /></li>
+  <li>TextArea: <textarea></textarea></li>
+</ul>
+
+<!-- border -->
+<ul>
+  <li>Text border: <input type="text" style="border: 3px solid lime;"/></li>
+</ul>
+
+<!-- shadow -->
+<ul>
+  <li>Text shadow: <input type="text" style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"/></li>
+</ul>
+
+<!-- disabled -->
+<ul>
+  <li>Text disabled: <input type="text" disabled/></li>
+</ul>
+
+<!-- hover -->
+<ul>
+  <li>Text hover: <input type="text" id="hoverTarget"/></li>
+</ul>
+
+<!-- zoom -->
+<ul>
+  <li>Text zoom: 1.5: <input type="text" style="zoom: 1.5;"/></li>
+  <li>Text zoom: 4: <input type="text" style="zoom: 4;"/></li>
+</ul>
+
+<div style="background-color: blue">
+  <br>
+  <ul>
+    <li>Text: <input type="text /"></li>
+  </ul>
+  <br>
+</div>
+
+<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

ui/native_theme/native_theme_aura.cc

@@ -57,6 +57,12 @@ const SkColor kCheckboxAndRadioStrokeColor = SkColorSetRGB(0x73, 0x73, 0x73);
 const SkColor kCheckboxAndRadioStrokeDisabledColor =
     SkColorSetRGB(0xC5, 0xC5, 0xC5);
 
+const int kInputBorderRadius = 2;
+const int kInputBorderWidth = 1;
+const SkColor kInputBorderColor = SkColorSetRGB(0xCE, 0xCE, 0xCE);
+const SkColor kInputBorderHoveredColor = SkColorSetRGB(0x9D, 0x9D, 0x9D);
+const SkColor kInputBorderDisabledColor = SkColorSetRGB(0xC5, 0xC5, 0xC5);
+
 }  // namespace
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -444,6 +450,40 @@ SkRect NativeThemeAura::PaintCheckboxRadioCommon(
   return skrect;
 }
 
+void NativeThemeAura::PaintTextField(cc::PaintCanvas* canvas,
+                                     State state,
+                                     const gfx::Rect& rect,
+                                     const TextFieldExtraParams& text) const {
+  if (!features::IsFormControlsRefreshEnabled()) {
+    return NativeThemeBase::PaintTextField(canvas, state, rect, text);
+  }
+
+  SkRect bounds = gfx::RectToSkRect(rect);
+  const SkScalar borderWidth = SkIntToScalar(kInputBorderWidth);
+
+  // Paint the background (is not visible behind the rounded corners).
+  bounds.inset(borderWidth / 2, borderWidth / 2);
+  cc::PaintFlags fill_flags;
+  fill_flags.setStyle(cc::PaintFlags::kFill_Style);
+  fill_flags.setColor(text.background_color);
+  canvas->drawRoundRect(bounds, SkIntToScalar(kInputBorderRadius),
+                        SkIntToScalar(kInputBorderRadius), fill_flags);
+
+  // Paint the border: 1px solid.
+  cc::PaintFlags stroke_flags;
+  if (state == kHovered) {
+    stroke_flags.setColor(kInputBorderHoveredColor);
+  } else if (state == kDisabled) {
+    stroke_flags.setColor(kInputBorderDisabledColor);
+  } else {
+    stroke_flags.setColor(kInputBorderColor);
+  }
+  stroke_flags.setStyle(cc::PaintFlags::kStroke_Style);
+  stroke_flags.setStrokeWidth(borderWidth);
+  canvas->drawRoundRect(bounds, SkIntToScalar(kInputBorderRadius),
+                        SkIntToScalar(kInputBorderRadius), stroke_flags);
+}
+
 gfx::Size NativeThemeAura::GetPartSize(Part part,
                                        State state,
                                        const ExtraParams& extra) const {

ui/native_theme/native_theme_aura.h

@@ -60,6 +60,10 @@ class NATIVE_THEME_EXPORT NativeThemeAura : public NativeThemeBase {
                   State state,
                   const gfx::Rect& rect,
                   const ButtonExtraParams& button) const override;
+  void PaintTextField(cc::PaintCanvas* canvas,
+                      State state,
+                      const gfx::Rect& rect,
+                      const TextFieldExtraParams& text) const override;
   gfx::Size GetPartSize(Part part,
                         State state,
                         const ExtraParams& extra) const override;