Bug 1329158 - Optimize maintaining scroll position in RequestListContent r?Honza draft
authorJarda Snajdr <jsnajdr@gmail.com>
Thu, 05 Jan 2017 15:47:19 +0100
changeset 456853 37fa42068e7ad4371cb6d51d7008924437ba4f67
parent 456849 0d06764d65401e9c92513078069008f030af072f
child 456859 0865ab508e69496628b88ac7684cefb2dbdf6485
push id40625
push userbmo:jsnajdr@gmail.com
push dateFri, 06 Jan 2017 11:13:44 +0000
reviewersHonza
bugs1329158
milestone53.0a1
Bug 1329158 - Optimize maintaining scroll position in RequestListContent r?Honza MozReview-Commit-ID: 1WUcBS3xyxb
devtools/client/netmonitor/components/request-list-content.js
--- a/devtools/client/netmonitor/components/request-list-content.js
+++ b/devtools/client/netmonitor/components/request-list-content.js
@@ -35,24 +35,26 @@ const RequestListContent = createClass({
       toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
       interactive: true
     });
 
     // Install event handler to hide the tooltip on scroll
     this.refs.contentEl.addEventListener("scroll", this.onScroll, true);
   },
 
-  componentWillUpdate() {
-    // Check if the list is scrolled to bottom, before UI update
-    this.shouldScrollBottom = this.isScrolledToBottom();
+  componentWillUpdate(nextProps) {
+    // Check if the list is scrolled to bottom before the UI update.
+    // The scroll is ever needed only if new rows are added to the list.
+    const delta = nextProps.displayedRequests.size - this.props.displayedRequests.size;
+    this.shouldScrollBottom = delta > 0 && this.isScrolledToBottom();
   },
 
   componentDidUpdate(prevProps) {
     // Update the CSS variables for waterfall scaling after props change
-    this.setScalingStyles();
+    this.setScalingStyles(prevProps);
 
     // Keep the list scrolled to bottom if a new row was added
     if (this.shouldScrollBottom) {
       let node = this.refs.contentEl;
       node.scrollTop = node.scrollHeight;
     }
   },
 
@@ -67,22 +69,20 @@ const RequestListContent = createClass({
    * Set the CSS variables for waterfall scaling. If React supported setting CSS
    * variables as part of the "style" property of a DOM element, we would use that.
    *
    * However, React doesn't support this, so we need to use a hack and update the
    * DOM element directly: https://github.com/facebook/react/issues/6411
    */
   setScalingStyles(prevProps) {
     const { scale } = this.props;
-    if (scale == this.currentScale) {
+    if (prevProps && prevProps.scale === scale) {
       return;
     }
 
-    this.currentScale = scale;
-
     const { style } = this.refs.contentEl;
     style.removeProperty("--timings-scale");
     style.removeProperty("--timings-rev-scale");
     style.setProperty("--timings-scale", scale);
     style.setProperty("--timings-rev-scale", 1 / scale);
   },
 
   isScrolledToBottom() {