add button to unload web panel, add option to unload web panel after closing

aminought · aminought · commit a1e91dfdfb5a · 2024-11-05T08:11:21.000+03:00
diff --git a/README.md b/README.md
@@ -15,14 +15,16 @@ There are many forks of Firefox, but I prefer to continue using the original bro
 1. Adding a new web panel by left-clicking on the plus sign. If you are on a web page, the current address will be automatically inserted into the address bar.
 2. Changing the width of the sidebar, each web panel has its own width.
 3. Pinning and unpinning the sidebar, each web panel has its own state. In the pinned state, the sidebar will be located statically next to the page. The unpinned sidebar appears on top of the page and closes when the focus is lost.
-4. Editing the web panel by right-clicking on the corresponding button:
+4. Closing sidebar with unloading of the web panel;
+5. Editing the web panel by right-clicking on the corresponding button:
     - Changing the web address.
     - Changing the favicon.
     - Resetting the favicon.
+    - Option to unload from memory after closing.
     - Moving the web panel button.
     - Deleting the web panel.
-5. Managing the page opened in the web panel: going back and forth, refreshing the page and going to the home page.
-6. Sound indicator.
+6. Managing the page opened in the web panel: going back and forth, refreshing the page and going to the home page.
+7. Sound indicator.
 
 ## Install
 
diff --git a/second_sidebar.uc.mjs b/second_sidebar.uc.mjs
@@ -1,8 +1,10 @@
-import { SidebarController } from './second_sidebar/sidebar_controller.mjs';
+import { SidebarController } from "./second_sidebar/sidebar_controller.mjs";
 
 const TIMEOUT = 1000;
 
 const STYLE = `
+    @import url("chrome://global/content/elements/moz-toggle.css");
+
     #browser {
       position: relative;
 
@@ -109,8 +111,8 @@ const STYLE = `
     #sidebar-2-toolbar {
       display: flex;
       flex-direction: row;
-      gap: 8px;
-      padding: 4px;
+      gap: 4px;
+      padding: 4px 0;
       background-color: var(--toolbar-bgcolor);
       color: var(--toolbar-color);
     }
@@ -216,6 +218,12 @@ const STYLE = `
       background-repeat: no-repeat;
     }
 
+    #sidebar-2-web-panel-popup-edit-unload-group {
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
     #sidebar-2-web-panel-popup-edit-multiview-buttons-row {
       justify-content: space-between;
       width: 100%;
@@ -239,14 +247,14 @@ class SecondSidebar {
   }
 
   decorate() {
-    const style = document.createElement('style');
+    const style = document.createElement("style");
     style.innerHTML = STYLE;
-    document.querySelector('head').appendChild(style);
+    document.querySelector("head").appendChild(style);
   }
 }
 
 var interval = setInterval(() => {
-  if (document.querySelector('#browser')) {
+  if (document.querySelector("#browser")) {
     window.second_sidebar = new SecondSidebar();
     window.SecondSidebarController = SidebarController;
     clearInterval(interval);
diff --git a/second_sidebar/sidebar_toolbar.mjs b/second_sidebar/sidebar_toolbar.mjs
@@ -26,17 +26,20 @@ export class SidebarToolbar extends Toolbar {
       (panel) => panel.goHome()
     );
 
-    this.toolbarButtons = this.#createToolbarButtons();
-    this.toolbarTitle = this.#createToolbarTitle();
     this.pinButton = this.#createPinButton();
+    this.closeButton = this.#createCloseButton();
+
+    this.toolbarNavButtons = this.#createNavButtons();
+    this.toolbarTitle = this.#createToolbarTitle();
+    this.toolbarSidebarButtons = this.#createSidebarButtons();
   }
 
   /**
    *
    * @returns {HBox}
    */
-  #createToolbarButtons() {
-    const toolbarButtons = new HBox({ id: "sidebar-2-toolbar-buttons" })
+  #createNavButtons() {
+    const toolbarButtons = new HBox({ id: "sidebar-2-toolbar-nav-buttons" })
       .appendChild(this.backButton)
       .appendChild(this.forwardButton)
       .appendChild(this.reloadButton)
@@ -46,6 +49,19 @@ export class SidebarToolbar extends Toolbar {
     return toolbarButtons;
   }
 
+  /**
+   *
+   * @returns {HBox}
+   */
+  #createSidebarButtons() {
+    const toolbarButtons = new HBox({ id: "sidebar-2-toolbar-sidebar-buttons" })
+      .appendChild(this.pinButton)
+      .appendChild(this.closeButton);
+
+    this.appendChild(toolbarButtons);
+    return toolbarButtons;
+  }
+
   /**
    *
    * @returns {Label}
@@ -56,6 +72,10 @@ export class SidebarToolbar extends Toolbar {
     return toolbarTitle;
   }
 
+  /**
+   *
+   * @returns {ToolbarButton}
+   */
   #createPinButton() {
     const pinButton = new ToolbarButton({
       id: "sidebar-2-pin-button",
@@ -85,6 +105,29 @@ export class SidebarToolbar extends Toolbar {
     return pinButton;
   }
 
+  /**
+   *
+   * @returns {ToolbarButton}
+   */
+  #createCloseButton() {
+    const closeButton = new ToolbarButton({
+      id: "sidebar-2-close-button",
+    }).setIcon("chrome://global/skin/icons/close.svg");
+
+    closeButton.addEventListener("mousedown", (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+
+      const activeWebPanel = SidebarController.webPanels.getActive();
+      SidebarController.close();
+      activeWebPanel.remove();
+    });
+
+    this.appendChild(closeButton);
+    return closeButton;
+  }
+
   /**
    *
    * @param {string} title
diff --git a/second_sidebar/web_panel.mjs b/second_sidebar/web_panel.mjs
@@ -9,16 +9,25 @@ export class WebPanel extends Browser {
    * @param {string} faviconURL
    * @param {boolean} pinned
    * @param {string} width
+   * @param {boolean} unloadOnClose
    */
-  constructor(url, faviconURL, pinned = false, width = "400") {
+  constructor(
+    url,
+    faviconURL,
+    pinned = false,
+    width = "400",
+    unloadOnClose = false
+  ) {
     super({ classList: ["web-panel"] });
     this.setDisableGlobalHistory("true").setType("content").setRemote("true");
+
     this.url = url;
     this.faviconURL = faviconURL;
     this.pinned = pinned;
     this.width = width;
-    this.button = null;
+    this.unloadOnClose = unloadOnClose;
 
+    this.button = null;
     this.listener = null;
   }
 
@@ -72,15 +81,6 @@ export class WebPanel extends Browser {
     return this.go(this.url);
   }
 
-  /**
-   *
-   * @returns {WebPanel}
-   */
-  remove() {
-    SidebarController.webPanels.delete(this);
-    return Browser.prototype.remove.call(this);
-  }
-
   /**
    *
    * @param {string} url
@@ -122,6 +122,9 @@ export class WebPanel extends Browser {
    */
   hide() {
     this.button.setOpen(false);
+    if (this.unloadOnClose) {
+      this.remove();
+    }
     return Browser.prototype.hide.call(this);
   }
 }
diff --git a/second_sidebar/web_panel_popup_edit.mjs b/second_sidebar/web_panel_popup_edit.mjs
@@ -20,12 +20,11 @@ export class WebPanelPopupEdit extends Panel {
 
     this.panelHeader = new HBox({ classList: ["panel-header"] });
     this.header = new Header(1).setText("Edit Web Panel");
-    this.separator = new ToolbarSeparator();
 
-    this.urlInputHeader = new Header(1).setText("URL");
+    this.urlInputHeader = new Header(1).setText("Page web address");
     this.urlInput = this.#createURLInput();
 
-    this.faviconURLInputHeader = new Header(1).setText("Favicon URL");
+    this.faviconURLInputHeader = new Header(1).setText("Favicon web address");
     this.faviconURLInput = this.#createFaviconURLInput();
     this.faviconResetButton = this.#createFaviconResetButton();
     this.faviconRow = this.#createFaviconRow();
@@ -42,6 +41,9 @@ export class WebPanelPopupEdit extends Panel {
       id: "sidebar-2-web-panel-popup-edit-storage-buttons",
     });
 
+    this.unloadOnCloseToggle = this.#createUnloadOnCloseToggle();
+    this.unloadOnCloseGroup = this.#createUnloadOnCloseGroup();
+
     this.buttonsRow = this.#createButtonsRow();
     this.multiView = this.#createMultiView();
 
@@ -112,11 +114,12 @@ export class WebPanelPopupEdit extends Panel {
       id: "sidebar-2-web-panel-popup-edit-multiview",
     })
       .appendChild(this.panelHeader)
-      .appendChild(this.separator)
+      .appendChild(new ToolbarSeparator())
       .appendChild(this.urlInputHeader)
       .appendChild(this.urlInput)
       .appendChild(this.faviconURLInputHeader)
       .appendChild(this.faviconRow)
+      .appendChild(this.unloadOnCloseGroup)
       .appendChild(this.buttonsRow);
 
     this.appendChild(multiView);
@@ -209,6 +212,38 @@ export class WebPanelPopupEdit extends Panel {
     return button;
   }
 
+  /**
+   *
+   * @returns {Button}
+   */
+  #createUnloadOnCloseToggle() {
+    const button = new Button({
+      id: "moz-toggle-button",
+      classList: ["toggle-button"],
+    });
+    button.setAttribute("part", "button");
+    button.setAttribute("type", "button");
+
+    button.addEventListener("click", (event) => {
+      if (event.button === 0) {
+        button.setPressed(!button.getPressed());
+      }
+    });
+
+    return button;
+  }
+
+  /**
+   *
+   * @returns {HBox}
+   */
+  #createUnloadOnCloseGroup() {
+    const box = new HBox({ id: "sidebar-2-web-panel-popup-edit-unload-group" });
+    const label = new Header(1).setText("Unload from memory after closing");
+    box.appendChild(label).appendChild(this.unloadOnCloseToggle);
+    return box;
+  }
+
   /**
    *
    * @returns {Button}
@@ -240,6 +275,11 @@ export class WebPanelPopupEdit extends Panel {
         this.webPanelButton.setIcon(faviconURL);
       }
 
+      this.webPanel.unloadOnClose = this.unloadOnCloseToggle.getPressed();
+      if (this.webPanel.unloadOnClose && this.webPanel.hidden()) {
+        this.webPanel.hide();
+      }
+
       SidebarController.webPanelPopupEdit.hidePopup();
       SidebarController.webPanels.save();
     });
@@ -265,6 +305,7 @@ export class WebPanelPopupEdit extends Panel {
         SidebarController.close();
       }
 
+      SidebarController.webPanels.delete(this.webPanel);
       this.webPanel.remove();
       this.webPanelButton.remove();
       SidebarController.webPanelPopupEdit.hidePopup();
@@ -288,6 +329,8 @@ export class WebPanelPopupEdit extends Panel {
       .setValue(this.webPanel.faviconURL)
       .setBackgroundImage(this.webPanel.faviconURL);
 
+    this.unloadOnCloseToggle.setPressed(this.webPanel.unloadOnClose);
+
     this.moveUpButton.setDisabled(
       SidebarController.webPanels.isFirst(this.webPanel)
     );
diff --git a/second_sidebar/web_panels.mjs b/second_sidebar/web_panels.mjs
@@ -178,7 +178,8 @@ export class WebPanels extends VBox {
           webPanelPref.url,
           webPanelPref.faviconURL,
           webPanelPref.pinned ?? true,
-          webPanelPref.width ?? "400"
+          webPanelPref.width ?? "400",
+          webPanelPref.unloadOnClose ?? false
         );
         const webPanelButton = new WebPanelButton(webPanel);
         SidebarController.webPanelButtons.appendChild(webPanelButton);
@@ -197,6 +198,7 @@ export class WebPanels extends VBox {
         faviconURL: webPanel.faviconURL,
         pinned: webPanel.pinned,
         width: webPanel.width,
+        unloadOnClose: webPanel.unloadOnClose,
       });
     }
     console.log("Saving prefs: ", prefs);
diff --git a/second_sidebar/xul/button.mjs b/second_sidebar/xul/button.mjs
@@ -24,4 +24,22 @@ export class Button extends XULElement {
     this.element.innerText = text;
     return this;
   }
+
+  /**
+   *
+   * @returns {boolean}
+   */
+  getPressed() {
+    return this.element.ariaPressed === "true";
+  }
+
+  /**
+   *
+   * @param {boolean} value
+   * @returns {Button}
+   */
+  setPressed(value) {
+    this.element.ariaPressed = value;
+    return this;
+  }
 }
