feat: Added context menus to workspace icons at the button and small fixes, b=no-bug, c=common, workspaces

Author: mr-cheffy

l10n

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..cc61d5a845b5ce22a61f5a1aab8b280b2bcdf101 100644
+index 30e7b9b2ac63db6ccd2727a9341081cecefc25cb..ceff29d10a32fe9e5296340c8c56a2fdbf321c31 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@

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

@@ -12,6 +12,7 @@
   <menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-change-name" command="cmd_zenChangeWorkspaceName"/>
   <menuitem id="context_zenEditWorkspaceIcon" data-l10n-id="zen-workspaces-panel-change-icon" command="cmd_zenChangeWorkspaceIcon"/>
   <menuitem class="zenToolbarThemePicker"
+          id="context_zenChangeWorkspaceTheme"
           data-l10n-id="zen-workspaces-change-theme"
           command="cmd_zenOpenZenThemePicker"/>
   <menu id="context_zenWorkspacesOpenInContainerTab"
@@ -25,5 +26,6 @@
   <menuseparator/>
   <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>
   <menuseparator/>
+  <menuitem data-l10n-id="zen-panel-ui-workspaces-create" command="cmd_zenOpenWorkspaceCreation"/>
   <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
 </menupopup>

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

@@ -116,7 +116,7 @@ export var ZenCustomizableUI = new (class {
       const handlePopupHidden = () => {
         window.setTimeout(() => {
           button.removeAttribute('open');
-        }, 100);
+        }, 500);
         window.gZenUIManager.motion.animate(
           image,
           { transform: ['rotate(45deg)', 'rotate(0deg)'] },

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -41,8 +41,6 @@
           document.getElementById('zen-appcontent-wrapper').prepend(deckTemplate);
         }
 
-        this._hideUnusedElements();
-
         gZenWorkspaces.init();
         gZenUIManager.init();
 
@@ -148,16 +146,6 @@
       }
     },
 
-    _hideUnusedElements() {
-      const kElements = ['firefox-view-button'];
-      for (let id of kElements) {
-        const elem = document.getElementById(id);
-        if (elem) {
-          elem.setAttribute('hidden', 'true');
-        }
-      }
-    },
-
     _initSearchBar() {
       // Only focus the url bar
       gURLBar.focus();

src/zen/common/ZenStartup.mjs

@@ -83,7 +83,7 @@ var gZenUIManager = {
       '--zen-urlbar-top',
       `${window.innerHeight / 2 - Math.max(kUrlbarHeight, gURLBar.textbox.getBoundingClientRect().height) / 2}px`
     );
-    gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 2}px`);
+    gURLBar.textbox.style.setProperty('--zen-urlbar-width', `${window.innerWidth / 3}px`);
     gZenVerticalTabsManager.actualWindowButtons.removeAttribute('zen-has-hover');
     gZenVerticalTabsManager.recalculateURLBarHeight();
     if (!this._preventToolbarRebuild) {

src/zen/common/ZenUIManager.mjs

@@ -36,6 +36,11 @@ body > #confetti {
   min-height: 30px;
 }
 
+/* Firefox View */
+#firefox-view-button {
+  display: none !important;
+}
+
 /* Emojis picker */
 
 #PanelUI-zen-emojis-picker {

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

@@ -24,7 +24,7 @@
 
       this.addEventListener('mousedown', (e) => {
         const target = e.target.closest('toolbarbutton[zen-workspace-id]');
-        if (!target) {
+        if (!target || e.button != 0 || e.ctrlKey || e.shiftKey || e.altKey) {
           return;
         }
 
@@ -89,6 +89,7 @@
       button.setAttribute('class', 'subviewbutton');
       button.setAttribute('tooltiptext', workspace.name);
       button.setAttribute('zen-workspace-id', workspace.uuid);
+      button.setAttribute('context', 'zenWorkspaceMoreActions');
       const icon = document.createXULElement('label');
       icon.setAttribute('class', 'zen-workspace-icon');
       if (gZenWorkspaces.workspaceHasIcon(workspace)) {

src/zen/workspaces/ZenWorkspaceIcons.mjs

@@ -1028,9 +1028,13 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   changeWorkspaceIcon() {
-    const anchor = this.activeWorkspaceIndicator?.querySelector(
+    let anchor = this.activeWorkspaceIndicator?.querySelector(
       '.zen-current-workspace-indicator-icon'
     );
+    if (this.#contextMenuData?.workspaceId) {
+      anchor = this.#contextMenuData.originalTarget;
+    }
+    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
     if (!anchor) {
       return;
     }
@@ -1042,7 +1046,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     gZenEmojiPicker
       .open(anchor)
       .then(async (emoji) => {
-        const workspace = this.getActiveWorkspaceFromCache();
+        const workspace = this.getWorkspaceFromId(workspaceId);
         if (!workspace) {
           console.warn('No active workspace found to change icon');
           return;
@@ -1129,6 +1133,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
   addPopupListeners() {
     const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
     workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this));
+    workspaceActions.addEventListener('popuphidden', () => {
+      setTimeout(() => {
+        this.#contextMenuData = null;
+      }, 0); // Delay to ensure the context menu data is cleared after the popup is hidden
+    });
 
     const contextChangeContainerTabMenu = document.getElementById(
       'context_zenWorkspacesOpenInContainerTab'
@@ -1143,6 +1152,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
   }
 
+  #contextMenuData = null;
   updateWorkspaceActionsMenu(event) {
     if (event.target.id !== 'zenWorkspaceMoreActions') {
       return;
@@ -1155,10 +1165,35 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     } else {
       openInContainerMenuItem.setAttribute('hidden', 'true');
     }
+    const target = event.explicitOriginalTarget?.closest('toolbarbutton');
+    this.#contextMenuData = {
+      workspaceId: target?.getAttribute('zen-workspace-id'),
+      originalTarget: target,
+    };
+    const workspaceName = document.getElementById('context_zenEditWorkspace');
+    const themePicker = document.getElementById('context_zenChangeWorkspaceTheme');
+    workspaceName.hidden =
+      this.#contextMenuData.workspaceId &&
+      this.#contextMenuData.workspaceId !== this.activeWorkspace;
+    themePicker.hidden =
+      this.#contextMenuData.workspaceId &&
+      this.#contextMenuData.workspaceId !== this.activeWorkspace;
+    event.target.addEventListener(
+      'popuphidden',
+      () => {
+        this.#contextMenuData = null;
+      },
+      { once: true }
+    );
   }
 
   updateWorkspaceActionsMenuContainer(event) {
-    const workspace = this.getActiveWorkspaceFromCache();
+    let workspace;
+    if (this.#contextMenuData?.workspaceId) {
+      workspace = this.getWorkspaceFromId(this.#contextMenuData.workspaceId);
+    } else {
+      workspace = this.getActiveWorkspaceFromCache();
+    }
     let containerTabId = workspace.containerTabId;
     return window.createUserContextMenu(event, {
       isContextMenu: true,
@@ -2349,12 +2384,12 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
     this._organizingWorkspaceStrip = true;
     let workspaces = await this._workspaces();
     let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this.activeWorkspace
+      (workspace) => workspace.uuid === (this.#contextMenuData?.workspaceId || this.activeWorkspace)
     );
     let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
     workspace.containerTabId = userContextId + 0; // +0 to convert to number
     await this.saveWorkspace(workspace);
-    await this._organizeWorkspaceStripLocations(workspace, true);
+    await this._organizeWorkspaceStripLocations(this.getActiveWorkspaceFromCache(), true);
     await gZenWorkspaces.updateTabsContainers();
     this.tabContainer._invalidateCachedTabs();
   }
@@ -2365,7 +2400,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       { id: 'zen-workspaces-delete-workspace-body' },
     ]);
     if (Services.prompt.confirm(null, title, body)) {
-      await this.removeWorkspace(this.activeWorkspace);
+      await this.removeWorkspace(this.#contextMenuData?.workspaceId || this.activeWorkspace);
     }
   }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -41,11 +41,15 @@
     align-items: center;
     position: relative;
 
-    & .zen-workspace-icon[no-icon='true'] {
-      width: 6px;
-      height: 6px;
-      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
-      border-radius: 50%;
+    & .zen-workspace-icon {
+      pointer-events: none;
+   
+      &[no-icon='true'] {
+        width: 6px;
+        height: 6px;
+        background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+        border-radius: 50%;
+      }
     }
 
     filter: grayscale(1);