Skip to content

GitLab

T
tangled
Commit b83068ea authored by Sam Sebree's avatar Sam Sebree Committed by Commit Bot
Browse files
Options

[Controls Refresh] Adds dark mode focus ring styling to all native controls 

This CL gives dark mode native controls a white focus ring instead of the default focus ring color.

Bug: 929098
Change-Id: Ibe3414bf023d5f9b4fcb06b31635f69248df292e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2238884Reviewed-by: default avatarYu Han <yuzhehan@chromium.org>
Reviewed-by: default avatarChris Harrelson <chrishtr@chromium.org>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Sam Sebree <sasebree@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#780033}
parent f17649c5
Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 7 deletions
third_party/blink/renderer/core/paint/object_painter_base.cc
View file @ b83068ea
...@@ -563,7 +563,8 @@ void ObjectPainterBase::PaintOutlineRects( ...@@ -563,7 +563,8 @@ void ObjectPainterBase::PaintOutlineRects(
float border_radius = GetFocusRingBorderRadius(style); float border_radius = GetFocusRingBorderRadius(style);
paint_info.context.DrawFocusRing( paint_info.context.DrawFocusRing(
pixel_snapped_outline_rects, style.GetOutlineStrokeWidthForFocusRing(), pixel_snapped_outline_rects, style.GetOutlineStrokeWidthForFocusRing(),
style.OutlineOffsetInt(), border_radius, min_border_width, color); style.OutlineOffsetInt(), border_radius, min_border_width, color,
style.UsedColorScheme());
return; return;
} }
......
third_party/blink/renderer/platform/graphics/graphics_context.cc
View file @ b83068ea
...@@ -439,7 +439,10 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects, ...@@ -439,7 +439,10 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
int offset, int offset,
float border_radius, float border_radius,
float min_border_width, float min_border_width,
const Color& color) { const Color& color,
WebColorScheme color_scheme) {
const Color& inner_color =
color_scheme == WebColorScheme::kDark ? SK_ColorWHITE : color;
if (::features::IsFormControlsRefreshEnabled()) { if (::features::IsFormControlsRefreshEnabled()) {
// The focus ring is made of two borders which have a 2:1 ratio. // The focus ring is made of two borders which have a 2:1 ratio.
const float first_border_width = (width / 3) * 2; const float first_border_width = (width / 3) * 2;
...@@ -450,15 +453,18 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects, ...@@ -450,15 +453,18 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
if (min_border_width >= inside_border_width) { if (min_border_width >= inside_border_width) {
offset -= inside_border_width; offset -= inside_border_width;
} }
// The white ring is drawn first, and we overdraw to ensure no gaps or AA const Color& outer_color = color_scheme == WebColorScheme::kDark
? SkColorSetRGB(0x10, 0x10, 0x10)
: SK_ColorWHITE;
// The outer ring is drawn first, and we overdraw to ensure no gaps or AA
// artifacts. // artifacts.
DrawFocusRingInternal(rects, first_border_width, DrawFocusRingInternal(rects, first_border_width,
offset + std::ceil(second_border_width), offset + std::ceil(second_border_width),
border_radius, SK_ColorWHITE); border_radius, outer_color);
DrawFocusRingInternal(rects, first_border_width, offset, border_radius, DrawFocusRingInternal(rects, first_border_width, offset, border_radius,
color); inner_color);
} else { } else {
DrawFocusRingInternal(rects, width, offset, border_radius, color); DrawFocusRingInternal(rects, width, offset, border_radius, inner_color);
} }
} }
......
third_party/blink/renderer/platform/graphics/graphics_context.h
View file @ b83068ea
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
#include <memory> #include <memory>
#include "base/macros.h" #include "base/macros.h"
#include "third_party/blink/public/platform/web_color_scheme.h"
#include "third_party/blink/renderer/platform/fonts/font.h" #include "third_party/blink/renderer/platform/fonts/font.h"
#include "third_party/blink/renderer/platform/graphics/dark_mode_filter.h" #include "third_party/blink/renderer/platform/graphics/dark_mode_filter.h"
#include "third_party/blink/renderer/platform/graphics/dark_mode_settings.h" #include "third_party/blink/renderer/platform/graphics/dark_mode_settings.h"
...@@ -364,7 +365,8 @@ class PLATFORM_EXPORT GraphicsContext { ...@@ -364,7 +365,8 @@ class PLATFORM_EXPORT GraphicsContext {
int offset, int offset,
float border_radius, float border_radius,
float min_border_width, float min_border_width,
const Color&); const Color&,
WebColorScheme color_scheme);
void DrawFocusRing(const Path&, float width, int offset, const Color&); void DrawFocusRing(const Path&, float width, int offset, const Color&);
enum Edge { enum Edge {
......
third_party/blink/web_tests/virtual/dark-color-scheme/button/button-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="button" value="button" />
</li> <br><br>
<li>Non-Focus: <input type="button" value="button" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/checkbox/checkbox-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="checkbox" /></li> <br><br>
<li>Non-Focus: <input type="checkbox" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/color/color-picker-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="color" /></li> <br><br>
<li>Non-Focus: <input type="color" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/date/date-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="date" /></li> <br><br>
<li>Non-Focus: <input type="date" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/datetimelocal-picker/datetimelocal-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="datetime-local" /></li> <br><br>
<li>Non-Focus: <input type="datetime-local" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/details_summary/details-with-summary-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <details>
<summary>summary</summary>
</details>
</li> <br><br>
<li>Non-Focus: <details>
<summary>summary</summary>
</details>
</li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/media/audio-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <audio controls
src="../../../webaudio/resources/media/128kbps-44khz.mp3"></audio></li>
<br><br>
<li>Non-Focus: <audio controls
src="../../../webaudio/resources/media/128kbps-44khz.mp3"></audio></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/media/video-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../media/media-file.js"></script>
<script src="../../../media/video-paint-test.js"></script>
<script src="../../../media/media-controls.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <video controls></video></li> <br><br>
<li>Non-Focus: <video controls></video></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/radio/radio-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="radio"></li> <br><br>
<li>Non-Focus: <input type="radio"></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/range/range-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="range" value="30" /></li> <br><br>
<li>Non-Focus: <input type="range" value="30" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/select/select-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <select id="menu"></select></li> <br><br>
<li>Non-Focus: <select id="menu"></select></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
third_party/blink/web_tests/virtual/dark-color-scheme/text/input-focus-ring.html 0 → 100644
View file @ b83068ea
<!DOCTYPE html>
<meta name="color-scheme" content="dark">
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../../fast/forms/resources/common.js"></script>
<body>
<li>Focus: <input type="text" value="example text" /></li> <br><br>
<li>Non-Focus: <input type="text" value="example text" /></li>
<script>
runAfterLayoutAndPaint(function () {
eventSender.keyDown('Tab');
}, true);
</script>
</body>
\ No newline at end of file
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