Attachment 362302 Details for Bug 193599 – Patch

[patch] Patch

bug-193599-20190218104955.patch (text/plain), 4.05 KB, created by Daniel Bates on 2019-02-18 10:49:55 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Daniel Bates

Created: 2019-02-18 10:49:55 PST

Size: 4.05 KB

patch

obsolete

>Subversion Revision: 241299
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index 3de6940cb1f1cfd8713f59902f82b7c852e6efc3..b6990475f0cfd81ce39c0b2cbfdf7b143e2d5525 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,26 @@
>+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.
>+
>+        To fix focus ring positioning for radio buttons and checkbox apply the same workaround in
>+        RenderElement::paintOutline() as we do in RenderBox::paintBoxDecorations(). Filed <https://bugs.webkit.org/show_bug.cgi?id=194781>
>+        to find a better way to fix this.
>+
>+        * css/html.css:
>+        (:focus): Use 3px outline width.
>+        (input:focus, textarea:focus, keygen:focus, select:focus): Do not include when building for iOS.
>+        * rendering/RenderElement.cpp:
>+        (WebCore::RenderElement::paintOutline): Adjust paint rect for checkbox and radio buttons here
>+        just as we do in RenderBox::paintBoxDecorations().
>+
> 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/RenderElement.cpp b/Source/WebCore/rendering/RenderElement.cpp
>index 96d4a3c2abfc1562aaf023f2d47d05fa66ef6a3c..f91d46ae580ca0d147cb76d5c0ebb78e9120d47e 100644
>--- a/Source/WebCore/rendering/RenderElement.cpp
>+++ b/Source/WebCore/rendering/RenderElement.cpp
>@@ -1896,7 +1896,16 @@ 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 };
>+#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;
>+            paintRectToUse = IntRect { paintRect.x(), paintRect.y() + (downcast<RenderBox>(*this).height() - height) / 2, width, height }; // Vertically center the checkbox, like on desktop
>+        }
>+#endif
>+        addFocusRingRects(focusRingRects, paintRectToUse.location(), paintInfo.paintContainer);
>         paintFocusRing(paintInfo, styleToUse, focusRingRects);
>     }
>

Actions: View | Formatted Diff | Diff

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