Bug 1431132 - Prevent repainting the whole request list by sizing the request table manually. r=Honza
MozReview-Commit-ID: 79oGrCMANGy
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -60,20 +60,17 @@
position: relative;
width: 100%;
height: 100%;
}
.requests-list-contents {
display: table-row-group;
position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ width: 100%;
overflow-x: hidden;
overflow-y: auto;
--timings-scale: 1;
--timings-rev-scale: 1;
}
.requests-list-column {
display: table-cell;
@@ -592,17 +589,22 @@
.requests-list-timings-total:dir(rtl) {
transform-origin: right center;
}
/* Request list item */
.request-list-item {
position: relative;
+/*
display: table-row;
+ Bug 1431132: Disabling this rule is surprising as we no longer have "rows".
+ But this helps preventing reflowing the whole requests list anytime we append
+ a new request/row.
+*/
height: 24px;
}
.request-list-item.selected {
background-color: var(--theme-selection-background);
color: var(--theme-selection-color);
}
--- a/devtools/client/netmonitor/src/components/RequestListContent.js
+++ b/devtools/client/netmonitor/src/components/RequestListContent.js
@@ -67,39 +67,42 @@ class RequestListContent extends Compone
};
}
constructor(props) {
super(props);
this.isScrolledToBottom = this.isScrolledToBottom.bind(this);
this.onHover = this.onHover.bind(this);
this.onScroll = this.onScroll.bind(this);
+ this.onResize = this.onResize.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
this.onContextMenu = this.onContextMenu.bind(this);
this.onFocusedNodeChange = this.onFocusedNodeChange.bind(this);
}
componentWillMount() {
const { connector, cloneSelectedRequest, openStatistics } = this.props;
this.contextMenu = new RequestListContextMenu({
connector,
cloneSelectedRequest,
openStatistics,
});
this.tooltip = new HTMLTooltip(window.parent.document, { type: "arrow" });
+ window.addEventListener("resize", this.onResize);
}
componentDidMount() {
// Install event handler for displaying a tooltip
this.tooltip.startTogglingOnHover(this.refs.contentEl, this.onHover, {
toggleDelay: REQUESTS_TOOLTIP_TOGGLE_DELAY,
interactive: true
});
// Install event handler to hide the tooltip on scroll
this.refs.contentEl.addEventListener("scroll", this.onScroll, true);
+ this.onResize();
}
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();
}
@@ -113,16 +116,22 @@ class RequestListContent extends Compone
}
}
componentWillUnmount() {
this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
// Uninstall the tooltip event handler
this.tooltip.stopTogglingOnHover();
+ window.removeEventListener("resize", this.onResize);
+ }
+
+ onResize() {
+ let parent = this.refs.contentEl.parentNode;
+ this.refs.contentEl.style.height = parent.offsetHeight + "px";
}
isScrolledToBottom() {
const { contentEl } = this.refs;
const lastChildEl = contentEl.lastElementChild;
if (!lastChildEl) {
return false;