Changeset 261398 in webkit

Timestamp:

May 8, 2020, 10:57:39 AM (5 years ago)

Author:

Wenson Hsieh

Message:

[iOS] caret appears in the middle of a search field when field is focused on agoda.com
​https://bugs.webkit.org/show_bug.cgi?id=211591
<rdar://problem/60605873>

Reviewed by Antoine Quint.

Source/WebCore:

See WebKit/ChangeLog for more details.

Test: editing/selection/ios/caret-rect-after-animating-focused-text-field.html

• animation/WebAnimation.cpp:

(WebCore::WebAnimation::finishNotificationSteps):

Add plumbing to call out to the WebKit client layer after an animation finishes running.

• dom/Node.h:
• editing/VisibleSelection.h:

WEBCORE_EXPORT a couple of methods.

• page/ChromeClient.h:

(WebCore::ChromeClient::animationDidFinishForElement):

Source/WebKit:

The main search field on the mobile version of this website begins offscreen, with a CSS transform that moves it
to the far right; tapping the button element that (visually) has a search-field-like appearance on the front
page programmatically focuses the real offscreen search field, and animates it onscreen by changing the CSS
transform attribute to remove the x-axis translation.

On iOS, the caret rect is computed and sent to the UI process via editor state updates; however, the editor
state is computed immediately after focusing the input field. As such, the caret rect at this moment is computed
in the middle of the animation, leaving it stuck in an unpredictable location.

To fix this, add plumbing to call into the WebKit client layer when an animation has ended. On iOS, if the
selection is visible (i.e. a ranged selection, or editable caret), then check to see whether the element that
has finished animating contains either endpoint of the selection. If so, then schedule a followup editor state
update to push updated selection information to the UI process.

• WebProcess/WebCoreSupport/WebChromeClient.cpp:

(WebKit::WebChromeClient::animationDidFinishForElement):

• WebProcess/WebCoreSupport/WebChromeClient.h:

Add a new client hook for when animations end.

• WebProcess/WebPage/WebPage.cpp:

(WebKit::WebPage::animationDidFinishForElement):

• WebProcess/WebPage/WebPage.h:
• WebProcess/WebPage/ios/WebPageIOS.mm:

Add logic to schedule a new editor state update if needed, after an animation ends that might affect either
the start or end of the selection.

(WebKit::WebPage::animationDidFinishForElement):

LayoutTests:

Add a new layout test to verify that the caret view eventually becomes visible when after a focused text field
containing the caret is animated.

• editing/selection/ios/caret-rect-after-animating-focused-text-field-expected.txt: Added.
• editing/selection/ios/caret-rect-after-animating-focused-text-field.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/editing/selection/ios/caret-rect-after-animating-focused-text-field-expected.txt (added)
• LayoutTests/editing/selection/ios/caret-rect-after-animating-focused-text-field.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/animation/WebAnimation.cpp (modified) (2 diffs)
• Source/WebCore/dom/Node.h (modified) (1 diff)
• Source/WebCore/editing/VisibleSelection.h (modified) (1 diff)
• Source/WebCore/page/ChromeClient.h (modified) (1 diff)
• Source/WebKit/ChangeLog (modified) (1 diff)
• Source/WebKit/WebProcess/WebCoreSupport/WebChromeClient.cpp (modified) (1 diff)
• Source/WebKit/WebProcess/WebCoreSupport/WebChromeClient.h (modified) (1 diff)
• Source/WebKit/WebProcess/WebPage/WebPage.cpp (modified) (1 diff)
• Source/WebKit/WebProcess/WebPage/WebPage.h (modified) (1 diff)
• Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2020-05-08  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        [iOS] caret appears in the middle of a search field when field is focused on agoda.com
+        https://bugs.webkit.org/show_bug.cgi?id=211591
+        <rdar://problem/60605873>
+
+        Reviewed by Antoine Quint.
+
+        Add a new layout test to verify that the caret view eventually becomes visible when after a focused text field
+        containing the caret is animated.
+
+        * editing/selection/ios/caret-rect-after-animating-focused-text-field-expected.txt: Added.
+        * editing/selection/ios/caret-rect-after-animating-focused-text-field.html: Added.
+
 2020-05-08  Wenson Hsieh  <wenson_hsieh@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2020-05-08  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        [iOS] caret appears in the middle of a search field when field is focused on agoda.com
+        https://bugs.webkit.org/show_bug.cgi?id=211591
+        <rdar://problem/60605873>
+
+        Reviewed by Antoine Quint.
+
+        See WebKit/ChangeLog for more details.
+
+        Test: editing/selection/ios/caret-rect-after-animating-focused-text-field.html
+
+        * animation/WebAnimation.cpp:
+        (WebCore::WebAnimation::finishNotificationSteps):
+
+        Add plumbing to call out to the WebKit client layer after an animation finishes running.
+
+        * dom/Node.h:
+        * editing/VisibleSelection.h:
+
+        WEBCORE_EXPORT a couple of methods.
+
+        * page/ChromeClient.h:
+        (WebCore::ChromeClient::animationDidFinishForElement):
+
 2020-05-08  Wenson Hsieh  <wenson_hsieh@apple.com>
 

trunk/Source/WebCore/animation/WebAnimation.cpp

@@ -31 +31 @@
 #include "AnimationTimeline.h"
 #include "CSSComputedStyleDeclaration.h"
+#include "Chrome.h"
+#include "ChromeClient.h"
 #include "DOMPromiseProxy.h"
 #include "DeclarativeAnimation.h"
 #include "Document.h"
 #include "DocumentTimeline.h"
+#include "Element.h"
 #include "EventLoop.h"
 #include "EventNames.h"
@@ -905 +908 @@
     //    Otherwise, queue a task to dispatch finishEvent at animation. The task source for this task is the DOM manipulation task source.
     enqueueAnimationPlaybackEvent(eventNames().finishEvent, currentTime(), m_timeline ? m_timeline->currentTime() : WTF::nullopt);
+
+    if (is<KeyframeEffect>(m_effect)) {
+        if (auto target = makeRefPtr(downcast<KeyframeEffect>(*m_effect).target())) {
+            if (auto* page = target->document().page())
+                page->chrome().client().animationDidFinishForElement(*target);
+        }
+    }
 }
 

trunk/Source/WebCore/dom/Node.h

@@ -376 +376 @@
     bool isDescendantOrShadowDescendantOf(const Node*) const;
     WEBCORE_EXPORT bool contains(const Node*) const;
-    bool containsIncludingShadowDOM(const Node*) const;
+    WEBCORE_EXPORT bool containsIncludingShadowDOM(const Node*) const;
 
     // Whether or not a selection can be started in this object

trunk/Source/WebCore/editing/VisibleSelection.h

@@ -98 +98 @@
     WEBCORE_EXPORT Element* rootEditableElement() const;
     WEBCORE_EXPORT bool isContentEditable() const;
-    bool hasEditableStyle() const;
+    WEBCORE_EXPORT bool hasEditableStyle() const;
     WEBCORE_EXPORT bool isContentRichlyEditable() const;
     // Returns a shadow tree node for legacy shadow trees, a child of the

trunk/Source/WebCore/page/ChromeClient.h

@@ -529 +529 @@
 #endif
 
+    virtual void animationDidFinishForElement(const Element&) { }
+
 protected:
     virtual ~ChromeClient() = default;

trunk/Source/WebKit/ChangeLog

@@ +1 @@
+2020-05-08  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        [iOS] caret appears in the middle of a search field when field is focused on agoda.com
+        https://bugs.webkit.org/show_bug.cgi?id=211591
+        <rdar://problem/60605873>
+
+        Reviewed by Antoine Quint.
+
+        The main search field on the mobile version of this website begins offscreen, with a CSS transform that moves it
+        to the far right; tapping the button element that (visually) has a search-field-like appearance on the front
+        page programmatically focuses the real offscreen search field, and animates it onscreen by changing the CSS
+        transform attribute to remove the x-axis translation.
+
+        On iOS, the caret rect is computed and sent to the UI process via editor state updates; however, the editor
+        state is computed immediately after focusing the input field. As such, the caret rect at this moment is computed
+        in the middle of the animation, leaving it stuck in an unpredictable location.
+
+        To fix this, add plumbing to call into the WebKit client layer when an animation has ended. On iOS, if the
+        selection is visible (i.e. a ranged selection, or editable caret), then check to see whether the element that
+        has finished animating contains either endpoint of the selection. If so, then schedule a followup editor state
+        update to push updated selection information to the UI process.
+
+        * WebProcess/WebCoreSupport/WebChromeClient.cpp:
+        (WebKit::WebChromeClient::animationDidFinishForElement):
+        * WebProcess/WebCoreSupport/WebChromeClient.h:
+
+        Add a new client hook for when animations end.
+
+        * WebProcess/WebPage/WebPage.cpp:
+        (WebKit::WebPage::animationDidFinishForElement):
+        * WebProcess/WebPage/WebPage.h:
+        * WebProcess/WebPage/ios/WebPageIOS.mm:
+
+        Add logic to schedule a new editor state update if needed, after an animation ends that might affect either
+        the start or end of the selection.
+
+        (WebKit::WebPage::animationDidFinishForElement):
+
 2020-05-08  David Kilzer  <ddkilzer@apple.com>
 

trunk/Source/WebKit/WebProcess/WebCoreSupport/WebChromeClient.cpp

@@ -1396 +1396 @@
 #endif
 
+void WebChromeClient::animationDidFinishForElement(const Element& element)
+{
+    m_page.animationDidFinishForElement(element);
+}
+
 } // namespace WebKit

trunk/Source/WebKit/WebProcess/WebCoreSupport/WebChromeClient.h

@@ -231 +231 @@
 #endif
 
+    void animationDidFinishForElement(const WebCore::Element&) final;
+
     RefPtr<WebCore::DisplayRefreshMonitor> createDisplayRefreshMonitor(WebCore::PlatformDisplayID) const final;
 

trunk/Source/WebKit/WebProcess/WebPage/WebPage.cpp

@@ -7095 +7095 @@
 #endif // ENABLE(MEDIA_USAGE)
 
+#if !PLATFORM(IOS_FAMILY)
+
+void WebPage::animationDidFinishForElement(const WebCore::Element&)
+{
+}
+
+#endif
+
 } // namespace WebKit
 

trunk/Source/WebKit/WebProcess/WebPage/WebPage.h

@@ -405 +405 @@
     void didRemoveMenuItemElement(WebCore::HTMLMenuItemElement&);
 
+    void animationDidFinishForElement(const WebCore::Element&);
+
     const String& overrideContentSecurityPolicy() const { return m_overrideContentSecurityPolicy; }
 

trunk/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm

@@ -4392 +4392 @@
 #endif
 
+void WebPage::animationDidFinishForElement(const WebCore::Element& animatedElement)
+{
+    auto frame = makeRef(m_page->focusController().focusedOrMainFrame());
+    auto& selection = frame->selection().selection();
+    if (selection.isNoneOrOrphaned())
+        return;
+
+    if (selection.isCaret() && !selection.hasEditableStyle())
+        return;
+
+    auto scheduleEditorStateUpdateForStartOrEndContainerNodeIfNeeded = [&](const Node* container) {
+        if (!animatedElement.containsIncludingShadowDOM(container))
+            return false;
+
+        frame->selection().setCaretRectNeedsUpdate();
+        scheduleFullEditorStateUpdate();
+        return true;
+    };
+
+    auto startContainer = makeRefPtr(selection.start().containerNode());
+    if (scheduleEditorStateUpdateForStartOrEndContainerNodeIfNeeded(startContainer.get()))
+        return;
+
+    auto endContainer = makeRefPtr(selection.end().containerNode());
+    if (startContainer != endContainer)
+        scheduleEditorStateUpdateForStartOrEndContainerNodeIfNeeded(endContainer.get());
+}
+
 } // namespace WebKit