Merge branch 'dev' into new-onboarding

2026-08-28 17:31:32 +00:00 · 2025-02-15 11:55:10 +01:00
parent ca11631531 534627fd11
commit cabd426801
16 changed files with 318 additions and 153 deletions
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -14,6 +14,10 @@ var gZenUIManager = {
      return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { global: 'current' });
    });

+    ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
+      return document.getElementById('zen-toast-container');
+    });
+
    new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(document.getElementById('TabsToolbar'));

    new ResizeObserver(
@@ -209,6 +213,38 @@ var gZenUIManager = {
      }
    }
  },
+
+  // Section: Notification messages
+  _createToastElement(messageId, options) {
+    const element = document.createXULElement('vbox');
+    const label = document.createXULElement('label');
+    document.l10n.setAttributes(label, messageId, options);
+    element.appendChild(label);
+    if (options.descriptionId) {
+      const description = document.createXULElement('label');
+      description.classList.add('description');
+      document.l10n.setAttributes(description, options.descriptionId, options);
+      element.appendChild(description);
+    }
+    element.classList.add('zen-toast');
+    return element;
+  },
+
+  async showToast(messageId, options = {}) {
+    const toast = this._createToastElement(messageId, options);
+    this._toastContainer.removeAttribute('hidden');
+    this._toastContainer.appendChild(toast);
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', duration: 0.3 });
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+    await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
+    const toastHeight = toast.getBoundingClientRect().height;
+    // 5 for the separation between toasts
+    await this.motion.animate(toast, { marginBottom: [0, `-${toastHeight + 5}px`] }, { duration: 0.2 });
+    toast.remove();
+    if (!this._toastContainer.hasChildNodes()) {
+      this._toastContainer.setAttribute('hidden', 'true');
+    }
+  },
 };

 var gZenVerticalTabsManager = {
@@ -248,6 +284,9 @@ var gZenVerticalTabsManager = {
    if (!this.isWindowsStyledButtons) {
      document.documentElement.setAttribute('zen-window-buttons-reversed', true);
    }
+
+    this._renameTabHalt = this.renameTabHalt.bind(this);
+    gBrowser.tabContainer.addEventListener('dblclick', this.renameTabStart.bind(this));
  },

  toggleExpand() {
@@ -613,4 +652,85 @@ var gZenVerticalTabsManager = {
    }
    target.appendChild(child);
  },
+
+  renameTabKeydown(event) {
+    if (event.key === 'Enter') {
+      let label = this._tabEdited.querySelector('.tab-label-container-editing');
+      let input = this._tabEdited.querySelector('#tab-label-input');
+      let newName = input.value.trim();
+
+      // Check if name is blank, reset if so
+      // Always remove, so we can always rename and if it's empty,
+      // it will reset to the original name anyway
+      this._tabEdited.removeAttribute('zen-has-static-label');
+      if (newName) {
+        gBrowser._setTabLabel(this._tabEdited, newName);
+        this._tabEdited.setAttribute('zen-has-static-label', 'true');
+      } else {
+        gBrowser.setTabTitle(this._tabEdited);
+      }
+
+      // Maybe add some confetti here?!?
+      gZenUIManager.motion.animate(
+        this._tabEdited,
+        {
+          scale: [1, 0.98, 1],
+        },
+        {
+          duration: 0.25,
+        }
+      );
+
+      this._tabEdited.querySelector('.tab-editor-container').remove();
+      label.classList.remove('tab-label-container-editing');
+
+      this._tabEdited = null;
+    } else if (event.key === 'Escape') {
+      event.target.blur();
+    }
+  },
+
+  renameTabStart(event) {
+    if (
+      this._tabEdited ||
+      !Services.prefs.getBoolPref('zen.tabs.rename-tabs') ||
+      Services.prefs.getBoolPref('browser.tabs.closeTabByDblclick') ||
+      !gZenVerticalTabsManager._prefsSidebarExpanded
+    )
+      return;
+    this._tabEdited = event.target.closest('.tabbrowser-tab');
+    if (!this._tabEdited || !this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) {
+      this._tabEdited = null;
+      return;
+    }
+    const label = this._tabEdited.querySelector('.tab-label-container');
+    label.classList.add('tab-label-container-editing');
+
+    const container = window.MozXULElement.parseXULToFragment(`
+      <vbox class="tab-label-container tab-editor-container" flex="1" align="start" pack="center"></vbox>
+    `);
+    label.after(container);
+    const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
+    const input = document.createElement('input');
+    input.id = 'tab-label-input';
+    input.value = this._tabEdited.label;
+    input.addEventListener('keydown', this.renameTabKeydown.bind(this));
+
+    containerHtml.appendChild(input);
+    input.focus();
+    input.select();
+
+    input.addEventListener('blur', this._renameTabHalt);
+  },
+
+  renameTabHalt(event) {
+    if (document.activeElement === event.target || !this._tabEdited) {
+      return;
+    }
+    this._tabEdited.querySelector('.tab-editor-container').remove();
+    const label = this._tabEdited.querySelector('.tab-label-container-editing');
+    label.classList.remove('tab-label-container-editing');
+
+    this._tabEdited = null;
+  },
 };
--- a/src/browser/base/content/browser-xhtml.patch
+++ b/src/browser/base/content/browser-xhtml.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/browser.xhtml b/browser/base/content/browser.xhtml
-index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b09d63ac5 100644
+index 891c067d6ad718061c410c04743bed25744504b5..b7ded9691225068b23e4d6a5113242d0c0f5f842 100644
 --- a/browser/base/content/browser.xhtml
 +++ b/browser/base/content/browser.xhtml
@@ -99,6 +99,8 @@
@@ -19,7 +19,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b
 </head>
 <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 # All sets except for popupsets (commands, keys, and stringbundles)
-@@ -164,9 +167,12 @@
+@@ -164,9 +167,13 @@
     </vbox>
   </html:template>
 
@@ -27,6 +27,7 @@ index 891c067d6ad718061c410c04743bed25744504b5..560abfe817b94f535919ed29c21a912b
 -
 -#include browser-box.inc.xhtml
 +  <hbox id="zen-main-app-wrapper" flex="1" persist="zen-compact-mode">
+    <vbox id="zen-toast-container"></vbox>
 +    #include navigator-toolbox.inc.xhtml
 +    <html:span id="zen-sidebar-box-container">
 +    </html:span>
--- a/src/browser/base/content/zen-styles/zen-popup.css
+++ b/src/browser/base/content/zen-styles/zen-popup.css
@@ -349,3 +349,30 @@ menuitem {
 #editBMPanel_workspaceList input[type='checkbox'] {
  margin-right: 8px;
 }
+
+/* Section: Toast notifications */
+
+#zen-toast-container {
+  position: fixed;
+  top: calc(var(--zen-element-separation) * 2);
+  right: calc(var(--zen-element-separation) * 2);
+  z-index: 1000;
+  gap: 1rem;
+
+  & .zen-toast {
+    padding: 0.9rem 0.8rem;
+    border-radius: 12px;
+    background-color: var(--button-primary-bgcolor);
+    color: var(--button-primary-color);
+    box-shadow: var(--zen-big-shadow);
+    display: flex;
+    gap: 5px;
+    flex-direction: column;
+    gap: 2px;
+    width: fit-content;
+
+    & .description {
+      opacity: 0.6;
+    }
+  }
+}
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -280,10 +280,6 @@
      }
    }

-    &[selected] .tab-background {
-      backdrop-filter: blur(10px);
-    }
-
    @media (-moz-bool-pref: 'zen.tabs.dim-pending') {
      &[pending='true'] .tab-icon-image {
        opacity: 0.5;
@@ -326,13 +322,18 @@
    /* On essentials, glance tabs are floating */
    &[zen-essential='true'] .tabbrowser-tab {
      position: absolute;
-      top: 4px;
-      right: 4px;
-      --tab-collapsed-width: 35px;
+      top: 0px;
+      right: 0px;
+      --tab-collapsed-width: 34px;
      --tab-min-height: 16px;
      width: var(--tab-collapsed-width) !important;
      z-index: 1;
      pointer-events: none;
+      & .tab-background {
+        /* Solid colors because we don't want to show the background */
+        background: light-dark(rgb(249, 249, 249), rgb(63, 63, 63)) !important;
+        border: 2px solid light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      }
    }
  }
 }
@@ -954,7 +955,7 @@
  padding: 0;
 }

-#zen-essentials-container .tabbrowser-tab {
+#zen-essentials-container > .tabbrowser-tab {
  --toolbarbutton-inner-padding: 0;
  max-width: unset;
  width: 100% !important;
@@ -994,7 +995,7 @@
  }

  @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
-    &[visuallyselected] .tab-background {
+    &[visuallyselected] > .tab-stack > .tab-background {
      &::after {
        content: "";
        inset: -50%;
@@ -1138,6 +1139,20 @@
  box-shadow: -3px 0 6px -2px var(--toolbarbutton-active-background, rgba(0, 255, 0, 0.2));
 }

+/* Renaming tabs */
+.tab-label-container-editing {
+  display: none !important;
+}
+
+#tab-label-input {
+  white-space: nowrap;
+  overflow-x: scroll;
+  margin: 0;
+  background: transparent;
+  border: none;
+  padding: 0;
+}
+
 /* Section: tab workspaces stylings */
 .zen-workspace-tabs-section {
  position: absolute;
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -161,15 +161,10 @@

  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
-    --zen-themed-toolbar-bg-transparency: 0;
+    --zen-themed-toolbar-bg-transparent: transparent;
    @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparency: 15%;
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
    }
-    --zen-themed-toolbar-bg-transparent: color-mix(
-      in srgb,
-      var(--zen-themed-toolbar-bg) calc(100% - var(--zen-themed-toolbar-bg-transparency)),
-      transparent var(--zen-themed-toolbar-bg-transparency)
-    );
  }

  --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -73,6 +73,10 @@
          filter: grayscale(0);
          opacity: 1;
        }
+
+        &:hover {
+          background-color: var(--zen-toolbar-element-bg);
+        }
      }
    }
  }
--- a/src/browser/base/zen-components/ZenCommonUtils.mjs
+++ b/src/browser/base/zen-components/ZenCommonUtils.mjs
@@ -69,7 +69,7 @@ var gZenCommonActions = {
      transferable.addDataFlavor('text/plain');
      transferable.setTransferData('text/plain', str);
      Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
-      ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-copy-current-url-confirmation');
+      gZenUIManager.showToast('zen-copy-current-url-confirmation');
    }
  },
  copyCurrentURLAsMarkdownToClipboard() {
@@ -84,7 +84,7 @@ var gZenCommonActions = {
      transferable.addDataFlavor('text/plain');
      transferable.setTransferData('text/plain', str);
      Services.clipboard.setData(transferable, null, Ci.nsIClipboard.kGlobalClipboard);
-      ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-copy-current-url-confirmation');
+      gZenUIManager.showToast('zen-copy-current-url-confirmation');
    }
  },

--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -725,7 +725,7 @@
      if (!skipSave) {
        await ZenWorkspacesStorage.saveWorkspaceTheme(currentWorkspace.uuid, gradient);
        await ZenWorkspaces._propagateWorkspaceData();
-        ConfirmationHint.show(document.getElementById('PanelUI-menu-button'), 'zen-panel-ui-gradient-generator-saved-message');
+        gZenUIManager.showToast('zen-panel-ui-gradient-generator-saved-message');
        currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
      }

--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -615,68 +615,70 @@
      document.getElementById('context_zen-pinned-tab-separator').hidden = !isVisible;
    }

-    moveToAnotherTabContainerIfNecessary(event, draggedTab) {
+    moveToAnotherTabContainerIfNecessary(event, movingTabs) {
      const pinnedTabsTarget =
        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
      const essentialTabsTarget = event.target.closest('#zen-essentials-container');
      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');

-      let moved = false;
      let isVertical = this.expandedSidebarMode;
-      let isRegularTabs = false;
-      // Check for pinned tabs container
-      if (pinnedTabsTarget) {
-        if (!draggedTab.pinned) {
-          gBrowser.pinTab(draggedTab);
-          moved = true;
-        } else if (draggedTab.hasAttribute('zen-essential')) {
-          this.removeEssentials(draggedTab);
-          gBrowser.pinTab(draggedTab);
-          moved = true;
-        }
-      }
-      // Check for essentials container
-      else if (essentialTabsTarget) {
-        if (!draggedTab.hasAttribute('zen-essential')) {
-          this.addToEssentials(draggedTab);
-          moved = true;
-          isVertical = false;
-        }
-      }
-      // Check for normal tabs container
-      else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
-        if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
-          gBrowser.unpinTab(draggedTab);
-          moved = true;
-          isRegularTabs = true;
-        } else if (draggedTab.hasAttribute('zen-essential')) {
-          this.removeEssentials(draggedTab);
-          moved = true;
-          isRegularTabs = true;
-        }
-      }
-
-      // If the tab was moved, adjust its position relative to the target tab
-      if (moved) {
-        const targetTab = event.target.closest('.tabbrowser-tab');
-        if (targetTab) {
-          const rect = targetTab.getBoundingClientRect();
-          let newIndex = targetTab._tPos;
-
-          if (isVertical) {
-            const middleY = targetTab.screenY + rect.height / 2;
-            if (!isRegularTabs && event.screenY > middleY) {
-              newIndex++;
-            } else if (isRegularTabs && event.screenY < middleY) {
-              newIndex--;
-            }
-          } else {
-            const middleX = targetTab.screenX + rect.width / 2;
-            if (event.screenX > middleX) {
-              newIndex++;
-            }
+      let moved = false;
+      for (const draggedTab of movingTabs) {
+        let isRegularTabs = false;
+        // Check for pinned tabs container
+        if (pinnedTabsTarget) {
+          if (!draggedTab.pinned) {
+            gBrowser.pinTab(draggedTab);
+            moved = true;
+          } else if (draggedTab.hasAttribute('zen-essential')) {
+            this.removeEssentials(draggedTab);
+            gBrowser.pinTab(draggedTab);
+            moved = true;
+          }
+        }
+        // Check for essentials container
+        else if (essentialTabsTarget) {
+          if (!draggedTab.hasAttribute('zen-essential')) {
+            this.addToEssentials(draggedTab);
+            moved = true;
+            isVertical = false;
+          }
+        }
+        // Check for normal tabs container
+        else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
+          if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
+            gBrowser.unpinTab(draggedTab);
+            moved = true;
+            isRegularTabs = true;
+          } else if (draggedTab.hasAttribute('zen-essential')) {
+            this.removeEssentials(draggedTab);
+            moved = true;
+            isRegularTabs = true;
+          }
+        }
+
+        // If the tab was moved, adjust its position relative to the target tab
+        if (moved) {
+          const targetTab = event.target.closest('.tabbrowser-tab');
+          if (targetTab) {
+            const rect = targetTab.getBoundingClientRect();
+            let newIndex = targetTab._tPos;
+
+            if (isVertical) {
+              const middleY = targetTab.screenY + rect.height / 2;
+              if (!isRegularTabs && event.screenY > middleY) {
+                newIndex++;
+              } else if (isRegularTabs && event.screenY < middleY) {
+                newIndex--;
+              }
+            } else {
+              const middleX = targetTab.screenX + rect.width / 2;
+              if (event.screenX > middleX) {
+                newIndex++;
+              }
+            }
+            gBrowser.moveTabTo(draggedTab, newIndex);
          }
-          gBrowser.moveTabTo(draggedTab, newIndex);
        }
      }

--- a/src/browser/base/zen-components/ZenViewSplitter.mjs
+++ b/src/browser/base/zen-components/ZenViewSplitter.mjs
@@ -192,14 +192,13 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {

  afterRearangeAction() {
    document.getElementById('zenSplitViewModifier').hidePopup();
-    ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-enabled-toast', {
+    gZenUIManager.showToast('zen-split-view-modifier-enabled-toast', {
      descriptionId: 'zen-split-view-modifier-enabled-toast-description',
-      showDescription: true,
    });
  }

  afterRearangeRemove() {
-    ConfirmationHint.show(document.getElementById('zen-split-views-box'), 'zen-split-view-modifier-disabled-toast');
+    gZenUIManager.showToast('zen-split-view-modifier-disabled-toast');
  }

  toggleWrapperDisplay(value) {