WebKit Bugzilla
Attachment 362307 Details for
Bug 193599
: [iOS] Focus ring for checkboxes, radio buttons, buttons and search fields should hug tighter to the contour
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-193599-20190218112155.patch (text/plain), 7.96 KB, created by
Daniel Bates
on 2019-02-18 11:21:55 PST
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Daniel Bates
Created:
2019-02-18 11:21:55 PST
Size:
7.96 KB
patch
obsolete
>Subversion Revision: 241299 >diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog >index 3de6940cb1f1cfd8713f59902f82b7c852e6efc3..51335c76a6a3777f961ae620dd29848d9795159d 100644 >--- a/Source/WebCore/ChangeLog >+++ b/Source/WebCore/ChangeLog >@@ -1,3 +1,30 @@ >+2019-02-18 Daniel Bates <dabates@apple.com> >+ >+ [iOS] Focus ring for checkboxes, radio buttons, buttons and search fields should hug tighter to the contour >+ https://bugs.webkit.org/show_bug.cgi?id=193599 >+ <rdar://problem/47399602> >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ For now, iOS uses a 3px outline width for its focus rings. Do not inset the focus ring on iOS >+ for text fields, textareas, keygens, and selects so as to match the visual appearance of all >+ the other controls. >+ >+ * css/html.css: >+ (:focus): Use 3px outline width. >+ (input:focus, textarea:focus, keygen:focus, select:focus): Do not include when building for iOS. >+ * rendering/RenderBox.cpp: >+ (WebCore::RenderBox::paintBoxDecorations): Write in terms of RenderTheme::adjustPaintRect(). >+ * rendering/RenderElement.cpp: >+ (WebCore::RenderElement::paintOutline): Call RenderTheme::adjustPaintRect() to adjust the paint rect. >+ Otherwise, the focus rings for radios and checkboxes are drawn at the wrong y-coordinate and are not snug. >+ * rendering/RenderTheme.h: >+ (WebCore::RenderTheme::adjustPaintRect const): Added. >+ * rendering/RenderThemeIOS.h: >+ * rendering/RenderThemeIOS.mm: >+ (WebCore::RenderThemeIOS::adjustPaintRect const): Added. Move iOS paint rect workaround from >+ RenderBox::paintBoxDecorations() to here. >+ > 2019-02-12 Andy Estes <aestes@apple.com> > > [iOSMac] Enable Parental Controls Content Filtering >diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css >index 4c25559b02c40c385592e5ae808ba6cf45551d25..6992145fe4df91debe6d1f754080469dafcbe86c 100644 >--- a/Source/WebCore/css/html.css >+++ b/Source/WebCore/css/html.css >@@ -1162,7 +1162,11 @@ nobr { > /* states */ > > :focus { >+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY >+ outline: auto 3px -webkit-focus-ring-color; >+#else > outline: auto 5px -webkit-focus-ring-color; >+#endif > } > > /* Read-only text fields do not show a focus ring but do still receive focus */ >@@ -1170,9 +1174,11 @@ html:focus, body:focus, input[readonly]:focus, applet:focus, embed:focus, iframe > outline: none; > } > >+#if !defined(WTF_PLATFORM_IOS_FAMILY) || !WTF_PLATFORM_IOS_FAMILY > input:focus, textarea:focus, keygen:focus, select:focus { > outline-offset: -2px; > } >+#endif > > input:matches([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="reset"], [type="search"], [type="submit"]):focus, > input[type="file"]:focus::-webkit-file-upload-button { >diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp >index 7bd279b06dd0d46e8a2ff91dee68fca3b938cfc4..79e413efb153877e25427eb29d2711b0282889d4 100644 >--- a/Source/WebCore/rendering/RenderBox.cpp >+++ b/Source/WebCore/rendering/RenderBox.cpp >@@ -1299,15 +1299,8 @@ void RenderBox::paintBoxDecorations(PaintInfo& paintInfo, const LayoutPoint& pai > LayoutRect paintRect = borderBoxRectInFragment(nullptr); > paintRect.moveBy(paintOffset); > adjustBorderBoxRectForPainting(paintRect); >+ theme().adjustPaintRect(*this, paintRect); > >-#if PLATFORM(IOS_FAMILY) >- // Workaround for <rdar://problem/6209763>. Force the painting bounds of checkboxes and radio controls to be square. >- if (style().appearance() == CheckboxPart || style().appearance() == RadioPart) { >- int width = std::min(paintRect.width(), paintRect.height()); >- int height = width; >- paintRect = IntRect(paintRect.x(), paintRect.y() + (this->height() - height) / 2, width, height); // Vertically center the checkbox, like on desktop >- } >-#endif > BackgroundBleedAvoidance bleedAvoidance = determineBackgroundBleedAvoidance(paintInfo.context()); > > // FIXME: Should eventually give the theme control over whether the box shadow should paint, since controls could have >diff --git a/Source/WebCore/rendering/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp >index 96d4a3c2abfc1562aaf023f2d47d05fa66ef6a3c..a98f64542a968a3b644429084501823cb7cd9099 100644 >--- a/Source/WebCore/rendering/RenderElement.cpp >+++ b/Source/WebCore/rendering/RenderElement.cpp >@@ -1896,7 +1896,9 @@ void RenderElement::paintOutline(PaintInfo& paintInfo, const LayoutRect& paintRe > // Only paint the focus ring by hand if the theme isn't able to draw it. > if (styleToUse.outlineStyleIsAuto() == OutlineIsAuto::On && !theme().supportsFocusRing(styleToUse)) { > Vector<LayoutRect> focusRingRects; >- addFocusRingRects(focusRingRects, paintRect.location(), paintInfo.paintContainer); >+ LayoutRect paintRectToUse { paintRect }; >+ theme().adjustPaintRect(*this, paintRectToUse); >+ addFocusRingRects(focusRingRects, paintRectToUse.location(), paintInfo.paintContainer); > paintFocusRing(paintInfo, styleToUse, focusRingRects); > } > >diff --git a/Source/WebCore/rendering/RenderTheme.h b/Source/WebCore/rendering/RenderTheme.h >index 471a9a3a4b53caf929464b8664075a10c19f20d6..f988fe2ee93682612c8eee42a4b3ad3322feb04d 100644 >--- a/Source/WebCore/rendering/RenderTheme.h >+++ b/Source/WebCore/rendering/RenderTheme.h >@@ -121,6 +121,9 @@ public: > // A general method asking if any control tinting is supported at all. > virtual bool supportsControlTints() const { return false; } > >+ // Some controls want to adjust where they are painted for centering purposes. >+ virtual void adjustPaintRect(const RenderObject&, LayoutRect&) const { } >+ > // Some controls may spill out of their containers (e.g., the check on an OS X checkbox). When these controls repaint, > // the theme needs to communicate this inflated rect to the engine so that it can invalidate the whole control. > virtual void adjustRepaintRect(const RenderObject&, FloatRect&); >diff --git a/Source/WebCore/rendering/RenderThemeIOS.h b/Source/WebCore/rendering/RenderThemeIOS.h >index ed8927fc4bdca0f53a8ccf49cf4466797c03adef..a463478fd1b69783bb465f30147cc9e5ae5ebb12 100644 >--- a/Source/WebCore/rendering/RenderThemeIOS.h >+++ b/Source/WebCore/rendering/RenderThemeIOS.h >@@ -68,6 +68,8 @@ protected: > > bool isControlStyled(const RenderStyle&, const BorderData&, const FillLayer& background, const Color& backgroundColor) const override; > >+ void adjustPaintRect(const RenderObject&, LayoutRect&) const final; >+ > // Methods for each appearance value. > void adjustCheckboxStyle(StyleResolver&, RenderStyle&, const Element*) const override; > bool paintCheckboxDecorations(const RenderObject&, const PaintInfo&, const IntRect&) override; >diff --git a/Source/WebCore/rendering/RenderThemeIOS.mm b/Source/WebCore/rendering/RenderThemeIOS.mm >index 1493496823c265892cbd194e2063fa31bab5718b..5a679d4dfd44120d824f150ca1febc7a7de7f3b0 100644 >--- a/Source/WebCore/rendering/RenderThemeIOS.mm >+++ b/Source/WebCore/rendering/RenderThemeIOS.mm >@@ -375,6 +375,16 @@ static void drawJoinedLines(CGContextRef context, const Vector<CGPoint>& points, > CGContextStrokePath(context); > } > >+void RenderThemeIOS::adjustPaintRect(const RenderObject& renderer, LayoutRect& paintRect) const >+{ >+ if (renderer.style().appearance() != CheckboxPart && renderer.style().appearance() != RadioPart) >+ return; >+ // Workaround for <rdar://problem/6209763>. Force the painting bounds of checkboxes and radio controls to be square. >+ int width = std::min(paintRect.width(), paintRect.height()); >+ int height = width; >+ paintRect = IntRect { paintRect.x(), paintRect.y() + (downcast<RenderBox>(renderer).height() - height) / 2, width, height }; // Vertically center the checkbox, like on desktop. >+} >+ > bool RenderThemeIOS::paintCheckboxDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect) > { > GraphicsContextStateSaver stateSaver(paintInfo.context());
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193599
:
362302
|
362307
|
362311
|
362312
|
362330
|
362333
|
362344
|
362347