Update network inspector to have smarter scroll stickiness

Libraries/Inspector/NetworkOverlay.js

@@ -88,6 +88,16 @@ class NetworkOverlay extends React.Component<Props, State> {
   _requestsListView: ?React.ElementRef<typeof FlatList>;
   _detailScrollView: ?React.ElementRef<typeof ScrollView>;
 
+  // Metrics are used to decide when if the request list should be sticky, and
+  // scroll to the bottom as new network requests come in, or if the user has
+  // intentionally scrolled away from the bottom - to instead flash the scroll bar
+  // and keep the current position
+  _requestsListViewScrollMetrics = {
+    offset: 0,
+    visibleLength: 0,
+    contentLength: 0,
+  };
+
   // Map of `socketId` -> `index in `this.state.requests`.
   _socketIdMap = {};
   // Map of `xhr._index` -> `index in `this.state.requests`.
@@ -121,7 +131,7 @@ class NetworkOverlay extends React.Component<Props, State> {
         {
           requests: this.state.requests.concat(_xhr),
         },
-        this._scrollRequestsToBottom,
+        this._indicateAdditionalRequests,
       );
     });
 
@@ -214,7 +224,7 @@ class NetworkOverlay extends React.Component<Props, State> {
           {
             requests: this.state.requests.concat(_webSocket),
           },
-          this._scrollRequestsToBottom,
+          this._indicateAdditionalRequests,
         );
       },
     );
@@ -383,11 +393,35 @@ class NetworkOverlay extends React.Component<Props, State> {
     );
   }
 
-  _scrollRequestsToBottom(): void {
+  _indicateAdditionalRequests = (): void => {
     if (this._requestsListView) {
-      this._requestsListView.scrollToEnd();
+      const distanceFromEndThreshold = LISTVIEW_CELL_HEIGHT * 2;
+      const {
+        offset,
+        visibleLength,
+        contentLength,
+      } = this._requestsListViewScrollMetrics;
+      const distanceFromEnd = contentLength - visibleLength - offset;
+      const isCloseToEnd = distanceFromEnd <= distanceFromEndThreshold;
+      if (isCloseToEnd) {
+        this._requestsListView.scrollToEnd();
+      } else {
+        this._requestsListView.flashScrollIndicators();
+      }
     }
-  }
+  };
+
+  _captureRequestsListView = (listRef: ?FlatList<NetworkRequestInfo>): void => {
+    this._requestsListView = listRef;
+  };
+
+  _requestsListViewOnScroll = (e: Object): void => {
+    this._requestsListViewScrollMetrics.offset = e.nativeEvent.contentOffset.y;
+    this._requestsListViewScrollMetrics.visibleLength =
+      e.nativeEvent.layoutMeasurement.height;
+    this._requestsListViewScrollMetrics.contentLength =
+      e.nativeEvent.contentSize.height;
+  };
 
   /**
    * Popup a scrollView to dynamically show detailed information of
@@ -446,7 +480,8 @@ class NetworkOverlay extends React.Component<Props, State> {
         </View>
 
         <FlatList
-          ref={listRef => (this._requestsListView = listRef)}
+          ref={this._captureRequestsListView}
+          onScroll={this._requestsListViewOnScroll}
           style={styles.listView}
           data={requests}
           renderItem={this._renderItem}