Added sidebar panels!

docs/side-panels.md

@@ -2,11 +2,12 @@
 
 The `zen.sizepanels.data` configuration will be a JSON string that follows the following data:
 
-```
+```json
 {
   data: {
     "p1": {
-      "url": "https://google.com"
+      "url": "https://google.com",
+      "ua": false, // "ua" may not be declared! (default: false)
     }
   },
   "index": [

src/browser/base/content/ZenSidebarManager.mjs

@@ -1,12 +1,22 @@
 
-var ZenSidebarManager = {
+export var gZenBrowserManagerSidebar = {
   _sidebarElement: null,
   _currentPanel: null,
 
+  DEFAULT_MOBILE_USER_AGENT: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Mobile Safari/537.36 Edg/114.0.1823.79",
+
   init() {
     this.update();
   },
 
+  get sidebarData() {
+    let services = Services.prefs.getStringPref("zen.sidebar.data");
+    if (services === "") {
+      return {};
+    }
+    return JSON.parse(services);
+  },
+
   update() {
     this._updateWebPanels();
   },
@@ -19,11 +29,7 @@ var ZenSidebarManager = {
       return;
     }
 
-    let services = Services.prefs.getStringPref("zen.sidebar.data");
+    let data = this.sidebarData;
-    if (services === "") {
-      return;
-    }
-    let data = JSON.parse(services);
     if (!data.data || !data.index) {
       return;
     }
@@ -51,6 +57,8 @@ var ZenSidebarManager = {
   _closeSidebarPanel() {
     let sidebar = document.getElementById("zen-sidebar-web-panel");
     sidebar.setAttribute("hidden", "true");
+    this._currentPanel = null;
+    this._updateButtons();
   },
 
   _handleClick(event) {
@@ -74,31 +82,100 @@ var ZenSidebarManager = {
     }
   },
 
+  _hideAllWebPanels() {
+    let sidebar = this._openAndGetWebPanelWrapper();
+    for (let browser of sidebar.querySelectorAll("browser[zen-sidebar-id]")) {
+      browser.setAttribute("hidden", "true");
+    }
+  },
+
   _updateWebPanel() {
     let sidebar = this._openAndGetWebPanelWrapper();
+    this._hideAllWebPanels();
+    let existantWebview = sidebar.querySelector(`browser[zen-sidebar-id="${this._currentPanel}"]`);
+    if (existantWebview) {
+      existantWebview.removeAttribute("hidden");
+      return;
+    }
+    let data = this._getWebPanelData(this._currentPanel);
+    let browser = this._createWebPanelBrowser(data);
+    let browserContainers = document.getElementById("zen-sidebar-web-panel-browser-containers");
+    browserContainers.appendChild(browser.linkedBrowser);
+    if (data.ua) {
+      browser.linkedBrowser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT;
+    }
+  },
+
+  _getWebPanelData(id) {
+    let data = this.sidebarData;
+    let panel = data.data[id];
+    if (!panel || !panel.url) {
+      return {};
+    }
+    return {
+      id: id,
+      ...panel,
+    };
+  },
+
+  _createWebPanelBrowser(data) {
+    let tab = gBrowser.addTab(data.url, {
+      triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
+    });
+    tab.linkedBrowser.setAttribute("disablefullscreen", "true");
+    tab.linkedBrowser.setAttribute("src", data.url);
+    tab.linkedBrowser.setAttribute("zen-sidebar-id", data.id);
+    tab.linkedBrowser.setAttribute("type", "content");
+    tab.linkedBrowser.setAttribute("flex", "1");
+    tab.linkedBrowser.setAttribute("disableglobalhistory", "true");
+    tab.linkedBrowser.setAttribute("autoscroll", "false");
+    tab.linkedBrowser.setAttribute("remote", "true");
+    tab.linkedBrowser.setAttribute("autocompletepopup", "PopupAutoComplete");
+    tab.linkedBrowser.setAttribute("messagemanagergroup", "browsers");
+    tab.linkedBrowser.setAttribute("message", "true");
+    tab.setAttribute("hidden", "true");
+    return tab;
   },
 
   _getWebPanelIcon(url) {
     return `url(page-icon:${url})`;
   },
 
-  reload() {
+  _getCurrentBrowser() {
+    let sidebar = document.getElementById("zen-sidebar-web-panel");
+    return sidebar.querySelector(`browser[zen-sidebar-id="${this._currentPanel}"]`);
+  },
 
+  reload() {
+    let browser = this._getCurrentBrowser();
+    if (browser) {
+      browser.reload();
+    }
   },
 
   forward() {
-
+    let browser = this._getCurrentBrowser();
+    if (browser) {
+      browser.goForward();
+    }
   },
 
   back() {
-      
+    let browser = this._getCurrentBrowser();
+    if (browser) {
+      browser.goBack();
+    }
   },
 
   home() {
-        
+    let browser = this._getCurrentBrowser();
+    if (browser) {
+      browser.gotoIndex();
+    }
   },
 
   close() {
+    this._hideAllWebPanels();
     this._closeSidebarPanel();
   },
 
@@ -110,4 +187,4 @@ var ZenSidebarManager = {
   },
 };
 
-ZenSidebarManager.init();
+gZenBrowserManagerSidebar.init();

src/browser/base/content/zen-sidebar-panel.inc.xhtml

@@ -1,9 +1,12 @@
 <box id="zen-sidebar-web-panel" hidden="true" class="chromeclass-extrachrome">
   <toolbar mode="icons" flex="1" id="zen-sidebar-web-header">
-    <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.back();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-back" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.back();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.forward();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-forward" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.forward();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.reload();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-reload" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.reload();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.home();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-home" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.home();"/>
-    <toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="ZenSidebarWebPanel.hide();"/>
+    <toolbarbutton id="zen-sidebar-web-panel-close" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="gZenBrowserManagerSidebar.close();"/>
   </toolbar>
+  <vbox id="zen-sidebar-web-panel-browser-containers">
+
+  </vbox>
 </box>

src/browser/themes/shared/zen-browser-shared.css

@@ -276,10 +276,10 @@ toolbarbutton#scrollbutton-up {
   --zen-browser-tab-icon-size: 16px;
   --tab-min-width: 0 !important;
   margin: 3px auto !important;
-  border-radius: 50%;
+  border-radius: 12px;
   position: relative;
   color-scheme: var(--tab-selected-color-scheme);
-  background: var(--zen-colors-secondary);
+  background: var(--toolbarbutton-hover-background);
   border: 2px solid transparent;
   padding: 0 !important;
   align-items: center;

src/browser/themes/shared/zen-sidebar-panels.css

@@ -49,6 +49,15 @@
   min-width: var(--zen-default-sidebar-width);
   background: var(--zen-colors-tertiary);
   animation: zen-sidebar-panel-animation 0.3s ease-in-out;
+  flex-direction: column;
+}
+
+#main-window[customizing="true"] #zen-sidebar-web-panel {
+  display: none !important;
+}
+
+#zen-sidebar-web-panel:not([hidden="true"]) {
+  display: flex; 
 }
 
 #zen-sidebar-web-panel[inlinedwithsidebar="true"] {
@@ -69,7 +78,7 @@
 
 #zen-sidebar-web-header {
   width: 100%;
-  height: 50px;
+  min-height: 50px;
   display: flex;
   align-items: center;
   padding: 0 5px;
@@ -78,8 +87,14 @@
   border-bottom-width: 1px !important;
   background: transparent;
   position: relative;
+  color-scheme: var(--toolbar-color-scheme);
 }
 
 #zen-sidebar-web-panel-close {
   margin-left: auto !important;
 }
+
+#zen-sidebar-web-panel-browser-containers {
+  height: 100%;
+  position: relative;
+}