Make the border widths consistent (1px) for range/meter/progress/radio/checkbox

This change updates the rendering of range/meter/checkbox so their border
widths are 1px regardless of the zoom level (same behavior progress
and radio currently have)

To prevent the borders from growing on zoom, the ThemePainterDefault are updated
for checkbox and range so the painting context is not modified when zoom level is not 1.

The zoom info are then embedded in ButtonExtraParams and SliderExtraParams
and passed to NativeThemeAura so PaintCheckbox can render border-radius correctly
and PaintSliderTrack can render track height correctly.

For meter the border-width is changed from 1px on thin.

Tests:
meter: meter-extreme-values.html
range: range-appearance-basic.html
checkbox: checkbox-appearance-basic.html

Bug: 1021319
Change-Id: Icee5d83a859556909bdf930c314d70ddd17d7784
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1910864
Commit-Queue: Alex Keng <shihken@microsoft.com>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Mason Freed <masonfreed@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Reviewed-by: Kentaro Hara <haraken@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714868}

content/child/webthemeengine_impl_default.cc

@@ -62,6 +62,7 @@ static void GetNativeThemeExtraParams(
       native_theme_extra_params->button.checked = extra_params->button.checked;
       native_theme_extra_params->button.indeterminate =
           extra_params->button.indeterminate;
+      native_theme_extra_params->button.zoom = extra_params->button.zoom;
       break;
     case WebThemeEngine::kPartRadio:
       native_theme_extra_params->button.checked = extra_params->button.checked;
@@ -101,6 +102,7 @@ static void GetNativeThemeExtraParams(
     case WebThemeEngine::kPartSliderTrack:
       native_theme_extra_params->slider.thumb_x = extra_params->slider.thumb_x;
       native_theme_extra_params->slider.thumb_y = extra_params->slider.thumb_y;
+      native_theme_extra_params->slider.zoom = extra_params->slider.zoom;
       FALLTHROUGH;
       // vertical and in_drag properties are used by both slider track and
       // slider thumb.

third_party/blink/public/platform/web_theme_engine.h

@@ -117,6 +117,7 @@ class WebThemeEngine {
     bool indeterminate;  // Whether the button state is indeterminate.
     bool has_border;
     SkColor background_color;
+    float zoom;
   };
 
   // Extra parameters for PartTextField
@@ -144,6 +145,7 @@ class WebThemeEngine {
     bool in_drag;
     int thumb_x;
     int thumb_y;
+    float zoom;
   };
 
   // Extra parameters for PartInnerSpinButton

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

@@ -84,7 +84,7 @@ meter::-webkit-meter-inner-element::after {
 
 meter::-webkit-meter-bar {
   background: #efefef;
-  border-width: 1px;
+  border-width: thin;
   height: 50%;
   border-style: solid;
   border-color: rgba(118, 118, 118, 0.3);

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

@@ -148,9 +148,11 @@ bool ThemePainterDefault::PaintCheckbox(const Node* node,
   extra_params.button.indeterminate = LayoutTheme::IsIndeterminate(node);
 
   float zoom_level = style.EffectiveZoom();
+  extra_params.button.zoom = zoom_level;
   GraphicsContextStateSaver state_saver(paint_info.context, false);
   IntRect unzoomed_rect = rect;
-  if (zoom_level != 1) {
+  if (zoom_level != 1 &&
+      !RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
     state_saver.Save();
     unzoomed_rect.SetWidth(unzoomed_rect.Width() / zoom_level);
     unzoomed_rect.SetHeight(unzoomed_rect.Height() / zoom_level);
@@ -331,9 +333,11 @@ bool ThemePainterDefault::PaintSliderTrack(const LayoutObject& o,
   PaintSliderTicks(o, i, rect);
 
   float zoom_level = o.StyleRef().EffectiveZoom();
+  extra_params.slider.zoom = zoom_level;
   GraphicsContextStateSaver state_saver(i.context, false);
   IntRect unzoomed_rect = rect;
-  if (zoom_level != 1) {
+  if (zoom_level != 1 &&
+      !RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
     state_saver.Save();
     unzoomed_rect.SetWidth(unzoomed_rect.Width() / zoom_level);
     unzoomed_rect.SetHeight(unzoomed_rect.Height() / zoom_level);
@@ -354,10 +358,15 @@ bool ThemePainterDefault::PaintSliderTrack(const LayoutObject& o,
     LayoutBox* thumb = thumb_element ? thumb_element->GetLayoutBox() : nullptr;
     if (thumb) {
       IntRect thumb_rect = PixelSnappedIntRect(thumb->FrameRect());
+      if (RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
+        extra_params.slider.thumb_x = thumb_rect.X();
+        extra_params.slider.thumb_y = thumb_rect.Y();
+      } else {
         extra_params.slider.thumb_x = thumb_rect.X() / zoom_level;
         extra_params.slider.thumb_y = thumb_rect.Y() / zoom_level;
       }
     }
+  }
 
   Platform::Current()->ThemeEngine()->Paint(
       canvas, WebThemeEngine::kPartSliderTrack, GetWebThemeState(o.GetNode()),
@@ -376,9 +385,11 @@ bool ThemePainterDefault::PaintSliderThumb(const Node* node,
   extra_params.slider.in_drag = LayoutTheme::IsPressed(node);
 
   float zoom_level = style.EffectiveZoom();
+  extra_params.slider.zoom = zoom_level;
   GraphicsContextStateSaver state_saver(paint_info.context, false);
   IntRect unzoomed_rect = rect;
-  if (zoom_level != 1) {
+  if (zoom_level != 1 &&
+      !RuntimeEnabledFeatures::FormControlsRefreshEnabled()) {
     state_saver.Save();
     unzoomed_rect.SetWidth(unzoomed_rect.Width() / zoom_level);
     unzoomed_rect.SetHeight(unzoomed_rect.Height() / zoom_level);

ui/native_theme/native_theme.h

@@ -132,6 +132,7 @@ class NATIVE_THEME_EXPORT NativeTheme {
     bool has_border;
     int classic_state;  // Used on Windows when uxtheme is not available.
     SkColor background_color;
+    float zoom;
   };
 
   struct FrameTopAreaExtraParams {
@@ -231,6 +232,7 @@ class NATIVE_THEME_EXPORT NativeTheme {
     bool in_drag;
     int thumb_x;
     int thumb_y;
+    float zoom;
   };
 
   struct TextFieldExtraParams {

ui/native_theme/native_theme_aura.cc

@@ -501,9 +501,10 @@ void NativeThemeAura::PaintCheckbox(cc::PaintCanvas* canvas,
                                           color_scheme);
   }
 
+  const float border_radius =
+      SkIntToScalar(kCheckboxBorderRadius) * button.zoom;
   SkRect skrect = PaintCheckboxRadioCommon(canvas, state, rect, button, true,
-                                           SkIntToScalar(kCheckboxBorderRadius),
-                                           color_scheme);
+                                           border_radius, color_scheme);
 
   if (!skrect.isEmpty()) {
     cc::PaintFlags flags;
@@ -516,14 +517,12 @@ void NativeThemeAura::PaintCheckbox(cc::PaintCanvas* canvas,
           skrect.makeInset(skrect.width() * kIndeterminateInsetWidthRatio,
                            skrect.height() * kIndeterminateInsetHeightRatio);
       flags.setStyle(cc::PaintFlags::kFill_Style);
-      canvas->drawRoundRect(indeterminate, SkIntToScalar(kCheckboxBorderRadius),
-                            SkIntToScalar(kCheckboxBorderRadius), flags);
+      canvas->drawRoundRect(indeterminate, border_radius, border_radius, flags);
     } else if (button.checked) {
       // Draw the accent background.
       flags.setStyle(cc::PaintFlags::kFill_Style);
       flags.setColor(ControlsAccentColorForState(state, color_scheme));
-      canvas->drawRoundRect(skrect, kCheckboxBorderRadius,
-                            kCheckboxBorderRadius, flags);
+      canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
 
       // Draw the checkmark.
       SkPath check;
@@ -765,13 +764,14 @@ void NativeThemeAura::PaintSliderTrack(cc::PaintCanvas* canvas,
   cc::PaintFlags flags;
   flags.setAntiAlias(true);
   flags.setColor(ControlsFillColorForState(state, color_scheme));
-  SkRect track_rect = AlignSliderTrack(rect, slider, false, kSliderTrackHeight);
+  const float track_height = kSliderTrackHeight * slider.zoom;
+  SkRect track_rect = AlignSliderTrack(rect, slider, false, track_height);
   canvas->drawRoundRect(track_rect, kSliderTrackBorderRadius,
                         kSliderTrackBorderRadius, flags);
 
   // Paint the value slider track.
   flags.setColor(ControlsAccentColorForState(state, color_scheme));
-  SkRect value_rect = AlignSliderTrack(rect, slider, true, kSliderTrackHeight);
+  SkRect value_rect = AlignSliderTrack(rect, slider, true, track_height);
   canvas->drawRoundRect(value_rect, kSliderTrackBorderRadius,
                         kSliderTrackBorderRadius, flags);