Refactor tab management and styles for improved functionality and user experience

Author: mauro-balades

.github/workflows/build.yml

@@ -547,10 +547,10 @@ jobs:
           GITHUB_REPOSITORY: ${{ github.repository }}
 
       - name: Release
-        uses: marvinpinto/action-automatic-releases@master
+        uses: softprops/action-gh-release@v2
         if: ${{ inputs.update_branch == 'release' }}
         with:
-          token: '${{ secrets.DEPLOY_KEY }}'
+          token: ${{ secrets.DEPLOY_KEY }}
           tag_name: ${{ needs.build-data.outputs.version }}
           prerelease: false
           fail_on_unmatched_files: false

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

@@ -173,7 +173,7 @@ pref('zen.tab-unloader.excluded-urls', "example.com,example.org");
 
 pref('zen.pinned-tab-manager.debug', false);
 pref('zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url', false);
-pref('zen.pinned-tab-manager.close-shortcut-behavior', 'unload-switch');
+pref('zen.pinned-tab-manager.close-shortcut-behavior', 'reset-unload-switch');
 
 // TODO: Check this out!
 pref("browser.profiles.enabled", false);

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

@@ -558,7 +558,7 @@
         width: -moz-available;
       }
 
-      &[zen-pinned-changed='true'] > .tab-stack > .tab-content > .tab-icon-stack {
+      &[zen-pinned-changed='true']:not([zen-essential]) > .tab-stack > .tab-content > .tab-icon-stack {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
@@ -572,11 +572,11 @@
         }
       }
 
-      &[zen-pinned-changed='true'] .tab-reset-pin-button image {
+      &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button image {
         opacity: 0;
       }
 
-      &[zen-pinned-changed='true'] .tab-reset-pin-button:hover {
+      &[zen-pinned-changed='true']:not([zen-essential]) .tab-reset-pin-button:hover {
         & ~ .tab-label-container .tab-reset-pin-label {
           max-height: 10px;
           opacity: 0.6;

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -412,7 +412,7 @@ button.popup-notification-dropmarker {
 
 :root[zen-single-toolbar='true'] {
   #urlbar[open] {
-    min-width: 35vw;
+    min-width: min(90%, 40rem);
   }
 
   &[zen-right-side='true'] #urlbar[open]:not([zen-floating-urlbar='true']) {

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

@@ -437,7 +437,6 @@
     async _removePinnedAttributes(tab, isClosing = false) {
       tab.removeAttribute('zen-has-static-label');
       if (!tab.getAttribute('zen-pin-id') || this._temporarilyUnpiningEssential) {
-        this._temporarilyUnpiningEssential = false;
         return;
       }
 
@@ -587,31 +586,46 @@
       const tabs = tab ? [tab] : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
       for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[i];
+        if (tab.hasAttribute('zen-essential')) {
+          continue;
+        }
         tab.setAttribute('zen-essential', 'true');
         if (tab.hasAttribute('zen-workspace-id')) {
           tab.removeAttribute('zen-workspace-id');
         }
-        if (tab.pinned) {
-          this._temporarilyUnpiningEssential = true;
-          gBrowser.unpinTab(tab);
+        if (tab.pinned && tab.hasAttribute('zen-pin-id')) {
+          const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
+          if (pin) {
+            pin.isEssential = true;
+            ZenPinnedTabsStorage.savePin(pin);
+          }
+          document.getElementById('zen-essentials-container').appendChild(tab);
+          gBrowser.tabContainer._invalidateCachedTabs();
+        } else {
+          gBrowser.pinTab(tab);
         }
-        gBrowser.pinTab(tab);
-        this.resetPinChangedUrl(tab);
         this.onTabIconChanged(tab);
         this._onTabMove(tab);
       }
       gZenUIManager.updateTabsToolbar();
     }
 
-    removeEssentials(tab) {
+    removeEssentials(tab, unpin = true) {
       const tabs = tab ? [tab] : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab];
       for (let i = 0; i < tabs.length; i++) {
         const tab = tabs[i];
         tab.removeAttribute('zen-essential');
         if (ZenWorkspaces.workspaceEnabled && ZenWorkspaces.getActiveWorkspaceFromCache.uuid) {
           tab.setAttribute('zen-workspace-id', ZenWorkspaces.getActiveWorkspaceFromCache.uuid);
         }
-        gBrowser.unpinTab(tab);
+        if (unpin) {
+          gBrowser.unpinTab(tab);
+        } else {
+          const pinContainer = ZenWorkspaces.pinnedTabsContainer;
+          pinContainer.prepend(tab);
+          gBrowser.tabContainer._invalidateCachedTabs();
+          this._onTabMove(tab);
+        }
       }
       gZenUIManager.updateTabsToolbar();
     }
@@ -685,8 +699,7 @@
             gBrowser.pinTab(draggedTab);
             moved = true;
           } else if (draggedTab.hasAttribute('zen-essential')) {
-            this.removeEssentials(draggedTab);
-            gBrowser.pinTab(draggedTab);
+            this.removeEssentials(draggedTab, false);
             moved = true;
           }
         }

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index d41c486c02a6f09dcff5741a59ad8b617294c481..5d3d4556ccb1fd28ada75df22f2c1ec8f56b05b1 100644
+index d41c486c02a6f09dcff5741a59ad8b617294c481..efa900725f32d8606ba6d3bb8bff2d0dcb511e78 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -16,6 +16,7 @@
@@ -71,10 +71,10 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..5d3d4556ccb1fd28ada75df22f2c1ec8
        }
 +
 +      if (event.target.classList.contains("tab-reset-pin-button")) {
-+        gZenPinnedTabManager._onTabResetPinButton(event, this);
++        gZenPinnedTabManager._onTabResetPinButton(event, this, 'reset');
 +        gBrowser.tabContainer._blockDblClick = true;
 +      } else if (event.target.classList.contains("tab-reset-button")) {
-+        gZenPinnedTabManager._onCloseTabShortcut(event, this, 'unload-switch');
++        gZenPinnedTabManager._onCloseTabShortcut(event, this);
 +        gBrowser.tabContainer._blockDblClick = true;
 +      }
      }