Web Inspector: Styles: Completion popover should hide when resizing or scrolling

• Component: Web Inspector
• Status: RESOLVED FIXED

[Nikita Vasilyev]

Created attachment 333530 [details]
[Animated GIF] Bug

CompletionSuggestionsView's popover doesn't update when:
1. Sidebar is resized.
2. Sidebar is scrolled.
3. When web page is reloaded by pressing Command-R!

In "Bug 182619 - Web Inspector: Styles: Loses focus when editing a property while page is being loaded"
you can see the completion popover not hiding when the anchor node is removed from DOM.

I recently fixed "Bug 182464 - Web Inspector: Styles: completion popover doesn't hide when switching panels",
by adding a bunch of code to hide the popover when the anchor element becomes hidden.

---

Instead of fixing these issues one by one, CompletionSuggestionsView should be smarter by default.

The popover should hide when the anchor node:
- detaches from DOM.
- becomes invisible.

The popover should update its position when the anchor node moves.

[Radar WebKit Bug Importer]

<rdar://problem/37408559>

[Nikita Vasilyev]

Created attachment 333567 [details]
[Animated GIF] WIP

On the animated GIF you can see the popover still being visible when the anchor node is behind the sidebar navigation bar. It also looks jittery.

I think it's good enough to hide the popover when resizing or scrolling.

[Nikita Vasilyev]

Created attachment 333574 [details]
Patch

[Nikita Vasilyev]

Created attachment 333575 [details]
[Animated GIF] With patch applied

[Nikita Vasilyev]

> CompletionSuggestionsView's popover doesn't update when:
> 1. Sidebar is resized.
> 2. Sidebar is scrolled.
> 3. When web page is reloaded by pressing Command-R!

My patch fixes these cases.


> In "Bug 182619 - Web Inspector: Styles: Loses focus when editing a property
> while page is being loaded"
> you can see the completion popover not hiding when the anchor node is
> removed from DOM.

My patch mitigates this issue by hiding the popover. The bug with losing focus still needs to be fixed in bug 182619.

> I recently fixed "Bug 182464 - Web Inspector: Styles: completion popover
> doesn't hide when switching panels",
> by adding a bunch of code to hide the popover when the anchor element
> becomes hidden.

Again, my patch mitigates the issue by hiding the popover, but doesn't fix it completely. When switching panels, we still need to manually trigger blur event, or it's possible to continue typing in a text field of a a hidden panel :(
We can't revert bug 182464.

[Timothy Hatcher]

Comment on attachment 333574 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=333574&action=review

> Source/WebInspectorUI/UserInterface/Views/CompletionSuggestionsView.js:168
> +        }
> +        this.show(this._anchorBounds);

Nit: New line between these lines.

[Nikita Vasilyev]

Created attachment 333827 [details]
Patch

[WebKit Commit Bot]

Comment on attachment 333827 [details]
Patch

Clearing flags on attachment: 333827

Committed r228487: <https://trac.webkit.org/changeset/228487>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.