Customize Mode

eslint.config.mjs

@@ -13,12 +13,22 @@ export default [
         Cc: "readonly",
         Ci: "readonly",
         gBrowser: "readonly",
+        gCustomizeMode: "readonly",
         gContextMenu: "readonly",
+        gNavToolbox: "readonly",
+        gSync: "readonly",
+        gTabsPanel: "readonly",
+        gUnifiedExtensions: "readonly",
         openTrustedLinkIn: "readonly",
+        BrowserPageActions: "readonly",
+        CustomizableUI: "readonly",
         ChromeUtils: "readonly",
+        DownloadsIndicatorView: "readonly",
+        FirefoxViewHandler: "readonly",
         NetUtil: "readonly",
         Favicons: "readonly",
         FullZoom: "readonly",
+        PanelUI: "readonly",
         ZoomManager: "readonly",
       },
     },

src/second_sidebar.uc.mjs

@@ -5,12 +5,14 @@
 // @homepageURL     https://github.com/aminought/firefox-second-sidebar
 // ==/UserScript==
 
+import { CustomizeModePatcher } from "./second_sidebar/customize_mode_patcher.mjs";
 import { SidebarDecorator } from "./second_sidebar/sidebar_decorator.mjs";
 import { SidebarInjector } from "./second_sidebar/sidebar_injector.mjs";
 
 const run = () => {
   if (SidebarInjector.inject()) {
     SidebarDecorator.decorate();
+    CustomizeModePatcher.patch();
   }
 };
 

src/second_sidebar/controllers/sidebar.mjs

@@ -2,13 +2,13 @@
 import { Sidebar } from "../xul/sidebar.mjs";
 import { SidebarBox } from "../xul/sidebar_box.mjs";
 import { SidebarMainController } from "./sidebar_main.mjs";
+import { SidebarMainPopupSettings } from "../xul/sidebar_main_popup_settings.mjs";
 import { SidebarSettings } from "../settings/sidebar_settings.mjs";
 import { SidebarSplitterUnpinned } from "../xul/sidebar_splitter_unpinned.mjs";
 import { SidebarToolbar } from "../xul/sidebar_toolbar.mjs";
 import { ToolbarButton } from "../xul/base/toolbar_button.mjs";
 import { WebPanelNewController } from "./web_panel_new.mjs";
 import { WebPanelPopupEdit } from "../xul/web_panel_popup_edit.mjs";
-import { WebPanelPopupMore } from "../xul/web_panel_popup_more.mjs";
 import { WebPanelsController } from "./web_panels.mjs";
 import { XULElement } from "../xul/base/xul_element.mjs";
 import { isLeftMouseButton } from "../utils/buttons.mjs";
@@ -22,6 +22,7 @@ export class SidebarController {
    * @param {SidebarToolbar} sidebarToolbar
    * @param {SidebarSplitterUnpinned} sidebarSplitterUnpinned
    * @param {WebPanelPopupEdit} webPanelPopupEdit
+   * @param {SidebarMainPopupSettings} sidebarMainPopupSettings
    * @param {XULElement} browser
    */
   constructor(
@@ -30,13 +31,15 @@ export class SidebarController {
     sidebarToolbar,
     sidebarSplitterUnpinned,
     webPanelPopupEdit,
+    sidebarMainPopupSettings,
     browser,
   ) {
     this.sidebarBox = sidebarBox;
     this.sidebar = sidebar;
     this.sidebarToolbar = sidebarToolbar;
     this.sidebarSplitterUnpinned = sidebarSplitterUnpinned;
     this.webPanelPopupEdit = webPanelPopupEdit;
+    this.sidebarMainPopupSettings = sidebarMainPopupSettings;
     this.browser = browser;
     this.#setupListeners();
 
@@ -66,9 +69,11 @@ export class SidebarController {
     this.onClickOutsideWhileUnpinned = (event) => {
       const target = new XULElement(null, { element: event.target });
       if (
+        isLeftMouseButton(event) &&
         !this.sidebar.contains(target) &&
         !this.sidebarSplitterUnpinned.contains(target) &&
         !this.webPanelPopupEdit.contains(target) &&
+        !this.sidebarMainPopupSettings.contains(target) &&
         !["menuitem", "menupopup"].includes(event.target.tagName) &&
         (document.contains(event.target) ||
           event.target.baseURI ===
@@ -134,6 +139,7 @@ export class SidebarController {
     this.setToolbarForwardButtonDisabled(!canGoForward);
     this.setToolbarTitle(title);
     this.setHideToolbar(hideToolbar);
+    this.updateAbsolutePosition();
     pinned ? this.pin() : this.unpin();
   }
 
@@ -154,13 +160,13 @@ export class SidebarController {
   pin() {
     this.sidebar.pin();
     this.sidebarToolbar.changePinButton(true);
-    document.removeEventListener("mousedown", this.onClickOutsideWhileUnpinned);
+    document.removeEventListener("click", this.onClickOutsideWhileUnpinned);
   }
 
   unpin() {
     this.sidebar.unpin();
     this.sidebarToolbar.changePinButton(false);
-    document.addEventListener("mousedown", this.onClickOutsideWhileUnpinned);
+    document.addEventListener("click", this.onClickOutsideWhileUnpinned);
   }
 
   /**
@@ -207,6 +213,7 @@ export class SidebarController {
   setWidth(width) {
     this.sidebarBox.setWidth(width);
     this.sidebar.setWidth(width);
+    this.updateAbsolutePosition();
   }
 
   /**
@@ -231,6 +238,7 @@ export class SidebarController {
    */
   setPosition(position) {
     this.sidebar.setPosition(position);
+    this.updateAbsolutePosition();
   }
 
   /**
@@ -267,6 +275,32 @@ export class SidebarController {
       "--sb2-box-unpinned-padding",
       `var(--space-${value})`,
     );
+    this.updateAbsolutePosition();
+  }
+
+  updateAbsolutePosition() {
+    const sidebarMainWidth = this.sidebarMainController.getWidth();
+    this.getPosition() === "left"
+      ? this.setAbsoluteLeft(sidebarMainWidth)
+      : this.setAbsoluteRight(sidebarMainWidth);
+  }
+
+  /**
+   *
+   * @param {string} value
+   */
+  setAbsoluteRight(value) {
+    this.sidebarBox.setProperty("left", "unset");
+    this.sidebarBox.setProperty("right", value);
+  }
+
+  /**
+   *
+   * @param {string} value
+   */
+  setAbsoluteLeft(value) {
+    this.sidebarBox.setProperty("left", value);
+    this.sidebarBox.setProperty("right", "unset");
   }
 
   /**
@@ -275,12 +309,10 @@ export class SidebarController {
    */
   loadSettings(settings) {
     this.setPosition(settings.position);
-    this.sidebarMainController.setWebPanelButtonsPosition(
-      settings.webPanelButtonsPosition,
-    );
-    this.webPanelNewController.setPosition(settings.plusButtonPosition);
     this.sidebarMainController.setPadding(settings.padding);
-    this.sidebarMainController.setFaviconSize(settings.faviconSize);
+    this.webPanelNewController.setNewWebPanelPosition(
+      settings.newWebPanelPosition,
+    );
     this.setUnpinnedPadding(settings.unpinnedPadding);
     this.hideInPopupWindows = settings.hideInPopupWindows;
     this.autoHideBackButton = settings.autoHideBackButton;
@@ -294,10 +326,8 @@ export class SidebarController {
   dumpSettings() {
     return new SidebarSettings(
       this.getPosition(),
-      this.sidebarMainController.getWebPanelButtonsPosition(),
-      this.webPanelNewController.getPosition(),
       this.sidebarMainController.getPadding(),
-      this.sidebarMainController.getFaviconSize(),
+      this.webPanelNewController.getNewWebPanelPosition(),
       this.getUnpinnedPadding(),
       this.hideInPopupWindows,
       this.autoHideBackButton,

src/second_sidebar/controllers/sidebar_main.mjs

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import { SidebarController } from "./sidebar.mjs";
 import { SidebarMain } from "../xul/sidebar_main.mjs";
 import { SidebarMainMenuPopup } from "../xul/sidebar_main_menupopup.mjs";
 import { SidebarMainSettingsController } from "./sidebar_main_settings.mjs";
@@ -23,9 +24,11 @@ export class SidebarMainController {
   /**
    *
    * @param {SidebarMainSettingsController} sidebarMainSettingsController
+   * @param {SidebarController} sidebarController
    */
-  setupDependencies(sidebarMainSettingsController) {
+  setupDependencies(sidebarMainSettingsController, sidebarController) {
     this.sidebarMainSettingsController = sidebarMainSettingsController;
+    this.sidebarController = sidebarController;
   }
 
   #setupListeners() {
@@ -35,6 +38,10 @@ export class SidebarMainController {
         event.screenY,
       );
     });
+
+    this.sidebarMainMenuPopup.listenCustomizeItemClick(() => {
+      gCustomizeMode.enter();
+    });
   }
 
   /**
@@ -52,38 +59,14 @@ export class SidebarMainController {
    */
   setPadding(value) {
     this.browser.setProperty("--sb2-main-padding", `var(--space-${value})`);
-  }
-
-  /**
-   *
-   * @returns {number}
-   */
-  getFaviconSize() {
-    const value = this.browser.getProperty("--sb2-main-button-icon-size");
-    return value.match(/(\d+)px/)[1];
-  }
-
-  /**
-   *
-   * @param {number} value
-   */
-  setFaviconSize(value) {
-    this.browser.setProperty("--sb2-main-button-icon-size", value + "px");
+    this.sidebarController.updateAbsolutePosition();
   }
 
   /**
    *
    * @returns {string}
    */
-  getWebPanelButtonsPosition() {
-    return this.browser.getProperty("--sb2-main-web-panel-buttons-position");
-  }
-
-  /**
-   *
-   * @param {string} value
-   */
-  setWebPanelButtonsPosition(value) {
-    this.browser.setProperty("--sb2-main-web-panel-buttons-position", value);
+  getWidth() {
+    return Math.round(this.sidebarMain.getBoundingClientRect().width) + "px";
   }
 }

src/second_sidebar/controllers/sidebar_main_settings.mjs

@@ -35,12 +35,9 @@ export class SidebarMainSettingsController {
   #setupListeners() {
     this.sidebarMainPopupSettings.listenChanges({
       position: (value) => this.sidebarController.setPosition(value),
-      webPanelButtonsPosition: (value) =>
-        this.sidebarMainController.setWebPanelButtonsPosition(value),
-      plusButtonPosition: (value) =>
-        this.webPanelNewController.setPosition(value),
       padding: (value) => this.sidebarMainController.setPadding(value),
-      faviconSize: (value) => this.sidebarMainController.setFaviconSize(value),
+      newWebPanelPosition: (value) =>
+        this.webPanelNewController.setNewWebPanelPosition(value),
       unpinnedPadding: (value) =>
         this.sidebarController.setUnpinnedPadding(value),
       hideInPopupWindows: (value) =>

src/second_sidebar/controllers/web_panel.mjs

@@ -8,8 +8,6 @@ import {
 import { SidebarController } from "./sidebar.mjs";
 import { WebPanel } from "../xul/web_panel.mjs";
 import { WebPanelButton } from "../xul/web_panel_button.mjs";
-import { WebPanelButtonMenuPopup } from "../xul/web_panel_button_menupopup.mjs";
-import { WebPanelEditController } from "./web_panel_edit.mjs";
 import { WebPanelSettings } from "../settings/web_panel_settings.mjs";
 import { WebPanelTab } from "../xul/web_panel_tab.mjs";
 import { WebPanelsController } from "./web_panels.mjs";
@@ -22,29 +20,21 @@ export class WebPanelController {
    * @param {WebPanel} webPanel
    * @param {WebPanelButton} webPanelButton
    * @param {WebPanelTab} webPanelTab
-   * @param {WebPanelButtonMenuPopup} webPanelButtonMenuPopup
    */
-  constructor(webPanel, webPanelButton, webPanelTab, webPanelButtonMenuPopup) {
+  constructor(webPanel, webPanelButton, webPanelTab) {
     this.webPanel = webPanel;
     this.webPanelButton = webPanelButton;
     this.webPanelTab = webPanelTab;
-    this.webPanelButtonMenuPopup = webPanelButtonMenuPopup;
   }
 
   /**
    *
    * @param {WebPanelsController} webPanelsController
    * @param {SidebarController} sidebarController
-   * @param {WebPanelEditController} webPanelEditController
    */
-  setupDependencies(
-    webPanelsController,
-    sidebarController,
-    webPanelEditController,
-  ) {
+  setupDependencies(webPanelsController, sidebarController) {
     this.webPanelsController = webPanelsController;
     this.sidebarController = sidebarController;
-    this.webPanelEditController = webPanelEditController;
   }
 
   /**
@@ -69,7 +59,7 @@ export class WebPanelController {
    */
   setURL(value) {
     this.webPanel.url = value;
-    this.webPanelButton.setTooltipText(value);
+    this.webPanelButton.setLabel(value).setTooltipText(value);
   }
 
   /**
@@ -166,8 +156,6 @@ export class WebPanelController {
         switchWebPanel();
       } else if (isMiddleMouseButton(event)) {
         this.unload();
-      } else if (isRightMouseButton(event)) {
-        this.webPanelButtonMenuPopup.setWebPanelController(this);
       }
     });
   }
@@ -191,7 +179,7 @@ export class WebPanelController {
     this.sidebarController.close();
     this.webPanel.remove();
     this.webPanelTab.remove();
-    this.webPanelButton.setUnloaded(true).hidePlayingIcon();
+    this.webPanelButton.hidePlayingIcon().setUnloaded(true);
   }
 
   /**
@@ -334,7 +322,7 @@ export class WebPanelController {
    * @returns {HTMLElement}
    */
   getInsertedBeforeXUL() {
-    return this.webPanelButton.element.nextSibling;
+    return this.webPanelButton.nextSibling;
   }
 
   /**

src/second_sidebar/controllers/web_panel_delete.mjs

@@ -34,8 +34,8 @@ export class WebPanelDeleteController {
       if (webPanelController.isActive()) {
         this.sidebarController.close();
       }
-      this.webPanelsController.delete(uuid);
       webPanelController.remove();
+      this.webPanelsController.delete(uuid);
       this.webPanelsController.saveSettings();
       this.hidePopup();
     });

src/second_sidebar/controllers/web_panel_edit.mjs

@@ -90,24 +90,6 @@ export class WebPanelEditController {
       },
     });
 
-    this.webPanelPopupEdit.listenMoveButtonClick(
-      (uuid, up = false, down = false, child = null) => {
-        const webPanelController = this.webPanelsController.get(uuid);
-        if (up) {
-          this.webPanelsController.moveUp(uuid);
-        } else if (down) {
-          this.webPanelsController.moveDown(uuid);
-        } else {
-          this.webPanelsController.moveBefore(uuid, child);
-        }
-        return {
-          isFirst: webPanelController.isFirst(),
-          isLast: webPanelController.isLast(),
-          insertedBeforeXUL: webPanelController.getInsertedBeforeXUL(),
-        };
-      },
-    );
-
     this.webPanelPopupEdit.listenCancelButtonClick(() => this.hidePopup());
 
     this.webPanelPopupEdit.listenSaveButtonClick((uuid) => {