Attachment 362307 Details for Bug 193599 – Patch

[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:

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());

Actions: View | Formatted Diff | Diff

Attachments on bug 193599: 362302 | 362307 | 362311 | 362312 | 362330 | 362333 | 362344 | 362347