feat: Small quality checks before release, b=no-bug, c=folders, common, tabs

locales/en-US/browser/browser/zen-folders.ftl

@@ -23,4 +23,10 @@ zen-folders-panel-change-folder-space =
 zen-folders-panel-change-icon-folder =
     .label = Change Icon
 
+zen-folders-unload-all-tooltip =
+    .tooltiptext = Unload all tabs in this folder
+
+zen-folders-unload-folder =
+    .label = Unload All Tabs
+
 zen-folders-search-no-results = No tabs matching that search 🤔

src/browser/base/content/zen-panels/popups.inc

@@ -36,8 +36,9 @@
   <menuitem id="context_zenFolderRename" data-l10n-id="zen-folders-panel-rename-folder"/>
   <menuitem id="context_zenFolderChangeIcon" data-l10n-id="zen-folders-panel-change-icon-folder"/>
   <menuseparator />
+  <menuitem id="context_zenFolderUnloadAll" data-l10n-id="zen-folders-unload-folder"/>
   <menuitem id="context_zenFolderNewSubfolder" data-l10n-id="zen-folders-new-subfolder"/>
-  <menuitem id="context_zenFolderExpand" data-l10n-id="zen-folders-panel-unpack-folder"/>
+  <menuitem id="context_zenFolderUnpack" data-l10n-id="zen-folders-panel-unpack-folder"/>
   <menuseparator />
   <menu id="context_zenChangeFolderSpace"
     data-l10n-id="zen-folders-panel-change-folder-space">

src/browser/themes/linux/browser-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
-index dadb198cbf968dc622d2d0ee6c754f3541c052a2..5b7d17d8705c7cfddaee04c90d342bd705338a18 100644
+index dadb198cbf968dc622d2d0ee6c754f3541c052a2..ef8ed137443a089e5ac084bb8f86533ddd2086a1 100644
 --- a/browser/themes/linux/browser.css
 +++ b/browser/themes/linux/browser.css
 @@ -43,7 +43,8 @@
@@ -12,15 +12,14 @@ index dadb198cbf968dc622d2d0ee6c754f3541c052a2..5b7d17d8705c7cfddaee04c90d342bd7
        dialog::backdrop {
          border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
          border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
-@@ -51,13 +52,14 @@
+@@ -51,13 +52,10 @@
  
        /* stylelint-disable-next-line media-query-no-invalid */
        @media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
 -        #navigator-toolbox {
-+      #zen-main-app-wrapper {
+-          /* The body clip below covers this. */
-           /* The body clip below covers this. */
+-          border-radius: 0;
-           border-radius: 0;
+-        }
-         }
  
          body,
 -        dialog::backdrop {

src/zen/common/ZenStartup.mjs

@@ -177,13 +177,16 @@
       const appWrapper = document.getElementById('zen-main-app-wrapper');
       const element = document.createElement('div');
       element.id = 'zen-update-animation';
+      const elementBorder = document.createElement('div');
+      elementBorder.id = 'zen-update-animation-border';
       requestIdleCallback(() => {
         if (gReduceMotion) {
           return;
         }
         appWrapper.appendChild(element);
-        gZenUIManager.motion
+        appWrapper.appendChild(elementBorder);
-          .animate(
+        Promise.all([
+          gZenUIManager.motion.animate(
             '#zen-update-animation',
             {
               top: ['100%', '-50%'],
@@ -192,9 +195,20 @@
             {
               duration: 0.35,
             }
-          )
+          ),
-          .then(() => {
+          gZenUIManager.motion.animate(
+            '#zen-update-animation-border',
+            {
+              '--background-top': ['150%', '-50%'],
+            },
+            {
+              duration: 0.35,
+              delay: 0.1,
+            }
+          ),
+        ]).then(() => {
           element.remove();
+          elementBorder.remove();
         });
       });
     }

src/zen/common/ZenUIManager.mjs

@@ -74,6 +74,24 @@ var gZenUIManager = {
     gZenVerticalTabsManager.init();
 
     this._initCreateNewPopup();
+    this._debloatContextMenus();
+  },
+
+  _debloatContextMenus() {
+    const contextMenusToClean = [
+      // Remove the 'new tab below' context menu.
+      // reason: It doesn't properly work with zen and it's philosophy of not having
+      //   new tabs. It's also semi-not working as it doesn't create a new tab below
+      //   the current one.
+      'context_openANewTab',
+    ];
+    for (const id of contextMenusToClean) {
+      const menu = document.getElementById(id);
+      if (!menu) {
+        continue;
+      }
+      menu.setAttribute('hidden', 'true');
+    }
   },
 
   _initCreateNewPopup() {

src/zen/common/styles/zen-single-components.css

@@ -201,3 +201,24 @@ body > #confetti {
   transform: translateY(-50%);
   pointer-events: none;
 }
+
+#zen-update-animation-border {
+  position: absolute;
+  inset: 0;
+  border: solid 2px #0000;
+  border-radius: var(--zen-native-content-radius);
+  background: radial-gradient(
+      ellipse 100% 50% at center var(--background-top),
+      rgba(255, 255, 255, 0.8) 80%,
+      transparent
+    )
+    border-box;
+  /* ensure gradient size is relative to border-box (not default padding-box) */
+  --lyr: conic-gradient(white 0 0); /* any kind of gradient that's opaque everywhere */
+  /* exclude padding-box (that is, mask out everything but the border area) */
+  mask:
+    var(--lyr) padding-box exclude,
+    var(--lyr);
+  content: '';
+  pointer-events: none;
+}

src/zen/folders/ZenFolder.mjs

@@ -9,7 +9,7 @@
       <hbox class="tab-group-label-container" pack="center">
         <html:div class="tab-group-folder-icon"/>
         <label class="tab-group-label" role="button"/>
-        <image class="tab-reset-button reset-icon" role="button" keyNav="false"/>
+        <image class="tab-reset-button reset-icon" role="button" keyNav="false" data-l10n-id="zen-folders-unload-all-tooltip"/>
       </hbox>
       <html:div class="tab-group-container">
         <html:div class="zen-tab-group-start" />
@@ -52,7 +52,7 @@
         </rect>
       <!--Icon (g)-->
         <g id="folder-icon" shape-rendering="geometricPrecision" style="fill-opacity: 1; transform-origin: -53.05px 5.399px; fill: var(--zen-folder-stroke);">
-          <image href="" height="18px" width="19px"/>
+          <image href="" transform="translate(-52.5,2)" height="18px" width="19px"/>
           <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-17" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
           <animateTransform type="translate" additive="sum" attributeName="transform" values="-10 -9;-7.5 -9" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
           <animate attributeName="opacity" values="1;1" dur="0.15s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0.58 1"/>
@@ -153,7 +153,7 @@
       });
     }
 
-    async expandGroupTabs() {
+    async unpackTabs() {
       for (let tab of this.allItems.reverse()) {
         tab = tab.group.hasAttribute('split-view-group') ? tab.group : tab;
         if (tab.hasAttribute('zen-empty-tab')) {
@@ -234,20 +234,20 @@
       return this.labelElement.parentElement.querySelector('.tab-reset-button');
     }
 
-    #unloadAllActiveTabs() {
+    unloadAllTabs(event) {
-      for (const tab of this.activeTabs) {
+      this.#unloadAllActiveTabs(event, /* noClose */ true);
-        const tabResetButton = tab.querySelector('.tab-reset-button');
-        if (tabResetButton) {
-          tabResetButton.click();
     }
+
+    #unloadAllActiveTabs(event, noClose = false) {
+      for (const tab of this.tabs) {
+        gZenPinnedTabManager._onCloseTabShortcut(event, tab, { noClose });
       }
       this.activeTabs = [];
     }
 
     on_click(event) {
       if (event.target === this.resetButton) {
-        event.stopPropagation();
+        this.#unloadAllActiveTabs(event);
-        this.#unloadAllActiveTabs();
         return;
       }
       super.on_click(event);

src/zen/folders/ZenFolders.mjs

@@ -133,8 +133,11 @@
           case 'context_zenFolderRename':
             this.#lastFolderContextMenu.rename();
             break;
-          case 'context_zenFolderExpand':
+          case 'context_zenFolderUnpack':
-            this.#lastFolderContextMenu.expandGroupTabs();
+            this.#lastFolderContextMenu.unpackTabs();
+            break;
+          case 'context_zenFolderUnloadAll':
+            this.#lastFolderContextMenu.unloadAllTabs(event);
             break;
           case 'context_zenFolderNewSubfolder':
             this.#lastFolderContextMenu.createSubfolder();
@@ -448,11 +451,12 @@
       });
 
       animations.push(...this.updateFolderIcon(group));
+      const startMargin = -(heightUntilSelected + 4 * (selectedItems.length === 0 ? 1 : 0));
       animations.push(
         gZenUIManager.motion.animate(
           groupStart,
           {
-            marginTop: -(heightUntilSelected + 4 * (selectedItems.length === 0 ? 1 : 0)),
+            marginTop: startMargin,
           },
           { duration: 0.12, ease: 'easeInOut' }
         )
@@ -1235,6 +1239,11 @@
     }
 
     collapseVisibleTab(group, onlyIfActive = false, selectedTab = null) {
+      let tabsToCollapse = [selectedTab];
+      if (group?.hasAttribute('split-view-group')) {
+        group = group.group;
+        tabsToCollapse = group.tabs;
+      }
       if (!group?.isZenFolder) return;
 
       if (onlyIfActive && group.activeGroups.length && selectedTab) {
@@ -1255,7 +1264,7 @@
       for (const item of group._prevActiveTabs) {
         if (
           item.hasAttribute('folder-active') &&
-          (selectedTab ? item === selectedTab : !item.selected || !onlyIfActive)
+          (selectedTab ? tabsToCollapse.includes(item) : !item.selected || !onlyIfActive)
         ) {
           item.removeAttribute('folder-active');
           group.activeTabs = group.activeTabs.filter((t) => t !== item);

src/zen/folders/zen-folders.css

@@ -277,7 +277,6 @@ zen-folder {
           fill-opacity: 0.9;
           -moz-context-properties: fill, fill-opacity;
           fill: var(--zen-folder-stroke);
-          transform: translate(-180%, 2.5px);
         }
       }
 
@@ -341,7 +340,7 @@ zen-folder {
     }
   }
 
-  &[has-active] > .tab-group-label-container {
+  :root[zen-sidebar-expanded] &[has-active] > .tab-group-label-container {
     & .tab-reset-button {
       display: flex;
       opacity: 0;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -733,7 +733,7 @@
     async _onCloseTabShortcut(
       event,
       selectedTab = gBrowser.selectedTab,
-      behavior = lazy.zenPinnedTabCloseShortcutBehavior
+      { behavior = lazy.zenPinnedTabCloseShortcutBehavior, noClose = false } = {}
     ) {
       if (!selectedTab?.pinned) {
         return;
@@ -742,6 +742,10 @@
       event.stopPropagation();
       event.preventDefault();
 
+      if (noClose && behavior === 'close') {
+        behavior = 'unload-switch';
+      }
+
       switch (behavior) {
         case 'close':
           this._removePinnedAttributes(selectedTab, true);
@@ -780,7 +784,11 @@
               /* only if active */ true,
               selectedTab
             );
-            await gBrowser.explicitUnloadTabs([selectedTab]);
+            let tabsToUnload = [selectedTab];
+            if (selectedTab.group?.hasAttribute('split-view-group')) {
+              tabsToUnload = selectedTab.group.tabs;
+            }
+            await gBrowser.explicitUnloadTabs(tabsToUnload);
             selectedTab.removeAttribute('discarded');
           }
           if (selectedTab.selected) {