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(
float border_radius = GetFocusRingBorderRadius(style);
paint_info.context.DrawFocusRing(
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;
}
......
third_party/blink/renderer/platform/graphics/graphics_context.cc
View file @ b83068ea
......@@ -439,7 +439,10 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
int offset,
float border_radius,
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()) {
// The focus ring is made of two borders which have a 2:1 ratio.
const float first_border_width = (width / 3) * 2;
......@@ -450,15 +453,18 @@ void GraphicsContext::DrawFocusRing(const Vector<IntRect>& rects,
if (min_border_width >= 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.
DrawFocusRingInternal(rects, first_border_width,
offset + std::ceil(second_border_width),
border_radius, SK_ColorWHITE);
border_radius, outer_color);
DrawFocusRingInternal(rects, first_border_width, offset, border_radius,
color);
inner_color);
} 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 @@
#include <memory>
#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/graphics/dark_mode_filter.h"
#include "third_party/blink/renderer/platform/graphics/dark_mode_settings.h"
......@@ -364,7 +365,8 @@ class PLATFORM_EXPORT GraphicsContext {
int offset,
float border_radius,
float min_border_width,
const Color&);
const Color&,
WebColorScheme color_scheme);
void DrawFocusRing(const Path&, float width, int offset, const Color&);
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