diff options
Diffstat (limited to 'browser/base/content/test/performance/browser_tabopen.js')
| -rw-r--r-- | browser/base/content/test/performance/browser_tabopen.js | 201 |
1 files changed, 201 insertions, 0 deletions
diff --git a/browser/base/content/test/performance/browser_tabopen.js b/browser/base/content/test/performance/browser_tabopen.js new file mode 100644 index 0000000000..2457812cb7 --- /dev/null +++ b/browser/base/content/test/performance/browser_tabopen.js @@ -0,0 +1,201 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"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. + * + * See https://firefox-source-docs.mozilla.org/performance/bestpractices.html + * 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; + + // TODO (bug 1702653): Disable tab shadows for tests since the shadow + // 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"); + BrowserOpenTab(); + await BrowserTestUtils.waitForEvent( + gBrowser.selectedTab, + "TabAnimationEnd" + ); + await switchDone; + }, + { + expectedReflows: EXPECTED_REFLOWS, + frames: { + filter: rects => rects.filter(r => !isExpectedChange(r)), + exceptions: [ + { + name: + "bug 1446452 - the new tab should appear at the same time as the" + + " 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, + }, + { + name: "bug 1477966 - the name of a deselected tab should appear immediately", + 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; +}); |