feat: Prevent background being removed on welcome screens, b=(no-bug), c=common, tabs, welcome

Author: mr-cheffy

src/zen/common/ZenStartup.mjs

@@ -3,6 +3,8 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 {
   var ZenStartup = {
+    _watermarkIgnoreElements: ['zen-browser-background'],
+
     init() {
       this.openWatermark();
       this._initBrowserBackground();
@@ -107,9 +109,10 @@
     closeWatermark() {
       document.documentElement.removeAttribute('zen-before-loaded');
       if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
+        let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', ');
         gZenUIManager.motion
           .animate(
-            '#browser > *, #urlbar, #tabbrowser-tabbox > *',
+            '#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *',
             {
               opacity: [0, 1],
             },

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

@@ -26,7 +26,7 @@
   }
 }
 
-:root[zen-before-loaded='true'] #browser > *,
+:root[zen-before-loaded='true'] #browser > *:not(#zen-browser-background),
 :root[zen-before-loaded='true'] #urlbar {
   opacity: 0 !important;
 }

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

@@ -1314,15 +1314,15 @@
 
   /* Style background */
   & .tab-background {
-    border-radius: var(--border-radius-medium) !important; /* Use medium radius */
-    transition: background 0.1s ease-in-out; /* Smooth background transition */
+    border-radius: var(--border-radius-medium) !important;
+    transition: background 0.1s ease-in-out;
   }
 
   --tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));
 
   &:not([visuallyselected], [multiselected='true']) .tab-background {
-    background: var(--zen-toolbar-element-bg); /* Use generic element background */
-    border: none; /* No border */
+    background: var(--zen-toolbar-element-bg);
+    border: none;
   }
 
   & .tab-content {

src/zen/welcome/ZenWelcome.mjs

@@ -6,8 +6,13 @@
   var _tabsToPin = [];
   var _tabsToPinEssentials = [];
 
+  const kZenElementsToIgnore = ['zen-browser-background'];
+
   function clearBrowserElements() {
     for (const element of document.getElementById('browser').children) {
+      if (kZenElementsToIgnore.includes(element.id)) {
+        continue;
+      }
       element.style.display = 'none';
     }
   }
@@ -266,11 +271,15 @@
       document.getElementById('zen-welcome').remove();
       document.documentElement.removeAttribute('zen-welcome-stage');
       for (const element of document.getElementById('browser').children) {
+        if (kZenElementsToIgnore.includes(element.id)) {
+          continue;
+        }
         element.style.opacity = 0;
         element.style.removeProperty('display');
       }
       gZenUIManager.updateTabsToolbar();
-      await animate('#browser > *', { opacity: [0, 1] });
+      let elementsToIgnore = kZenElementsToIgnore.map((id) => `#${id}`).join(', ');
+      await animate(`#browser > *:not(${elementsToIgnore})`, { opacity: [0, 1] });
       gZenUIManager.showToast('zen-welcome-finished');
     }
 

src/zen/welcome/zen-welcome.css

@@ -207,8 +207,8 @@
     }
 
     #zen-welcome-initial-essentials-browser {
-      width: 70%;
-      height: 80%;
+      min-width: 70%;
+      min-height: 80%;
       display: flex;
       margin-left: auto;
       margin-top: auto;
@@ -282,7 +282,7 @@
             --border-radius-medium: 1rem;
 
             &[visuallyselected] {
-              transform: scale(1.04);
+              transform: scale(1.06);
             }
 
             & .tab-background::after {