Added an opion to remove sidebar panels

src/browser/base/content/ZenSidebarManager.mjs

@@ -3,10 +3,13 @@ export var gZenBrowserManagerSidebar = {
   _sidebarElement: null,
   _currentPanel: null,
   _hasRegisteredPinnedClickOutside: false,
+  _firstRun: 0,
+  _hasChangedConfig: true,
   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
+  MAX_RUNS: 3,
 
   init() {
     this.update();
@@ -29,7 +32,9 @@ export var gZenBrowserManagerSidebar = {
   },
 
   handleEvent() {
+    this._hasChangedConfig = true;
     this.update();
+    this._hasChangedConfig = false;
 
     if (Services.prefs.getBoolPref("zen.sidebar.pinned") && !this._hasRegisteredPinnedClickOutside) {
       document.addEventListener("mouseup", this._handleClickOutside.bind(this));
@@ -79,6 +84,8 @@ export var gZenBrowserManagerSidebar = {
       button.setAttribute("flex", "1");
       button.setAttribute("zen-sidebar-id", site);
       button.setAttribute("context", "zenWebPanelContextMenu");
+      if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
+        button.setAttribute("animate", "true");
       this._getWebPanelIcon(panel.url, button);
       button.addEventListener("click", this._handleClick.bind(this));
       this.sidebarElement.appendChild(button);
@@ -89,8 +96,13 @@ export var gZenBrowserManagerSidebar = {
       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));
+      if (this._firstRun < this.MAX_RUNS || this._hasChangedConfig)
+        addPanelButton.setAttribute("animate", "true");
       this.sidebarElement.appendChild(addPanelButton);
     }
+    // We rerender multiple times for some reason, so we need to avoid the animation
+    if (this._firstRun < this.MAX_RUNS)
+      this._firstRun++;
   },
 
   async _openAddPanelDialog() {
@@ -191,6 +203,7 @@ export var gZenBrowserManagerSidebar = {
     browser.setAttribute("autoscroll", "false");
     browser.setAttribute("autocompletepopup", "PopupAutoComplete");
     browser.setAttribute("contextmenu", "contentAreaContextMenu");
+    browser.setAttribute("disablesecurity", "true");
     return browser;
   },
 

src/browser/components/preferences/zen-looks.js

@@ -54,4 +54,9 @@ Preferences.addAll([
     type: "bool",
     default: true,
   },
+  {
+    id: "zen.sidebar.enabled",
+    type: "bool",
+    default: true,
+  },
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -19,4 +19,20 @@
             preference="zen.theme.toolbar-themed"/>
 </groupbox>
 
+<hbox id="zenSidePanelsCategory"
+      class="subcategory"
+      hidden="true"
+      data-category="paneZenLooks">
+<html:h1 data-l10n-id="pane-zen-side-panels-title"/>
+</hbox>
+
+<groupbox id="zenSidePanelsGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
+      <label><html:h2 data-l10n-id="zen-side-panels-header"/></label>
+      <description class="description-deemphasized" data-l10n-id="zen-side-panels-description" />
+
+      <checkbox id="zenLooksAndFeelUseThemedToolbar"
+            data-l10n-id="zen-side-panels-enabled"
+            preference="zen.sidebar.enabled"/>
+</groupbox>
+
 </html:template>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -8,3 +8,9 @@ zen-look-and-feel-colors-header = Pick a theme colour
 zen-look-and-feel-colors-description = Make { -brand-short-name } look and feel the way you like
 zen-look-and-feel-themed-toolbar = 
     .label = Make the toolbar themed with the accent color
+
+pane-zen-side-panels-title = Side Web Panels
+zen-side-panels-header = General settings for web panels
+zen-side-panels-description = Increase productivity by having multiple views at once!
+zen-side-panels-enabled = 
+    .label = Enable Web Side Panels

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

@@ -286,8 +286,9 @@ toolbarbutton#scrollbutton-up {
   animation: zen-slide-in 0.3s;
 }
 
-.tabbrowser-tab:active {
+.tabbrowser-tab:active,
-  transform: scale(0.9);
+.zen-sidebar-panel-button:active {
+  transform: scale(0.9) !important;
 }
 
 .tab-stack {

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

@@ -7,6 +7,11 @@
   justify-content: center;
 }
 
+#zen-sidebar-panels-wrapper[hidden="true"] > * {
+  /* We still need to have this element in the DOM to satisfy the grid layout */
+  display: none !important;
+}
+
 .zen-sidebar-panel-button {
   width: var(--zen-sidebar-action-button-width);
   height: var(--zen-sidebar-action-button-width);
@@ -46,7 +51,7 @@
 
 #zen-sidebar-web-panel {
   --zen-default-sidebar-width: 300px;
-  width: calc(var(--zen-default-sidebar-width) + 100px);
+  width: calc(var(--zen-default-sidebar-width) + 200px);
   border-radius: var(--zen-panel-radius);
   overflow: hidden;
   margin: var(--zen-appcontent-separator-from-window);

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

@@ -86,8 +86,10 @@
   display: none !important;
 }
 
-#sidebar-box[hidden="true"] .zen-sidebar-action-button {
+#sidebar-box[hidden="true"] .zen-sidebar-action-button,
+.zen-sidebar-panel-button[animate] {
   opacity: 0;
+  transform: translateX(-110%);
   animation: zen-sidebar-button-fadeIn 0.4s forwards;
 }
 
@@ -133,16 +135,16 @@
 
 /* Ugly code */
 
-#TabsToolbar .zen-sidebar-action-button:nth-child(1) { animation-delay: 0.1s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(1),  .zen-sidebar-panel-button:nth-child(1) { animation-delay: 0.1s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(2) { animation-delay: 0.2s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(2),  .zen-sidebar-panel-button:nth-child(2) { animation-delay: 0.2s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(3) { animation-delay: 0.3s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(3),  .zen-sidebar-panel-button:nth-child(3) { animation-delay: 0.3s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(4) { animation-delay: 0.4s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(4),  .zen-sidebar-panel-button:nth-child(4) { animation-delay: 0.4s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(5) { animation-delay: 0.5s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(5),  .zen-sidebar-panel-button:nth-child(5) { animation-delay: 0.5s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(6) { animation-delay: 0.6s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(6),  .zen-sidebar-panel-button:nth-child(6) { animation-delay: 0.6s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(7) { animation-delay: 0.7s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(7),  .zen-sidebar-panel-button:nth-child(7) { animation-delay: 0.7s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(8) { animation-delay: 0.8s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(8),  .zen-sidebar-panel-button:nth-child(8) { animation-delay: 0.8s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(9) { animation-delay: 0.9s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(9),  .zen-sidebar-panel-button:nth-child(9) { animation-delay: 0.9s; }
-#TabsToolbar .zen-sidebar-action-button:nth-child(10) { animation-delay: 1s; }
+#TabsToolbar .zen-sidebar-action-button:nth-child(10), .zen-sidebar-panel-button:nth-child(10) { animation-delay: 1s; }
 
 #TabsToolbar .zen-side-bar-profiles-button-panel-correction {
   position: absolute;