feat(workspaces): enhance workspace creation form styling and update tabpanel integration

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

@@ -149,7 +149,7 @@
           <toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" oncommand="ZenWorkspaces.toggleReorderMode();" class="subviewbutton">
             <image></image>
           </toolbarbutton>
-          <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
+          <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openCreateForm();" class="subviewbutton">
             <image></image>
           </toolbarbutton>
         </hbox>

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

@@ -365,7 +365,7 @@ menuitem {
   }
 
   & .zen-toast {
-    padding: 0.9rem 0.8rem;
+    padding: 0.5rem 0.6rem;
     border-radius: 12px;
     background: linear-gradient(
       170deg,

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

@@ -489,3 +489,38 @@
 #zen-current-workspace-indicator-container[hidden='true'] {
   display: none !important;
 }
+
+#zen-workspace-create-form-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & .PanelUI-zen-workspaces-creation-wraper {
+    border-radius: 5px;
+    border: 1px solid var(--zen-colors-border);
+
+    margin-top: 10px;
+    background: var(--input-bgcolor, Field);
+
+    & .PanelUI-zen-workspaces-icons-container {
+      padding: 10px 0;
+      min-width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-right: 1px solid var(--zen-colors-border);
+      margin-right: 2px;
+    }
+
+    & html|input {
+      border: none;
+      outline: none !important;
+      width: 100%;
+    }
+  }
+}

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

@@ -1913,7 +1913,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     return window;
   }
 
-  async createAndSaveWorkspace(name = 'New Workspace', isDefault = false, icon = undefined, dontChange = false) {
+  async createAndSaveWorkspace(name = 'Space', isDefault = false, icon = undefined, dontChange = false) {
     if (!this.workspaceEnabled) {
       return;
     }
@@ -2395,4 +2395,52 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       this._processingResize = false;
     });
   }
+
+  async openCreateForm() {
+    window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
+    this.selectEmptyTab();
+    const sidebarWidth = gNavToolbox.style.getPropertyValue('--actual-zen-sidebar-width');
+    let elementsToAnimate = [gNavToolbox];
+    if (gZenVerticalTabsManager._hasSetSingleToolbar) {
+      elementsToAnimate.push(gURLBar.textbox);
+    }
+    this._creatingNewWorkspace = true;
+    gNavToolbox.style.zIndex = -1;
+    document
+      .getElementById('zen-sidebar-splitter')
+      .style.setProperty('min-width', 'var(--zen-element-separation)', 'important');
+    await Promise.all([
+      gZenUIManager.motion.animate(elementsToAnimate, {
+        transform: ['scale(1)', 'scale(0.8)'],
+        opacity: [1, 0],
+      }),
+      gZenUIManager.motion.animate(
+        gBrowser.tabpanels,
+        {
+          marginLeft: ['0px', '-' + sidebarWidth],
+        },
+        {
+          delay: 0.2,
+        }
+      ),
+      this.createAndSaveWorkspace(),
+    ]);
+    this._createWorkspcaeForm = window.MozXULElement.parseXULToFragment(`
+      <hbox id="zen-workspace-create-form-wrapper">
+        <vbox id="zen-workspace-create-form">
+          <vbox>
+            <label id="zen-workspace-create-form-title" data-l10n-id="zen-workspace-create-form-title" />
+            <description data-l10n-id="zen-workspace-create-form-description" />
+          </vbox>
+          <vbox>
+            <hbox class="PanelUI-zen-workspaces-creation-wraper">
+              <hbox class="PanelUI-zen-workspaces-icons-container create" onclick="ZenWorkspaces.onWorkspaceIconContainerClick(event);"></hbox>
+              <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceCreationNameChange(this);" />
+            </hbox>
+          </vbox>
+        </vbox>
+      </hbox>
+    `);
+    gBrowser.tabpanels.appendChild(this._createWorkspcaeForm);
+  }
 })();