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

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

@@ -499,4 +499,28 @@
   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

@@ -2397,10 +2397,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
   }
 
   async openCreateForm() {
-    window.docShell.treeOwner
+    window.docShell.treeOwner.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIAppWindow).rollupAllPopups();
-          .QueryInterface(Ci.nsIInterfaceRequestor)
-          .getInterface(Ci.nsIAppWindow)
-          .rollupAllPopups();
     this.selectEmptyTab();
     const sidebarWidth = gNavToolbox.style.getPropertyValue('--actual-zen-sidebar-width');
     let elementsToAnimate = [gNavToolbox];
@@ -2409,7 +2406,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     }
     this._creatingNewWorkspace = true;
     gNavToolbox.style.zIndex = -1;
-    document.getElementById('zen-sidebar-splitter').style.setProperty('min-width', 'var(--zen-element-separation)', 'important');
+    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)'],
@@ -2424,7 +2423,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           delay: 0.2,
         }
       ),
-      this.createAndSaveWorkspace()
+      this.createAndSaveWorkspace(),
     ]);
     this._createWorkspcaeForm = window.MozXULElement.parseXULToFragment(`
       <hbox id="zen-workspace-create-form-wrapper">
@@ -2442,6 +2441,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         </vbox>
       </hbox>
     `);
-    gBrowser.tabpanels.appendChild(form);
+    gBrowser.tabpanels.appendChild(this._createWorkspcaeForm);
   }
 })();