ViewportDataGrid: Add enableAutoScrollToBottom preference

Bug:377763109
Change-Id: Iec8b46cc65b4026c5220c539ed2e96db6e6efa88
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6001603
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Adam Raine <[email protected]>

Author: paulirish

front_end/panels/network/EventSourceMessagesView.ts

@@ -100,7 +100,7 @@ export class EventSourceMessagesView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setStriped(true);
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setRowContextMenuCallback(this.onRowContextMenu.bind(this));
     this.dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
     this.sortItems();

front_end/panels/network/NetworkLogView.ts

@@ -1144,7 +1144,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         this.handleContextMenuForRequest(contextMenu, request);
       }
     });
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setName('network-log');
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.element.classList.add('network-log-grid');
@@ -1595,7 +1595,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     this.dataGrid.rootNode().removeChildren();
     this.updateSummaryBar();
-    this.dataGrid.setStickToBottom(true);
     this.scheduleRefresh();
   }
 

front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -190,7 +190,7 @@ export class ResourceWebSocketFrameView extends UI.Widget.VBox {
       refreshCallback: undefined,
     });
     this.dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setCellClass('websocket-frame-view-td');
     this.timeComparator =
         (resourceWebSocketFrameNodeTimeComparator as

front_end/ui/legacy/components/data_grid/ViewportDataGrid.ts

@@ -14,7 +14,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     DataGridImpl)<ViewportDataGridNode<T>> {
   private readonly onScrollBound: (event: Event|null) => void;
   private visibleNodes: ViewportDataGridNode<T>[];
-  stickToBottom: boolean;
+  /** A datagrid preference to express that the grid represents an updating log of rows (eg Network panel request log, websocket messages).
+   * If `true`, the datagrid will mostly keep the scroll at the bottom, so new items are visible.
+   * If the data is sorted descending (eg Performance Call Tree, heap snapshot), keep the default of `false`.
+   */
+  enableAutoScrollToBottom: boolean = false;
+  /** When true, the datagrid will manipulate the scrollTop to focus on the bottom, mostly so new additions are visible.
+   * Some actions will unset this, like revealing or expanding a particular node.
+   * Only matters if enableAutoScrollToBottom is true. */
+  keepScrollingToBottom: boolean = false;
   private updateIsFromUser: boolean;
   private lastScrollTop: number;
   private firstVisibleIsStriped: boolean;
@@ -29,7 +37,6 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     this.visibleNodes = [];
     this.inline = false;
 
-    this.stickToBottom = false;
     this.updateIsFromUser = false;
     this.lastScrollTop = 0;
     this.firstVisibleIsStriped = false;
@@ -60,15 +67,15 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
   }
 
   override onResize(): void {
-    if (this.stickToBottom) {
+    if (this.keepScrollingToBottom) {
       this.scrollContainer.scrollTop = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
     }
     this.scheduleUpdate();
     super.onResize();
   }
 
-  setStickToBottom(stick: boolean): void {
-    this.stickToBottom = stick;
+  setEnableAutoScrollToBottom(stick: boolean): void {
+    this.keepScrollingToBottom = this.enableAutoScrollToBottom = stick;
   }
 
   private onScroll(_event: Event|null): void {
@@ -131,8 +138,10 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       bottomPadding += nodes[i].nodeSelfHeight();
     }
 
-    // enable stick-to-bottom if the last item is visible
-    this.stickToBottom = end === nodes.length;
+    if (this.enableAutoScrollToBottom) {
+      // If we're scrolled to the very end, keep the scroll viewport focused to the end (as new items arrive)
+      this.keepScrollingToBottom = end === nodes.length;
+    }
 
     return {
       topPadding,
@@ -157,7 +166,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     let scrollTop: number = this.scrollContainer.scrollTop;
     const currentScrollTop = scrollTop;
     const maxScrollTop = Math.max(0, this.contentHeight() - clientHeight);
-    if (!this.updateIsFromUser && this.stickToBottom) {
+    if (!this.updateIsFromUser && this.keepScrollingToBottom) {
       scrollTop = maxScrollTop;
     }
     this.updateIsFromUser = false;
@@ -185,7 +194,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
       const nodes = (this.rootNode() as ViewportDataGridNode<T>).flatChildren();
       const index = nodes.indexOf(visibleNodes[0]);
       this.updateStripesClass(Boolean(index % 2));
-      if (this.stickToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
+      if (this.keepScrollingToBottom && index !== -1 && Boolean(index % 2) !== this.firstVisibleIsStriped) {
         offset += 1;
       }
     }
@@ -233,7 +242,7 @@ export class ViewportDataGrid<T> extends Common.ObjectWrapper.eventMixin<EventTy
     const visibleHeight = this.scrollContainer.offsetHeight - this.headerHeightInScroller();
     if (scrollTop > fromY) {
       scrollTop = fromY;
-      this.stickToBottom = false;
+      this.keepScrollingToBottom = false;
     } else if (scrollTop + visibleHeight < toY) {
       scrollTop = toY - visibleHeight;
     }
@@ -410,7 +419,7 @@ export class ViewportDataGridNode<T> extends DataGridNode<ViewportDataGridNode<T
     if (this.expanded) {
       return;
     }
-    (this.dataGrid as ViewportDataGrid<T>).stickToBottom = false;
+    (this.dataGrid as ViewportDataGrid<T>).keepScrollingToBottom = false;
     this.clearFlatNodes();
     super.expand();
     (this.dataGrid as ViewportDataGrid<T>).scheduleUpdateStructure();