Bug 1918676 - Disable tab opening / closing animations and tab size locking in vertical mode, properly set --tab-min-width rather than overriding min-width in vertical mode, and restrict some styles to horizontal mode. r=sidebar-reviewers,desktop-theme-reviewers,tabbrowser-reviewers,emilio,kcochrane,sclements,dwalker

Differential Revision: https://phabricator.services.mozilla.com/D222202
This commit is contained in:
Dão Gottwald 2024-09-16 19:53:42 +00:00
parent 1731f1fc2d
commit aa7d577032
4 changed files with 65 additions and 43 deletions

View File

@ -1519,7 +1519,8 @@ var SidebarController = {
toggleTabstrip() {
let toVerticalTabs = CustomizableUI.verticalTabsEnabled;
let arrowScrollbox = gBrowser.tabContainer.arrowScrollbox;
let tabStrip = gBrowser.tabContainer;
let arrowScrollbox = tabStrip.arrowScrollbox;
let currentScrollOrientation = arrowScrollbox.getAttribute("orient");
if (
@ -1530,7 +1531,6 @@ var SidebarController = {
return;
}
let tabStrip = gBrowser.tabContainer;
if (toVerticalTabs) {
this.toggleExpanded(this._sidebarMain.expanded);
arrowScrollbox.setAttribute("orient", "vertical");
@ -1544,16 +1544,6 @@ var SidebarController = {
let verticalToolbar = document.getElementById(
CustomizableUI.AREA_VERTICAL_TABSTRIP
);
let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
return (
tab.hasAttribute("soundplaying") ||
tab.hasAttribute("muted") ||
tab.hasAttribute("activemedia-blocked")
);
});
for (const indicatorTab of indicatorTabs) {
tabStrip.updateTabIndicatorAttr(indicatorTab);
}
verticalToolbar.toggleAttribute("visible", toVerticalTabs);
},
};

View File

@ -2751,7 +2751,8 @@
let animate =
!skipAnimation &&
!pinned &&
this.tabContainer.getAttribute("overflow") != "true" &&
!this.tabContainer.verticalMode &&
!this.tabContainer.overflowing &&
!gReduceMotion;
let uriInfo = this._determineURIToLoad(uriString, createLazyBrowser);
@ -4160,11 +4161,12 @@
}
let lockTabSizing =
!aTab.pinned &&
!aTab.hidden &&
aTab._fullyOpen &&
triggeringEvent?.inputSource == MouseEvent.MOZ_SOURCE_MOUSE &&
triggeringEvent?.target.closest(".tabbrowser-tab");
!this.tabContainer.verticalMode ||
(!aTab.pinned &&
!aTab.hidden &&
aTab._fullyOpen &&
triggeringEvent?.inputSource == MouseEvent.MOZ_SOURCE_MOUSE &&
triggeringEvent?.target.closest(".tabbrowser-tab"));
if (lockTabSizing) {
this.tabContainer._lockTabSizing(aTab, tabWidth);
} else {
@ -4177,6 +4179,7 @@
isLastTab ||
aTab.pinned ||
aTab.hidden ||
this.tabContainer.verticalMode ||
this._removingTabs.size >
3 /* don't want lots of concurrent animations */ ||
!aTab.hasAttribute(

View File

@ -115,14 +115,13 @@
"_tabMinWidthPref",
"browser.tabs.tabMinWidth",
null,
(pref, prevValue, newValue) => (this._tabMinWidth = newValue),
(pref, prevValue, newValue) => this.#updateTabMinWidth(newValue),
newValue => {
const LIMIT = 50;
return Math.max(newValue, LIMIT);
}
);
this._tabMinWidth = this._tabMinWidthPref;
this.#updateTabMinWidth(this._tabMinWidthPref);
CustomizableUI.addListener(this);
this._updateNewTabVisibility();
@ -158,6 +157,19 @@
}
this._positionPinnedTabs();
this.#updateTabMinWidth();
let indicatorTabs = gBrowser.visibleTabs.filter(tab => {
return (
tab.hasAttribute("soundplaying") ||
tab.hasAttribute("muted") ||
tab.hasAttribute("activemedia-blocked")
);
});
for (const indicatorTab of indicatorTabs) {
this.updateTabIndicatorAttr(indicatorTab);
}
super.attributeChangedCallback(name, oldValue, newValue);
}
@ -1326,8 +1338,16 @@
return node.before(tab);
}
set _tabMinWidth(val) {
this.style.setProperty("--tab-min-width", val + "px");
#updateTabMinWidth(val) {
const minWidthVariable = "--tab-min-width";
if (this.verticalMode) {
this.style.removeProperty(minWidthVariable);
} else {
this.style.setProperty(
minWidthVariable,
(val ?? this._tabMinWidthPref) + "px"
);
}
}
get _isCustomizing() {
@ -1474,6 +1494,10 @@
* Try to keep the active tab's close button under the mouse cursor
*/
_lockTabSizing(aTab, aTabWidth) {
if (this.verticalMode) {
return;
}
let tabs = this._getVisibleTabs();
if (!tabs.length) {
return;

View File

@ -50,24 +50,32 @@
}
#tabbrowser-tabs {
--tab-min-width: 76px;
--tab-overflow-pinned-tabs-width: 0px;
padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
/* Use a bigger flex value than the searchbar to prevent it from
* taking all the toolbar space. */
flex: 1000 1000;
&[orient="horizontal"][positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
/* Add padding to match the shadow's blur radius so the
shadow doesn't get clipped when either the first or
last tab is selected */
padding-inline: var(--tab-shadow-max-size);
}
&[orient="horizontal"] {
--tab-overflow-pinned-tabs-width: 0px;
padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
/* Make it easier to drag tabs by expanding the drag area downwards. */
&[movingtab] {
padding-bottom: 15px;
margin-bottom: -15px;
--tab-min-width: 76px;
:root[uidensity="touch"] & {
/* Touch mode needs additional space for the close button. */
--tab-min-width: 86px;
}
&[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
/* Add padding to match the shadow's blur radius so the
shadow doesn't get clipped when either the first or
last tab is selected */
padding-inline: var(--tab-shadow-max-size);
}
/* Make it easier to drag tabs by expanding the drag area downwards. */
&[movingtab] {
padding-bottom: 15px;
margin-bottom: -15px;
}
}
}
@ -120,11 +128,6 @@
min-width: var(--tab-min-width);
transition: min-width 100ms ease-out,
max-width 100ms ease-out;
:root[uidensity=touch] & {
/* Touch mode needs additional space for the close button. */
min-width: calc(var(--tab-min-width) + 10px);
}
}
&:not([pinned], [fadein]) {
@ -872,6 +875,7 @@ tab-group {
flex-direction: column;
align-content: flex-start;
grid-gap: var(--space-small);
padding: 0; /* override tabbox.css on macOS */
&[overflow] {
border-bottom: var(--tabstrip-inner-border);
@ -892,8 +896,9 @@ tab-group {
}
&:not([expanded]) {
--tab-min-width: inherit;
.tabbrowser-tab {
min-width: inherit;
width: var(--collapsed-tab-width);
flex: none;
}
@ -904,10 +909,10 @@ tab-group {
}
&[expanded] {
--tab-min-width: calc(100% - var(--space-medium));
--tab-icon-end-margin: 7.5px;
.tabbrowser-tab {
min-width: calc(100% - var(--space-medium));
flex: none;
max-width: none;
padding: 0;