Added zen essentials!

src/browser/base/content/navigator-toolbox-inc-xhtml.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe654515d2 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d5627b4b830 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -27,7 +27,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe
                           aria-pressed="false"
                           oncommand="FirefoxViewHandler.openTab();"
                           onmousedown="FirefoxViewHandler.openToolbarMouseEvent(event);"
-@@ -50,7 +51,7 @@
+@@ -50,16 +51,17 @@
                  aria-multiselectable="true"
                  setfocus="false"
                  tooltip="tabbrowser-tab-tooltip"
@@ -36,8 +36,10 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe
                  stopwatchid="FX_TAB_CLICK_MS">
              <hbox class="tab-drop-indicator" hidden="true"/>
  # If the name (tabbrowser-arrowscrollbox) or structure of this changes
-@@ -59,7 +60,7 @@
+ # significantly, there is an optimization in
+ # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.
++            <html:div id="zen-essentials-container"></html:div>
              <html:div id="vertical-pinned-tabs-container"></html:div>
              <html:div id="vertical-pinned-tabs-container-separator"></html:div>
 -            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
@@ -45,7 +47,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe
                <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
                <hbox id="tabbrowser-arrowscrollbox-periphery">
                  <toolbartabstop/>
-@@ -113,9 +114,10 @@
+@@ -113,9 +115,10 @@
        <toolbarbutton id="content-analysis-indicator"
                       oncommand="ContentAnalysis.showPanel(this, PanelUI);"
                       class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -58,7 +60,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..8ad1d14884e8698437ebf0d1f41a16fe
      </toolbar>
  
    </vbox>
-@@ -531,6 +533,7 @@
+@@ -531,6 +534,7 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -21,7 +21,7 @@
 
   #vertical-pinned-tabs-container-separator {
     background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
-    margin: var(--zen-toolbox-padding) auto;
+    margin: 8px auto;
     border: none;
     height: 1px;
     width: 98%;
@@ -721,7 +721,7 @@
         --zen-colors-border: var(--zen-colors-tertiary);
       }
 
-      margin-top: 11px;
+      margin-top: 15px;
       position: relative;
 
       &::before {
@@ -731,7 +731,7 @@
         background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
         width: 98%;
         position: absolute;
-        top: -7px;
+        top: -8px;
         left: 50%;
         transform: translateX(-50%);
       }
@@ -740,18 +740,14 @@
 }
 
 /* Mark: Essentials Toolbar */
-#EssentialsToolbar {
+#zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
   margin-bottom: var(--zen-toolbox-padding);
-  & .bookmark-item {
+  gap: 3px;
-    max-width: unset;
-    padding: 10px 0;
-    gap: 8px;
-  }
   overflow: hidden;
 }
 
-#EssentialsToolbarItems {
+#zen-essentials-container {
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   opacity: 1;
@@ -763,21 +759,33 @@
   padding: 0;
 }
 
-#EssentialsToolbarItems .bookmark-item {
+#zen-essentials-container .tabbrowser-tab {
   max-width: unset;
-
+  width: 100% !important;
   border-radius: var(--border-radius-medium);
-  --zen-essential-tabs-bgcolor: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.18));
+
-  background: var(--tab-hover-background-color);
+  &:not([selected]):not(:hover) .tab-background {
-  
+    background: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
-  &:hover {
-    background: var(--zen-essential-tabs-bgcolor) !important;
   }
 
   backdrop-filter: blur(10px);
 
-  & label {
+  & .tab-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  & .tab-label-container {
     display: none !important;
   }
+
+  & .tab-close-button {
+    display: none !important;
+  }
+
+  & .tab-icon-image,
+  & .tab-icon-overlay {
+    margin-inline-end: 0 !important;
+  }
 }
 

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -49,7 +49,7 @@
 
     async initTabs() {
       await ZenPinnedTabsStorage.init();
-      await  this._refreshPinnedTabs();
+      await this._refreshPinnedTabs();
     }
 
     async _refreshPinnedTabs() {
@@ -313,8 +313,6 @@
         default:
           return;
       }
-
-
     }
 
     _handleTabSwitch(selectedTab) {
@@ -366,15 +364,25 @@
       }
     }
 
-    _addGlobalPin() {
+    addToEssentials() {
-      const tab = TabContextMenu.contextTab;
+      const tabs = TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
-      if (!tab || tab.pinned) {
+      for (let i = 0; i < tabs.length; i++) {
-        return;
+        const tab = tabs[i];
+        tab.setAttribute("zen-essential", "true");
+        if (tab.pinned) {
+          gBrowser.unpinTab(tab);
+        }
+        gBrowser.pinTab(tab);
       }
+    }
 
-      tab.removeAttribute("zen-workspace-id");
+    removeEssentials() {
-
+      const tabs = TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
-      gBrowser.pinTab(tab);
+      for (let i = 0; i < tabs.length; i++) {
+        const tab = tabs[i];
+        tab.removeAttribute("zen-essential");
+        gBrowser.unpinTab(tab);
+      }
     }
 
     _insertItemsIntoTabContextMenu() {
@@ -393,9 +401,9 @@
 
       const element = window.MozXULElement.parseXULToFragment(`
             <menuitem id="context_zen-pin-tab-global"
-                      data-lazy-l10n-id="pin-tab-global"
+                      data-lazy-l10n-id="tab-context-zen-pin-tab-global"
                       hidden="true"
-                      oncommand="gZenPinnedTabManager._addGlobalPin();"/>   
+                      oncommand="gZenPinnedTabManager.addToEssentials();"/>
         `);
 
       document.getElementById('context_pinTab').after(element);

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -920,7 +920,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._createNewTabForWorkspace(window);
     }
     for (let tab of gBrowser.tabs) {
-      if (tab.getAttribute('zen-workspace-id') !== window.uuid && !(tab.pinned && !tab.hasAttribute('zen-workspace-id'))) {
+      if (tab.getAttribute('zen-workspace-id') !== window.uuid && !(tab.pinned && !tab.hasAttribute('zen-workspace-id'))
+          && !tab.hasAttribute("zen-essential")) {
         gBrowser.hideTab(tab, undefined, true);
       }
     }

src/browser/components/sessionstore/TabState-sys-mjs.patch

@@ -1,13 +1,14 @@
 diff --git a/browser/components/sessionstore/TabState.sys.mjs b/browser/components/sessionstore/TabState.sys.mjs
-index 26f5671c849d9b0a126d79b07bc7d3d7870826ec..366e3693001eb1c2fce0443f1dd196cccd3ed846 100644
+index 26f5671c849d9b0a126d79b07bc7d3d7870826ec..36b535321f17a4e3dfdfdbb677a4e4b869038154 100644
 --- a/browser/components/sessionstore/TabState.sys.mjs
 +++ b/browser/components/sessionstore/TabState.sys.mjs
-@@ -98,6 +98,12 @@ var TabStateInternal = {
+@@ -98,6 +98,13 @@ var TabStateInternal = {
        tabData.muteReason = tab.muteReason;
      }
  
 +    tabData.zenWorkspace = tab.getAttribute("zen-workspace-id");
 +    tabData.zenPinnedId = tab.getAttribute("zen-pin-id");
++    tabData.zenEssential = tab.getAttribute("zen-essential");
 +    tabData.zenDefaultUserContextId = tab.getAttribute("zenDefaultUserContextId");
 +    tabData.zenPinnedEntry = tab.getAttribute("zen-pinned-entry");
 +    tabData.zenPinnedIcon = tab.getAttribute("zen-pinned-icon");

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd521e1e4c 100644
+index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..06e24d8e165d3c2035f11dfc2c6d7d419137d490 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -462,11 +462,26 @@
@@ -31,6 +31,15 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
        }
        return i;
      },
+@@ -860,7 +875,7 @@
+       if (this.tabContainer.verticalMode) {
+         let wasFocused = document.activeElement == this.selectedTab;
+         let oldPosition = aTab._tPos;
+-        this.verticalPinnedTabsContainer.appendChild(aTab);
++        aTab.hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(aTab) : this.verticalPinnedTabsContainer.appendChild(aTab);
+         this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
+       } else {
+         this.moveTabTo(aTab, this._numPinnedTabs);
 @@ -1346,6 +1361,7 @@
        if (!this._previewMode) {
          newTab.recordTimeFromUnloadToReload();
@@ -79,7 +88,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
          if (insertTab) {
            // insert the tab into the tab container in the correct position
            this._insertTabAtIndex(t, {
-@@ -3291,6 +3315,17 @@
+@@ -3291,6 +3315,20 @@
          ) {
            tabWasReused = true;
            tab = this.selectedTab;
@@ -90,6 +99,9 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
 +          if (tabData.zenPinnedId) {
 +            tab.setAttribute("zen-pin-id", tabData.zenPinnedId);
 +          }
++          if (tabData.zenEssential) {
++            tab.setAttribute("zen-essential", "true");
++          }
 +          if (tabData.zenDefaultUserContextId) {
 +            tab.setAttribute("zenDefaultUserContextId", "true");
 +          }
@@ -97,7 +109,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
            if (!tabData.pinned) {
              this.unpinTab(tab);
            } else {
-@@ -3304,6 +3339,9 @@
+@@ -3304,6 +3342,9 @@
              restoreTabsLazily && !select && !tabData.pinned;
  
            let url = "about:blank";
@@ -107,7 +119,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
            if (tabData.entries?.length) {
              let activeIndex = (tabData.index || tabData.entries.length) - 1;
              // Ensure the index is in bounds.
-@@ -3340,6 +3378,15 @@
+@@ -3340,6 +3381,18 @@
              preferredRemoteType,
            });
  
@@ -117,13 +129,16 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
 +          if (tabData.zenPinnedId) {
 +            tab.setAttribute("zen-pin-id", tabData.zenPinnedId);
 +          }
++          if (tabData.zenEssential) {
++            tab.setAttribute("zen-essential", "true");
++          }
 +          if (tabData.zenDefaultUserContextId) {
 +            tab.setAttribute("zenDefaultUserContextId", "true");
 +          }
            if (select) {
              tabToSelect = tab;
            }
-@@ -3374,7 +3421,6 @@
+@@ -3374,7 +3427,6 @@
              this.tabContainer._invalidateCachedTabs();
            }
          }
@@ -131,7 +146,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
          tab.initialize();
        }
  
-@@ -4148,6 +4194,13 @@
+@@ -4148,6 +4200,13 @@
          TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
        }
  
@@ -145,7 +160,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4163,6 +4216,10 @@
+@@ -4163,6 +4222,10 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
  
@@ -156,7 +171,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -5123,10 +5180,10 @@
+@@ -5123,10 +5186,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      },
  
@@ -169,7 +184,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -7042,6 +7099,7 @@
+@@ -7042,6 +7105,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -177,7 +192,7 @@ index 14de79b543cf07b04d06ef5a3f94d9aa988ea39a..4ff11ec41543e4ab2b4aa96548db60fd
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
              gBrowser.syncThrobberAnimations(this.mTab);
-@@ -7874,7 +7932,7 @@ var TabContextMenu = {
+@@ -7874,7 +7938,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !multiselectionContext;

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index f3a2f226a9056c5a75023281fdeb704cec49b4a6..6864f4011676e2c114bacc4b55adca470b97b2a8 100644
+index f3a2f226a9056c5a75023281fdeb704cec49b4a6..39c46b141145864fb3b8043d2a9865299561a6cc 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -894,7 +894,7 @@
@@ -20,6 +20,15 @@ index f3a2f226a9056c5a75023281fdeb704cec49b4a6..6864f4011676e2c114bacc4b55adca47
                postTransitionCleanup();
              } else {
                let onTransitionEnd = transitionendEvent => {
+@@ -1284,7 +1284,7 @@
+         }
+       }
+ 
+-      let allChildren = [...verticalPinnedTabsContainer.children, ...children];
++      let allChildren = [...document.getElementById("zen-essentials-container").children, ...verticalPinnedTabsContainer.children, ...children];
+       this._allTabs = allChildren;
+       return allChildren;
+     }
 @@ -1480,7 +1480,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
@@ -63,7 +72,7 @@ index f3a2f226a9056c5a75023281fdeb704cec49b4a6..6864f4011676e2c114bacc4b55adca47
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1630,9 +1632,9 @@
+@@ -1630,13 +1632,13 @@
        let verticalTabsContainer = document.getElementById(
          "vertical-pinned-tabs-container"
        );
@@ -75,6 +84,11 @@ index f3a2f226a9056c5a75023281fdeb704cec49b4a6..6864f4011676e2c114bacc4b55adca47
          let tabs = this._getVisibleTabs();
          for (let i = 0; i < numPinned; i++) {
            tabs[i].style.marginInlineStart = "";
+-          verticalTabsContainer.appendChild(tabs[i]);
++          tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.appendChild(tabs[i]);
+         }
+       }
+ 
 @@ -1660,7 +1662,7 @@
  
      _positionPinnedTabs() {