Bug 1413829 - RequestListContent scroll to bottom should avoid sync reflow r=Honza
☠☠ backed out by 2ec0c37e6fed ☠ ☠
authorRicky Chien <ricky060709@gmail.com>
Thu, 02 Nov 2017 16:56:53 +0800
changeset 443101 8570b22fc8f3555afde251370959982e138080bf
parent 443100 8c551c669a7f1fbcbeb1c37af6eb448e57382070
child 443107 759c687e02d2f3191c445076060b44070d75daed
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
@@ -23,16 +23,17 @@ const {
 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
 const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
+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 +95,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 max int32 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();