Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,35 +4,76 @@ body:
   - type: markdown
     attributes:
       value: |
-        Thank you for filing a bug report!
+        <p align="center">
+          <a href="https://zen-browser.app">
+            <picture>
+              <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-light.svg">
+              <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-dark.svg">
+              <img src="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-light.svg" alt="Zen Logo" width="64" height="64">
+            </picture>
+            <img src="https://raw.githubusercontent.com/zen-browser/desktop/dev/docs/assets/zen-browser.svg" alt="Zen Browser Text" width="156" height="64">
+          </a>
+        </p>
 
-        ## IMPORTANT READ
-        - Please provide descriptive titles. Bad titles do more harm than good.
-        - Please search existing issues to avoid creating duplicates.
-        - For enhancement requests, please use GitHub Discussions.
-        - Please fill out the template below to the best of your ability.
-        - Please describe the issue as much as possible and provide steps to reproduce it along with visual aids if possible.
+        <p align="center"><em>Thank you for filing a bug report!</em></p>
+
+        > [!IMPORTANT]
+        > - Please provide descriptive titles. Bad titles do more harm than good.
+        > - Please search existing issues to avoid creating duplicates.
+        > - For enhancement requests, please use GitHub Discussions.
+        > - Please fill out the template below to the best of your ability.
+        > - Please describe the issue as much as possible and provide steps to reproduce it along with visual aids if possible.
   - type: checkboxes
     id: captchas
     attributes:
-      label: Captchas
-      description: Just making sure you did actually read the instructions.
+      label: Preliminary Checks
+      description: Please confirm the following before submitting a bug report. This helps us triage and resolve issues more efficiently.
       options:
-        - label: I have read the instructions.
+        - label: I have read and understood the important section above.
+          required: true
         - label: I have searched existing issues and avoided creating duplicates.
+          required: true
         - label: I am not filing an enhancement request.
+          required: true
         - label: I have checked that this issue cannot be reproduced on Mozilla Firefox.
+          required: true
         - label: I have checked that this issue can be reproduced once I removed all my Mods and Custom CSS.
-    validations:
-      required: true
+          required: true
   - type: textarea
     id: what-happened
     attributes:
       label: What happened?
-      description: Also tell us, what did you expect to happen?
+      description: Describe the bug clearly and concisely.
       placeholder: Tell us what you see!
     validations:
       required: true
+  - type: input
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: Please write a description of what was supposed to happen.
+    validations:
+      required: true
+  - type: input
+    id: actual-behavior
+    attributes:
+      label: Actual behavior
+      description: Please write a description of what actually happened.
+    validations:
+      required: true
+  - type: textarea
+    id: how-to-reproduce
+    attributes:
+      label: Steps to reproduce
+      description: Please Provide numbered steps to reproduce this issue so developers can replicate them easily.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots and videos
+      description: |
+        If applicable, add screenshots or videos to help explain your problem.
   - type: input
     id: version
     attributes:
@@ -52,8 +93,8 @@ body:
         - Linux (Tarball)
         - macOS - aarch64
         - macOS - Intel
-        - Windows - x64
         - Windows - aarch64
+        - Windows - x64
         - Other
     validations:
       required: true
@@ -63,26 +104,26 @@ body:
       label: What component is this issue related to?
       options:
         - Other
-        - Compact Mode
-        - Workspaces
-        - Mods / Themes
-        - Glance
-        - URL Bar
-        - Tabs
-        - Split View
-        - Settings
-        - Privacy
-        - Performance
-        - Media Controler
-        - Tab unloading
-        - Tab Folders
-        - Keyboard Shortcuts
-        - Security
-        - Extensions
-        - Customizable UI / Toolbars
-        - Localization
         - Bookmarks
+        - Compact Mode
+        - Customizable UI / Toolbars
+        - Extensions
+        - Glance
+        - Keyboard Shortcuts
+        - Localization
+        - Media Controler
+        - Mods / Themes
+        - Performance
+        - Privacy
+        - Security
+        - Settings
+        - Split View
         - Sync
+        - Tab Folders
+        - Tab unloading
+        - Tabs
+        - URL Bar
+        - Workspaces
     validations:
       required: true
 

docs/assets/zen-browser.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 64" height="64" width="156">
+  <defs>
+    <style>
+      .label {
+        font-size: 1.5rem;
+        font-family: sans-serif;
+        font-weight: 700;
+        text-align: center;
+        fill: #1f1f1f;
+      }
+      @media (prefers-color-scheme: dark) {
+        .label {
+          fill: #d1cfc0;
+        }
+      }
+    </style>
+  </defs>
+  <text class="label" y="38" x="5">Zen Browser</text>
+</svg>

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 {