chore: Update workspace button styles and behavior

src/browser/base/content/ZenWorkspaces.mjs

@@ -74,6 +74,24 @@ var ZenWorkspaces = {
         }
         await this.changeWorkspace(activeWorkspace);
       }
+      this._initializeWorkspaceIcons();
+    }
+  },
+
+  _initializeWorkspaceIcons() {
+    const kIcons = ["🏠", "📄", "💹", "💼", "📧", "✅", "👥"];
+    let container = document.getElementById("PanelUI-zen-workspaces-create-icons-container");
+    for (let icon of kIcons) {
+      let button = document.createXULElement("toolbarbutton");
+      button.className = "toolbarbutton-1";
+      button.setAttribute("label", icon);
+      button.onclick = ((event) => {
+        for (let button of container.children) {
+          button.removeAttribute("selected");
+        }
+        button.setAttribute("selected", "true");
+      }).bind(this, button);
+      container.appendChild(button);
     }
   },
 
@@ -119,6 +137,13 @@ var ZenWorkspaces = {
     parentPanel.goBack();
   },
 
+  getWorkspaceIcon(workspace) {
+    if (workspace.icon) {
+      return workspace.icon;
+    }
+    return workspace.name[0].toUpperCase();
+  },
+
   async _propagateWorkspaceData() {
     let currentContainer = document.getElementById("PanelUI-zen-workspaces-current-info");
     let workspaceList = document.getElementById("PanelUI-zen-workspaces-list");
@@ -130,7 +155,7 @@ var ZenWorkspaces = {
       element.setAttribute("context", "zenWorkspaceActionsMenu");
       let childs = window.MozXULElement.parseXULToFragment(`
         <div class="zen-workspace-icon">
-          ${workspace.name[0].toUpperCase()}
+          ${this.getWorkspaceIcon(workspace)}
         </div>
         <div class="zen-workspace-name">
           ${workspace.name}
@@ -216,7 +241,14 @@ var ZenWorkspaces = {
     }
     let activeWorkspace = (await this._workspaces()).workspaces.find(workspace => workspace.used);
     if (activeWorkspace) {
-      button.innerHTML = activeWorkspace.name[0].toUpperCase();
+      button.innerHTML = `
+        <div class="zen-workspace-sidebar-icon" style="${typeof activeWorkspace.icon === "undefined" ? "display: none;" : ""}">
+          ${this.getWorkspaceIcon(activeWorkspace)}
+        </div>
+        <div class="zen-workspace-sidebar-name">
+          ${activeWorkspace.name}
+        </div>
+      `;
     }
   },
 
@@ -254,12 +286,19 @@ var ZenWorkspaces = {
   },
 
   async saveWorkspaceFromInput() {
+    // Go to the next view
+    let parentPanel = document.getElementById("PanelUI-zen-workspaces-multiview");
+    PanelUI.showSubView("PanelUI-zen-workspaces-create-icons", parentPanel);
+  },
+
+  async saveWorkspaceFromIcon() {
     let workspaceName = this._workspaceInput.value;
     if (!workspaceName) {
       return;
     }
     this._workspaceInput.value = "";
-    await this.createAndSaveWorkspace(workspaceName);
+    let icon = document.querySelector("#PanelUI-zen-workspaces-create-icons-container [selected]");
+    await this.createAndSaveWorkspace(workspaceName, false, icon?.label);
     document.getElementById("PanelUI-zen-workspaces").hidePopup(true);
   },
 
@@ -311,23 +350,23 @@ var ZenWorkspaces = {
     await this._propagateWorkspaceData();
   },
 
-  _createWorkspaceData(name, isDefault) {
+  _createWorkspaceData(name, isDefault, icon) {
     let window = {
       uuid: gZenUIManager.generateUuidv4(),
       default: isDefault,
       used: true,
-      icon: "",
+      icon: icon,
       name: name,
     };
     this._prepareNewWorkspace(window);
     return window;
   },
 
-  async createAndSaveWorkspace(name = "New Workspace", isDefault = false) {
+  async createAndSaveWorkspace(name = "New Workspace", isDefault = false, icon = undefined) {
     if (!this.workspaceEnabled) {
       return;
     }
-    let workspaceData = this._createWorkspaceData(name, isDefault);
+    let workspaceData = this._createWorkspaceData(name, isDefault, icon);
     await this.saveWorkspace(workspaceData);
     await this.changeWorkspace(workspaceData);
   },

src/browser/base/content/zen-popupset.inc.xhtml

@@ -110,11 +110,22 @@
         </button>
       </html:moz-button-group>
     </panelview>
+    <panelview lockpanelvertical="true" id="PanelUI-zen-workspaces-create-icons" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+      <vbox>
+        <h1 data-l10n-id="zen-panel-ui-workspaces-create-text"></h1>
+        <hbox id="PanelUI-zen-workspaces-create-icons-container">
+        </hbox>
+      </vbox>
+      <html:moz-button-group class="panel-footer" id="PanelUI-zen-workspaces-create-footer">
+        <button default="true" slot="primary" id="PanelUI-zen-workspaces-create-save-icons" oncommand="ZenWorkspaces.saveWorkspaceFromIcon();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
+        </button>
+        <button id="PanelUI-zen-workspaces-create-cancel-icons" oncommand="ZenWorkspaces.cancelWorkspaceCreation();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
+        </button>
+      </html:moz-button-group>
+    </panelview>
   </panelmultiview>
 </panel>
 
-
-
 <menupopup id="zenWorkspaceActionsMenu"
             onpopupshowing="ZenWorkspaces.updateContextMenu(event);"
             onpopuphidden="ZenWorkspaces.onContextMenuClose();">

src/browser/themes/shared/zen-browser-shared.css

@@ -621,10 +621,18 @@ panelmultiview {
   pointer-events: none;
 }
 
+#zen-workspaces-button .zen-workspace-sidebar-name {
+  margin-left: 10px;
+}
+
 @media not (-moz-bool-pref: "zen.watermark.enabled") {
   #zen-watermark {
     display: none;
   }
+
+  #zen-workspaces-button .zen-workspace-sidebar-name {
+    display: none;
+  }
 }
 
 /* Expanded sidebar */

src/browser/themes/shared/zen-panel-ui.css

@@ -252,7 +252,6 @@
 #PanelUI-zen-workspaces {
   --panel-width: 320px;
   --panel-padding: 0;
-  min-height: 200px;
 }
 
 #PanelUI-zen-workspaces > panelmultiview {
@@ -263,12 +262,41 @@
   position: relative;
   padding: 15px;
   width: var(--panel-width);
+  min-height: 150px;
 }
 
 #PanelUI-zen-workspaces-create-input {
   margin-top: 10px;
 }
 
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid transparent;
+  border-radius: 7px;
+}
+
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton[selected="true"] {
+  border-color: var(--zen-colors-secondary);
+}
+
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-icon {
+  display: none;
+}
+
+#PanelUI-zen-workspaces-create-icons-container toolbarbutton .toolbarbutton-text {
+  min-width: unset;
+}
+
+#PanelUI-zen-workspaces-create-icons-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
+  gap: 8px;
+}
+
 #PanelUI-zen-workspaces-list {
   display: flex;
   flex-direction: column;