Fixed browser panels, they are not tabs anymore

src/browser/app/profile/zen-browser.js

@@ -139,5 +139,5 @@ pref('dom.security.sanitizer.enabled', true);
 //pref("browser.profiles.enabled", true);
 
 // Zen Sidebar
-pref('zen.sidebar.data', "{\"data\":{\"p1\":{\"url\":\"https://google.com\"}},\"index\":[\"p1\"]}");
+pref('zen.sidebar.data', "{\"data\":\n {\"p1\":{\n   \"url\":\"https://web.whatsapp.com/\"\n  },\n\"p2\":{\n   \"url\":\"https://open.spotify.com/\",\n\"ua\": true\n  },\n\"p3\": {\n   \"url\": \"https://www.youtube.com/\",\n\"ua\": true\n}},\n\"index\":[\"p1\",\"p2\",\"p3\"]\n}");
 pref('zen.sidebar.enabled', true);

src/browser/base/content/ZenSidebarManager.mjs

@@ -5,9 +5,12 @@ export var gZenBrowserManagerSidebar = {
   contextTab: 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",
+  MAX_SIDEBAR_PANELS: 8, // +1 for the add panel button
 
   init() {
+    this._closeSidebarPanel(); // avoid caching
     this.update();
+    this.listenForPrefChanges();
   },
 
   get sidebarData() {
@@ -18,6 +21,15 @@ export var gZenBrowserManagerSidebar = {
     return JSON.parse(services);
   },
 
+  listenForPrefChanges() {
+    Services.prefs.addObserver("zen.sidebar.data", this.handleEvent.bind(this));
+    Services.prefs.addObserver("zen.sidebar.enabled", this.handleEvent.bind(this));
+  },
+
+  handleEvent() {
+    this.update();
+  },
+
   update() {
     this._updateWebPanels();
   },
@@ -25,6 +37,7 @@ export var gZenBrowserManagerSidebar = {
   _updateWebPanels() {
     if (Services.prefs.getBoolPref("zen.sidebar.enabled")) {
       this.sidebarElement.removeAttribute("hidden");
+      this._hideAllWebPanels();
     } else {
       this.sidebarElement.setAttribute("hidden", "true");
       return;
@@ -45,10 +58,30 @@ export var gZenBrowserManagerSidebar = {
       button.setAttribute("flex", "1");
       button.setAttribute("zen-sidebar-id", site);
       button.setAttribute("context", "zenWebPanelContextMenu");
-      button.style.listStyleImage = this._getWebPanelIcon(panel.url);
+      this._getWebPanelIcon(panel.url, button);
       button.addEventListener("click", this._handleClick.bind(this));
       this.sidebarElement.appendChild(button);
     }
+    if (data.index.length < this.MAX_SIDEBAR_PANELS) {
+      this.sidebarElement.appendChild(document.createXULElement("toolbarseparator"));
+      let addPanelButton = document.createXULElement("toolbarbutton");
+      addPanelButton.id = "zen-sidebar-add-panel-button";
+      addPanelButton.classList.add("zen-sidebar-panel-button", "toolbarbutton-1", "chromeclass-toolbar-additional");
+      addPanelButton.addEventListener("click", this._openAddPanelDialog.bind(this));
+      this.sidebarElement.appendChild(addPanelButton);
+    }
+  },
+
+  async _openAddPanelDialog() {
+    let dialogURL = "chrome://browser/content/places/zenNewWebPanel.xhtml";
+    let features = "centerscreen,chrome,modal,resizable=no";
+    let aParentWindow = Services.wm.getMostRecentWindow("navigator:browser");
+
+    if (aParentWindow?.gDialogBox) {
+      await aParentWindow.gDialogBox.open(dialogURL, {});
+    } else {
+      aParentWindow.openDialog(dialogURL, "", features, {});
+    }
   },
 
   _openAndGetWebPanelWrapper() {
@@ -105,11 +138,11 @@ export var gZenBrowserManagerSidebar = {
     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.closest(".browserContainer"));
+    browserContainers.appendChild(browser);
     if (data.ua) {
-      browser.linkedBrowser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT;
+      browser.browsingContext.customUserAgent = this.DEFAULT_MOBILE_USER_AGENT;
     }
-    browser.linkedBrowser.browsingContext.isActive = true;
+    browser.browsingContext.isActive = true;
   },
 
   _getWebPanelData(id) {
@@ -125,22 +158,30 @@ export var gZenBrowserManagerSidebar = {
   },
 
   _createWebPanelBrowser(data) {
-    let tab = gBrowser.addTab(data.url, {
+    let browser = gBrowser.createBrowser({});
-      insertTab: false,
+    browser.setAttribute("disablefullscreen", "true");
-      triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
+    browser.setAttribute("src", data.url);
-    });
+    browser.setAttribute("zen-sidebar-id", data.id);
-    tab.linkedBrowser.setAttribute("disablefullscreen", "true");
+    browser.setAttribute("disableglobalhistory", "true");
-    tab.linkedBrowser.setAttribute("src", data.url);
+    browser.setAttribute("autoscroll", "false");
-    tab.linkedBrowser.setAttribute("zen-sidebar-id", data.id);
+    browser.setAttribute("autocompletepopup", "PopupAutoComplete");
-    tab.linkedBrowser.setAttribute("disableglobalhistory", "true");
+    browser.setAttribute("contextmenu", "contentAreaContextMenu");
-    tab.linkedBrowser.setAttribute("autoscroll", "false");
+    return browser;
-    tab.linkedBrowser.setAttribute("autocompletepopup", "PopupAutoComplete");
-    tab.linkedBrowser.setAttribute("contextmenu", "contentAreaContextMenu");
-    return tab;
   },
 
-  _getWebPanelIcon(url) {
+  _getWebPanelIcon(url, element) {
-    return `url(page-icon:${url})`;
+    let { preferredURI } = Services.uriFixup.getFixupURIInfo(url);
+    element.setAttribute("image", `page-icon:${preferredURI.spec}`);
+    fetch(`https://s2.googleusercontent.com/s2/favicons?domain_url=${preferredURI.spec}`).then(async response => {
+      if (response.ok) {
+        let blob = await response.blob();
+        let reader = new FileReader();
+        reader.onload = function() {
+          element.setAttribute("image", reader.result);
+        };
+        reader.readAsDataURL(blob);
+      }
+    });
   },
 
   _getBrowserById(id) {
@@ -245,11 +286,10 @@ export var gZenBrowserManagerSidebar = {
     let data = this.sidebarData;
     delete data.data[this.contextTab];
     data.index = data.index.filter(id => id !== this.contextTab);
-    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
-    this._updateWebPanels();
     let browser = this._getBrowserById(this.contextTab);
     browser.remove();
     this._closeSidebarPanel();
+    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(data));
   },
 
   contextUnload() {

src/browser/components/places/content/zenNewWebPanel.js

@@ -0,0 +1,43 @@
+
+var gZenNewWebPanel = {
+  init: function() {
+    document.addEventListener("dialogaccept", this.handleDialogAccept.bind(this));
+  },
+
+  handleURLChange: async function(aURL) {
+    try {
+      let url = new URL(aURL.value);
+    } catch (_) {
+      // TODO: Show error message
+      return;
+    }
+  },
+
+  handleDialogAccept: async function(aEvent) {
+    document.commandDispatcher.focusedElement?.blur();
+    let url = document.getElementById("zenNWP_url");
+    let ua = document.getElementById("zenNWP_userAgent");
+    if (!url || !ua) {
+      return;
+    }
+    try {
+      new URL(url.value);
+    } catch (_) {
+      return;
+    }
+    if (!url.value || !ua.value) {
+      return;
+    }
+    let newSite = {
+      url: url.value,
+      ua: ua.value,
+    };
+    let currentData = JSON.parse(Services.prefs.getStringPref("zen.sidebar.data"));
+    let newName = "p" + new Date().getTime();
+    currentData.index.push(newName);
+    currentData.data[newName] = newSite;
+    Services.prefs.setStringPref("zen.sidebar.data", JSON.stringify(currentData));
+  },
+};
+
+gZenNewWebPanel.init();

src/browser/components/places/content/zenNewWebPanel.xhtml

@@ -0,0 +1,44 @@
+<?xml version="1.0"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!DOCTYPE window>
+
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        id="zenNewWebPanel"
+        headerparent="zenNewWebPanelDialog"
+        style="min-width: 40em;">
+<dialog id="zenNewWebPanelDialog"
+        buttons="accept, cancel">
+
+  <linkset>
+    <html:link rel="stylesheet" href="chrome://global/skin/global.css" />
+    <html:link
+      rel="stylesheet"
+      href="chrome://global/content/commonDialog.css"
+    />
+    <html:link rel="stylesheet" href="chrome://global/skin/commonDialog.css" />
+
+    <html:link rel="localization" href="browser/zenNewWebPanel.ftl"/>
+    <script src="chrome://browser/content/zenThemeModifier.js"></script>
+  </linkset>
+
+  <script src="chrome://browser/content/places/zenNewWebPanel.js"/>
+
+  <label data-l10n-id="zen-new-web-panel-url"
+    control="zenNWP_url"/>
+  <html:input id="zenNWP_url"
+        type="url" onchange="gZenNewWebPanel.handleURLChange(this);"/>
+
+  <hbox flex="1" style="margin: 10px 5px;">
+    <html:input id="zenNWP_userAgent"
+          type="checkbox"/>
+    <label data-l10n-id="zen-new-web-panel-user-agent"
+      control="zenNWP_userAgent" for="zenNWP_userAgent"/>
+  </hbox>
+
+</dialog>
+</window>

src/browser/components/places/jar-mn.patch

@@ -0,0 +1,10 @@
+diff --git a/browser/components/places/jar.mn b/browser/components/places/jar.mn
+index 7334914664484267ccf80eeeb2917c2001a1acaf..e0636a13798d6fbf41cbf69e51e460822b00ab1a 100644
+--- a/browser/components/places/jar.mn
++++ b/browser/components/places/jar.mn
+@@ -25,3 +25,5 @@ browser.jar:
+     content/browser/places/interactionsViewer.html       (metadataViewer/interactionsViewer.html)
+     content/browser/places/interactionsViewer.js         (metadataViewer/interactionsViewer.js)
+ #endif
++    content/browser/places/zenNewWebPanel.xhtml      (content/zenNewWebPanel.xhtml)
++    content/browser/places/zenNewWebPanel.js         (content/zenNewWebPanel.js)

src/browser/locales/en-US/browser/zen-web-side-panels.ftl

@@ -0,0 +1,20 @@
+zen-web-side-panel-context-mute-panel =
+    .label = Mute Web Panel
+    .accesskey = M
+zen-web-side-panel-context-unmute-panel =
+    .label = Unmute Web Panel
+    .accesskey = m
+
+zen-web-side-panel-context-disable-ua =
+    .label = Disable Mobile UserAgent
+    .accesskey = U
+zen-web-side-panel-context-enable-ua =
+    .label = Enable Mobile UserAgent
+    .accesskey = M
+
+zen-web-side-panel-context-unload =
+    .label = Unload Web Panel
+    .accesskey = W
+zen-web-side-panel-context-delete =
+    .label = Delete Web Panel
+    .accesskey = D

src/browser/locales/en-US/browser/zenNewWebPanel.ftl

@@ -0,0 +1,7 @@
+
+zen-new-web-panel-url =
+  .value = Initial URL
+  .accesskey = I
+zen-new-web-panel-user-agent =
+  .value = Display this web panel in mobile mode
+  .accesskey = m

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

@@ -5,8 +5,11 @@
 
 .main-content {
   background: var(--zen-settings-secondary-background);
-  padding-left: 100px;
+  padding-top: 60px !important;
-  padding-top: 40px !important;
+}
+
+.pane-container {
+  margin: auto;
 }
 
 groupbox {

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

@@ -367,7 +367,7 @@ toolbarbutton#scrollbutton-up {
 
 #tabbrowser-arrowscrollbox {
   &::part(scrollbox-clip) {
-    max-height: 62vh;
+    max-height: 405px;
   }
 }
 

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

@@ -146,7 +146,8 @@
 #tabs-newtab-button,
 #TabsToolbar #new-tab-button,
 #appMenu-zoomEnlarge-button2,
-#PanelUI-zen-profiles-newProfile {
+#PanelUI-zen-profiles-newProfile,
+#zen-sidebar-add-panel-button {
 	list-style-image: url("plus.svg") !important;
 }
 

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

@@ -49,6 +49,7 @@
   min-width: var(--zen-default-sidebar-width);
   background: var(--zen-colors-tertiary);
   animation: zen-sidebar-panel-animation 0.3s ease-in-out;
+  animation-delay: 0.1s;
   flex-direction: column;
 }
 
@@ -98,3 +99,7 @@
   height: 100%;
   position: relative;
 }
+
+#zen-sidebar-web-panel browser[zen-sidebar-id] {
+  height: 100%;
+}

src/toolkit/themes/shared/zen-popup.css

@@ -244,7 +244,8 @@ toolbarbutton:not(:is(
   .all-tabs-close-button,
   .zen-sidebar-panel-button,
   #zen-sidebar-web-panel-close,
-  #PanelUI-zen-profiles-managePrfs
+  #PanelUI-zen-profiles-managePrfs,
+  .bookmark-item,
 )),
 #PanelUI-zen-profiles menuitem {
   /** ADD HERE ALL TYPES OF BUTTONS THAT WANT TO LOOK CHROME LIKE!!! */