Refactor ZenWorkspaces to use _createNewTabForWorkspace method for preparing new workspace

src/browser/base/content/ZenWorkspaces.mjs

@@ -102,6 +102,16 @@ var ZenWorkspaces = {
 
   // Workspaces dialog UI management
 
+  openSaveDialog() {
+    let parentPanel = document.getElementById("PanelUI-zen-workspaces-multiview");
+    PanelUI.showSubView("PanelUI-zen-workspaces-create", parentPanel);
+  },
+
+  cancelWorkspaceCreation() {
+    let parentPanel = document.getElementById("PanelUI-zen-workspaces-multiview");
+    parentPanel.goBack();
+  },
+
   async _propagateWorkspaceData() {
     let currentContainer = document.getElementById("PanelUI-zen-workspaces-current-info");
     let workspaceList = document.getElementById("PanelUI-zen-workspaces-list");
@@ -190,6 +200,10 @@ var ZenWorkspaces = {
 
   // Workspaces management
 
+  get _workspaceInput() {
+    return document.getElementById("PanelUI-zen-workspaces-create-input");
+  },
+
   _prepareNewWorkspace(window) {
     document.documentElement.setAttribute("zen-workspace-id", window.uuid);
     this._createNewTabForWorkspace(window);
@@ -200,6 +214,25 @@ var ZenWorkspaces = {
     tab.setAttribute("zen-workspace-id", window.uuid);
   },
 
+  async saveWorkspaceFromInput() {
+    let workspaceName = this._workspaceInput.value;
+    if (!workspaceName) {
+      return;
+    }
+    this._workspaceInput.value = "";
+    await this.createAndSaveWorkspace(workspaceName);
+    document.getElementById("PanelUI-zen-workspaces").hidePopup(true);
+  },
+
+  onWorkspaceNameChange(event) {
+    let button = document.getElementById("PanelUI-zen-workspaces-create-save");
+    if (this._workspaceInput.value === "") {
+      button.setAttribute("disabled", "true");
+      return;
+    }
+    button.removeAttribute("disabled");
+  },
+
   async changeWorkspace(window) {
     if (!this.workspaceEnabled) {
       return;

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

@@ -76,25 +76,39 @@
   </vbox>
 </panelview>
 
-<panel id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
-  <vbox>
-    <vbox>
-      <hbox>
-        <h3 data-l10n-id="zen-panel-ui-current-window-text"></h3>
-        <hbox class="translations-panel-beta" role="image" aria-label="Beta">
-          <image class="translations-panel-beta-icon"></image>
+<panel type="arrow" role="alertdialog" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
+  <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
+    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true">
+      <vbox>
+        <hbox>
+          <h3 data-l10n-id="zen-panel-ui-current-window-text"></h3>
+          <hbox class="translations-panel-beta" role="image" aria-label="Beta">
+            <image class="translations-panel-beta-icon"></image>
+          </hbox>
+          <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.openSaveDialog();" class="subviewbutton">
+            <image></image>
+          </toolbarbutton>
         </hbox>
-      </hbox>
-      <html:div id="PanelUI-zen-workspaces-current-info">
-      </html:div>
-    </vbox>
-    <vbox>
-      <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
-      <html:div id="PanelUI-zen-workspaces-list">
-      </html:div>
-    </vbox>
-    <toolbarbutton id="PanelUI-zen-workspaces-new" oncommand="ZenWorkspaces.createAndSaveWorkspace();" class="subviewbutton">
-      <image></image>
-    </toolbarbutton>
-  </vbox>
+        <html:div id="PanelUI-zen-workspaces-current-info">
+        </html:div>
+      </vbox>
+      <vbox>
+        <h3 data-l10n-id="zen-panel-ui-workspaces-text"></h3>
+        <html:div id="PanelUI-zen-workspaces-list">
+        </html:div>
+      </vbox>
+    </panelview>
+    <panelview id="PanelUI-zen-workspaces-create" 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>
+        <html:input autofocus="true" id="PanelUI-zen-workspaces-create-input" type="text" placeholder="Enter workspace name" oninput="ZenWorkspaces.onWorkspaceNameChange(this);" />
+      </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" oncommand="ZenWorkspaces.saveWorkspaceFromInput();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-save">
+        </button>
+        <button id="PanelUI-zen-workspaces-create-cancel" oncommand="ZenWorkspaces.cancelWorkspaceCreation();" class="footer-button" data-l10n-id="zen-panel-ui-workspaces-create-cancel">
+        </button>
+      </html:moz-button-group>
+    </panelview>
+  </panelmultiview>
 </panel>

src/browser/locales/en-US/browser/preferences/zen-preferences.ftl

@@ -23,9 +23,9 @@ zen-look-and-feel-compact-view-enabled =
 
 
 
-pane-zen-workspaces-title = Workspaces
+pane-settings-workspaces-title = Workspaces
 category-zen-workspaces =
-    .tooltiptext = { pane-workspaces-title }
+    .tooltiptext = { pane-settings-workspaces-title }
 
 pane-zen-workspaces-header = Workspaces
 zen-settings-workspaces-header = General settings for workspaces

src/browser/locales/en-US/browser/zen-workspaces.ftl

@@ -2,3 +2,12 @@
 zen-panel-ui-current-window-text = Current Window
 
 zen-panel-ui-workspaces-text = Other Workspaces
+
+zen-panel-ui-workspaces-create-text = Create Workspace
+
+zen-panel-ui-workspaces-create-save =
+  .label = Create Workspace
+  .accesskey = S
+zen-panel-ui-workspaces-create-cancel =
+  .label = Cancel
+  .accesskey = C

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

@@ -249,14 +249,23 @@
 }
 
 #PanelUI-zen-workspaces {
-  width: 300px;
+  --panel-width: 320px;
+  width: var(--panel-width);
   min-height: 200px;
 }
 
-#PanelUI-zen-workspaces > vbox {
-  width: 100%;
-  padding: 15px 20px;
+#PanelUI-zen-workspaces > panelmultiview {
+  align-items: flex-start;
+}
+
+#PanelUI-zen-workspaces panelmultiview panelview {
   position: relative;
+  width: 100%;
+  overflow: hidden !important;
+}
+
+#PanelUI-zen-workspaces-create-input {
+  margin-top: 10px;
 }
 
 #PanelUI-zen-workspaces-list {
@@ -264,8 +273,9 @@
   flex-direction: column;
 }
 
-#PanelUI-zen-workspaces > vbox > vbox:nth-child(2) {
-  margin-top: 10px;
+#PanelUI-zen-workspaces .panel-viewcontainer,
+#PanelUI-zen-workspaces .panel-viewstack {
+  width: 100%;
 }
 
 #PanelUI-zen-workspaces-current-info toolbarbutton:last-child {
@@ -274,8 +284,8 @@
 
 #PanelUI-zen-workspaces-list toolbarbutton,
 #PanelUI-zen-workspaces-current-info toolbarbutton  {
-  padding: 5px 10px;
-  border-radius: 5px;
+  padding: 5px;
+  border-radius: 7px;
 
   margin-left: 0 !important;
   margin-right: 0 !important;
@@ -290,8 +300,8 @@
   & .zen-workspace-icon {
     width: 30px;
     height: 30px;
-    border-radius: 5px;
-    margin-right: 15px;
+    border-radius: 7px;
+    margin-right: 10px;
     border: 1px solid var(--zen-colors-border);
     display: flex;
     justify-content: center;
@@ -307,13 +317,32 @@
   }
 }
 
+#PanelUI-zen-workspaces-current-info toolbarbutton:first-child {
+  margin-bottom: 10px;
+  margin-top: 5px;
+}
+
+#PanelUI-zen-workspaces-view vbox:nth-child(2) {
+  margin-top: 10px;
+}
+
 #PanelUI-zen-workspaces-new {
-  position: absolute;
-  top: 10px;
+  margin-left: auto;
   min-height: 1px !important;
-  right: 10px;
   padding: 3px;
   border-radius: 4px;
   width: 20px;
   height: 20px;
 }
+
+#PanelUI-zen-workspaces-create-footer {
+  padding-bottom: 0 !important;
+  margin-top: 20px;
+  margin-left: 0;
+  margin-bottom: 0 !important;
+  width: 100%;
+}
+
+#PanelUI-zen-workspaces-create-footer button[default="true"] {
+  width: 100%;
+}