Bug 1329158 - Optimize maintaining scroll position in RequestListContent r?Honza
MozReview-Commit-ID: 1WUcBS3xyxb
--- 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() {