Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test gets skipped with pattern: apple_catalina OR os == 'mac' && !debug OR os == 'linux' && !debug
- Manifest: browser/base/content/test/performance/browser.toml
/* Any copyright is dedicated to the Public Domain.
"use strict";
/**
* WHOA THERE: We should never be adding new things to EXPECTED_REFLOWS.
* Instead of adding reflows to the list, you should be modifying your code to
* avoid the reflow.
*
* for tips on how to do that.
*/
const EXPECTED_REFLOWS = [
/**
* Nothing here! Please don't add anything new!
*/
];
/*
* This test ensures that there are no unexpected
* uninterruptible reflows when opening new tabs.
*/
add_task(async function () {
// Force-enable tab animations
gReduceMotionOverride = false;
// can extend outside of the boundingClientRect. The tabRect will need
// to grow to include the shadow size.
gBrowser.tabContainer.setAttribute("noshadowfortests", "true");
await ensureNoPreloadedBrowser();
await disableFxaBadge();
// The test starts on about:blank and opens an about:blank
// tab which triggers opening the toolbar since
// ensureNoPreloadedBrowser sets AboutNewTab.newTabURL to about:blank.
await SpecialPowers.pushPrefEnv({
set: [["browser.toolbars.bookmarks.visibility", "never"]],
});
// Prepare the window to avoid flicker and reflow that's unrelated to our
// tab opening operation.
gURLBar.focus();
let tabStripRect =
gBrowser.tabContainer.arrowScrollbox.getBoundingClientRect();
let firstTabRect = gBrowser.selectedTab.getBoundingClientRect();
let tabPaddingStart = parseFloat(
getComputedStyle(gBrowser.selectedTab).paddingInlineStart
);
let minTabWidth = firstTabRect.width - 2 * tabPaddingStart;
let maxTabWidth = firstTabRect.width;
let firstTabLabelRect =
gBrowser.selectedTab.textLabel.getBoundingClientRect();
let newTabButtonRect = document
.getElementById("tabs-newtab-button")
.getBoundingClientRect();
let textBoxRect = gURLBar
.querySelector("moz-input-box")
.getBoundingClientRect();
let inRange = (val, min, max) => min <= val && val <= max;
info(`tabStripRect=${JSON.stringify(tabStripRect)}`);
info(`firstTabRect=${JSON.stringify(firstTabRect)}`);
info(`tabPaddingStart=${JSON.stringify(tabPaddingStart)}`);
info(`firstTabLabelRect=${JSON.stringify(firstTabLabelRect)}`);
info(`newTabButtonRect=${JSON.stringify(newTabButtonRect)}`);
info(`textBoxRect=${JSON.stringify(textBoxRect)}`);
let inTabStrip = function (r) {
return (
r.y1 >= tabStripRect.top &&
r.y2 <= tabStripRect.bottom &&
r.x1 >= tabStripRect.left &&
r.x2 <= tabStripRect.right
);
};
const kTabCloseIconWidth = 13;
let isExpectedChange = function (r) {
// We expect all changes to be within the tab strip.
if (!inTabStrip(r)) {
return false;
}
// The first tab should get deselected at the same time as the next tab
// starts appearing, so we should have one rect that includes the first tab
// but is wider.
if (
inRange(r.w, minTabWidth, maxTabWidth * 2) &&
inRange(r.x1, firstTabRect.x, firstTabRect.x + tabPaddingStart)
) {
return true;
}
// The second tab gets painted several times due to tabopen animation.
let isSecondTabRect =
inRange(
r.x1,
// When the animation starts the tab close icon overflows.
// -1 for the border on Win7
firstTabRect.right - kTabCloseIconWidth - 1,
firstTabRect.right + firstTabRect.width
) &&
r.x2 <
firstTabRect.right +
firstTabRect.width +
// Sometimes the '+' is in the same rect.
newTabButtonRect.width;
if (isSecondTabRect) {
return true;
}
// The '+' icon moves with an animation. At the end of the animation
// the former and new positions can touch each other causing the rect
// to have twice the icon's width.
if (
r.h == kTabCloseIconWidth &&
r.w <= 2 * kTabCloseIconWidth + kMaxEmptyPixels
) {
return true;
}
// We sometimes have a rect for the right most 2px of the '+' button.
if (r.h == 2 && r.w == 2) {
return true;
}
// Same for the 'X' icon.
if (r.h == 10 && r.w <= 2 * 10) {
return true;
}
// Other changes are unexpected.
return false;
};
// Add a reflow observer and open a new tab.
await withPerfObserver(
async function () {
let switchDone = BrowserTestUtils.waitForEvent(window, "TabSwitchDone");
BrowserCommands.openTab();
await BrowserTestUtils.waitForEvent(
gBrowser.selectedTab,
"TabAnimationEnd"
);
await switchDone;
},
{
expectedReflows: EXPECTED_REFLOWS,
frames: {
filter: rects => rects.filter(r => !isExpectedChange(r)),
exceptions: [
{
name:
" previous one gets deselected",
condition: r =>
// In tab strip
r.y1 >= tabStripRect.top &&
r.y2 <= tabStripRect.bottom &&
// Position and size of the first tab.
r.x1 == firstTabRect.left &&
inRange(
r.w,
firstTabRect.width - 1, // -1 as the border doesn't change
firstTabRect.width
),
},
{
name: "the urlbar placeolder moves up and down by a few pixels",
// This seems to only happen on the second run in --verify
condition: r =>
r.x1 >= textBoxRect.left &&
r.x2 <= textBoxRect.right &&
r.y1 >= textBoxRect.top &&
r.y2 <= textBoxRect.bottom,
},
{
condition: r =>
AppConstants.platform == "macosx" &&
r.x1 >= firstTabLabelRect.x &&
r.x2 <= firstTabLabelRect.right &&
r.y1 >= firstTabLabelRect.y &&
r.y2 <= firstTabLabelRect.bottom,
},
],
},
}
);
let switchDone = BrowserTestUtils.waitForEvent(window, "TabSwitchDone");
BrowserTestUtils.removeTab(gBrowser.selectedTab);
await switchDone;
});