Commit 428cc3d1 authored by Yu Han's avatar Yu Han Committed by Commit Bot

Reland "[Controls Refresh] Update controls styles for dark mode"

This is a reland of 0397ac4e

The original CL was reverted because it caused two tests failures on
the win7 platform [1]. I think what happened I manually corrected the
rebaseline tool's merging of some of the expected files. These led to
not removing the expected files for these two tests on win7 platform.
And since CQ's win7 builder doesn't auto run, it CL passed where it
should have failed.

I've since removed these two invalid expected files from win7 platform.
In addition, I removed fuchsia/virtual/dark-color-scheme/fast/forms/color-scheme/color/color-picker-appearance-expected.png
because its incorrect and I don't see the virtual suite tested on
fuchsia. Ran CQ on all platforms and they passed.

[1] https://ci.chromium.org/p/chromium/builders/ci/Win7%20Tests%20%281%29/b8866243899672370144

Original change's description:
> [Controls Refresh] Update controls styles for dark mode
>
> This CL updates the dark mode styles for the following controls:
> 1. <meter> -  border color.
> 2. multi-select - foreground text color.
> 3. Button: Dark mode button design has no border and has unique fill
>    color. Thus, a specific set of color enums is created for only
>    buttons. Button's border color is styled to match its fill color
>    in order to give the appearance of no borders and keep its
>    dimensions unchanged. This impacts: button, file, and color
>    controls.
>
>
> Bug: 1107290, 1099624
> Change-Id: I141c199f93acac2b950b8af7195e863f811c2f4c
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2469357
> Commit-Queue: Yu Han <yuzhehan@google.com>
> Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
> Reviewed-by: Mason Freed <masonfreed@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#818119}

Bug: 1107290
Bug: 1099624
Change-Id: I3097043a036da08dc201e0ce78ecc2ed1c94a1a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2485039Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Reviewed-by: default avatarElly Fong-Jones <ellyjones@chromium.org>
Commit-Queue: Yu Han <yuzhehan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819549}
parent 12eb87ad
...@@ -125,7 +125,7 @@ meter::-webkit-meter-bar { ...@@ -125,7 +125,7 @@ meter::-webkit-meter-bar {
grid-row-start: line1; grid-row-start: line1;
grid-row-end: line2; grid-row-end: line2;
border-style: solid; border-style: solid;
border-color: rgba(118, 118, 118, 0.3); border-color: -internal-light-dark(rgba(118, 118, 118, 0.3), #858585);
border-radius: 20px; border-radius: 20px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
...@@ -220,7 +220,7 @@ select:-internal-list-box:focus option:checked:hover { ...@@ -220,7 +220,7 @@ select:-internal-list-box:focus option:checked:hover {
/* TODO(crbug.com/1129658): The dark mode color here should be handled /* TODO(crbug.com/1129658): The dark mode color here should be handled
within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */ within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important; background-color: -internal-light-dark(-internal-active-list-box-selection, #99C8FF) !important;
color: -internal-light-dark(-internal-active-list-box-selection-text, #FFFFFF) !important; color: -internal-light-dark(-internal-active-list-box-selection-text, #3B3B3B) !important;
} }
select:-internal-list-box:focus option:checked:disabled { select:-internal-list-box:focus option:checked:disabled {
......
...@@ -891,7 +891,7 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas, ...@@ -891,7 +891,7 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
// If the button is too small, fallback to drawing a single, solid color. // If the button is too small, fallback to drawing a single, solid color.
if (rect.width() < 5 || rect.height() < 5) { if (rect.width() < 5 || rect.height() < 5) {
flags.setColor(ControlsFillColorForState(state, color_scheme)); flags.setColor(ButtonFillColorForState(state, color_scheme));
canvas->drawRect(skrect, flags); canvas->drawRect(skrect, flags);
return; return;
} }
...@@ -901,14 +901,14 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas, ...@@ -901,14 +901,14 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
// Paint the background (is not visible behind the rounded corners). // Paint the background (is not visible behind the rounded corners).
skrect.inset(kBorderWidth / 2, kBorderWidth / 2); skrect.inset(kBorderWidth / 2, kBorderWidth / 2);
PaintLightenLayer(canvas, skrect, state, border_radius, color_scheme); PaintLightenLayer(canvas, skrect, state, border_radius, color_scheme);
flags.setColor(ControlsFillColorForState(state, color_scheme)); flags.setColor(ButtonFillColorForState(state, color_scheme));
canvas->drawRoundRect(skrect, border_radius, border_radius, flags); canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
// Paint the border: 1px solid. // Paint the border: 1px solid.
if (button.has_border) { if (button.has_border) {
flags.setStyle(cc::PaintFlags::kStroke_Style); flags.setStyle(cc::PaintFlags::kStroke_Style);
flags.setStrokeWidth(kBorderWidth); flags.setStrokeWidth(kBorderWidth);
flags.setColor(ControlsBorderColorForState(state, color_scheme)); flags.setColor(ButtonBorderColorForState(state, color_scheme));
canvas->drawRoundRect(skrect, border_radius, border_radius, flags); canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
} }
return; return;
...@@ -1542,6 +1542,22 @@ SkColor NativeThemeBase::ControlsBorderColorForState( ...@@ -1542,6 +1542,22 @@ SkColor NativeThemeBase::ControlsBorderColorForState(
return GetControlColor(color_id, color_scheme); return GetControlColor(color_id, color_scheme);
} }
SkColor NativeThemeBase::ButtonBorderColorForState(
State state,
ColorScheme color_scheme) const {
ControlColorId color_id;
if (state == kHovered) {
color_id = kButtonHoveredBorder;
} else if (state == kPressed) {
color_id = kButtonPressedBorder;
} else if (state == kDisabled) {
color_id = kButtonDisabledBorder;
} else {
color_id = kButtonBorder;
}
return GetControlColor(color_id, color_scheme);
}
SkColor NativeThemeBase::ControlsFillColorForState( SkColor NativeThemeBase::ControlsFillColorForState(
State state, State state,
ColorScheme color_scheme) const { ColorScheme color_scheme) const {
...@@ -1558,6 +1574,22 @@ SkColor NativeThemeBase::ControlsFillColorForState( ...@@ -1558,6 +1574,22 @@ SkColor NativeThemeBase::ControlsFillColorForState(
return GetControlColor(color_id, color_scheme); return GetControlColor(color_id, color_scheme);
} }
SkColor NativeThemeBase::ButtonFillColorForState(
State state,
ColorScheme color_scheme) const {
ControlColorId color_id;
if (state == kHovered) {
color_id = kButtonHoveredFill;
} else if (state == kPressed) {
color_id = kButtonPressedFill;
} else if (state == kDisabled) {
color_id = kButtonDisabledFill;
} else {
color_id = kButtonFill;
}
return GetControlColor(color_id, color_scheme);
}
SkColor NativeThemeBase::ControlsBackgroundColorForState( SkColor NativeThemeBase::ControlsBackgroundColorForState(
State state, State state,
ColorScheme color_scheme) const { ColorScheme color_scheme) const {
...@@ -1582,12 +1614,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id, ...@@ -1582,12 +1614,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
switch (color_id) { switch (color_id) {
case kBorder: case kBorder:
case kButtonBorder:
return SkColorSetRGB(0x76, 0x76, 0x76); return SkColorSetRGB(0x76, 0x76, 0x76);
case kHoveredBorder: case kHoveredBorder:
case kButtonHoveredBorder:
return SkColorSetRGB(0x4F, 0x4F, 0x4F); return SkColorSetRGB(0x4F, 0x4F, 0x4F);
case kPressedBorder: case kPressedBorder:
case kButtonPressedBorder:
return SkColorSetRGB(0x8D, 0x8D, 0x8D); return SkColorSetRGB(0x8D, 0x8D, 0x8D);
case kDisabledBorder: case kDisabledBorder:
case kButtonDisabledBorder:
return SkColorSetARGB(0x4D, 0x76, 0x76, 0x76); return SkColorSetARGB(0x4D, 0x76, 0x76, 0x76);
case kAccent: case kAccent:
return SkColorSetRGB(0x00, 0x75, 0xFF); return SkColorSetRGB(0x00, 0x75, 0xFF);
...@@ -1602,12 +1638,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id, ...@@ -1602,12 +1638,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
case kDisabledBackground: case kDisabledBackground:
return SkColorSetA(SK_ColorWHITE, 0x99); return SkColorSetA(SK_ColorWHITE, 0x99);
case kFill: case kFill:
case kButtonFill:
return SkColorSetRGB(0xEF, 0xEF, 0xEF); return SkColorSetRGB(0xEF, 0xEF, 0xEF);
case kHoveredFill: case kHoveredFill:
case kButtonHoveredFill:
return SkColorSetRGB(0xE5, 0xE5, 0xE5); return SkColorSetRGB(0xE5, 0xE5, 0xE5);
case kPressedFill: case kPressedFill:
case kButtonPressedFill:
return SkColorSetRGB(0xF5, 0xF5, 0xF5); return SkColorSetRGB(0xF5, 0xF5, 0xF5);
case kDisabledFill: case kDisabledFill:
case kButtonDisabledFill:
return SkColorSetARGB(0x4D, 0xEF, 0xEF, 0xEF); return SkColorSetARGB(0x4D, 0xEF, 0xEF, 0xEF);
case kLightenLayer: case kLightenLayer:
return SkColorSetARGB(0x33, 0xA9, 0xA9, 0xA9); return SkColorSetARGB(0x33, 0xA9, 0xA9, 0xA9);
...@@ -1661,6 +1701,9 @@ SkColor NativeThemeBase::GetDarkModeControlColor( ...@@ -1661,6 +1701,9 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
return SkColorSetRGB(0x63, 0xAD, 0xE5); return SkColorSetRGB(0x63, 0xAD, 0xE5);
case kFill: case kFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B); return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonBorder:
case kButtonFill:
return SkColorSetRGB(0x6B, 0x6B, 0x6B);
case kLightenLayer: case kLightenLayer:
case kAutoCompleteBackground: case kAutoCompleteBackground:
case kBackground: case kBackground:
...@@ -1685,9 +1728,17 @@ SkColor NativeThemeBase::GetDarkModeControlColor( ...@@ -1685,9 +1728,17 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
return SkColorSetRGB(0x62, 0x62, 0x62); return SkColorSetRGB(0x62, 0x62, 0x62);
case kHoveredFill: case kHoveredFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B); return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonHoveredBorder:
case kButtonHoveredFill:
return SkColorSetRGB(0x7B, 0x7B, 0x7B);
case kPressedFill: case kPressedFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B); return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonPressedBorder:
case kButtonPressedFill:
return SkColorSetRGB(0x61, 0x61, 0x61);
case kDisabledFill: case kDisabledFill:
case kButtonDisabledBorder:
case kButtonDisabledFill:
return SkColorSetRGB(0x36, 0x36, 0x36); return SkColorSetRGB(0x36, 0x36, 0x36);
case kScrollbarArrowBackground: case kScrollbarArrowBackground:
return SkColorSetRGB(0x42, 0x42, 0x42); return SkColorSetRGB(0x42, 0x42, 0x42);
...@@ -1720,10 +1771,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor( ...@@ -1720,10 +1771,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kDisabledBorder: case kDisabledBorder:
case kDisabledAccent: case kDisabledAccent:
case kDisabledSlider: case kDisabledSlider:
case kButtonDisabledBorder:
return system_colors_[SystemThemeColor::kGrayText]; return system_colors_[SystemThemeColor::kGrayText];
case kBorder: case kBorder:
case kHoveredBorder: case kHoveredBorder:
case kPressedBorder: case kPressedBorder:
case kButtonBorder:
case kButtonHoveredBorder:
case kButtonPressedBorder:
return system_colors_[SystemThemeColor::kButtonText]; return system_colors_[SystemThemeColor::kButtonText];
case kAccent: case kAccent:
case kHoveredAccent: case kHoveredAccent:
...@@ -1743,6 +1798,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor( ...@@ -1743,6 +1798,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kHoveredFill: case kHoveredFill:
case kPressedFill: case kPressedFill:
case kDisabledFill: case kDisabledFill:
case kButtonFill:
case kButtonHoveredFill:
case kButtonPressedFill:
case kButtonDisabledFill:
case kAutoCompleteBackground: case kAutoCompleteBackground:
case kLightenLayer: case kLightenLayer:
case kScrollbarArrowBackground: case kScrollbarArrowBackground:
...@@ -1762,10 +1821,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor( ...@@ -1762,10 +1821,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kDisabledBorder: case kDisabledBorder:
case kDisabledAccent: case kDisabledAccent:
case kDisabledSlider: case kDisabledSlider:
case kButtonDisabledBorder:
return SK_ColorGREEN; return SK_ColorGREEN;
case kBorder: case kBorder:
case kHoveredBorder: case kHoveredBorder:
case kPressedBorder: case kPressedBorder:
case kButtonBorder:
case kButtonHoveredBorder:
case kButtonPressedBorder:
case kScrollbarThumbInactive: case kScrollbarThumbInactive:
case kScrollbarArrowBackground: case kScrollbarArrowBackground:
case kScrollbarTrack: case kScrollbarTrack:
...@@ -1784,6 +1847,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor( ...@@ -1784,6 +1847,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kHoveredFill: case kHoveredFill:
case kPressedFill: case kPressedFill:
case kDisabledFill: case kDisabledFill:
case kButtonFill:
case kButtonHoveredFill:
case kButtonPressedFill:
case kButtonDisabledFill:
case kAutoCompleteBackground: case kAutoCompleteBackground:
case kLightenLayer: case kLightenLayer:
case kScrollbarThumb: case kScrollbarThumb:
......
...@@ -76,7 +76,15 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme { ...@@ -76,7 +76,15 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
kScrollbarThumb, kScrollbarThumb,
kScrollbarThumbHovered, kScrollbarThumbHovered,
kScrollbarThumbPressed, kScrollbarThumbPressed,
kScrollbarThumbInactive kScrollbarThumbInactive,
kButtonBorder,
kButtonDisabledBorder,
kButtonHoveredBorder,
kButtonPressedBorder,
kButtonFill,
kButtonDisabledFill,
kButtonHoveredFill,
kButtonPressedFill
}; };
using NativeTheme::NativeTheme; using NativeTheme::NativeTheme;
...@@ -260,6 +268,9 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme { ...@@ -260,6 +268,9 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
const SkScalar border_radius, const SkScalar border_radius,
ColorScheme color_scheme) const; ColorScheme color_scheme) const;
SkColor ButtonBorderColorForState(State state,
ColorScheme color_scheme) const;
SkColor ButtonFillColorForState(State state, ColorScheme color_scheme) const;
SkColor ControlsAccentColorForState(State state, SkColor ControlsAccentColorForState(State state,
ColorScheme color_scheme) const; ColorScheme color_scheme) const;
SkColor ControlsBorderColorForState(State state, SkColor ControlsBorderColorForState(State state,
......
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