mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-27 14:52:16 +00:00
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:
parent
1731f1fc2d
commit
aa7d577032
@ -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);
|
||||
},
|
||||
};
|
||||
|
@ -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(
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user