Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: http3 OR http2
- Manifest: devtools/client/netmonitor/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
"use strict";
/**
* Test that waterfall timing elements are resized when the column is resized.
*/
add_task(async function () {
// Use a test page with slow requests.
const { monitor } = await initNetMonitor(HTTPS_SLOW_REQUESTS_URL, {
requestCount: 2,
});
const { document, store, windowRequire } = monitor.panelWin;
const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
store.dispatch(Actions.batchEnable(false));
const onEvents = waitForNetworkEvents(monitor, 2);
await reloadBrowser();
await onEvents;
info("Resize waterfall column a first time");
const waterfallHeader = document.querySelector(
`#requests-list-waterfall-header-box`
);
const headers = document.querySelector(".requests-list-headers");
const parentWidth = headers.getBoundingClientRect().width;
let onWaterfallResize = waitForDispatch(store, "WATERFALL_RESIZE");
resizeWaterfallColumn(waterfallHeader, 30, parentWidth);
await onWaterfallResize;
info("Mesure the initial width of a request timing element");
const initialWidth = await getStableTimingBoxesWidth(document);
info("Measured initialWidth: " + initialWidth);
info("Resize waterfall column again");
onWaterfallResize = waitForDispatch(store, "WATERFALL_RESIZE");
resizeWaterfallColumn(waterfallHeader, 60, parentWidth);
await onWaterfallResize;
info("Mesure the request timing element again");
const finalWidth = await getStableTimingBoxesWidth(
document,
width => width > 200
);
info("Measured finalWidth: " + finalWidth);
// We want to check that finalWidth is different from initialWidth, but
// the size might be slightly updated so we can't use isnot to assert this.
// The finalWidth should be significantly bigger, so check the difference is
// at least greater than 1.
Assert.greater(
Math.abs(finalWidth - initialWidth),
1,
"The request timing element should be updated"
);
return teardown(monitor);
});
/**
* Timings are updated with a slight delay so wait until the dimension is
* stabilized.
* Measure the widths of all waterfall timing boxes.
*
* @param {Document} doc
* Netmonitor document.
* @param {function=} predicate
* Optional predicate to avoid returning erroneous width. On windows CI,
* the second measure is hard to get right, so we use the predicate to make
* sure we retrieve the good size.
* @returns {number}
* The measured width.
*/
async function getStableTimingBoxesWidth(doc, predicate = null) {
let stableWidth = -1;
await waitFor(
() => {
// Sum the width of all displayed timings.
const timingBoxes = [
...doc.querySelectorAll(".requests-list-timings-box"),
];
const widths = timingBoxes.map(el => el.getBoundingClientRect().width);
const width = widths.reduce((sum, w) => sum + w, 0);
// If the width changed, updated it and return.
if (width != stableWidth) {
stableWidth = width;
return false;
}
// Otherwise, check the predicate if provided.
if (typeof predicate == "function") {
return predicate(width);
}
return true;
},
"Wait for the timings width to stabilize",
500
);
return stableWidth;
}