Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

2025-09-05 19:08:18 +00:00 · 2025-06-09 19:12:28 +02:00
parent d786c6927f 2a0113408c
commit 84072192b9
24 changed files with 428 additions and 704 deletions
--- a/2
+++ b/2
--- a/src/browser/app/profile/performance.inc
+++ b/src/browser/app/profile/performance.inc
@@ -16,7 +16,3 @@ pref("browser.lowMemoryResponseMask", 3);
 #endif

 pref("network.predictor.enable-hover-on-ssl", true);
-
-// Experimental Zen Features
-// Strategy to use for bytecode cache (Thanks https://github.com/gunir)
-pref('dom.script_loader.bytecode_cache.strategy', 2);
--- a/src/browser/app/profile/smoothscroll.inc
+++ b/src/browser/app/profile/smoothscroll.inc
@@ -2,9 +2,6 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.

-pref("apz.overscroll.enabled", true);
-pref("general.smoothScroll", true);
-pref("general.smoothScroll.msdPhysics.enabled", true);
 pref("general.smoothScroll.currentVelocityWeighting", "0.15");
 pref("general.smoothScroll.stopDecelerationWeighting", "0.6");
 pref("mousewheel.min_line_scroll_amount", 10);
--- a/src/browser/base/content/zen-assets.inc.xhtml
+++ b/src/browser/base/content/zen-assets.inc.xhtml
@@ -55,3 +55,4 @@
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenGlanceManager.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenMediaController.mjs"></script>
 <script type="text/javascript" src="chrome://browser/content/zen-components/ZenDownloadAnimation.mjs"></script>
+<script type="text/javascript" src="chrome://browser/content/zen-components/ZenEmojiPicker.mjs"></script>
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -8,11 +8,12 @@
        content/browser/zen-sets.js                                             (../../zen/common/zen-sets.js)
        content/browser/ZenUIManager.mjs                                        (../../zen/common/ZenUIManager.mjs)
        content/browser/zen-components/ZenActorsManager.mjs                     (../../zen/common/ZenActorsManager.mjs)
-        content/browser/zen-components/ZenEmojis.mjs                            (../../zen/common/ZenEmojis.mjs)
        content/browser/ZenCustomizableUI.sys.mjs                               (../../zen/common/ZenCustomizableUI.sys.mjs)
        content/browser/zen-components/ZenUIMigration.mjs                       (../../zen/common/ZenUIMigration.mjs)
        content/browser/zen-components/ZenCommonUtils.mjs                       (../../zen/common/ZenCommonUtils.mjs)
        content/browser/zen-components/ZenSessionStore.mjs                      (../../zen/common/ZenSessionStore.mjs)
+        content/browser/zen-components/ZenEmojisData.min.mjs                        (../../zen/common/emojis/ZenEmojisData.min.mjs)
+        content/browser/zen-components/ZenEmojiPicker.mjs                       (../../zen/common/emojis/ZenEmojiPicker.mjs)

        content/browser/zen-styles/zen-theme.css                                (../../zen/common/styles/zen-theme.css)
        content/browser/zen-styles/zen-buttons.css                              (../../zen/common/styles/zen-buttons.css)
--- a/src/browser/base/content/zen-keysets.inc.xhtml
+++ b/src/browser/base/content/zen-keysets.inc.xhtml
@@ -36,6 +36,11 @@
  <command id="cmd_contextZenAddToEssentials" />
  <command id="cmd_contextZenRemoveFromEssentials" />

+  <command id="cmd_zenCtxDeleteWorkspace" />
+  <command id="cmd_zenChangeWorkspaceName" />
+  <command id="cmd_zenChangeWorkspaceIcon" />
+  <command id="cmd_zenOpenWorkspacePanel" />
+
  <command id="cmd_zenPinnedTabReset" />
  <command id="cmd_zenPinnedTabResetNoTab" />

--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -74,50 +74,23 @@
      <html:div id="PanelUI-zen-workspaces-list">
      </html:div>
    </panelview>
-    <panelview id="PanelUI-zen-workspaces-create" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox class="PanelUI-zen-workspaces-user-create">
-        <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
-        <hbox class="PanelUI-zen-workspaces-creation-wraper">
-          <hbox class="PanelUI-zen-workspaces-icons-container create"></hbox>
-          <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" />
-        </hbox>
-      </vbox>
-      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
-        <button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-create-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
-        </button>
-        <button id="PanelUI-zen-workspaces-create-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
-        </button>
-      </html:moz-button-group>
-    </panelview>
-    <panelview id="PanelUI-zen-workspaces-edit" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox class="PanelUI-zen-workspaces-user-create">
-        <h1 data-l10n-id="zen-panel-ui-workspaces-edit-text"></h1>
-        <hbox class="PanelUI-zen-workspaces-creation-wraper">
-          <hbox class="PanelUI-zen-workspaces-icons-container edit"></hbox>
-          <html:input autofocus="true" id="PanelUI-zen-workspaces-edit-input" type="text" placeholder="Enter workspace name" />
-        </hbox>
-      </vbox>
-      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-edit-footer">
-        <button disabled="true" default="true" slot="primary" id="PanelUI-zen-workspaces-edit-save" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-save">
-        </button>
-        <button id="PanelUI-zen-workspaces-edit-cancel" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-edit-cancel">
-        </button>
-      </html:moz-button-group>
-    </panelview>
-    <panelview id="PanelUI-zen-workspaces-icon-picker" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
-      <vbox id="PanelUI-zen-workspaces-icon-picker-wrapper">
-        <html:div id="PanelUI-zen-workspaces-icon-search-bar">
-          <html:input autofocus="true" type="text" id="PanelUI-zen-workspaces-icon-search-input"/>
-        </html:div>
-      </vbox>
-    </panelview>
  </panelmultiview>
 </panel>

-<menupopup id="zenWorkspaceActionsMenu">
-  <menuitem id="context_zenOpenWorkspace" data-l10n-id="zen-workspaces-panel-context-open"/>
-  <menuseparator/>
-  <menuitem id="context_zenEditWorkspace" data-l10n-id="zen-workspaces-panel-context-edit"/>
+<panel type="arrow" orient="vertical" id="PanelUI-zen-emojis-picker" position="bottomright topright" side="bottom">
+  <hbox id="PanelUI-zen-emojis-picker-header">
+    <html:input type="search" id="PanelUI-zen-emojis-picker-search" placeholder="Search emojis" />
+    <toolbarbutton id="PanelUI-zen-emojis-picker-none" class="toolbarbutton-1" />
+  </hbox>
+  <hbox id="PanelUI-zen-emojis-picker-list" />
+</panel>
+
+<menupopup id="zenWorkspaceMoreActions">
+  <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"
+          data-l10n-id="zen-workspaces-change-gradient"
+          command="cmd_zenOpenZenThemePicker"/>
  <menu id="context_zenWorkspacesOpenInContainerTab"
    data-l10n-id="zen-workspaces-panel-context-open-in-container-tab"
    selection-type="single"
@@ -127,5 +100,7 @@
    <menupopup />
  </menu>
  <menuseparator/>
-  <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete"/>
+  <menuitem id="context_zenOpenWorkspacePanel" data-l10n-id="zen-workspaces-panel-context-manage" command="cmd_zenOpenWorkspacePanel"/>
+  <menuseparator/>
+  <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
 </menupopup>
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -39,6 +39,7 @@
 .close-icon,
 #zen-sidebar-web-panel-close,
 #zen-glance-sidebar-close,
+#PanelUI-zen-emojis-picker-none,
 .zen-theme-picker-custom-list-item-remove {
  list-style-image: url('close.svg') !important;
 }
@@ -107,6 +108,7 @@

 #PanelUI-menu-button,
 #appMenu-more-button2,
+.zen-workspaces-actions,
 #zen-workspace-actions-menu-icon {
  list-style-image: url('menu.svg') !important;
 }
--- a/src/dom/script/ScriptLoader-cpp.patch
+++ b/src/dom/script/ScriptLoader-cpp.patch
@@ -1,41 +0,0 @@
-diff --git a/dom/script/ScriptLoader.cpp b/dom/script/ScriptLoader.cpp
-index 51f63f998e47aa4b1dffc3cacdb0a698b33b4623..0387738ce1f29b5db4a5d03a3b2f5f3a91011125 100644
--- a/dom/script/ScriptLoader.cpp
-+++ b/dom/script/ScriptLoader.cpp
-@@ -2679,6 +2679,36 @@ void ScriptLoader::CalculateBytecodeCacheFlag(ScriptLoadRequest* aRequest) {
-       hasFetchCountMin = false;
-       break;
-     }
-+    case 1: {
-+      // 1!
-+      hasSourceLengthMin = true;
-+      hasFetchCountMin = true;
-+      sourceLengthMin = 1024;
-+      // If we were to optimize only for speed, without considering the impact
-+      // on memory, we should set this threshold to 2. (Bug 900784 comment 120)
-+      fetchCountMin = 1;
-+      break;
-+    }
-+    case 2: {
-+      // 2!
-+      hasSourceLengthMin = true;
-+      hasFetchCountMin = true;
-+      sourceLengthMin = 1024;
-+      // If we were to optimize only for speed, without considering the impact
-+      // on memory, we should set this threshold to 2. (Bug 900784 comment 120)
-+      fetchCountMin = 2;
-+      break;
-+    }
-+    case 3: {
-+      // 3!
-+      hasSourceLengthMin = true;
-+      hasFetchCountMin = true;
-+      sourceLengthMin = 1024;
-+      // If we were to optimize only for speed, without considering the impact
-+      // on memory, we should set this threshold to 2. (Bug 900784 comment 120)
-+      fetchCountMin = 3;
-+      break;
-+    }
-     default:
-     case 0: {
-       hasSourceLengthMin = true;
--- a/src/zen/common/ZenEmojis.mjs
+++ b/src/zen/common/ZenEmojis.mjs
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -59,7 +59,7 @@ var gZenUIManager = {
      )
    ).observe(gNavToolbox);

-    SessionStore.promiseAllWindowsRestored.then(() => {
+    gZenWorkspaces.promiseInitialized.finally(() => {
      this._hasLoadedDOM = true;
      this.updateTabsToolbar();
    });
@@ -157,7 +157,9 @@ var gZenUIManager = {
      if (
        !el.contains(showEvent.explicitOriginalTarget) ||
        (showEvent.explicitOriginalTarget instanceof Element &&
-          showEvent.explicitOriginalTarget?.closest('panel'))
+          showEvent.explicitOriginalTarget?.closest('panel')) ||
+        // See bug #7590: Ignore menupopup elements opening
+        showEvent.explicitOriginalTarget.tagName === 'menupopup'
      ) {
        continue;
      }
@@ -599,7 +601,7 @@ var gZenVerticalTabsManager = {
  },

  animateTab(aTab) {
-    if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM) {
+    if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
      return;
    }
    // get next visible tab
@@ -624,7 +626,11 @@ var gZenVerticalTabsManager = {
            easing: 'ease-out',
          }
        )
-        .then(() => {
+        .then(() => {})
+        .catch((err) => {
+          console.error(err);
+        })
+        .finally(() => {
          aTab.style.removeProperty('margin-bottom');
          aTab.style.removeProperty('transform');
          aTab.style.removeProperty('opacity');
@@ -640,7 +646,11 @@ var gZenVerticalTabsManager = {
            easing: 'ease-out',
          }
        )
-        .then(() => {
+        .then(() => {})
+        .catch((err) => {
+          console.error(err);
+        })
+        .finally(() => {
          aTab.querySelector('.tab-stack').style.removeProperty('filter');
        });
    } catch (e) {
@@ -1074,7 +1084,9 @@ var gZenVerticalTabsManager = {
      !gZenVerticalTabsManager._prefsSidebarExpanded
    )
      return;
-    this._tabEdited = event.target.closest('.tabbrowser-tab');
+    this._tabEdited =
+      event.target.closest('.tabbrowser-tab') ||
+      event.target.closest('.zen-current-workspace-indicator-name');
    if (
      !this._tabEdited ||
      ((!this._tabEdited.pinned || this._tabEdited.hasAttribute('zen-essential')) && isTab)
@@ -1093,15 +1105,17 @@ var gZenVerticalTabsManager = {
      `);
      label.after(container);
    }
-    const containerHtml = isTab
-      ? this._tabEdited.querySelector('.tab-editor-container')
-      : this._tabEdited.parentNode;
    const input = document.createElement('input');
    input.id = 'tab-label-input';
    input.value = isTab ? this._tabEdited.label : this._tabEdited.textContent;
    input.addEventListener('keydown', this.renameTabKeydown.bind(this));

-    containerHtml.appendChild(input);
+    if (isTab) {
+      const containerHtml = this._tabEdited.querySelector('.tab-editor-container');
+      containerHtml.appendChild(input);
+    } else {
+      this._tabEdited.after(input);
+    }
    input.focus();
    input.select();

--- a/src/zen/common/emojis/ZenEmojiPicker.mjs
+++ b/src/zen/common/emojis/ZenEmojiPicker.mjs
@@ -0,0 +1,139 @@
+{
+  class ZenEmojiPicker extends ZenDOMOperatedFeature {
+    #panel;
+
+    #anchor;
+
+    #currentPromise = null;
+    #currentPromiseResolve = null;
+    #currentPromiseReject = null;
+
+    init() {
+      this.#panel = document.getElementById('PanelUI-zen-emojis-picker');
+      this.#panel.addEventListener('popupshowing', this);
+      this.#panel.addEventListener('popuphidden', this);
+      document.getElementById('PanelUI-zen-emojis-picker-none').addEventListener('command', this);
+      this.searchInput.addEventListener('input', this);
+    }
+
+    handleEvent(event) {
+      switch (event.type) {
+        case 'popupshowing':
+          this.#onPopupShowing(event);
+          break;
+        case 'popuphidden':
+          this.#onPopupHidden(event);
+          break;
+        case 'command':
+          if (event.target.id === 'PanelUI-zen-emojis-picker-none') {
+            this.#selectEmoji(null);
+          }
+          break;
+        case 'input':
+          this.#onSearchInput(event);
+          break;
+      }
+    }
+
+    get #emojis() {
+      if (this._emojis) {
+        return this._emojis;
+      }
+      const lazy = {};
+      Services.scriptloader.loadSubScript(
+        'chrome://browser/content/zen-components/ZenEmojisData.min.mjs',
+        lazy
+      );
+      this._emojis = lazy.ZenEmojisData;
+      return this._emojis;
+    }
+
+    get emojiList() {
+      return document.getElementById('PanelUI-zen-emojis-picker-list');
+    }
+
+    get searchInput() {
+      return document.getElementById('PanelUI-zen-emojis-picker-search');
+    }
+
+    #clearEmojis() {
+      delete this._emojis;
+    }
+
+    #onSearchInput(event) {
+      const input = event.target;
+      const value = input.value.trim().toLowerCase();
+      // search for emojis.tags and order by emojis.order
+      const filteredEmojis = this.#emojis
+        .filter((emoji) => {
+          return emoji.tags.some((tag) => tag.toLowerCase().includes(value));
+        })
+        .sort((a, b) => a.order - b.order);
+      for (const button of this.emojiList.children) {
+        const buttonEmoji = button.getAttribute('label');
+        const emojiObject = filteredEmojis.find((emoji) => emoji.emoji === buttonEmoji);
+        if (emojiObject) {
+          button.hidden = !emojiObject.tags.some((tag) => tag.toLowerCase().includes(value));
+          button.style.order = emojiObject.order;
+        } else {
+          button.hidden = true;
+        }
+      }
+    }
+
+    #onPopupShowing(event) {
+      if (event.target !== this.#panel) return;
+      const emojiList = this.emojiList;
+      for (const emoji of this.#emojis) {
+        const item = document.createXULElement('toolbarbutton');
+        item.className = 'toolbarbutton-1 zen-emojis-picker-emoji';
+        item.setAttribute('label', emoji.emoji);
+        item.setAttribute('tooltiptext', emoji.annotation);
+        item.addEventListener('command', () => {
+          this.#selectEmoji(emoji.emoji);
+        });
+        emojiList.appendChild(item);
+      }
+    }
+
+    #onPopupHidden(event) {
+      if (event.target !== this.#panel) return;
+      this.#clearEmojis();
+
+      const emojiList = this.emojiList;
+      emojiList.innerHTML = '';
+
+      if (this.#currentPromiseReject) {
+        this.#currentPromiseReject(new Error('Emoji picker closed without selection'));
+      }
+
+      this.#currentPromise = null;
+      this.#currentPromiseResolve = null;
+      this.#currentPromiseReject = null;
+
+      this.#anchor.removeAttribute('zen-emoji-open');
+      this.#anchor = null;
+    }
+
+    #selectEmoji(emoji) {
+      this.#currentPromiseResolve?.(emoji);
+      this.#panel.hidePopup();
+    }
+
+    open(anchor) {
+      if (this.#currentPromise) {
+        return null;
+      }
+      this.#currentPromise = new Promise((resolve, reject) => {
+        this.#currentPromiseResolve = resolve;
+        this.#currentPromiseReject = reject;
+      });
+      this.#anchor = anchor;
+      this.#anchor.setAttribute('zen-emoji-open', 'true');
+      this.#panel.openPopup(anchor, 'after_start', 0, 0, false, false);
+      return this.#currentPromise;
+    }
+  }
+
+  window.gZenEmojiPicker = new ZenEmojiPicker();
+}
--- a/src/zen/common/emojis/ZenEmojisData.min.mjs
+++ b/src/zen/common/emojis/ZenEmojisData.min.mjs
--- a/src/zen/common/styles/zen-browser-ui.css
+++ b/src/zen/common/styles/zen-browser-ui.css
@@ -26,7 +26,7 @@
  }
 }

-:root[zen-before-loaded='true'] #browser > *:not(#zen-browser-background, #zen-toast-container),
+:root[zen-before-loaded='true'] #browser > *:not(#zen-toast-container),
 :root[zen-before-loaded='true'] #urlbar {
  opacity: 0 !important;
 }
--- a/src/zen/common/styles/zen-single-components.css
+++ b/src/zen/common/styles/zen-single-components.css
@@ -35,3 +35,52 @@ body > #confetti {
 #PersonalToolbar:not([collapsed='true']) {
  min-height: 30px;
 }
+
+/* Emojis picker */
+
+#PanelUI-zen-emojis-picker {
+  --panel-width: 250px;
+  --panel-padding: 10px;
+
+  &::part(content) {
+    gap: 15px;
+  }
+
+  #PanelUI-zen-emojis-picker-header {
+    gap: 10px;
+    align-items: center;
+  }
+
+  #PanelUI-zen-emojis-picker-none label {
+    display: none;
+  }
+
+  #PanelUI-zen-emojis-picker-list {
+    flex-wrap: wrap;
+    max-height: 265px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    gap: 5px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
+
+    .zen-emojis-picker-emoji {
+      & image {
+        display: none;
+      }
+    }
+  }
+
+  .zen-emojis-picker-emoji,
+  #PanelUI-zen-emojis-picker-none {
+    width: 22px;
+    height: 22px;
+
+    &:hover {
+      background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+}
--- a/src/zen/common/zen-sets.js
+++ b/src/zen/common/zen-sets.js
@@ -88,6 +88,18 @@ document.addEventListener(
          case 'cmd_contextZenRemoveFromEssentials':
            gZenPinnedTabManager.removeEssentials();
            break;
+          case 'cmd_zenCtxDeleteWorkspace':
+            gZenWorkspaces.contextDeleteWorkspace(event);
+            break;
+          case 'cmd_zenChangeWorkspaceName':
+            gZenVerticalTabsManager.renameTabStart(event);
+            break;
+          case 'cmd_zenChangeWorkspaceIcon':
+            gZenWorkspaces.changeWorkspaceIcon();
+            break;
+          case 'cmd_zenOpenWorkspacePanel':
+            gZenWorkspaces.openWorkspacesDialog(event);
+            break;
          default:
            if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {
              const index = parseInt(event.target.id.replace('cmd_zenWorkspaceSwitch', ''), 10) - 1;
--- a/src/zen/glance/ZenGlanceManager.mjs
+++ b/src/zen/glance/ZenGlanceManager.mjs
@@ -122,17 +122,18 @@

    showSidebarButtons(animate = false) {
      if (this.sidebarButtons.hasAttribute('hidden') && animate) {
-        if (gZenVerticalTabsManager._prefsRightSide) {
-          this.sidebarButtons.setAttribute('right', true);
-        } else {
-          this.sidebarButtons.setAttribute('right', false);
-        }
+        const isRightSide = gZenVerticalTabsManager._prefsRightSide;
+        this.sidebarButtons.setAttribute('right', isRightSide);
+
        for (const button of this.sidebarButtons.querySelectorAll('toolbarbutton')) {
          button.style.opacity = 0;
        }
+
+        const startX = isRightSide ? -50 : 50;
+
        gZenUIManager.motion.animate(
          this.sidebarButtons.querySelectorAll('toolbarbutton'),
-          { x: [50, 0], opacity: [0, 1] },
+          { x: [startX, 0], opacity: [0, 1] },
          { delay: gZenUIManager.motion.stagger(0.1) }
        );
      }
--- a/src/zen/tabs/ZenPinnedTabManager.mjs
+++ b/src/zen/tabs/ZenPinnedTabManager.mjs
@@ -88,9 +88,7 @@
        } catch {}
      } else {
        if (tab.hasAttribute('zen-essential')) {
-          tab
-            .querySelector('.tab-background')
-            .style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
+          tab.style.setProperty('--zen-essential-tab-icon', `url(${iconUrl})`);
        }
      }
      // TODO: work on this
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -1355,7 +1355,7 @@
        position: absolute;
        background-size: contain;
        background-clip: padding-box;
-        background-image: var(--zen-tab-icon); /* Use tab icon variable */
+        background-image: var(--zen-essential-tab-icon); /* Use tab icon variable */
        z-index: -1; /* Place behind content */
        background-position: center;
      }
--- a/src/zen/welcome/ZenWelcome.mjs
+++ b/src/zen/welcome/ZenWelcome.mjs
@@ -537,47 +537,47 @@
                  <html:div></html:div>
                </hbox>
                <html:div id="zen-welcome-initial-essentials-browser-sidebar-essentials">
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://obsidian.md" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/obsidian.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://obsidian.md" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/obsidian.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://discord.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/discord.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://discord.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/discord.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://trello.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/trello.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://trello.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/trello.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/slack.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://slack.com/" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/slack.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/github.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://github.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/github.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://twitter.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/x.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://twitter.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/x.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://notion.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/notion.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" visuallyselected="" data-url="https://notion.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/notion.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://calendar.google.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/calendar.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://calendar.google.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/calendar.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
                  </html:div>
-                  <html:div class="tabbrowser-tab" fadein="" data-url="https://figma.com" style="--zen-tab-icon: url('chrome://browser/content/zen-images/favicons/figma.ico');">
+                  <html:div class="tabbrowser-tab" fadein="" data-url="https://figma.com" style="--zen-essential-tab-icon: url('chrome://browser/content/zen-images/favicons/figma.ico');">
                    <stack class="tab-stack">
                      <html:div class="tab-background"></html:div>
                    </stack>
@@ -624,7 +624,7 @@
              inBackground: true,
              createLazyBrowser: true,
            });
-            let essentialIconUrl = tab.style.getPropertyValue('--zen-tab-icon');
+            let essentialIconUrl = tab.style.getPropertyValue('--zen-essential-tab-icon');
            // Remove url() from the icon URL
            essentialIconUrl = essentialIconUrl.replace(/url\(['"]?/, '').replace(/['"]?\)/, '');
            essentialIconUrl = await getIconData(essentialIconUrl);
--- a/src/zen/welcome/zen-welcome.css
+++ b/src/zen/welcome/zen-welcome.css
@@ -273,7 +273,7 @@
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
-              background: var(--zen-tab-icon);
+              background: var(--zen-essential-tab-icon);
              background-position: center;
              background-size: cover;
              background-repeat: no-repeat;
--- a/src/zen/workspaces/ZenWorkspace.mjs
+++ b/src/zen/workspaces/ZenWorkspace.mjs
@@ -7,7 +7,8 @@
      return `
        <vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1">
          <hbox class="zen-current-workspace-indicator-icon"></hbox>
-          <hbox class="zen-current-workspace-indicator-name"></hbox>
+          <hbox class="zen-current-workspace-indicator-name" flex="1"></hbox>
+          <toolbarbutton class="toolbarbutton-1 chromeclass-toolbar-additional zen-workspaces-actions" context="zenWorkspaceMoreActions"></toolbarbutton>
        </vbox>
        <arrowscrollbox orient="vertical" class="workspace-arrowscrollbox">
          <vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
@@ -64,6 +65,13 @@
      this.scrollbox.addEventListener('underflow', this);
      this.scrollbox.addEventListener('overflow', this);

+      this.indicator.querySelector('.zen-current-workspace-indicator-name').onRenameFinished =
+        this.onIndicatorRenameFinished.bind(this);
+
+      this.indicator
+        .querySelector('.zen-workspaces-actions')
+        .addEventListener('click', this.onActionsCommand.bind(this));
+
      this.scrollbox._getScrollableElements = () => {
        const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children];
        if (Services.prefs.getBoolPref('zen.view.show-newtab-button-top', false)) {
@@ -171,6 +179,38 @@
        gBrowser.tabContainer.handleEvent(event);
      }
    }
+
+    get workspaceUuid() {
+      return this.id;
+    }
+
+    async onIndicatorRenameFinished(newName) {
+      if (newName === '') {
+        return;
+      }
+      let workspaces = (await gZenWorkspaces._workspaces()).workspaces;
+      let workspaceData = workspaces.find((workspace) => workspace.uuid === this.workspaceUuid);
+      workspaceData.name = newName;
+      await gZenWorkspaces.saveWorkspace(workspaceData);
+      this.indicator.querySelector('.zen-current-workspace-indicator-name').textContent = newName;
+      gZenUIManager.showToast('zen-workspace-renamed-toast');
+    }
+
+    onActionsCommand(event) {
+      event.stopPropagation();
+      const popup = document.getElementById('zenWorkspaceMoreActions');
+      event.target.setAttribute('open', 'true');
+      this.indicator.setAttribute('open', 'true');
+      popup.addEventListener(
+        'popuphidden',
+        () => {
+          event.target.removeAttribute('open');
+          this.indicator.removeAttribute('open');
+        },
+        { once: true }
+      );
+      popup.openPopup(event.target, 'after_start');
+    }
  }

  customElements.define('zen-workspace', ZenWorkspace);
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -17,7 +17,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    lastDelta: 0,
    direction: null,
  };
+
  _lastScrollTime = 0;
+
+  #workspaceCreationArgs = {};
+
  bookmarkMenus = [
    'PlacesToolbar',
    'bookmarks-menu-button',
@@ -136,7 +140,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    await this.promiseSectionsInitialized;

    // Non UI related initializations
-    this._initializeWorkspaceCreationIcons();
    this._initializeWorkspaceTabContextMenus();
    if (
      Services.prefs.getBoolPref('zen.workspaces.swipe-actions', false) &&
@@ -464,7 +467,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
            workspaceWrapper.pinnedTabsContainer,
            tabs
          );
-          this.initIndicatorContextMenu(workspaceWrapper.indicator);
          resolve();
        },
        { once: true }
@@ -988,14 +990,32 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    }
  }

-  initIndicatorContextMenu(indicator) {
-    const th = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      this.openWorkspacesDialog(event);
-    };
-    indicator.addEventListener('contextmenu', th);
-    indicator.addEventListener('click', th);
+  changeWorkspaceIcon() {
+    const anchor = this.activeWorkspaceIndicator?.querySelector(
+      '.zen-current-workspace-indicator-icon'
+    );
+    if (!anchor) {
+      return;
+    }
+    const hasNoIcon = anchor.hasAttribute('no-icon');
+    anchor.removeAttribute('no-icon');
+    gZenEmojiPicker
+      .open(anchor)
+      .then(async (emoji) => {
+        const workspace = this.getActiveWorkspaceFromCache();
+        if (!workspace) {
+          console.warn('No active workspace found to change icon');
+          return;
+        }
+        workspace.icon = emoji;
+        await this.saveWorkspace(workspace);
+      })
+      .catch((error) => {
+        console.warn('Error changing workspace icon:', error);
+        if (hasNoIcon) {
+          anchor.setAttribute('no-icon', 'true');
+        }
+      });
  }

  shouldCloseWindow() {
@@ -1068,39 +1088,38 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {

  addPopupListeners() {
    const popup = document.getElementById('PanelUI-zen-workspaces');
-    const contextMenu = document.getElementById('zenWorkspaceActionsMenu');

    popup.addEventListener('popuphidden', this.handlePanelHidden.bind(this));
    popup.addEventListener('command', this.handlePanelCommand.bind(this));

-    contextMenu.addEventListener('popuphidden', (event) => {
-      if (event.target === contextMenu) {
-        this.onContextMenuClose(event);
-      }
-    });
-    contextMenu.addEventListener('popupshowing', this.updateContextMenu.bind(this));
-    contextMenu.addEventListener('command', this.handleContextMenuCommand.bind(this));
+    const workspaceActions = document.getElementById('zenWorkspaceMoreActions');
+    workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this));

-    const submenu = document.querySelector('#context_zenWorkspacesOpenInContainerTab > menupopup');
-    if (submenu) {
-      submenu.addEventListener('popupshowing', this.createContainerTabMenu.bind(this));
-      submenu.addEventListener('command', this.contextChangeContainerTab.bind(this));
+    const contextChangeContainerTabMenu = document.getElementById(
+      'context_zenWorkspacesOpenInContainerTab'
+    );
+    contextChangeContainerTabMenu.addEventListener(
+      'popupshowing',
+      this.updateWorkspaceActionsMenuContainer.bind(this)
+    );
+    contextChangeContainerTabMenu.addEventListener(
+      'command',
+      this.contextChangeContainerTab.bind(this)
+    );
+  }
+
+  updateWorkspaceActionsMenu(event) {
+    if (event.target.id !== 'zenWorkspaceMoreActions') {
+      return;
    }
-
-    const onWorkspaceIconContainerClick = this.onWorkspaceIconContainerClick.bind(this);
-    for (const element of document.querySelectorAll('.PanelUI-zen-workspaces-icons-container')) {
-      element.addEventListener('click', onWorkspaceIconContainerClick);
+    const openInContainerMenuItem = document.getElementById(
+      'context_zenWorkspacesOpenInContainerTab'
+    );
+    if (this.shouldShowContainers) {
+      openInContainerMenuItem.removeAttribute('hidden');
+    } else {
+      openInContainerMenuItem.setAttribute('hidden', 'true');
    }
-
-    document
-      .getElementById('PanelUI-zen-workspaces-create-input')
-      .addEventListener('input', this.onWorkspaceCreationNameChange.bind(this));
-    document
-      .getElementById('PanelUI-zen-workspaces-edit-input')
-      .addEventListener('input', this.onWorkspaceEditChange.bind(this));
-    document
-      .getElementById('PanelUI-zen-workspaces-icon-search-input')
-      .addEventListener('input', this.conductSearch.bind(this));
  }

  handlePanelCommand(event) {
@@ -1113,161 +1132,16 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      case 'PanelUI-zen-workspaces-reorder-mode':
        this.toggleReorderMode();
        break;
-      case 'PanelUI-zen-workspaces-new':
-        this.openSaveDialog();
-        break;
-      case 'PanelUI-zen-workspaces-create-save':
-        this.saveWorkspaceFromCreate();
-        break;
-      case 'PanelUI-zen-workspaces-edit-cancel':
-      case 'PanelUI-zen-workspaces-create-cancel':
-        this.closeWorkspacesSubView();
-        break;
-      case 'PanelUI-zen-workspaces-edit-save':
-        this.saveWorkspaceFromEdit();
-        break;
    }
  }

-  handleContextMenuCommand(event) {
-    const target = event.target.closest('menuitem');
-    if (!target) {
-      return;
-    }
-    switch (target.id) {
-      case 'context_zenOpenWorkspace':
-        this.openWorkspace();
-        break;
-      case 'context_zenEditWorkspace':
-        this.contextEdit(event);
-        break;
-      case 'context_zenDeleteWorkspace':
-        this.contextDelete(event);
-        break;
-    }
-  }
-
-  searchIcons(input, icons) {
-    input = input.toLowerCase();
-
-    if (input === ':' || input === '') {
-      return icons;
-    }
-    const emojiScores = [];
-
-    function calculateSearchScore(inputLength, targetLength, weight = 100) {
-      return parseInt((inputLength / targetLength) * weight);
-    }
-
-    for (let currentEmoji of icons) {
-      let alignmentScore = -1;
-
-      let normalizedEmojiName = currentEmoji[1].toLowerCase();
-      let keywordList = currentEmoji[2].split(',').map((keyword) => keyword.trim().toLowerCase());
-      if (input[0] === ':') {
-        let searchTerm = input.slice(1);
-        let nameMatchIndex = normalizedEmojiName.indexOf(searchTerm);
-
-        if (nameMatchIndex !== -1 && nameMatchIndex === 0) {
-          alignmentScore = calculateSearchScore(searchTerm.length, normalizedEmojiName.length, 100);
-        }
-      } else {
-        if (input === currentEmoji[0]) {
-          alignmentScore = 999;
-        }
-        let nameMatchIndex = normalizedEmojiName.replace(/_/g, ' ').indexOf(input);
-        if (nameMatchIndex !== -1) {
-          if (nameMatchIndex === 0) {
-            alignmentScore = calculateSearchScore(input.length, normalizedEmojiName.length, 150);
-          } else if (input[input.length - 1] !== ' ') {
-            alignmentScore += calculateSearchScore(input.length, normalizedEmojiName.length, 40);
-          }
-        }
-        for (let keyword of keywordList) {
-          let keywordMatchIndex = keyword.indexOf(input);
-          if (keywordMatchIndex !== -1) {
-            if (keywordMatchIndex === 0) {
-              alignmentScore += calculateSearchScore(input.length, keyword.length, 50);
-            } else if (input[input.length - 1] !== ' ') {
-              alignmentScore += calculateSearchScore(input.length, keyword.length, 5);
-            }
-          }
-        }
-      }
-
-      //if match score is not -1, add it
-      if (alignmentScore !== -1) {
-        emojiScores.push({ emoji: currentEmoji[0], score: alignmentScore });
-      }
-    }
-    // Sort the emojis by their score in descending order
-    emojiScores.sort((a, b) => b.score - a.score);
-
-    // Return the emojis in the order of their rank
-    let filteredEmojiScores = emojiScores;
-    return filteredEmojiScores.map((score) => score.emoji);
-  }
-
-  resetWorkspaceIconSearch() {
-    let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-
-    // Clear the search input field
-    searchInput.value = '';
-    for (let button of container.querySelectorAll('.toolbarbutton-1')) {
-      button.style.display = '';
-    }
-  }
-
-  _initializeWorkspaceCreationIcons() {
-    let container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    let searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-    searchInput.value = '';
-    for (let iconData of this.emojis) {
-      const icon = iconData[0];
-      let button = document.createXULElement('toolbarbutton');
-      button.className = 'toolbarbutton-1 workspace-icon-button';
-      button.setAttribute('label', icon);
-      button.onclick = (event) => {
-        const button = event.target;
-        let wasSelected = button.hasAttribute('selected');
-        for (let button of container.children) {
-          button.removeAttribute('selected');
-        }
-        if (!wasSelected) {
-          button.setAttribute('selected', 'true');
-        }
-        if (this.onIconChangeConnectedCallback) {
-          this.onIconChangeConnectedCallback(icon);
-        } else {
-          this.onWorkspaceIconChangeInner('create', icon);
-        }
-      };
-      container.appendChild(button);
-    }
-  }
-
-  conductSearch() {
-    const container = document.getElementById('PanelUI-zen-workspaces-icon-picker-wrapper');
-    const searchInput = document.getElementById('PanelUI-zen-workspaces-icon-search-input');
-    const query = searchInput.value.toLowerCase();
-
-    if (query === '') {
-      this.resetWorkspaceIconSearch();
-      return;
-    }
-
-    const buttons = Array.from(container.querySelectorAll('.toolbarbutton-1'));
-    buttons.forEach((button) => (button.style.display = 'none'));
-
-    const filteredIcons = this.searchIcons(query, this.emojis);
-
-    filteredIcons.forEach((emoji) => {
-      const matchingButton = buttons.find((button) => button.getAttribute('label') === emoji);
-      if (matchingButton) {
-        matchingButton.style.display = '';
-        container.appendChild(matchingButton);
-      }
+  updateWorkspaceActionsMenuContainer(event) {
+    const workspace = this.getActiveWorkspaceFromCache();
+    let containerTabId = workspace.containerTabId;
+    return window.createUserContextMenu(event, {
+      isContextMenu: true,
+      excludeUserContextId: containerTabId,
+      showDefaultTab: true,
    });
  }

@@ -1317,83 +1191,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    );
  }
  // Workspaces dialog UI management
-
-  openSaveDialog() {
-    let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-
-    // randomly select an icon
-    let icon = this.emojis[Math.floor(Math.random() * (this.emojis.length - 257))][0];
-    this._workspaceCreateInput.textContent = '';
-    this._workspaceCreateInput.value = '';
-    this._workspaceCreateInput.setAttribute('data-initial-value', '');
-    document
-      .querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
-      .forEach((button) => {
-        if (button.label === icon) {
-          button.setAttribute('selected', 'true');
-        } else {
-          button.removeAttribute('selected');
-        }
-      });
-    document.querySelector('.PanelUI-zen-workspaces-icons-container.create').textContent = icon;
-
-    PanelUI.showSubView('PanelUI-zen-workspaces-create', parentPanel);
-  }
-
-  async openEditDialog(workspaceUuid) {
-    this._workspaceEditDialog.setAttribute('data-workspace-uuid', workspaceUuid);
-    document.getElementById('PanelUI-zen-workspaces-edit-save').setAttribute('disabled', 'true');
-    let workspaces = (await this._workspaces()).workspaces;
-    let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
-    this._workspaceEditInput.textContent = workspaceData.name;
-    this._workspaceEditInput.value = workspaceData.name;
-    this._workspaceEditInput.setAttribute('data-initial-value', workspaceData.name);
-    this._workspaceEditIconsContainer.setAttribute('data-initial-value', workspaceData.icon);
-    this.onIconChangeConnectedCallback = (...args) => {
-      this.onWorkspaceIconChangeInner('edit', ...args);
-      this.onWorkspaceEditChange(...args);
-    };
-    document
-      .querySelectorAll('#PanelUI-zen-workspaces-icon-picker-wrapper toolbarbutton')
-      .forEach((button) => {
-        if (button.label === workspaceData.icon) {
-          button.setAttribute('selected', 'true');
-        } else {
-          button.removeAttribute('selected');
-        }
-      });
-    document.querySelector('.PanelUI-zen-workspaces-icons-container.edit').textContent =
-      this.getWorkspaceIcon(workspaceData);
-    let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-    PanelUI.showSubView('PanelUI-zen-workspaces-edit', parentPanel);
-  }
-
-  onWorkspaceIconChangeInner(type = 'create', icon) {
-    const container = document.querySelector(`.PanelUI-zen-workspaces-icons-container.${type}`);
-    if (container.textContent !== icon) {
-      container.textContent = icon;
-    }
-    this.goToPreviousSubView();
-  }
-
-  onWorkspaceIconContainerClick(event) {
-    event.preventDefault();
-    const parentPanel = document.getElementById('PanelUI-zen-workspaces-edit');
-    PanelUI.showSubView('PanelUI-zen-workspaces-icon-picker', parentPanel);
-
-    const container = parentPanel.parentNode.querySelector('.panel-viewcontainer');
-    setTimeout(() => {
-      if (container) {
-        container.style.minHeight = 'unset';
-      }
-    });
-  }
-
-  goToPreviousSubView() {
-    const parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview');
-    parentPanel.goBack();
-  }
-
  workspaceHasIcon(workspace) {
    return workspace.icon && workspace.icon !== '';
  }
@@ -1536,9 +1333,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
            </div>
          </vbox>
            <image class="toolbarbutton-icon zen-workspace-actions-reorder-icon" ></image>
-          <toolbarbutton closemenu="none" class="toolbarbutton-1 zen-workspace-actions">
-            <image class="toolbarbutton-icon" id="zen-workspace-actions-menu-icon"></image>
-          </toolbarbutton>
        `);

      // use text content instead of innerHTML to avoid XSS
@@ -1550,25 +1344,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
          ContextualIdentityService.getUserContextLabel(containerGroup.userContextId);
      }

-      childs.querySelector('.zen-workspace-actions').addEventListener(
-        'command',
-        ((event) => {
-          let button = event.target;
-          this._contextMenuId = button
-            .closest('toolbarbutton[zen-workspace-id]')
-            .getAttribute('zen-workspace-id');
-          const popup = button.ownerDocument.getElementById('zenWorkspaceActionsMenu');
-          popup.openPopup(button, 'after_end');
-        }).bind(browser.gZenWorkspaces)
-      );
      element.appendChild(childs);
      element.onclick = (async () => {
        if (this.isReorderModeOn(browser)) {
          return; // Return early if reorder mode is on
        }
-        if (event.target.closest('.zen-workspace-actions')) {
-          return; // Ignore clicks on the actions button
-        }
        const workspaceId = element.getAttribute('zen-workspace-id');
        const workspaces = await this._workspaces();
        const workspace = workspaces.workspaces.find((w) => w.uuid === workspaceId);
@@ -1640,6 +1420,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
      browser.gZenWorkspaces._workspaceBookmarksCache = null;
    }
    let workspaces = await browser.gZenWorkspaces._workspaces();
+    browser.document
+      .getElementById('cmd_zenCtxDeleteWorkspace')
+      .setAttribute('disabled', workspaces.workspaces.length <= 1);
    if (clearCache) {
      browser.dispatchEvent(
        new CustomEvent('ZenWorkspacesUIUpdate', {
@@ -1700,8 +1483,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {

    workspacesList?.removeAttribute('reorder-mode');
    reorderModeButton?.removeAttribute('active');
-    this.resetWorkspaceIconSearch();
-    this.clearEmojis();
  }

  async moveWorkspaceToEnd(draggedWorkspaceId) {
@@ -1762,7 +1543,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    if (!this.workspaceEnabled || this.isPrivateWindow) {
      return;
    }
-    let target = event.target.closest('.zen-current-workspace-indicator');
+    let target = this.activeWorkspaceIndicator || event.target;
    let panel = document.getElementById('PanelUI-zen-workspaces');
    await this._propagateWorkspaceData({
      ignoreStrip: true,
@@ -1781,22 +1562,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {

  // Workspaces management

-  get _workspaceCreateInput() {
-    return document.getElementById('PanelUI-zen-workspaces-create-input');
-  }
-
-  get _workspaceEditDialog() {
-    return document.getElementById('PanelUI-zen-workspaces-edit');
-  }
-
-  get _workspaceEditInput() {
-    return document.getElementById('PanelUI-zen-workspaces-edit-input');
-  }
-
-  get _workspaceEditIconsContainer() {
-    return document.getElementById('PanelUI-zen-workspaces-icon-picker');
-  }
-
  _deleteAllTabsInWorkspace(workspaceID) {
    gBrowser.removeTabs(
      Array.from(this.allStoredTabs).filter(
@@ -1862,57 +1627,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    }
  }

-  async saveWorkspaceFromCreate() {
-    let workspaceName = this._workspaceCreateInput.value;
-    if (!workspaceName) {
-      return;
-    }
-    this._workspaceCreateInput.value = '';
-    let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
-    icon?.removeAttribute('selected');
-    await this.createAndSaveWorkspace(workspaceName, icon?.label);
-    this.goToPreviousSubView();
-  }
-
-  async saveWorkspaceFromEdit() {
-    let workspaceUuid = this._workspaceEditDialog.getAttribute('data-workspace-uuid');
-    let workspaceName = this._workspaceEditInput.value;
-    if (!workspaceName) {
-      return;
-    }
-    this._workspaceEditInput.value = '';
-    let icon = document.querySelector('#PanelUI-zen-workspaces-icon-picker-wrapper [selected]');
-    icon?.removeAttribute('selected');
-    let workspaces = (await this._workspaces()).workspaces;
-    let workspaceData = workspaces.find((workspace) => workspace.uuid === workspaceUuid);
-    workspaceData.name = workspaceName;
-    workspaceData.icon = icon?.label;
-    await this.saveWorkspace(workspaceData);
-    this.goToPreviousSubView();
-  }
-
-  onWorkspaceCreationNameChange() {
-    let button = document.getElementById('PanelUI-zen-workspaces-create-save');
-    if (this._workspaceCreateInput.value === '') {
-      button.setAttribute('disabled', 'true');
-      return;
-    }
-    button.removeAttribute('disabled');
-  }
-
-  onWorkspaceEditChange(icon) {
-    let button = document.getElementById('PanelUI-zen-workspaces-edit-save');
-    let name = this._workspaceEditInput.value;
-    if (
-      name === this._workspaceEditInput.getAttribute('data-initial-value') &&
-      icon === this._workspaceEditIconsContainer.getAttribute('data-initial-value')
-    ) {
-      button.setAttribute('disabled', 'true');
-      return;
-    }
-    button.removeAttribute('disabled');
-  }
-
  addChangeListeners(func) {
    if (!this._changeListeners) {
      this._changeListeners = [];
@@ -2101,10 +1815,11 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {

    if (this.workspaceHasIcon(currentWorkspace)) {
      indicatorIcon.removeAttribute('no-icon');
+      indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
    } else {
      indicatorIcon.setAttribute('no-icon', 'true');
+      indicatorIcon.textContent = '';
    }
-    indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
    indicatorName.textContent = currentWorkspace.name;
  }

@@ -2148,21 +1863,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
          originalContainer: essentialsContainer,
          repeat: 0,
        });
-        for (let i = 0; i < essentialsClone.children.length; i++) {
-          const child = essentialsClone.children[i];
-          const originalChild = essentialsContainer.children[i];
-          if (!gBrowser.isTab(child) || !gBrowser.isTab(originalChild)) {
-            continue;
-          }
-          const childBg = child.querySelector('.tab-background');
-          const originalChildBg = originalChild.querySelector('.tab-background');
-          if (childBg && originalChildBg) {
-            childBg.style.setProperty(
-              '--zen-tab-icon',
-              originalChildBg.style.getPropertyValue('--zen-tab-icon')
-            );
-          }
-        }
      }
    }
    document.documentElement.setAttribute('animating-background', 'true');
@@ -2836,68 +2536,19 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
  }

  // Context menu management
-
-  _contextMenuId = null;
-  async updateContextMenu(_) {
-    console.assert(this._contextMenuId, 'No context menu ID set');
-    document
-      .querySelector(
-        `#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
-      )
-      .setAttribute('active', 'true');
-    const workspaces = await this._workspaces();
-    let deleteMenuItem = document.getElementById('context_zenDeleteWorkspace');
-    if (workspaces.workspaces.length <= 1) {
-      deleteMenuItem.setAttribute('disabled', 'true');
-    } else {
-      deleteMenuItem.removeAttribute('disabled');
-    }
-    let openMenuItem = document.getElementById('context_zenOpenWorkspace');
-    if (
-      workspaces.workspaces.find(
-        (workspace) => workspace.uuid === this._contextMenuId && this.isWorkspaceActive(workspace)
-      )
-    ) {
-      openMenuItem.setAttribute('disabled', 'true');
-    } else {
-      openMenuItem.removeAttribute('disabled');
-    }
-    const openInContainerMenuItem = document.getElementById(
-      'context_zenWorkspacesOpenInContainerTab'
-    );
-    if (this.shouldShowContainers) {
-      openInContainerMenuItem.removeAttribute('hidden');
-    } else {
-      openInContainerMenuItem.setAttribute('hidden', 'true');
-    }
-  }
-
  async contextChangeContainerTab(event) {
    this._organizingWorkspaceStrip = true;
    let workspaces = await this._workspaces();
    let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this._contextMenuId
+      (workspace) => workspace.uuid === this.activeWorkspace
    );
    let userContextId = parseInt(event.target.getAttribute('data-usercontextid'));
    workspace.containerTabId = userContextId + 0; // +0 to convert to number
    await this.saveWorkspace(workspace);
-    window.requestAnimationFrame(async () => {
-      if (workspace.uuid === this.activeWorkspace) {
-        await this.changeWorkspace(workspace, {
-          alwaysChange: true,
-        });
-      }
-    }, 0);
  }

-  onContextMenuClose() {
-    let target = document.querySelector(
-      `#PanelUI-zen-workspaces [zen-workspace-id="${this._contextMenuId}"] .zen-workspace-actions`
-    );
-    if (target) {
-      target.removeAttribute('active');
-    }
-    this._contextMenuId = null;
+  async contextDeleteWorkspace() {
+    await this.removeWorkspace(this.activeWorkspace, true);
  }

  findTabToBlur(tab) {
@@ -2907,44 +2558,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
    return tab;
  }

-  async openWorkspace() {
-    let workspaces = await this._workspaces();
-    let workspace = workspaces.workspaces.find(
-      (workspace) => workspace.uuid === this._contextMenuId
-    );
-    await this.changeWorkspace(workspace);
-  }
-
-  async contextDelete(event) {
-    this.__contextIsDelete = true;
-    event.stopPropagation();
-    await this.removeWorkspace(this._contextMenuId);
-    this.__contextIsDelete = false;
-  }
-
-  async contextEdit(event) {
-    event.stopPropagation();
-    await this.openEditDialog(this._contextMenuId);
-  }
-
-  get emojis() {
-    if (this._emojis) {
-      return this._emojis;
-    }
-    const lazy = {};
-    Services.scriptloader.loadSubScript(
-      'chrome://browser/content/zen-components/ZenEmojis.mjs',
-      lazy
-    );
-    this._emojis = lazy.zenGlobalEmojis();
-    return this._emojis;
-  }
-
-  clearEmojis() {
-    // Unload from memory
-    this._emojis = null;
-  }
-
  async changeWorkspaceShortcut(offset = 1, whileScrolling = false) {
    // Cycle through workspaces
    let workspaces = await this._workspaces();
@@ -3006,16 +2619,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
  }

  // Tab browser utilities
-  createContainerTabMenu(event) {
-    let window = event.target.ownerGlobal;
-    const workspace = this.getWorkspaceFromId(this._contextMenuId);
-    let containerTabId = workspace.containerTabId;
-    return window.createUserContextMenu(event, {
-      isContextMenu: true,
-      excludeUserContextId: containerTabId,
-      showDefaultTab: true,
-    });
-  }

  getContextIdIfNeeded(userContextId, fromExternal, allowInheritPrincipal) {
    if (!this.workspaceEnabled) {
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -141,55 +141,6 @@
  width: var(--panel-width);
 }

-#PanelUI-zen-workspaces-icon-picker toolbarbutton {
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 2px solid transparent;
-  border-radius: 7px;
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton[selected='true'] {
-  border-color: var(--zen-colors-secondary);
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-icon {
-  display: none;
-}
-
-#PanelUI-zen-workspaces-icon-picker toolbarbutton .toolbarbutton-text {
-  min-width: unset;
-}
-
-#PanelUI-zen-workspaces-icon-picker {
-  padding: 5px !important;
-}
-
-#PanelUI-zen-workspaces-icon-picker-wrapper {
-  overflow-x: hidden;
-  justify-items: center;
-  overflow-y: auto;
-
-  display: flex;
-
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  justify-content: space-between;
-  align-content: space-between;
-  max-height: 250px;
-
-  .workspace-icon-button {
-    min-width: 24px;
-    min-height: 24px;
-    font-size: 16px;
-    margin: 2px;
-    padding: 4px;
-  }
-}
-
 #PanelUI-zen-workspaces-list {
  display: flex;
  flex-direction: column;
@@ -231,36 +182,6 @@
  }
 }

-/* Workspace icon picker styles */
-#PanelUI-zen-workspaces-icon-picker-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px;
-}
-
-#PanelUI-zen-workspaces-icon-search-bar {
-  display: flex;
-  position: sticky;
-  top: 0;
-  background-color: inherit;
-  z-index: 1000;
-  padding: 8px;
-  width: 100%;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-#PanelUI-zen-workspaces-icon-search-input {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  border: 1px solid var(--panel-separator-color, #ccc);
-  border-radius: 4px;
-  box-sizing: border-box;
-  margin: 0;
-}
-
 #PanelUI-zen-workspaces-list toolbarbutton {
  padding: 5px;
  border-radius: var(--zen-button-border-radius);
@@ -313,7 +234,6 @@
    font-weight: normal;
  }

-  & .zen-workspace-actions,
  .zen-workspace-actions-reorder-icon {
    display: none;
    margin: 0;
@@ -383,13 +303,6 @@
  color: var(--toolbarbutton-icon-fill-attention) !important;
 }

-#PanelUI-zen-workspaces-list:not([reorder-mode='true']) toolbarbutton {
-  &:hover .zen-workspace-actions,
-  & .zen-workspace-actions[active='true'] {
-    display: flex;
-  }
-}
-
 #PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton {
  .zen-workspace-actions-reorder-icon {
    display: flex;
@@ -421,28 +334,13 @@
  height: 24px;
 }

-#PanelUI-zen-workspaces-create-footer,
-#PanelUI-zen-workspaces-edit-footer {
-  padding-bottom: 0 !important;
-  margin-top: 10px;
-  margin-left: 0;
-  margin-bottom: 0 !important;
-  width: 100%;
-}
-
-#PanelUI-zen-workspaces-create-footer button[default='true'],
-#PanelUI-zen-workspaces-edit-footer button[default='true'] {
-  width: 100%;
-}
-
 #PanelUI-zen-workspaces-header {
  margin-right: auto;
 }

 /* Mark workspaces indicator */
 .zen-current-workspace-indicator {
-  padding: calc(15px + var(--zen-toolbox-padding))
-    calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
+  padding: calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
  font-weight: 600;
  position: relative;
  max-height: var(--zen-workspace-indicator-height);
@@ -452,6 +350,9 @@
  flex-direction: row !important;
  max-width: 100%;
  width: 100%;
+  font-size: small;
+  padding-right: 10px;
+  -moz-window-dragging: no-drag;

  &::before {
    border-radius: var(--border-radius-medium);
@@ -476,8 +377,23 @@
  }

  & .zen-current-workspace-indicator-icon {
-    font-size: 12px;
-    line-height: 1;
+    position: relative;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+
+    &[zen-emoji-open='true']::before {
+      border: 1px dashed light-dark(rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+      border-radius: 6px;
+      width: calc(100% + 6px);
+      height: calc(100% + 6px);
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      pointer-events: none;
+    }
  }

  .zen-current-workspace-indicator-name {
@@ -486,8 +402,27 @@
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-    pointer-events: none;
-    font-size: small;
+    cursor: text;
+  }
+
+  .zen-workspaces-actions {
+    --toolbarbutton-inner-padding: 4px;
+    margin-left: auto !important;
+    opacity: 0;
+    visibility: collapse;
+    transition: opacity 0.1s;
+    order: 5;
+
+    :root[zen-renaming-tab='true'] & {
+      display: none;
+    }
+  }
+
+  :root:not([zen-private-window]) &:hover .zen-workspaces-actions,
+  & .zen-workspaces-actions[open='true'] {
+    visibility: visible;
+    pointer-events: auto;
+    opacity: 1;
  }
 }