corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Backed out changeset e93b9b73aebd (bug 1951427) for causing bc failures @browser_sidebar_move.js.

Browse Source
This commit is contained in:
Goloman Adrian
2025-03-14 08:20:43 +02:00
parent 6fa58a5cca
commit 8cbc210af4
5 changed files with 314 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
browser/base/content/browser-box.inc.xhtml
View File

@@ -3,26 +3,29 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
<hbox flex="1" id="browser">
<box context="sidebar-context-menu" id="sidebar-main" hidden="true">
<html:sidebar-main flex="1">
<box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
</html:sidebar-main>
</box>
<splitter id="sidebar-launcher-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
<box id="sidebar-header" align="center">
<toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
<image id="sidebar-icon" consumeanchor="sidebar-switcher-target"/>
<label id="sidebar-title" crop="end" control="sidebar"/>
<image id="sidebar-switcher-arrow"/>
</toolbarbutton>
<image id="sidebar-throbber"/>
<spacer id="sidebar-spacer"/>
<toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button"/>
<div id="sidebar-wrapper">
<box context="sidebar-context-menu" id="sidebar-main" hidden="true">
<html:sidebar-main flex="1">
<box id="vertical-tabs" slot="tabstrip" customizable="true" contextmenu="toolbar-context-menu"></box>
</html:sidebar-main>
</box>
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<splitter id="sidebar-launcher-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<vbox id="sidebar-box" hidden="true" class="chromeclass-extrachrome">
<box id="sidebar-header" align="center">
<toolbarbutton id="sidebar-switcher-target" class="tabbable" aria-expanded="false">
<image id="sidebar-icon" consumeanchor="sidebar-switcher-target"/>
<label id="sidebar-title" crop="end" control="sidebar"/>
<image id="sidebar-switcher-arrow"/>
</toolbarbutton>
<image id="sidebar-throbber"/>
<spacer id="sidebar-spacer"/>
<toolbarbutton id="sidebar-close" class="close-icon tabbable" data-l10n-id="sidebar-close-button"/>
</box>
<browser id="sidebar" autoscroll="false" disablehistory="true" disablefullscreen="true" tooltip="aHTMLTooltip"/>
</vbox>
<splitter id="sidebar-splitter" class="chromeclass-extrachrome sidebar-splitter" resizebefore="sibling" resizeafter="none" hidden="true"/>
<box id="after-splitter"></box>
</div>
<tabbox id="tabbrowser-tabbox" flex="1" tabcontainer="tabbrowser-tabs">
<tabpanels id="tabbrowser-tabpanels" flex="1" selectedIndex="0"/>
</tabbox>

47
browser/components/sidebar/SidebarState.sys.mjs
View File

@@ -32,6 +32,9 @@ XPCOMUtils.defineLazyPreferenceGetter(
* @property {number} launcherWidth
* Current width of the sidebar launcher.
* @property {number} expandedLauncherWidth
* Width that the sidebar launcher should expand to.
* @property {number} collapsedLauncherWidth
* Width that the sidebar launcher should collapse to.
*/
const LAUNCHER_MINIMUM_WIDTH = 100;
@@ -54,6 +57,8 @@ export class SidebarState {
launcherExpanded: false,
launcherDragActive: false,
launcherHoverActive: false,
collapsedLauncherWidth: undefined,
command: undefined,
};
#previousLauncherExpanded = undefined;
@@ -213,6 +218,10 @@ export class SidebarState {
expandedLauncherWidth: convertToInt(this.expandedLauncherWidth),
launcherExpanded: this.launcherExpanded,
launcherVisible: this.launcherVisible,
collapsedLauncherWidth:
typeof this.collapsedLauncherWidth === "number"
? Math.round(this.collapsedLauncherWidth)
: this.collapsedLauncherWidth,
};
}
@@ -240,20 +249,12 @@ export class SidebarState {
? this.#previousLauncherExpanded
: false;
}
const mainEl = this.#controller.sidebarContainer;
const boxEl = this.#controller._box;
const contentAreaEl =
this.#controllerGlobal.document.getElementById("tabbrowser-tabbox");
mainEl.toggleAttribute("sidebar-panel-open", open);
boxEl.toggleAttribute("sidebar-panel-open", open);
contentAreaEl.toggleAttribute("sidebar-panel-open", open);
}
get panelWidth() {
// Use the value from `style`. This is a more accurate user preference, as
// opposed to what the resize observer gives us.
return convertToInt(this.#panelEl?.style.width);
return convertToInt(this.#panelEl.style.width);
}
set panelWidth(width) {
@@ -357,16 +358,7 @@ export class SidebarState {
// Marking the tab container element as expanded or not simplifies the CSS logic
// and selectors considerably.
const { tabContainer } = this.#controllerGlobal.gBrowser;
const mainEl = this.#controller.sidebarContainer;
const splitterEl = this.#controller._launcherSplitter;
const boxEl = this.#controller._box;
const contentAreaEl =
this.#controllerGlobal.document.getElementById("tabbrowser-tabbox");
tabContainer.toggleAttribute("expanded", expanded);
mainEl.toggleAttribute("sidebar-launcher-expanded", expanded);
splitterEl.toggleAttribute("sidebar-launcher-expanded", expanded);
boxEl.toggleAttribute("sidebar-launcher-expanded", expanded);
contentAreaEl.toggleAttribute("sidebar-launcher-expanded", expanded);
this.#controller.updateToolbarButton();
if (!this.launcherDragActive) {
this.#updateLauncherWidth();
@@ -381,12 +373,6 @@ export class SidebarState {
this.#props.launcherDragActive = active;
if (active) {
this.#launcherEl.toggleAttribute("customWidth", true);
if (
this.launcherExpanded &&
this.#controller.sidebarRevampVisibility === "expand-on-hover"
) {
this.#controller.toggleExpandOnHover(false);
}
} else if (this.launcherWidth < LAUNCHER_MINIMUM_WIDTH) {
// Snap back to collapsed state when the new width is too narrow.
this.launcherExpanded = false;
@@ -396,12 +382,7 @@ export class SidebarState {
} else {
// Store the user-preferred launcher width.
this.expandedLauncherWidth = this.launcherWidth;
if (this.#controller.sidebarRevampVisibility === "expand-on-hover") {
this.#controller.toggleExpandOnHover(true, true);
}
}
const rootEl = this.#controllerGlobal.document.documentElement;
rootEl.toggleAttribute("sidebar-launcher-drag-active", active);
}
get launcherHoverActive() {
@@ -437,6 +418,14 @@ export class SidebarState {
this.#updateLauncherWidth();
}
get collapsedLauncherWidth() {
return this.#props.collapsedLauncherWidth;
}
set collapsedLauncherWidth(width) {
this.#props.collapsedLauncherWidth = width;
}
/**
* If the sidebar is expanded, resize the launcher to the user-preferred
* width (if available). If it is collapsed, reset the launcher width.

271
browser/components/sidebar/browser-sidebar.js
View File

@@ -260,8 +260,6 @@ var SidebarController = {
_mainResizeObserverAdded: false,
_mainResizeObserver: null,
_ongoingAnimations: [],
_launcherMouseOverListenerAdded: false,
_launcherMouseOutListenerAdded: false,
/**
* @type {MutationObserver | null}
@@ -302,6 +300,13 @@ var SidebarController = {
return this._sidebarMain;
},
get sidebarWrapper() {
if (!this._sidebarWrapper) {
this._sidebarWrapper = document.getElementById("sidebar-wrapper");
}
return this._sidebarWrapper;
},
get contentArea() {
if (!this._contentArea) {
this._contentArea = document.getElementById("tabbrowser-tabbox");
@@ -516,7 +521,7 @@ var SidebarController = {
this._state.launcherDragActive = true;
}
if (this._state.visibilitySetting === "expand-on-hover") {
this.setLauncherCollapsedWidth();
this.setLauncherInlineMargin();
}
},
@@ -707,7 +712,7 @@ var SidebarController = {
reversePosition() {
Services.prefs.setBoolPref(this.POSITION_START_PREF, !this._positionStart);
if (this.sidebarRevampVisibility === "expand-on-hover") {
this.setLauncherCollapsedWidth();
this.setLauncherInlineMargin();
}
},
@@ -718,37 +723,78 @@ var SidebarController = {
setPosition() {
// First reset all ordinals to match DOM ordering.
let contentArea = document.getElementById("tabbrowser-tabbox");
let browser = document.getElementById("browser");
[...browser.children].forEach((node, i) => {
node.style.order = i + 1;
});
if (this.sidebarRevampVisibility !== "expand-on-hover") {
let flattenedSidebarEls = [...this.sidebarWrapper.children, contentArea];
flattenedSidebarEls.forEach((node, i) => {
if (node.id !== "sidebar-wrapper") {
node.style.order = i + 1;
}
});
} else {
let browser = document.getElementById("browser");
[...browser.children].forEach((node, i) => {
node.style.order = i + 1;
});
[...this.sidebarWrapper.children].forEach((node, i) => {
node.style.order = i + 1;
});
}
let sidebarContainer = document.getElementById("sidebar-main");
let sidebarMain = document.querySelector("sidebar-main");
if (!this._positionStart) {
// DOM ordering is: sidebar-main | launcher-splitter | sidebar-box | splitter | tabbrowser-tabbox
// Want to display as: tabbrowser-tabbox | splitter | sidebar-box | launcher-splitter | sidebar-main
// First switch order of sidebar-main and tabbrowser-tabbox
let mainOrdinal = this.sidebarContainer.style.order;
this.sidebarContainer.style.order = contentArea.style.order;
contentArea.style.order = mainOrdinal;
// Then swap launcher-splitter and splitter
let splitterOrdinal = this._splitter.style.order;
this._splitter.style.order = this._launcherSplitter.style.order;
this._launcherSplitter.style.order = splitterOrdinal;
// DOM ordering is: sidebar-main | launcher-splitter | sidebar-box | splitter | after-splitter | tabbrowser-tabbox
// Want to display as: tabbrowser-tabbox | after-splitter | splitter | sidebar-box | launcher-splitter | sidebar-main
if (this.sidebarRevampVisibility === "expand-on-hover") {
// First switch order of sidebar-wrapper and tabbrowser-tabbox
let wrapperOrdinal = this.sidebarWrapper.style.order;
this.sidebarWrapper.style.order = contentArea.style.order;
contentArea.style.order = wrapperOrdinal;
// Next swap sidebar-main and after-splitter
let afterSplitter = document.getElementById("after-splitter");
let mainOrdinal = parseInt(this.sidebarContainer.style.order);
this.sidebarContainer.style.order = parseInt(afterSplitter.style.order);
afterSplitter.style.order = mainOrdinal;
// Then swap launcher-splitter and splitter
const launcherSplitterOrdinal = parseInt(
this._launcherSplitter.style.order
);
this._launcherSplitter.style.order = parseInt(
this._splitter.style.order
);
this._splitter.style.order = launcherSplitterOrdinal;
} else {
// First switch order of sidebar-main and tabbrowser-tabbox
let mainOrdinal = this.sidebarContainer.style.order;
this.sidebarContainer.style.order = parseInt(contentArea.style.order);
contentArea.style.order = mainOrdinal;
// Then swap launcher-splitter and after-splitter
let afterSplitter = document.getElementById("after-splitter");
let afterSplitterOrdinal = afterSplitter.style.order;
afterSplitter.style.order = this._launcherSplitter.style.order;
this._launcherSplitter.style.order = afterSplitterOrdinal;
// Last swap splitter and sidebar-box
let splitterOrdinal = this._splitter.style.order;
this._splitter.style.order = this._box.style.order;
this._box.style.order = splitterOrdinal;
}
// Indicate we've switched ordering to the box
this._box.toggleAttribute("positionend", true);
sidebarMain.toggleAttribute("positionend", true);
sidebarContainer.toggleAttribute("positionend", true);
this.toolbarButton &&
this.toolbarButton.toggleAttribute("positionend", true);
this.sidebarWrapper.toggleAttribute("positionend", true);
} else {
this._box.toggleAttribute("positionend", false);
sidebarMain.toggleAttribute("positionend", false);
sidebarContainer.toggleAttribute("positionend", false);
this.toolbarButton &&
this.toolbarButton.toggleAttribute("positionend", false);
this.sidebarWrapper.toggleAttribute("positionend", false);
}
// Indicate we've switched ordering to the box
this._box.toggleAttribute("sidebar-positionend", !this._positionStart);
sidebarMain.toggleAttribute("sidebar-positionend", !this._positionStart);
contentArea.toggleAttribute("sidebar-positionend", !this._positionStart);
sidebarContainer.toggleAttribute(
"sidebar-positionend",
!this._positionStart
);
this.toolbarButton &&
this.toolbarButton.toggleAttribute(
"sidebar-positionend",
!this._positionStart
);
this.hideSwitcherPanel();
@@ -1026,16 +1072,9 @@ var SidebarController = {
async _animateSidebarMain() {
let tabbox = document.getElementById("tabbrowser-tabbox");
let animatingElements;
if (document.documentElement.hasAttribute("sidebar-expand-on-hover")) {
animatingElements = [this.sidebarContainer];
} else {
animatingElements = [
this.sidebarContainer,
this._box,
this._splitter,
tabbox,
];
let animatingElements = [this.sidebarContainer, this._box, this._splitter];
if (this.sidebarRevampVisibility !== "expand-on-hover") {
animatingElements.push(tabbox);
}
let resetElements = () => {
for (let el of animatingElements) {
@@ -1046,12 +1085,7 @@ var SidebarController = {
el.style.display =
"";
}
this.sidebarContainer.toggleAttribute(
"sidebar-ongoing-animations",
false
);
this._box.toggleAttribute("sidebar-ongoing-animations", false);
tabbox.toggleAttribute("sidebar-ongoing-animations", false);
this.sidebarWrapper.classList.remove("ongoing-animations");
};
if (this._ongoingAnimations.length) {
this._ongoingAnimations.forEach(a => a.cancel());
@@ -1070,9 +1104,10 @@ var SidebarController = {
});
const options = {
duration: document.documentElement.hasAttribute("sidebar-expand-on-hover")
? this._animationExpandOnHoverDurationMs
: this._animationDurationMs,
duration:
this.sidebarRevampVisibility === "expand-on-hover"
? this._animationExpandOnHoverDurationMs
: this._animationDurationMs,
easing: "ease-in-out",
};
let animations = [];
@@ -1159,9 +1194,7 @@ var SidebarController = {
);
}
this._ongoingAnimations = animations;
this.sidebarContainer.toggleAttribute("sidebar-ongoing-animations", true);
this._box.toggleAttribute("sidebar-ongoing-animations", true);
tabbox.toggleAttribute("sidebar-ongoing-animations", true);
this.sidebarWrapper.classList.add("ongoing-animations");
await Promise.allSettled(animations.map(a => a.finished));
if (this._ongoingAnimations === animations) {
this._ongoingAnimations = [];
@@ -1177,9 +1210,6 @@ var SidebarController = {
if (this.inPopup || this.uninitializing) {
return;
}
if (this.sidebarRevampVisibility === "expand-on-hover") {
this.toggleExpandOnHover(initialExpandedValue);
}
if (this._animationEnabled && !window.gReduceMotion) {
this._animateSidebarMain();
}
@@ -1889,74 +1919,43 @@ var SidebarController = {
this.sidebarMain.requestUpdate();
},
onMouseOver(e) {
if (!SidebarController.sidebarContainer.matches(":hover")) {
// Don't fire mouseout if hovered over element outside of the launcher
e.stopPropagation();
} else {
const contentArea = document.getElementById("tabbrowser-tabbox");
SidebarController._box.toggleAttribute("sidebar-launcher-hovered", true);
contentArea.toggleAttribute("sidebar-launcher-hovered", true);
SidebarController._state.launcherHoverActive = true;
if (!SidebarController._launcherMouseOutListenerAdded) {
SidebarController.sidebarContainer.addEventListener(
"mouseout",
SidebarController.onMouseOut
);
SidebarController._launcherMouseOutListenerAdded = true;
}
if (SidebarController._animationEnabled && !window.gReduceMotion) {
if (SidebarController._ongoingAnimations.length) {
SidebarController._ongoingAnimations.forEach(a => a.cancel());
SidebarController._ongoingAnimations = [];
}
SidebarController._animateSidebarMain();
}
SidebarController._state.launcherExpanded = true;
SidebarController.sidebarContainer.removeEventListener(
"mouseover",
SidebarController.onMouseOver
);
SidebarController._launcherMouseOverListenerAdded = false;
onMouseOver() {
SidebarController._state.launcherHoverActive = true;
SidebarController.sidebarMain.addEventListener(
"mouseout",
SidebarController.onMouseOut,
{ once: true }
);
if (SidebarController._animationEnabled && !window.gReduceMotion) {
SidebarController._animateSidebarMain();
}
SidebarController._state.updateVisibility(true, false, false, true);
SidebarController.sidebarMain.removeEventListener(
"mouseover",
SidebarController.onMouseOver
);
},
onMouseOut(e) {
if (SidebarController.sidebarContainer.matches(":hover")) {
// Don't fire mouseout if hovered over launcher child element
e.stopPropagation();
} else {
const contentArea = document.getElementById("tabbrowser-tabbox");
SidebarController._box.toggleAttribute("sidebar-launcher-hovered", false);
contentArea.toggleAttribute("sidebar-launcher-hovered", false);
SidebarController._state.launcherHoverActive = false;
if (!SidebarController._launcherMouseOverListenerAdded) {
SidebarController.sidebarContainer.addEventListener(
"mouseover",
SidebarController.onMouseOver
);
SidebarController._launcherMouseOverListenerAdded = true;
}
if (SidebarController._animationEnabled && !window.gReduceMotion) {
if (SidebarController._ongoingAnimations.length) {
SidebarController._ongoingAnimations.forEach(a => a.cancel());
SidebarController._ongoingAnimations = [];
}
SidebarController._animateSidebarMain();
}
SidebarController._state.launcherExpanded = false;
SidebarController.sidebarContainer.removeEventListener(
"mouseout",
SidebarController.onMouseOut
);
SidebarController._launcherMouseOutListenerAdded = false;
onMouseOut() {
SidebarController._state.launcherHoverActive = false;
SidebarController.sidebarMain.addEventListener(
"mouseover",
SidebarController.onMouseOver,
{ once: true }
);
if (SidebarController._animationEnabled && !window.gReduceMotion) {
SidebarController._animateSidebarMain();
}
SidebarController._state.updateVisibility(true, false, false, false);
SidebarController.sidebarMain.removeEventListener(
"mouseout",
SidebarController.onMouseOut
);
},
async setLauncherCollapsedWidth() {
let browserEl = document.getElementById("browser");
async setLauncherInlineMargin() {
let collapsedWidth;
if (this.getUIState().launcherExpanded) {
if (this._state.launcherExpanded) {
this._state.launcherExpanded = false;
await this.sidebarMain.updateComplete;
collapsedWidth = await new Promise(resolve => {
@@ -1968,30 +1967,40 @@ var SidebarController = {
collapsedWidth = this._getRects([this.sidebarMain])[0][1].width;
}
browserEl.style.setProperty(
"--sidebar-launcher-collapsed-width",
`${collapsedWidth}px`
);
this._state.collapsedLauncherWidth = collapsedWidth;
// Make sure sidebar doesn't overlay content area outline
const CONTENT_AREA_OUTLINE_WIDTH = 1;
if (this._positionStart) {
this.contentArea.style.marginInlineStart = `${this._state.collapsedLauncherWidth + CONTENT_AREA_OUTLINE_WIDTH}px`;
this.contentArea.style.marginInlineEnd = "";
} else {
this.contentArea.style.marginInlineEnd = `${this._state.collapsedLauncherWidth + CONTENT_AREA_OUTLINE_WIDTH}px`;
this.contentArea.style.marginInlineStart = "";
}
},
async toggleExpandOnHover(isEnabled, isDragEnded) {
document.documentElement.toggleAttribute(
"sidebar-expand-on-hover",
isEnabled
);
async toggleExpandOnHover(isEnabled) {
this.setPosition();
if (isEnabled) {
this.sidebarWrapper.classList.add("expandOnHover");
if (!this._state) {
this._state = new this.SidebarState(this);
}
this.sidebarContainer.addEventListener("mouseover", this.onMouseOver);
await this.sidebarMain.updateComplete;
await this._waitForOngoingAnimations();
if (!isDragEnded) {
await this.setLauncherCollapsedWidth();
}
await this.setLauncherInlineMargin();
this.sidebarMain.addEventListener("mouseover", this.onMouseOver, {
once: true,
});
} else {
this.sidebarContainer.removeEventListener("mouseover", this.onMouseOver);
this.sidebarWrapper.classList.remove("expandOnHover");
this.sidebarMain.removeEventListener("mouseover", this.onMouseOver);
this.contentArea.style.marginInlineStart = "";
this.contentArea.style.marginInlineEnd = "";
}
},

130
browser/themes/shared/sidebar.css
View File

@@ -23,7 +23,7 @@
position: relative;
z-index: var(--browser-area-z-index-sidebar);
&[sidebar-positionend] {
&[positionend] {
padding-inline: 0;
margin-inline-start: var(--space-small);
}
@@ -95,7 +95,7 @@
margin-inline-start: calc(-1 * var(--splitter-width));
position: relative;
#sidebar-box[sidebar-positionend] + & {
#sidebar-box[positionend] + & {
border-inline-width: 1px 0;
margin-inline: 0 calc(-1 * var(--splitter-width));
}
@@ -234,32 +234,26 @@ sidebar-main,
/* Expand on hover */
:root[sidebar-expand-on-hover] {
#sidebar-main {
border-radius: inherit;
background-color: inherit;
position: relative;
#sidebar-wrapper {
display: contents;
&.expandOnHover {
position: absolute;
display: flex;
inset: 0;
inset-inline-end: unset;
z-index: var(--browser-area-z-index-sidebar-wrapper);
/* We only want to apply these styles in two scenarios:
* When the sidebar is expanded AND hovered
* When the sidebar is in the process of moving from expanded to collapsed
*/
&[sidebar-launcher-expanded]:hover,
&[sidebar-ongoing-animations]:not([sidebar-launcher-expanded]) {
z-index: var(--browser-area-z-index-sidebar-wrapper);
position: absolute;
color: var(--toolbox-textcolor);
background-color: var(--toolbox-bgcolor);
&:not([positionend]):hover {
border-start-end-radius: var(--border-radius-medium);
border-end-end-radius: var(--border-radius-medium);
border-inline-end: 0.01px solid var(--chrome-content-separator-color);
}
&:not([sidebar-positionend]) {
border-inline-end: 0.01px solid var(--sidebar-border-color);
}
&[sidebar-positionend] {
border-inline-start: 0.01px solid var(--sidebar-border-color);
}
&[positionend]:hover {
border-start-start-radius: var(--border-radius-medium);
border-start-end-radius: var(--border-radius-medium);
border-inline-start: 0.01px solid var(--chrome-content-separator-color);
}
:root[lwtheme] & {
@@ -274,80 +268,24 @@ sidebar-main,
}
}
&[sidebar-positionend] {
&:hover,
&.ongoing-animations {
color: var(--toolbox-textcolor);
background-color: var(--toolbox-bgcolor);
}
#sidebar-main {
border-radius: inherit;
background-color: inherit;
&:hover {
box-shadow: var(--content-area-shadow);
}
}
&[positionend] {
inset-inline-start: unset;
inset-inline-end: 0;
}
}
#sidebar-launcher-splitter[sidebar-launcher-expanded] {
display: none;
}
/* We add margin to compensate for the launcher width to the element next to it.
The element next to it can be the sidebar box or the tabbox,
depending on whether the sidebar box is expanded */
#tabbrowser-tabbox {
&:not([sidebar-positionend]) {
&:not([sidebar-panel-open]) {
margin-inline-start: 0;
}
&[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
&[sidebar-ongoing-animations]:not([sidebar-launcher-expanded], [sidebar-panel-open]) {
margin-inline-start: var(--sidebar-launcher-collapsed-width);
}
}
&[sidebar-positionend] {
&:not([sidebar-panel-open]) {
margin-inline-end: 0;
}
&[sidebar-launcher-expanded][sidebar-launcher-hovered]:not([sidebar-panel-open]),
&[sidebar-ongoing-animations]:not([sidebar-panel-open], [sidebar-launcher-expanded]) {
margin-inline-end: var(--sidebar-launcher-collapsed-width);
}
}
}
#sidebar-box {
&:not([sidebar-positionend]) {
&[sidebar-panel-open] {
margin-inline-start: 0;
}
&[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
&[sidebar-ongoing-animations][sidebar-panel-open] {
margin-inline-start: var(--sidebar-launcher-collapsed-width);
}
}
&[sidebar-positionend] {
&[sidebar-panel-open] {
margin-inline-end: 0;
}
&[sidebar-panel-open][sidebar-launcher-hovered][sidebar-launcher-expanded],
&[sidebar-ongoing-animations][sidebar-panel-open] {
margin-inline-end: var(--sidebar-launcher-collapsed-width);
}
}
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#sidebar-box {
--sidebar-border-color: light-dark(rgb(207, 207, 216), rgb(82, 82, 94));
> #sidebar {
box-shadow: none;
margin-block-start: 1px;
border: 0.5px solid var(--sidebar-border-color);
}
}
}

336
browser/themes/shared/tabbrowser/tabs.css
View File

@@ -236,18 +236,11 @@
z-index: 2;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
&:is([muted], [soundplaying], [activemedia-blocked]) {
--tab-icon-end-margin: 2px;
&:is([muted], [soundplaying], [activemedia-blocked]) {
--tab-icon-end-margin: 2px;
#tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
}
#tabbrowser-tabs[orient=horizontal] &:not([pinned]) {
min-width: max(var(--tab-min-width-pref, var(--tab-min-width)), 100px);
}
}
}
@@ -260,7 +253,7 @@
min-width: 0;
}
:root:not([uidensity=compact], [sidebar-expand-on-hover]) &[pinned] {
:root:not([uidensity=compact]) &[pinned] {
padding: 0 10px;
}
@@ -355,26 +348,13 @@
height: 16px;
width: 16px;
/* apply end margin to tabs which are:
- oriented horizontally and not pinned
- vertical but expanded and not pinned
- expand on hover enabled, vertical but expanded
/* apply end margin to not-pinned tabs which are:
- oriented horizontally, or
- vertical but expanded
*/
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]),
:root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]) {
#tabbrowser-tabs:is([orient="horizontal"], [orient="vertical"][expanded]) &:not([pinned]) {
margin-inline-end: var(--tab-icon-end-margin);
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="vertical"][expanded] & {
margin-inline-end: var(--tab-icon-end-margin);
}
}
}
.tab-throbber {
@@ -613,93 +593,11 @@
}
}
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]),
&[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
&[crashed] {
display: revert;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="vertical"] &:is([soundplaying], [muted], [activemedia-blocked]) {
display: revert;
}
#tabbrowser-tabs[orient="vertical"] &:not([crashed]) {
&[soundplaying] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked] {
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
}
&:is([soundplaying], [muted], [activemedia-blocked]) {
/* We want to make this look like the selected tab, but fully opaque. For that,
* we build a stack of `--lwt-accent-color` (guaranteed opaque), then
* `--toolbox-bgcolor`, then `--tab-selected-bgcolor`.
*
* We rely on at least one of `--toolbox-bgcolor` / `--tab-selected-bgcolor`
* being opaque on the system themes, so even though `--lwt-accent-color` is
* not set there, it ends up working out because we never see it through.
*
* We also apply one extra color on top (--audio-overlay-extra-background)
* for hover / active feedback.
*/
--audio-overlay-extra-background: transparent;
background-color: var(--lwt-accent-color);
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor));
-moz-context-properties: fill;
fill: var(--tab-selected-textcolor);
color-scheme: var(--tab-selected-color-scheme);
border-radius: var(--border-radius-circle);
.browser-toolbox-background:-moz-window-inactive &:not([selected]) {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--toolbox-bgcolor-inactive));
}
&:hover {
--audio-overlay-extra-background: var(--button-background-color-ghost-hover);
}
&:hover:active {
--audio-overlay-extra-background: var(--button-background-color-ghost-active);
}
&[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor));
}
.browser-toolbox-background:-moz-window-inactive &[selected] {
background-image: linear-gradient(var(--audio-overlay-extra-background)),
linear-gradient(var(--tab-selected-bgcolor)),
linear-gradient(var(--toolbox-bgcolor-inactive));
}
}
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="vertical"]:not([expanded]) &:is([soundplaying], [muted], [activemedia-blocked]) {
display: revert;
}
}
}
.tab-audio-button {
@@ -710,31 +608,23 @@
--button-min-height-small: 24px;
--button-border-radius: var(--border-radius-small);
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
:root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
}
}
#tabbrowser-tabs:is([orient="vertical"][expanded], [orient="horizontal"]) &:not([pinned]):not([crashed]) {
&:is([soundplaying], [muted], [activemedia-blocked]) {
display: block;
}
&[soundplaying]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
}
&[muted]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
}
&[activemedia-blocked]::part(button) {
background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-circle-12.svg");
}
}
}
.tab-label-container {
@@ -779,8 +669,7 @@
border-radius: var(--tab-border-radius);
list-style-image: url(chrome://global/skin/icons/close-12.svg);
#tabbrowser-tabs[orient="horizontal"] &[pinned],
:root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"] &[pinned],
&[pinned],
#tabbrowser-tabs[closebuttons="activetab"][orient="horizontal"] &:not([selected]) {
display: none;
}
@@ -1385,103 +1274,92 @@
}
#vertical-pinned-tabs-container {
:root:not([sidebar-expand-on-hover]) & {
/* Fit slightly more than 5 tabs + padding before overflowing */
max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
--tab-inline-padding: calc((var(--tab-collapsed-background-width) + 2 *
var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)) / 2);
/* Fit slightly more than 5 tabs + padding before overflowing */
max-height: calc(5 * var(--tabstrip-min-height) + var(--space-large));
--tab-inline-padding: calc(
(
calc(
var(--tab-collapsed-background-width) + 2 *
var(--tab-pinned-margin-inline-expanded) - var(--icon-size-default)
) /
2
)
);
&:empty {
display: none;
}
&:empty {
display: none;
}
&::part(scrollbutton-up),
&::part(scrollbutton-down) {
display: none;
}
&::part(scrollbutton-up),
&::part(scrollbutton-down) {
display: none;
}
&::part(scrollbox) {
scrollbar-width: thin;
scrollbar-color: var(--vertical-tabs-scrollbar-color);
overflow-y: auto;
}
&::part(scrollbox) {
scrollbar-width: thin;
scrollbar-color: var(--vertical-tabs-scrollbar-color);
overflow-y: auto;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
&::part(items-wrapper) {
grid-template-columns: repeat(
auto-fit,
minmax(var(--tab-pinned-min-width-expanded), auto)
);
display: grid;
}
&::part(items-wrapper) {
grid-template-columns: repeat(
auto-fit,
minmax(var(--tab-pinned-min-width-expanded), auto)
);
display: grid;
}
.tab-label-container {
display: none;
}
}
&:not([scrolledtostart])::part(overflow-start-indicator),
&:not([scrolledtoend])::part(overflow-end-indicator) {
background-image: linear-gradient(
to top,
transparent 0%,
var(--toolbox-bgcolor)
);
background-repeat: no-repeat;
pointer-events: none;
position: relative;
height: 16px;
z-index: 1;
}
&:not([scrolledtostart])::part(overflow-start-indicator),
&:not([scrolledtoend])::part(overflow-end-indicator) {
background-image: linear-gradient(
to top,
transparent 0%,
var(--toolbox-bgcolor)
);
background-repeat: no-repeat;
pointer-events: none;
position: relative;
height: 16px;
z-index: 1;
}
&::part(overflow-start-indicator) {
margin-block: 0 -16px;
}
&::part(overflow-start-indicator) {
margin-block: 0 -16px;
}
&::part(overflow-end-indicator) {
transform: scaleY(-1);
margin-block: -16px 0;
}
&::part(overflow-end-indicator) {
transform: scaleY(-1);
margin-block: -16px 0;
}
.tab-content {
justify-content: center;
}
.tab-content {
justify-content: center;
}
#tabbrowser-tabs[orient="vertical"] > &:not(:empty) {
display: grid;
}
#tabbrowser-tabs[orient="vertical"] > &:not(:empty) {
display: grid;
}
.tab-label-container {
display: none;
}
.tab-background {
border-radius: var(--border-radius-medium);
.tab-background {
border-radius: var(--border-radius-medium);
.tabbrowser-tab:not(:hover) > .tab-stack > &:not([selected], [multiselected]) {
background-color: color-mix(in srgb, currentColor 7%, transparent);
}
}
#tabbrowser-tabs[expanded] > & {
.tab-background {
margin-inline: var(--tab-pinned-margin-inline-expanded);
}
&::part(items-wrapper) {
padding-inline: var(--tab-pinned-container-margin-inline-expanded);
}
.tabbrowser-tab:not(:hover) > .tab-stack > &:not([selected], [multiselected]) {
background-color: color-mix(in srgb, currentColor 7%, transparent);
}
}
/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need this rule to apply at all times when the sidebar.visibility
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
grid-template-columns: 1fr;
#tabbrowser-tabs[expanded] > & {
.tab-background {
margin-inline: var(--tab-pinned-margin-inline-expanded);
}
&::part(items-wrapper) {
padding-inline: var(--tab-pinned-container-margin-inline-expanded);
}
}
}
@@ -1490,20 +1368,10 @@
border-bottom: var(--tabstrip-inner-border);
margin-inline: var(--tab-inner-inline-margin);
#tabbrowser-tabs[expanded] > &,
#vertical-pinned-tabs-container:empty + & {
display: none;
}
/* stylelint-disable-next-line media-query-no-invalid */
@media not -moz-pref("sidebar.visibility", "expand-on-hover") {
/* We need these rules to apply at all times when the sidebar.visibility
pref is not set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has not been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
#tabbrowser-tabs[expanded] > & {
display: none;
}
}
}
#tabbrowser-tabs[orient="vertical"] {
@@ -1621,11 +1489,7 @@
not be shown when expand on hover is enabled because once
you hover over the launcher to use the button, the launcher
starts to expand and the button is no longer shown. Users can
rely on the close button within the tab once expanded.
We need this rule to apply at all times when the sidebar.visibility
pref is set to "expand-on-hover" as opposed to when the "sidebar-expand-on-hover" attribute
has been added to root. There are certain scenarios when that attribute is temporarily
removed from root such as when toggling the sidebar to expand with the toolbar button. */
rely on the close button within the tab once expanded. */
display: none;
}
}