feat: Fixed creating new unsynced windows rendering the window blank, b=no-bug, c=common, tabs, workspaces

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

@@ -10,7 +10,10 @@ zen-menubar-toggle-pinned-tabs =
         }
 
 zen-menubar-appearance =
-    .label = Website Appearance
+    .label = Appearance
+
+zen-menubar-appearance-description =
+    .label = Websites will use:
 
 zen-menubar-appearance-auto =
     .label = Automatic

src/zen/common/modules/ZenMenubar.mjs

@@ -19,6 +19,7 @@ class nsZenMenuBar {
     let appearanceMenu = window.MozXULElement.parseXULToFragment(`
       <menu data-l10n-id="zen-menubar-appearance">
         <menupopup>
+          <menuitem data-l10n-id="zen-menubar-appearance-description" disabled="true" />
           <menuitem data-l10n-id="zen-menubar-appearance-auto" data-type="auto" type="radio" checked="true" />
           <menuitem data-l10n-id="zen-menubar-appearance-light" data-type="light" type="radio" />
           <menuitem data-l10n-id="zen-menubar-appearance-dark" data-type="dark" type="radio" />

src/zen/common/styles/zen-browser-ui.css

@@ -58,6 +58,7 @@
     background: var(--zen-main-browser-background);
     opacity: var(--zen-background-opacity);
     transition: 0s;
+    background-blend-mode: screen;
   }
 
   &:is(.zen-toolbar-background) {
@@ -70,6 +71,7 @@
     background: var(--zen-main-browser-background-old);
     opacity: calc(1 - var(--zen-background-opacity));
     transition: 0s;
+    background-blend-mode: screen;
   }
 
   &:is(.zen-toolbar-background) {

src/zen/drag-and-drop/ZenDragAndDrop.js

@@ -122,7 +122,9 @@
         }
         // Apply a transform translate to the tab in order to center it within the drag image
         // based on the event coordinates.
-        tabClone.style.transform = `translate(${(tabRect.width - dragData.offsetX) / 2}px, ${(tabRect.height - dragData.offsetY) / 2}px)`;
+        if (!movingTabs.length > 1) {
+          tabClone.style.transform = `translate(${(tabRect.width - dragData.offsetX) / 2}px, ${(tabRect.height - dragData.offsetY) / 2}px)`;
+        }
         wrapper.appendChild(tabClone);
       }
       this.#maybeCreateDragImageDot(movingTabs, wrapper);

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1063,6 +1063,7 @@
 
 @media -moz-pref('zen.tabs.show-newtab-vertical') {
   #tabs-newtab-button {
+    max-height: var(--tab-min-height);
     display: flex !important;
     transition: scale 0.1s ease;
     #tabbrowser-tabs[movingtab] & {

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1216,9 +1216,9 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
         let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
         let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
         return [
-          `linear-gradient(-5deg, ${color1} 0%, transparent 90%)`,
+          `linear-gradient(-5deg, ${color1} 10%, transparent 80%)`,
           `radial-gradient(circle at 95% 0%, ${color3} 0%, transparent 75%)`,
-          `radial-gradient(circle at 0% 0%, ${color2} 0%, transparent 200%)`,
+          `radial-gradient(circle at 0% 0%, ${color2} 10%, transparent 70%)`,
         ].join(', ');
       }
     }

src/zen/workspaces/ZenWorkspaces.mjs

@@ -438,7 +438,9 @@ class nsZenWorkspaces {
 
   getCurrentSpaceContainerId() {
     const currentWorkspace = this.getActiveWorkspaceFromCache();
-    return currentWorkspace?.containerTabId || 0;
+    return typeof currentWorkspace?.containerTabId === 'number'
+      ? currentWorkspace.containerTabId
+      : 0;
   }
 
   getCurrentEssentialsContainer() {
@@ -812,10 +814,6 @@ class nsZenWorkspaces {
       );
       return ZenSessionStore.getClonedSpaces();
     }
-    if (!this.currentWindowIsSyncing) {
-      this._workspaceCache = this._tempWorkspace ? [this._tempWorkspace] : [];
-      this.#activeWorkspace = this._tempWorkspace?.uuid;
-    }
     return [...this._workspaceCache];
   }
 
@@ -1894,28 +1892,23 @@ class nsZenWorkspaces {
         previousBackgroundOpacity = 1 - previousBackgroundOpacity;
       }
       gZenThemePicker.previousBackgroundOpacity = previousBackgroundOpacity;
-      await new Promise((resolve) => {
-        requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(
-            '--zen-background-opacity',
-            previousBackgroundOpacity
-          );
-          animations.push(
-            gZenUIManager.motion.animate(
-              document.documentElement,
-              {
-                '--zen-background-opacity': [previousBackgroundOpacity, 1],
-              },
-              {
-                type: 'spring',
-                bounce: 0,
-                duration: kGlobalAnimationDuration,
-              }
-            )
-          );
-          resolve();
-        });
-      });
+      document.documentElement.style.setProperty(
+        '--zen-background-opacity',
+        previousBackgroundOpacity
+      );
+      animations.push(
+        gZenUIManager.motion.animate(
+          document.documentElement,
+          {
+            '--zen-background-opacity': [previousBackgroundOpacity, 1],
+          },
+          {
+            type: 'spring',
+            bounce: 0,
+            duration: kGlobalAnimationDuration,
+          }
+        )
+      );
     }
     for (const element of document.querySelectorAll('zen-workspace')) {
       if (element.classList.contains('zen-essentials-container')) {
@@ -2385,6 +2378,11 @@ class nsZenWorkspaces {
   }
 
   #createWorkspaceData(name, icon, containerTabId = 0) {
+    if (!this.currentWindowIsSyncing) {
+      containerTabId = parseInt(gBrowser.selectedTab.getAttribute('usercontextid')) || 0;
+      let label = ContextualIdentityService.getUserContextLabel(containerTabId) || 'Default';
+      name = this.isPrivateWindow ? 'Private ' + name : label;
+    }
     let workspace = {
       uuid: gZenUIManager.generateUuidv4(),
       icon: icon,
@@ -2405,11 +2403,6 @@ class nsZenWorkspaces {
     if (!this.workspaceEnabled) {
       return;
     }
-    if (!this.currentWindowIsSyncing) {
-      containerTabId = parseInt(gBrowser.selectedTab.getAttribute('usercontextid')) || 0;
-      let label = ContextualIdentityService.getUserContextLabel(containerTabId) || 'Default';
-      name = this.isPrivateWindow ? 'Private ' + name : label;
-    }
     // get extra tabs remaning (e.g. on new profiles) and just move them to the new workspace
     const extraTabs = Array.from(gBrowser.tabContainer.arrowScrollbox.children).filter(
       (child) =>
@@ -2424,11 +2417,7 @@ class nsZenWorkspaces {
       this.#createWorkspaceTabsSection(workspaceData, extraTabs);
       await this._organizeWorkspaceStripLocations(workspaceData);
     }
-    if (!this.currentWindowIsSyncing) {
-      this._tempWorkspace = workspaceData;
-    } else {
-      this.saveWorkspace(workspaceData);
-    }
+    this.saveWorkspace(workspaceData);
     if (!dontChange) {
       if (beforeChangeCallback) {
         try {