Bug 189569 – Web Inspector: Opening inspector with a selected element might immediately scroll that element off screen in the DOM Tree outline

• Status: RESOLVED
• Resolution: FIXED
• Component: Web Inspector

[Joseph Pecoraro]

Opening inspector with a selected element might immediately scroll that element off screen in the DOM Tree outline

Steps to Reproduce:
1. Open https://www.apple.com/iphone-xs/
2. Scroll down
3. Select some text
4. Context menu > Inspect Element
  => Web Inspector opens, but that element is not visible (you need to scroll down in the DOM Tree in the Elements tab)

Notes:
- Watching in slow motion, the tab opens, element is selected, then the sidebar opens, the tree lays out and the selected element is pushed down.

[Joseph Pecoraro]

<rdar://problem/44397098>

[Joseph Pecoraro]

Created attachment 349597 [details]
[PATCH] Proposed Fix

I want to live on this for a while to make sure it doesn't cause any unexpected problems.

[Devin Rousso]

Comment on attachment 349597 [details]
[PATCH] Proposed Fix

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

> Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js:44
> +        WI.detailsSidebar.addEventListener(WI.Sidebar.Event.CollapsedStateDidChange, this._elementsTabDetailsSidebarCollapsedStateDidChange, this);

I think we might also want to re-scroll the node if the sidebar's width changes too, not just if it collapses.  You should be able to modify `WI.DOMTreeContentView.prototype.layout`:

        if (this.layoutReason === WI.View.LayoutReason.Resize)
            this._domTreeOutline.selectDOMNode(this._domTreeOutline.selectedDOMNode());

[EWS Watchlist]

Comment on attachment 349597 [details]
[PATCH] Proposed Fix

Attachment 349597 [details] did not pass mac-wk2-ews (mac-wk2):
Output: https://webkit-queues.webkit.org/results/9198985

New failing tests:
accessibility/smart-invert-reference.html

[EWS Watchlist]

Created attachment 349625 [details]
Archive of layout-test-results from ews106 for mac-sierra-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews106  Port: mac-sierra-wk2  Platform: Mac OS X 10.12.6

[Joseph Pecoraro]

Comment on attachment 349597 [details]
[PATCH] Proposed Fix

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

>> Source/WebInspectorUI/UserInterface/Views/ElementsTabContentView.js:44
>> +        WI.detailsSidebar.addEventListener(WI.Sidebar.Event.CollapsedStateDidChange, this._elementsTabDetailsSidebarCollapsedStateDidChange, this);
> 
> I think we might also want to re-scroll the node if the sidebar's width changes too, not just if it collapses.  You should be able to modify `WI.DOMTreeContentView.prototype.layout`:
> 
>         if (this.layoutReason === WI.View.LayoutReason.Resize)
>             this._domTreeOutline.selectDOMNode(this._domTreeOutline.selectedDOMNode());

Great idea!

[Joseph Pecoraro]

Created attachment 349677 [details]
[PATCH] Proposed Fix

[EWS Watchlist]

Comment on attachment 349677 [details]
[PATCH] Proposed Fix

Attachment 349677 [details] did not pass ios-sim-ews (ios-simulator-wk2):
Output: https://webkit-queues.webkit.org/results/9204670

New failing tests:
fast/animation/css-animation-resuming-when-visible-with-style-change2.html

[EWS Watchlist]

Created attachment 349691 [details]
Archive of layout-test-results from ews122 for ios-simulator-wk2

The attached test failures were seen while running run-webkit-tests on the ios-sim-ews.
Bot: ews122  Port: ios-simulator-wk2  Platform: Mac OS X 10.13.4

[Devin Rousso]

Comment on attachment 349677 [details]
[PATCH] Proposed Fix

r=me

[WebKit Commit Bot]

Comment on attachment 349677 [details]
[PATCH] Proposed Fix

Clearing flags on attachment: 349677

Committed r235996: <https://trac.webkit.org/changeset/235996>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.