Add current workspace indicator and update styles in zen workspaces

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

@@ -1,5 +1,5 @@
 diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
-index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d5627b4b830 100644
+index 12fa0cf79aade28581016adf96df85386dabdcef..846add9b040abf0f7378ebaaadef007013f5a1ec 100644
 --- a/browser/base/content/navigator-toolbox.inc.xhtml
 +++ b/browser/base/content/navigator-toolbox.inc.xhtml
 @@ -2,7 +2,7 @@
@@ -27,7 +27,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d56
                           aria-pressed="false"
                           oncommand="FirefoxViewHandler.openTab();"
                           onmousedown="FirefoxViewHandler.openToolbarMouseEvent(event);"
-@@ -50,16 +51,17 @@
+@@ -50,16 +51,21 @@
                  aria-multiselectable="true"
                  setfocus="false"
                  tooltip="tabbrowser-tab-tooltip"
@@ -40,6 +40,10 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d56
  # DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
  # the current structure that we may want to revisit.
 +            <html:div id="zen-essentials-container"></html:div>
++            <hbox id="zen-current-workspace-indicator">
++              <hbox id="zen-current-workspace-indicator-icon"></hbox>
++              <hbox id="zen-current-workspace-indicator-name"></hbox>
++            </hbox>
              <html:div id="vertical-pinned-tabs-container"></html:div>
              <html:div id="vertical-pinned-tabs-container-separator"></html:div>
 -            <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
@@ -47,7 +51,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d56
                <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
                <hbox id="tabbrowser-arrowscrollbox-periphery">
                  <toolbartabstop/>
-@@ -113,9 +115,10 @@
+@@ -113,9 +119,10 @@
        <toolbarbutton id="content-analysis-indicator"
                       oncommand="ContentAnalysis.showPanel(this, PanelUI);"
                       class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -60,7 +64,7 @@ index 12fa0cf79aade28581016adf96df85386dabdcef..5198bbbee13df7acfab9a7446c618d56
      </toolbar>
  
    </vbox>
-@@ -531,6 +534,7 @@
+@@ -531,6 +538,7 @@
                       consumeanchor="PanelUI-button"
                       data-l10n-id="appmenu-menu-button-closed2"/>
      </toolbaritem>

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

@@ -394,6 +394,9 @@
       margin-right: var(--zen-tabbar-offset);
     }
 
+    & #zen-current-workspace-indicator-name {
+      display: none;
+    }
 
     & #vertical-tabs-newtab-button {
       padding: 0 !important;
@@ -746,7 +749,6 @@
 /* Mark: Essentials Toolbar */
 #zen-essentials-container {
   padding-bottom: var(--zen-toolbox-padding);
-  margin-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
 }
 
@@ -769,7 +771,7 @@
   border-radius: var(--border-radius-medium);
 
   &:not([selected]) .tab-background {
-    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.07));
+    background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.04));
   }
 
   backdrop-filter: blur(10px);

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

@@ -407,3 +407,23 @@
 #PanelUI-zen-workspaces-edit-footer button[default='true'] {
   width: 100%;
 }
+
+/* Mark workspaces indicator */
+#zen-current-workspace-indicator {
+  margin: calc(var(--zen-toolbox-padding) * 3) calc(4px + var(--tab-inline-padding)) calc(var(--zen-toolbox-padding) * 2);
+  font-weight: 600;
+  opacity: 0.5;
+  align-items: center;
+
+  & #zen-current-workspace-indicator-icon {
+    font-size: 14px;
+  }
+
+  #zen-current-workspace-indicator-name {
+    font-size: 13px;
+  }
+
+  & #zen-current-workspace-indicator-icon:not([hidden]) + #zen-current-workspace-indicator-name {
+    margin-left: 10px;
+  }
+}

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

@@ -941,11 +941,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       placesToolbar._placesView.invalidateContainer(placesToolbar._placesView._resultNode);
     }
 
-    const essentialsToolbar = document.getElementById("EssentialsToolbar");
-    if(essentialsToolbar?._placesView) {
-      essentialsToolbar._placesView.invalidateContainer(essentialsToolbar._placesView._resultNode);
-    }
+    // Update current workspace indicator
+    const currentWorkspace = await this.getActiveWorkspace();
+    const indicatorName = document.getElementById('zen-current-workspace-indicator-name');
+    const indicatorIcon = document.getElementById('zen-current-workspace-indicator-icon');
 
+    if (this.workspaceHasIcon(currentWorkspace)) {
+      indicatorIcon.textContent = this.getWorkspaceIcon(currentWorkspace);
+      indicatorIcon.removeAttribute('hidden');
+    } else {
+      indicatorIcon.setAttribute('hidden', 'true');
+    }
+    indicatorName.textContent = currentWorkspace.name;
 
     this._inChangingWorkspace = false;
   }