Skip to content
This repository was archived by the owner on Sep 30, 2024. It is now read-only.

✨ Allow the user to reposition the sidebar #222

Merged
merged 1 commit into from
Mar 10, 2023
Merged

✨ Allow the user to reposition the sidebar #222

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 45 additions & 15 deletions src/browser/base/content/browser-sidebar-js.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser-sidebar.js b/browser/base/content/browser-sidebar.js
index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645afde674dd8 100644
index c5ac301416d2d820ba95e21c0ce1fe305e63b554..a38040e1cba3de0e383cda4b5147b3cc6fdf86ad 100644
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/base/content/browser-sidebar.js
@@ -11,6 +11,10 @@ var SidebarUI = {
Expand Down Expand Up @@ -92,7 +92,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
_box: null,
// The constructor of this label accesses the browser element due to the
// control="sidebar" attribute, so avoid getting this label during startup.
@@ -76,8 +116,13 @@ var SidebarUI = {
@@ -76,8 +116,15 @@ var SidebarUI = {
}
return (this.__title = document.getElementById("sidebar-title"));
},
Expand All @@ -101,17 +101,20 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
_icon: null,
+ _sidebarIcons: null,
+ _sidebarIconsBottom: null,
+ /** @type {HTMLDivElement?} */
+ _sidebarTabs: null,
+ /** @type {string[]} */
+ loadedSidebars: null,
_reversePositionButton: null,
_switcherPanel: null,
_switcherTarget: null,
@@ -110,15 +155,59 @@ var SidebarUI = {
@@ -110,15 +157,60 @@ var SidebarUI = {
this._switcherTarget = document.getElementById("sidebar-switcher-target");
this._switcherArrow = document.getElementById("sidebar-switcher-arrow");

+ this._sidebarIcons = document.getElementById("sidebar-icons");
+ this._sidebarIconsBottom = document.getElementById("sidebar-icons-bottom");
+ this._sidebarTabs = document.getElementById("sidebar-container")
+
this._switcherTarget.addEventListener("command", () => {
this.toggleSwitcherPanel();
Expand Down Expand Up @@ -166,7 +169,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
},

uninit() {
@@ -127,7 +216,10 @@ var SidebarUI = {
@@ -127,7 +219,10 @@ var SidebarUI = {
let enumerator = Services.wm.getEnumerator("navigator:browser");
if (!enumerator.hasMoreElements()) {
let xulStore = Services.xulStore;
Expand All @@ -178,7 +181,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af

if (this._box.hasAttribute("positionend")) {
xulStore.persist(this._box, "positionend");
@@ -148,6 +240,12 @@ var SidebarUI = {
@@ -148,6 +243,12 @@ var SidebarUI = {
xulStore.persist(this._title, "value");
}

Expand All @@ -191,7 +194,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
Services.obs.removeObserver(this, "intl:app-locales-changed");

if (this._observer) {
@@ -159,17 +257,62 @@ var SidebarUI = {
@@ -159,17 +260,62 @@ var SidebarUI = {
/**
* The handler for Services.obs.addObserver.
**/
Expand Down Expand Up @@ -258,7 +261,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
}
}
},
@@ -286,6 +413,9 @@ var SidebarUI = {
@@ -286,17 +432,31 @@ var SidebarUI = {
// First reset all ordinals to match DOM ordering.
let browser = document.getElementById("browser");
[...browser.children].forEach((node, i) => {
Expand All @@ -268,7 +271,34 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
node.style.MozBoxOrdinalGroup = i + 1;
});

@@ -485,6 +615,9 @@ var SidebarUI = {
if (!this._positionStart) {
- // DOM ordering is: | sidebar-box | splitter | appcontent |
- // Want to display as: | appcontent | splitter | sidebar-box |
- // So we just swap box and appcontent ordering
+ // DOM ordering is: | sidebar-container | sidebar-box | splitter | appcontent |
+ // Want to display as: | appcontent | splitter | sidebar-box | sidebar-container |
+ // So we just swap
+ // - sidebar-container and appcontent
+ // - splitter and sidebar-box
+
+ // sidebar-container and appcontent
let appcontent = document.getElementById("appcontent");
- let boxOrdinal = this._box.style.MozBoxOrdinalGroup;
- this._box.style.MozBoxOrdinalGroup = appcontent.style.MozBoxOrdinalGroup;
+ let boxOrdinal = this._sidebarTabs.style.MozBoxOrdinalGroup;
+ this._sidebarTabs.style.MozBoxOrdinalGroup = appcontent.style.MozBoxOrdinalGroup;
appcontent.style.MozBoxOrdinalGroup = boxOrdinal;
+
+ // splitter and sidebar-box
+ const splitterBoxOrdinal = this._splitter.style.MozBoxOrdinalGroup;
+ this._splitter.style.MozBoxOrdinalGroup = this._box.style.MozBoxOrdinalGroup
+ this._box.style.MozBoxOrdinalGroup = splitterBoxOrdinal
+
+
// Indicate we've switched ordering to the box
this._box.setAttribute("positionend", true);
} else {
@@ -485,6 +645,9 @@ var SidebarUI = {
},

_loadSidebarExtension(commandID) {
Expand All @@ -278,15 +308,15 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
let sidebar = this.sidebars.get(commandID);
let { extensionId } = sidebar;
if (extensionId) {
@@ -523,6 +656,7 @@ var SidebarUI = {
@@ -523,6 +686,7 @@ var SidebarUI = {
}

this._fireFocusedEvent();
+ this.loadedSidebars.push(commandID);
return true;
});
},
@@ -546,10 +680,28 @@ var SidebarUI = {
@@ -546,10 +710,28 @@ var SidebarUI = {
}
return this._show(commandID).then(() => {
this._loadSidebarExtension(commandID);
Expand Down Expand Up @@ -315,7 +345,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
/**
* Implementation for show. Also used internally for sidebars that are shown
* when a window is opened and we don't want to ping telemetry.
@@ -559,6 +711,29 @@ var SidebarUI = {
@@ -559,6 +741,29 @@ var SidebarUI = {
*/
_show(commandID) {
return new Promise(resolve => {
Expand Down Expand Up @@ -345,7 +375,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
this.selectMenuItem(commandID);

this._box.hidden = this._splitter.hidden = false;
@@ -570,13 +745,21 @@ var SidebarUI = {
@@ -570,13 +775,21 @@ var SidebarUI = {
this._box.setAttribute("sidebarcommand", commandID);
this.lastOpenedId = commandID;

Expand All @@ -369,7 +399,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
this.browser.addEventListener(
"load",
event => {
@@ -615,22 +798,46 @@ var SidebarUI = {
@@ -615,22 +828,46 @@ var SidebarUI = {

this.selectMenuItem("");

Expand Down Expand Up @@ -423,7 +453,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
},

/**
@@ -638,25 +845,121 @@ var SidebarUI = {
@@ -638,25 +875,121 @@ var SidebarUI = {
* none if the argument is an empty string.
*/
selectMenuItem(commandID) {
Expand Down Expand Up @@ -478,7 +508,7 @@ index c5ac301416d2d820ba95e21c0ce1fe305e63b554..fa3cd3184cce8759c834fa0fadc645af
+ * @param {boolean} visible Sets the sidebar to be visible or not visible
+ */
+ setSidebarVisibility(visible) {
+ const sidebarContainer = document.getElementById("sidebar-container");
+ const sidebarContainer = this._sidebarTabs
+
+ if (visible) {
+ sidebarContainer.style.display = "flex";
Expand Down