feat: Small tweaks for workspace creation form, b=closes #8974, c=common, tabs, workspaces

l10n

@@ -1 +1 @@
-Subproject commit bd878687ab8509747761395e8eb8853d804dd3a8
+Subproject commit a33517969f5b377654c006994a675ece4cd785d8

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

@@ -39,11 +39,14 @@
 .close-icon,
 #zen-sidebar-web-panel-close,
 #zen-glance-sidebar-close,
-#PanelUI-zen-emojis-picker-none,
 .zen-theme-picker-custom-list-item-remove {
   list-style-image: url('close.svg') !important;
 }
 
+#PanelUI-zen-emojis-picker-none {
+  list-style-image: url('trash.svg');
+}
+
 .reset-icon {
   list-style-image: url('reload.svg') !important;
 }

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -126,6 +126,7 @@
   skin/classic/browser/zen-icons/tool-profiler.svg                      (../shared/zen-icons/lin/tool-profiler.svg) 
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
+  skin/classic/browser/zen-icons/trash.svg                      (../shared/zen-icons/lin/trash.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
   skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 
@@ -264,6 +265,7 @@
   skin/classic/browser/zen-icons/tool-profiler.svg                      (../shared/zen-icons/lin/tool-profiler.svg) 
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
+  skin/classic/browser/zen-icons/trash.svg                      (../shared/zen-icons/lin/trash.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
   skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 
@@ -402,6 +404,7 @@
   skin/classic/browser/zen-icons/tool-profiler.svg                      (../shared/zen-icons/lin/tool-profiler.svg) 
   skin/classic/browser/zen-icons/tracking-protection.svg                      (../shared/zen-icons/lin/tracking-protection.svg) 
   skin/classic/browser/zen-icons/translations.svg                      (../shared/zen-icons/lin/translations.svg) 
+  skin/classic/browser/zen-icons/trash.svg                      (../shared/zen-icons/lin/trash.svg) 
   skin/classic/browser/zen-icons/unpin.svg                      (../shared/zen-icons/lin/unpin.svg) 
   skin/classic/browser/zen-icons/video-blocked-fill.svg                      (../shared/zen-icons/lin/video-blocked-fill.svg) 
   skin/classic/browser/zen-icons/video-fill.svg                      (../shared/zen-icons/lin/video-fill.svg) 

src/browser/themes/shared/zen-icons/lin/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="m13.474,7.25l-.374,7.105c-.056,1.062-.934,1.895-1.997,1.895h-4.205c-1.064,0-1.941-.833-1.997-1.895l-.374-7.105" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><line x1="2.75" y1="4.75" x2="15.25" y2="4.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></line><path d="m6.75,4.75v-2c0-.552.448-1,1-1h2.5c.552,0,1,.448,1,1v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" data-color="color-2"></path></svg>

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -107,6 +107,9 @@ export var ZenCustomizableUI = new (class {
   _initCreateNewButton(window) {
     const button = window.document.getElementById('zen-create-new-button');
     button.addEventListener('command', () => {
+      if (button.hasAttribute('open')) {
+        return;
+      }
       const image = button.querySelector('image');
       const popup = window.document.getElementById('zenCreateNewPopup');
       button.setAttribute('open', 'true');

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -786,7 +786,7 @@
       if (!this.enabled) {
         return false;
       }
-      movingTabs = [...movingTabs]
+      movingTabs = [...movingTabs];
       try {
         const pinnedTabsTarget =
           event.target.closest('.zen-workspace-pinned-tabs-section') ||

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -79,9 +79,8 @@
       const fromForm = event.explicitOriginalTarget?.classList?.contains(
         'zen-workspace-creation-edit-theme-button'
       );
-      const position = fromForm ? 'bottomleft bottomright' : 'topright topleft';
       PanelMultiView.openPopup(this.panel, this.toolbox, {
-        position,
+        position: 'topright topleft',
         triggerEvent: event,
         y: fromForm ? -160 : 0,
       });

src/zen/workspaces/ZenWorkspaceCreation.mjs

@@ -23,8 +23,10 @@
         <vbox class="zen-workspace-creation" flex="1">
           <form>
             <vbox>
-              <html:h1 data-l10n-id="zen-workspace-creation-title" class="zen-workspace-creation-title" />
-              <label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
+              <html:h1 data-l10n-id="zen-workspace-creation-header" class="zen-workspace-creation-title" />
+              <html:div>
+                <label data-l10n-id="zen-workspace-creation-label" class="zen-workspace-creation-label" />
+              </html:div>
             </vbox>
             <vbox class="zen-workspace-creation-form">
               <hbox class="zen-workspace-creation-name-wrapper">
@@ -68,7 +70,7 @@
     get elementsToAnimate() {
       return [
         this.querySelector('.zen-workspace-creation-title'),
-        this.querySelector('.zen-workspace-creation-label'),
+        this.querySelector('.zen-workspace-creation-label').parentElement,
         this.querySelector('.zen-workspace-creation-name-wrapper'),
         this.querySelector('.zen-workspace-creation-profile-wrapper'),
         this.querySelector('.zen-workspace-creation-edit-theme-button'),
@@ -89,8 +91,6 @@
       this.appendChild(this.constructor.fragment);
       this.initializeAttributeInheritance();
 
-      this.style.visibility = 'collapse';
-
       this.inputName = this.querySelector('.zen-workspace-creation-name');
       this.inputIcon = this.querySelector('.zen-workspace-creation-icon-label');
       this.inputProfile = this.querySelector('.zen-workspace-creation-profile');
@@ -152,12 +152,11 @@
         this.inputProfile.parentNode.hidden = true;
       }
 
+      document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';
+
       gZenUIManager.motion
         .animate(
-          [
-            gBrowser.tabContainer,
-            ...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
-          ],
+          [gBrowser.tabContainer, gURLBar.textbox],
           {
             opacity: [1, 0],
           },
@@ -170,9 +169,9 @@
         .then(() => {
           gBrowser.tabContainer.style.visibility = 'collapse';
           if (gZenVerticalTabsManager._hasSetSingleToolbar) {
-            gURLBar.textbox.style.visibility = 'collapse';
+            document.getElementById('nav-bar').style.visibility = 'collapse';
           }
-          this.style.visibility = '';
+          this.style.visibility = 'visible';
           gZenUIManager.motion.animate(
             this.elementsToAnimate,
             {
@@ -180,7 +179,7 @@
               opacity: [0, 1],
             },
             {
-              duration: 0.9,
+              duration: 0.6,
               type: 'spring',
               bounce: 0,
               delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }),
@@ -203,7 +202,7 @@
       await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
       await gZenWorkspaces.updateTabsContainers();
 
-      this.tabContainer._invalidateCachedTabs();
+      gBrowser.tabContainer._invalidateCachedTabs();
 
       if (gZenVerticalTabsManager._canReplaceNewTab) {
         BrowserCommands.openTab();
@@ -273,13 +272,15 @@
           opacity: [1, 0],
         },
         {
-          duration: 0.9,
+          duration: 0.4,
           type: 'spring',
           bounce: 0,
           delay: gZenUIManager.motion.stagger(0.05),
         }
       );
 
+      document.getElementById('zen-sidebar-splitter').style.pointerEvents = '';
+
       gZenWorkspaces.removeChangeListeners(this.handleZenWorkspacesChangeBind);
       for (const element of this.constructor.elementsToDisable) {
         const el = document.getElementById(element);
@@ -298,7 +299,7 @@
       gBrowser.tabContainer.style.visibility = '';
       gBrowser.tabContainer.style.opacity = 0;
       if (gZenVerticalTabsManager._hasSetSingleToolbar) {
-        gURLBar.textbox.style.visibility = '';
+        document.getElementById('nav-bar').style.visibility = '';
         gURLBar.textbox.style.opacity = 0;
       }
 
@@ -309,10 +310,7 @@
       await gZenWorkspaces.updateTabsContainers();
 
       await gZenUIManager.motion.animate(
-        [
-          gBrowser.tabContainer,
-          ...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []),
-        ],
+        [gBrowser.tabContainer, gURLBar.textbox],
         {
           opacity: [0, 1],
         },

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

@@ -7,6 +7,8 @@
 zen-workspace-creation {
   flex: 1;
   max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding));
+  padding: 3px;
+  visibility: collapse;
 
   & .zen-workspace-creation {
     justify-content: center;
@@ -14,22 +16,25 @@ zen-workspace-creation {
     & .zen-workspace-creation-title {
       font-size: large;
       margin-bottom: 5px;
+      text-align: center;
     }
 
     & .zen-workspace-creation-label {
       margin: 0;
       opacity: 0.4;
+      text-align: center;
     }
 
     & form {
-      --input-border-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
-      --input-bgcolor: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+      --input-bgcolor: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
 
       display: flex;
       flex-direction: column;
       width: calc(100% - 10px);
       margin: auto;
-      gap: 1.2rem;
+      gap: 2.2rem;
+      margin-top: 2.2rem;
+      height: 100%;
 
       & .zen-workspace-creation-form {
         gap: 0.6rem;
@@ -38,11 +43,12 @@ zen-workspace-creation {
       & xul|button {
         border: none;
         margin: 0;
+        font-weight: 400 !important;
       }
 
       & .zen-workspace-creation-name-wrapper {
         padding: 9px 6px;
-        border-radius: var(--zen-button-border-radius);
+        border-radius: 8px !important;
         margin: 0;
         background-color: var(--input-bgcolor);
         gap: 8px;
@@ -94,7 +100,7 @@ zen-workspace-creation {
 
       & .zen-workspace-creation-profile-wrapper {
         padding: 4px;
-        border-radius: var(--zen-button-border-radius);
+        border-radius: 8px !important;
         margin: 0;
         background-color: var(--input-bgcolor);
         gap: 4px;
@@ -118,18 +124,22 @@ zen-workspace-creation {
       }
 
       & .zen-workspace-creation-edit-theme-button {
-        border-radius: var(--zen-button-border-radius);
+        border-radius: 8px !important;
         margin: 0;
         background-color: var(--input-bgcolor);
         justify-content: center;
         align-items: center;
         appearance: none;
         padding: 10px !important;
+
+        &:hover {
+          background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+        }
       }
 
       & .zen-workspace-creation-buttons {
         gap: 0.5rem;
-        margin-top: 2rem;
+        margin-top: auto;
 
         & .zen-workspace-creation-create-button {
           color: var(--button-text-color-primary) !important;