1576078 - Selected frame scrolls out of the visible area

Status: RESOLVED DUPLICATE of bug 1561873

(DevTools :: Netmonitor, defect, P2)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

STR:

1. Load http://janodvarko.cz/test/websockets/
2. Open the Network panel
3. Click Connect and send ~10 frames
4. Select the 101 request and the Messages panel. The frame list is properly scrolled to bottom
5. Click at ~5th request from the top
6. The preview panel opens (taking some of the vertical space) and the selected request is moved out from the visible area => BUG

Can we call something like ensureVisible on the selected request to make sure that the user can still see it while inspecting the payload?

Honza

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Heng Yeow, can you please look at this, thanks!
Honza

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

This seems to fix the issue for me:

diff --git a/devtools/client/netmonitor/src/components/websockets/FrameListContent.js b/devtools/client/netmonitor/src/--- a/devtools/client/netmonitor/src/components/websockets/FrameListContent.js
+++ b/devtools/client/netmonitor/src/components/websockets/FrameListContent.js
@@ -93,17 +93,22 @@ class FrameListContent extends Component
       this.initIntersectionObserver = false;
     }

     // If a new WebSocket connection is selected, scroll to anchor.
     if (channelId !== prevProps.channelId && scrollAnchor) {
       scrollAnchor.scrollIntoView();
     }

-    this.setupScrollToBottom(startPanelContainer, scrollAnchor);
+    // Do not autoscroll if the selection changed. This would cause
+    // the newly selected frame to jump just after clicking in.
+    // (not user friendly)
+    if (prevProps.selectedFrame == this.props.selectedFrame) {
+      this.setupScrollToBottom(startPanelContainer, scrollAnchor);
+    }
   }

   componentWillUnmount() {
     // Reset observables and boolean values.
     const scrollAnchor = this.refs.scrollAnchor;

     if (this.intersectionObserver) {
       this.intersectionObserver.unobserve(scrollAnchor);

@tanhengyeow: can you please test this and upload to Phab.

Honza

Comment 4

[Hengyeow (:tanhengyeow)]

Marked duplicate.