Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-18 14:56:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1871762 - [devtools] Wait for request animation frame to resize netmonitor request list r=devtools-reviewers,ochameau

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D212672
This commit is contained in:
Julian Descottes 2024-08-14 00:04:40 +00:00
parent 5899e85856
commit 172e942c30
3 changed files with 59 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
devtools/client/netmonitor/src/components/request-list/RequestListContent.js
View File

@ -182,9 +182,13 @@ class RequestListContent extends Component {
* So it is needed in ComponentDidMount and ComponentDidUpdate. See Bug 1532914.
*/
onResize() {
const parent = this.refs.scrollEl.parentNode;
this.refs.scrollEl.style.width = parent.offsetWidth + "px";
this.refs.scrollEl.style.height = parent.offsetHeight + "px";
// Wait for the next animation frame to measure the parentNode dimensions.
// Bug 1900682.
requestAnimationFrame(() => {
const parent = this.refs.scrollEl.parentNode;
this.refs.scrollEl.style.width = parent.offsetWidth + "px";
this.refs.scrollEl.style.height = parent.offsetHeight + "px";
});
}
onIntersect(entries) {

2
devtools/client/netmonitor/test/browser.toml
View File

@ -344,6 +344,8 @@ fail-if = ["a11y_checks"] # Bug 1849028 clicked element may not be focusable and
["browser_net_large-response.js"]
["browser_net_layout_after_toggle.js"]
["browser_net_leak_on_tab_close.js"]
["browser_net_new_request_panel.js"]

50
devtools/client/netmonitor/test/browser_net_layout_after_toggle.js Normal file
View File

@ -0,0 +1,50 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Tests that the netmonitor UI is not broken after toggling to another panel.
*/
add_task(async function () {
const { monitor, toolbox } = await initNetMonitor(HTTPS_SIMPLE_URL, {
requestCount: 1,
});
ok(monitor, "The network monitor was opened");
const onNetworkEvent = waitForNetworkEvents(monitor, 1);
await navigateTo(HTTPS_SIMPLE_URL);
await onNetworkEvent;
const { document } = monitor.panelWin;
info("Select the first request to show the details side panel");
const firstRequest = document.querySelectorAll(".request-list-item")[0];
EventUtils.sendMouseEvent({ type: "mousedown" }, firstRequest);
const requestsListHeight = getRequestsListHeight(document);
info("Select the inspector");
await toolbox.selectTool("inspector");
info("Wait for Net panel to be hidden");
await waitUntil(() => document.visibilityState == "hidden");
info("Select the Net panel again");
await toolbox.selectTool("netmonitor");
info("Wait for Net panel to be hidden");
await waitUntil(() => document.visibilityState == "visible");
("Wait until the requests list has the same height as before");
await waitFor(
() => getRequestsListHeight(document) == requestsListHeight,
"Requests list height is the same after switching to another panel"
);
await teardown(monitor);
});
function getRequestsListHeight(document) {
return document.querySelector(".requests-list-scroll").offsetHeight;
}