commit b8664dd94327073ff6d7e38165fa3de3c487ed34
parent aacea06b4085448e4548c5740be6c436c5111b3c
Author: Cristian Tuns <ctuns@mozilla.com>
Date: Fri, 28 Nov 2025 18:43:20 -0500
Revert "Bug 1932997 - Update vertical tabs closing animations and browser_tabCloseProbes.js r=tabbrowser-reviewers,desktop-theme-reviewers,dao,sclements" for causing mochitest failures in browser_scroll_size_determination.js
This reverts commit d9af3674fb95c922b2250d9154b1751f9cc0ad54.
Diffstat:
7 files changed, 39 insertions(+), 49 deletions(-)
diff --git a/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js b/browser/components/sidebar/tests/browser/browser_sidebar_collapsed_close_tab_button.js
@@ -4,14 +4,10 @@
"use strict";
add_setup(async () => {
- // Force-disable tab animations for tab close
- gReduceMotionOverride = true;
-
await SpecialPowers.pushPrefEnv({
set: [[VERTICAL_TABS_PREF, true]],
});
await waitForTabstripOrientation("vertical");
-
Assert.equal(
Services.prefs.getStringPref(SIDEBAR_VISIBILITY_PREF),
"always-show",
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
@@ -5165,6 +5165,7 @@
isLastTab ||
aTab.pinned ||
!isVisibleTab ||
+ this.tabContainer.verticalMode ||
this._removingTabs.size >
3 /* don't want lots of concurrent animations */ ||
!aTab.hasAttribute(
@@ -5189,11 +5190,10 @@
setTimeout(
function (tab, tabbrowser) {
- let styles = window.getComputedStyle(tab);
- let tabSize = tabbrowser.tabContainer.verticalMode
- ? styles.maxHeight
- : styles.maxWidth;
- if (tab.container && tabSize == "0.1px") {
+ if (
+ tab.container &&
+ window.getComputedStyle(tab).maxWidth == "0.1px"
+ ) {
console.assert(
false,
"Giving up waiting for the tab closing animation to finish (bug 608589)"
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
@@ -411,8 +411,7 @@
* @param {TransitionEvent} event
*/
on_transitionend(event) {
- let propertyName = this.verticalMode ? "max-height" : "max-width";
- if (event.propertyName != propertyName) {
+ if (event.propertyName != "max-width") {
return;
}
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser.toml b/browser/components/tabbrowser/test/browser/tabs/browser.toml
@@ -489,6 +489,9 @@ skip-if = [
"os == 'mac' && os_version == '14.70' && arch == 'x86_64'", # Bug 1932997
"os == 'mac' && os_version == '15.30' && arch == 'aarch64'", # Bug 1932997
]
+fail-if = [
+ "vertical_tab", # Bug 1976110, fails in the "vertical-tabs" variant
+]
["browser_tabCloseSpacer.js"]
skip-if = [
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tabCloseProbes.js b/browser/components/tabbrowser/test/browser/tabs/browser_tabCloseProbes.js
@@ -58,28 +58,6 @@ function waitForSnapshotCount(histogram, expectedCount) {
}, `Collected value should become ${expectedCount}.`);
}
-/**
- * Test close time probe histogram accumulation.
- *
- * @param animate (Boolean)
- * Whether or not the tab is expected to animate on close.
- */
-async function testCloseTimeProbe(animate) {
- let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser);
- await BrowserTestUtils.waitForCondition(() => tab._fullyOpen);
-
- gAnimHistogram.clear();
- gNoAnimHistogram.clear();
-
- BrowserTestUtils.removeTab(tab, { animate });
-
- await waitForSnapshotCount(gAnimHistogram, animate ? 1 : 0);
- assertCount(gNoAnimHistogram.snapshot(), animate ? 0 : 1);
-
- gAnimHistogram.clear();
- gNoAnimHistogram.clear();
-}
-
add_setup(async function () {
await SpecialPowers.pushPrefEnv({
set: [["test.wait300msAfterTabSwitch", true]],
@@ -102,7 +80,19 @@ add_setup(async function () {
* close animation.
*/
add_task(async function test_close_time_anim_probe() {
- await testCloseTimeProbe(true);
+ let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser);
+ await BrowserTestUtils.waitForCondition(() => tab._fullyOpen);
+
+ gAnimHistogram.clear();
+ gNoAnimHistogram.clear();
+
+ BrowserTestUtils.removeTab(tab, { animate: true });
+
+ await waitForSnapshotCount(gAnimHistogram, 1);
+ assertCount(gNoAnimHistogram.snapshot(), 0);
+
+ gAnimHistogram.clear();
+ gNoAnimHistogram.clear();
});
/**
@@ -110,5 +100,17 @@ add_task(async function test_close_time_anim_probe() {
* tab close animation.
*/
add_task(async function test_close_time_no_anim_probe() {
- await testCloseTimeProbe(false);
+ let tab = await BrowserTestUtils.openNewForegroundTab(gBrowser);
+ await BrowserTestUtils.waitForCondition(() => tab._fullyOpen);
+
+ gAnimHistogram.clear();
+ gNoAnimHistogram.clear();
+
+ BrowserTestUtils.removeTab(tab, { animate: false });
+
+ await waitForSnapshotCount(gNoAnimHistogram, 1);
+ assertCount(gAnimHistogram.snapshot(), 0);
+
+ gAnimHistogram.clear();
+ gNoAnimHistogram.clear();
});
diff --git a/browser/components/tabbrowser/test/browser/tabs/browser_tab_groups.js b/browser/components/tabbrowser/test/browser/tabs/browser_tab_groups.js
@@ -16,9 +16,6 @@ add_setup(async function () {
await SpecialPowers.pushPrefEnv({
set: [["browser.tabs.groups.enabled", true]],
});
-
- // Force-disable tab animations for tab close
- gReduceMotionOverride = true;
});
function createManyTabs(number, win = window) {
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
@@ -67,8 +67,6 @@
--tab-selected-outline-color: var(--lwt-tab-line-color, currentColor);
}
--tab-dragover-transition: transform 200ms var(--animation-easing-function);
- --tab-width-transition: min-width 100ms ease-out, max-width 100ms ease-out;
- --tab-height-transition: min-height 100ms ease-out, max-height 100ms ease-out;
--vertical-tabs-scrollbar-color: auto;
@media (-moz-platform: macos) {
@@ -147,6 +145,8 @@
padding-bottom: 15px;
margin-bottom: -15px;
}
+
+ --tab-width-transition: min-width 100ms ease-out, max-width 100ms ease-out;
}
&[noshadowfortests] {
@@ -2170,6 +2170,7 @@ tab-group {
}
#tabbrowser-tabs[orient="vertical"] {
+ --tab-min-width: unset;
--tab-inline-padding: calc((var(--tab-collapsed-width) - var(--icon-size)) / 2);
min-height: 0;
@@ -2200,22 +2201,14 @@ tab-group {
}
.tabbrowser-tab {
+ flex: none;
padding-inline: 0;
padding-block: 3px 2px;
- /* Set tab height so closing transtion occurs but include padding block values */
- min-height: calc(var(--tab-min-height) + 5px);
- max-height: calc(var(--tab-min-height) + 5px);
- transition: var(--tab-height-transition);
/* prevent the shadow of the close button from being cutoff by the toolbar on the first tab */
&:nth-child(1 of :not([hidden], [pinned])) {
padding-block-start: 5px;
}
-
- &:not([pinned], [fadein]) {
- max-height: 0.1px;
- min-height: 0.1px;
- }
}
.tab-label-container {
