gh-14713: Fix workspace creation crash (gh-14715)

Co-authored-by: mr. m <91018726+mr-cheffy@users.noreply.github.com>
Co-authored-by: mr. m <mr.m@tuta.com>

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

@@ -82,6 +82,7 @@ zen-workspace-creation-profile = Profile
     .tooltiptext = Profiles are used to separate cookies and site data between spaces.
 zen-workspace-creation-header = Create a Space
 zen-workspace-creation-label = Spaces are used to organize your tabs and sessions.
+zen-workspace-default-profile = Default
 
 zen-workspaces-delete-workspace-title = Delete Space?
 zen-workspaces-delete-workspace-body = Are you sure you want to delete { $name }? This action cannot be undone.

src/zen/common/styles/zen-theme.css

@@ -190,7 +190,7 @@
   --urlbar-box-active-bgcolor: var(--toolbarbutton-hover-background) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
   --urlbar-box-hover-bgcolor: var(--toolbarbutton-hover-background) !important;
-  --input-bgcolor: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
+  --input-text-background-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
   --toolbar-field-focus-background-color: light-dark(
     rgba(255, 255, 255, 0.25),
     rgba(0, 0, 0, 0.3)

src/zen/spaces/ZenSpaceCreation.mjs

@@ -2,6 +2,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const lazy = {};
+
+ChromeUtils.defineLazyGetter(lazy, "l10n", () => {
+  return new Localization(["browser/zen-workspaces.ftl"], true);
+});
+
 class nsZenWorkspaceCreation extends MozXULElement {
   #wasInCollapsedMode = false;
 
@@ -192,7 +198,9 @@ class nsZenWorkspaceCreation extends MozXULElement {
 
       this.currentProfile = {
         id: 0,
-        name: ContextualIdentityService.formatContextLabel("user-context-none"),
+        name: lazy.l10n.formatValueSync(
+          "zen-workspace-default-profile"
+        ),
       };
     } else {
       this.inputProfile.parentNode.hidden = true;
@@ -297,10 +305,21 @@ class nsZenWorkspaceCreation extends MozXULElement {
   }
 
   onProfilePopupShowing(event) {
-    return window.createUserContextMenu(event, {
+    window.createUserContextMenu(event, {
       isContextMenu: true,
       showDefaultTab: true,
+      showManageContainers: false,
     });
+
+    const defaultItem = event.target.querySelector(
+      '[data-usercontextid="0"]'
+    );
+    if (defaultItem) {
+      defaultItem.removeAttribute("data-l10n-id");
+      defaultItem.label = lazy.l10n.formatValueSync(
+        "zen-workspace-default-profile"
+      );
+    }
   }
 
   onProfilePopupCommand(event) {

src/zen/spaces/ZenSpaceManager.mjs

@@ -21,6 +21,10 @@ ChromeUtils.defineLazyGetter(lazy, "toolbarBackgroundElement", () => {
   return document.getElementById("zen-toolbar-background");
 });
 
+ChromeUtils.defineLazyGetter(lazy, "l10n", () => {
+  return new Localization(["browser/zen-workspaces.ftl"], true);
+});
+
 /**
  * Zen Spaces manager. This class is mainly responsible for the UI
  * and user interactions but it also contains some logic to manage
@@ -1200,11 +1204,21 @@ class nsZenWorkspaces {
       workspace = this.getActiveWorkspaceFromCache();
     }
     let containerTabId = workspace.containerTabId;
-    return window.createUserContextMenu(event, {
+    window.createUserContextMenu(event, {
       isContextMenu: true,
       excludeUserContextId: containerTabId,
       showDefaultTab: true,
     });
+
+    const defaultItem = event.target.querySelector(
+      '[data-usercontextid="0"]'
+    );
+    if (defaultItem) {
+      defaultItem.removeAttribute("data-l10n-id");
+      defaultItem.label = lazy.l10n.formatValueSync(
+        "zen-workspace-default-profile"
+      );
+    }
   }
 
   saveWorkspace(workspaceData) {

src/zen/spaces/create-workspace-form.css

@@ -26,7 +26,7 @@ zen-workspace-creation {
     }
 
     & form {
-      --input-bgcolor: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+      --input-text-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 
       display: flex;
       flex-direction: column;
@@ -53,7 +53,7 @@ zen-workspace-creation {
         padding: 9px 6px;
         border-radius: 8px !important;
         margin: 0;
-        background-color: var(--input-bgcolor);
+        background-color: var(--input-text-background-color);
         gap: 8px;
         align-items: center;
         padding-left: 8px;
@@ -108,7 +108,7 @@ zen-workspace-creation {
 
         & .zen-workspace-creation-name {
           --input-border-color: transparent;
-          --input-bgcolor: transparent;
+          --input-text-background-color: transparent;
           padding: 0 !important;
           width: 100%;
           outline: none;
@@ -120,7 +120,7 @@ zen-workspace-creation {
         padding: 4px;
         border-radius: 8px !important;
         margin: 0;
-        background-color: var(--input-bgcolor);
+        background-color: var(--input-text-background-color);
         gap: 4px;
         align-items: center;
         flex-wrap: wrap;
@@ -149,7 +149,7 @@ zen-workspace-creation {
       & .zen-workspace-creation-edit-theme-button {
         border-radius: 8px !important;
         margin: 0;
-        background-color: var(--input-bgcolor);
+        background-color: var(--input-text-background-color);
         justify-content: center;
         align-items: center;
         appearance: none;