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

Bug 1947818 - Fix for sidebar splitter issues r=desktop-theme-reviewers,sidebar-reviewers,jsudiaman,dao

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D238878
This commit is contained in:
Kelly Cochrane
2025-02-27 17:01:13 +00:00
parent 84808154a0
commit f1fe3cf1b3
3 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -710,35 +710,57 @@ 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;
});
[...this.sidebarWrapper.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) {
// 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;
// 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;
// DOM ordering is: sidebar-main | launcher-splitter | sidebar-box | splitter | after-splitter |
// Want to display as: after-splitter | splitter | sidebar-box | launcher-splitter | sidebar-main
// First swap sidebar-box and after-splitter
let afterSplitter = document.getElementById("after-splitter");
let boxOrdinal = this._box.style.order;
this._box.style.order = afterSplitter.style.order;
afterSplitter.style.order = boxOrdinal;
// 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 move the launcher-splitter to the right of sidebar-box
const launcherSplitterOrdinal = parseInt(this._box.style.order) + 1;
this._launcherSplitter.style.order = launcherSplitterOrdinal;
// Finally move the launcher to the right of the launcher-splitter
sidebarContainer.style.order = parseInt(launcherSplitterOrdinal) + 1;
// 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 = 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;
}
// Indicate we've switched ordering to the box
this._box.toggleAttribute("positionend", true);
@@ -1927,9 +1949,9 @@ var SidebarController = {
},
async toggleExpandOnHover(isEnabled) {
this.setPosition();
if (isEnabled) {
this.sidebarWrapper.classList.add("expandOnHover");
if (!this._state) {
this._state = new this.SidebarState(this);
}