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 {
grid-row-start: line1;
grid-row-end: line2;
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;
box-sizing: border-box;
overflow: hidden;
......@@ -220,7 +220,7 @@ select:-internal-list-box:focus option:checked:hover {
/* TODO(crbug.com/1129658): The dark mode color here should be handled
within LayoutTheme::ActiveListBoxSelectionBackgroundColor(). */
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 {
......
......@@ -891,7 +891,7 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
// If the button is too small, fallback to drawing a single, solid color.
if (rect.width() < 5 || rect.height() < 5) {
flags.setColor(ControlsFillColorForState(state, color_scheme));
flags.setColor(ButtonFillColorForState(state, color_scheme));
canvas->drawRect(skrect, flags);
return;
}
......@@ -901,14 +901,14 @@ void NativeThemeBase::PaintButton(cc::PaintCanvas* canvas,
// Paint the background (is not visible behind the rounded corners).
skrect.inset(kBorderWidth / 2, kBorderWidth / 2);
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);
// Paint the border: 1px solid.
if (button.has_border) {
flags.setStyle(cc::PaintFlags::kStroke_Style);
flags.setStrokeWidth(kBorderWidth);
flags.setColor(ControlsBorderColorForState(state, color_scheme));
flags.setColor(ButtonBorderColorForState(state, color_scheme));
canvas->drawRoundRect(skrect, border_radius, border_radius, flags);
}
return;
......@@ -1542,6 +1542,22 @@ SkColor NativeThemeBase::ControlsBorderColorForState(
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(
State state,
ColorScheme color_scheme) const {
......@@ -1558,6 +1574,22 @@ SkColor NativeThemeBase::ControlsFillColorForState(
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(
State state,
ColorScheme color_scheme) const {
......@@ -1582,12 +1614,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
switch (color_id) {
case kBorder:
case kButtonBorder:
return SkColorSetRGB(0x76, 0x76, 0x76);
case kHoveredBorder:
case kButtonHoveredBorder:
return SkColorSetRGB(0x4F, 0x4F, 0x4F);
case kPressedBorder:
case kButtonPressedBorder:
return SkColorSetRGB(0x8D, 0x8D, 0x8D);
case kDisabledBorder:
case kButtonDisabledBorder:
return SkColorSetARGB(0x4D, 0x76, 0x76, 0x76);
case kAccent:
return SkColorSetRGB(0x00, 0x75, 0xFF);
......@@ -1602,12 +1638,16 @@ SkColor NativeThemeBase::GetControlColor(ControlColorId color_id,
case kDisabledBackground:
return SkColorSetA(SK_ColorWHITE, 0x99);
case kFill:
case kButtonFill:
return SkColorSetRGB(0xEF, 0xEF, 0xEF);
case kHoveredFill:
case kButtonHoveredFill:
return SkColorSetRGB(0xE5, 0xE5, 0xE5);
case kPressedFill:
case kButtonPressedFill:
return SkColorSetRGB(0xF5, 0xF5, 0xF5);
case kDisabledFill:
case kButtonDisabledFill:
return SkColorSetARGB(0x4D, 0xEF, 0xEF, 0xEF);
case kLightenLayer:
return SkColorSetARGB(0x33, 0xA9, 0xA9, 0xA9);
......@@ -1661,6 +1701,9 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
return SkColorSetRGB(0x63, 0xAD, 0xE5);
case kFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonBorder:
case kButtonFill:
return SkColorSetRGB(0x6B, 0x6B, 0x6B);
case kLightenLayer:
case kAutoCompleteBackground:
case kBackground:
......@@ -1685,9 +1728,17 @@ SkColor NativeThemeBase::GetDarkModeControlColor(
return SkColorSetRGB(0x62, 0x62, 0x62);
case kHoveredFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonHoveredBorder:
case kButtonHoveredFill:
return SkColorSetRGB(0x7B, 0x7B, 0x7B);
case kPressedFill:
return SkColorSetRGB(0x3B, 0x3B, 0x3B);
case kButtonPressedBorder:
case kButtonPressedFill:
return SkColorSetRGB(0x61, 0x61, 0x61);
case kDisabledFill:
case kButtonDisabledBorder:
case kButtonDisabledFill:
return SkColorSetRGB(0x36, 0x36, 0x36);
case kScrollbarArrowBackground:
return SkColorSetRGB(0x42, 0x42, 0x42);
......@@ -1720,10 +1771,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kDisabledBorder:
case kDisabledAccent:
case kDisabledSlider:
case kButtonDisabledBorder:
return system_colors_[SystemThemeColor::kGrayText];
case kBorder:
case kHoveredBorder:
case kPressedBorder:
case kButtonBorder:
case kButtonHoveredBorder:
case kButtonPressedBorder:
return system_colors_[SystemThemeColor::kButtonText];
case kAccent:
case kHoveredAccent:
......@@ -1743,6 +1798,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kHoveredFill:
case kPressedFill:
case kDisabledFill:
case kButtonFill:
case kButtonHoveredFill:
case kButtonPressedFill:
case kButtonDisabledFill:
case kAutoCompleteBackground:
case kLightenLayer:
case kScrollbarArrowBackground:
......@@ -1762,10 +1821,14 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kDisabledBorder:
case kDisabledAccent:
case kDisabledSlider:
case kButtonDisabledBorder:
return SK_ColorGREEN;
case kBorder:
case kHoveredBorder:
case kPressedBorder:
case kButtonBorder:
case kButtonHoveredBorder:
case kButtonPressedBorder:
case kScrollbarThumbInactive:
case kScrollbarArrowBackground:
case kScrollbarTrack:
......@@ -1784,6 +1847,10 @@ SkColor NativeThemeBase::GetHighContrastControlColor(
case kHoveredFill:
case kPressedFill:
case kDisabledFill:
case kButtonFill:
case kButtonHoveredFill:
case kButtonPressedFill:
case kButtonDisabledFill:
case kAutoCompleteBackground:
case kLightenLayer:
case kScrollbarThumb:
......
......@@ -76,7 +76,15 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
kScrollbarThumb,
kScrollbarThumbHovered,
kScrollbarThumbPressed,
kScrollbarThumbInactive
kScrollbarThumbInactive,
kButtonBorder,
kButtonDisabledBorder,
kButtonHoveredBorder,
kButtonPressedBorder,
kButtonFill,
kButtonDisabledFill,
kButtonHoveredFill,
kButtonPressedFill
};
using NativeTheme::NativeTheme;
......@@ -260,6 +268,9 @@ class NATIVE_THEME_EXPORT NativeThemeBase : public NativeTheme {
const SkScalar border_radius,
ColorScheme color_scheme) const;
SkColor ButtonBorderColorForState(State state,
ColorScheme color_scheme) const;
SkColor ButtonFillColorForState(State state, ColorScheme color_scheme) const;
SkColor ControlsAccentColorForState(State state,
ColorScheme color_scheme) const;
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