Bug 1413829 - RequestListContent scroll to bottom should avoid sync reflow r=Honza
authorRicky Chien <ricky060709@gmail.com>
Thu, 02 Nov 2017 16:56:53 +0800
changeset 443221 6af2bb14bd4c1ada3e9dc68ff9c40b3a9e0893e0
parent 443220 180cd6b0a9748b0de0c563a7d58d8be7eedc94c8
child 443222 1955a40abe6fadb8a2a870a98a626e3e4b6bae40
push id1618
push userCallek@gmail.com
push dateThu, 11 Jan 2018 17:45:48 +0000
treeherdermozilla-release@882ca853e05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1413829
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1413829 - RequestListContent scroll to bottom should avoid sync reflow r=Honza MozReview-Commit-ID: KwPVFJfRQQK
devtools/client/netmonitor/src/components/RequestListContent.js
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -21,18 +21,20 @@ const {
 
 // Components
 const RequestListHeader = createFactory(require("./RequestListHeader"));
 const RequestListItem = createFactory(require("./RequestListItem"));
 const RequestListContextMenu = require("../request-list-context-menu");
 
 const { div } = DOM;
 
-// tooltip show/hide delay in ms
+// Tooltip show / hide delay in ms
 const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
+// Gecko's scrollTop is int32_t, so the maximum value is 2^31 - 1 = 2147483647
+const MAX_SCROLL_HEIGHT = 2147483647;
 
 /**
  * Renders the actual contents of the request list.
  */
 class RequestListContent extends Component {
   static get propTypes() {
     return {
       connector: PropTypes.object.isRequired,
@@ -94,20 +96,21 @@ class RequestListContent extends Compone
     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(prevProps);
 
+    let node = this.refs.contentEl;
     // Keep the list scrolled to bottom if a new row was added
-    if (this.shouldScrollBottom) {
-      let node = this.refs.contentEl;
-      node.scrollTop = node.scrollHeight;
+    if (this.shouldScrollBottom && node.scrollTop !== MAX_SCROLL_HEIGHT) {
+      // Using maximum scroll height rather than node.scrollHeight to avoid sync reflow.
+      node.scrollTop = MAX_SCROLL_HEIGHT;
     }
   }
 
   componentWillUnmount() {
     this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
 
     // Uninstall the tooltip event handler
     this.tooltip.stopTogglingOnHover();