style: adjust padding and border radius in settings window CSS; add test content in XHTML

feat: implement settings window with styling and layout adjustments
feat: add settings window for Zen UI
2025-12-24 07:08:52 +00:00 · 2025-03-20 12:33:17 +01:00 · 2025-03-20 00:16:38 +01:00 · 2025-03-19 22:58:38 +01:00
34 changed files with 231 additions and 252 deletions
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -517,8 +517,6 @@ jobs:
          repository: ./updates-server

      - name: Generate Release Notes
-        env:
-          RELEASE_BRANCH: ${{ inputs.update_branch }}
        run: bash .github/workflows/src/generate_release_notes.sh

        # If we are on Twilight, we want to just update the Twilight tag's release
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@

 ## 🖥️ Compatibility

-Zen is currently built using Firefox version `136.0.2`! 🚀
+Zen is currently built using Firefox version `136.0.1`! 🚀

 - [`Zen Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 136.0`!
 - Check out the latest [release notes](https://zen-browser.app/release-notes)!
--- a/firefox-cache/l10n-last-commit-hash
+++ b/firefox-cache/l10n-last-commit-hash
@@ -1 +1 @@
-6013afe489c3d5e19c5f0d0f6c3f94b91f5bd7d1
+6ad0ab3c43a6208d8bcd997b40e802fccd48ba0a
--- a/flatpak/app.zen_browser.zen.yml.template
+++ b/flatpak/app.zen_browser.zen.yml.template
@@ -28,7 +28,7 @@ finish-args:
  - --system-talk-name=org.freedesktop.NetworkManager
  - --talk-name=org.a11y.Bus
  - --env=GTK_PATH=/app/lib/gtkmodules
-  - --env=MESA_SHADER_CACHE_DIR=/var/cache/mesa_shader_cache_db
+  - --env=MESA_SHADER_CACHE_DIR=$XDG_RUNTIME_DIR/app/$FLATPAK_ID/cache/mesa_shader_cache_db
 modules:
  - name: zen_browser
    buildsystem: simple
--- a/2
+++ b/2
--- a/scripts/update_ff.py
+++ b/scripts/update_ff.py
@@ -64,12 +64,6 @@ def update_l10n_last_commit_hash():
    if not os.path.exists("firefox-cache"):
      os.mkdir("firefox-cache")
    os.system("cat l10n-temp/.git/refs/heads/main > firefox-cache/l10n-last-commit-hash")
-    # Remove new line character
-    data = ""
-    with open("firefox-cache/l10n-last-commit-hash", "r") as f:
-      data = f.read()
-    with open("firefox-cache/l10n-last-commit-hash", "w") as f:
-      f.write(data.strip())
  except KeyboardInterrupt:
    print("Exiting...")
  shutil.rmtree("l10n-temp")
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -90,8 +90,6 @@ pref('zen.tabs.show-newtab-vertical', true);
 pref('zen.view.show-newtab-button-border-top', false);
 pref('zen.view.show-newtab-button-top', true);

-perf('zen.mediacontrols.enabled', true);
-
 #ifdef MOZILLA_OFFICIAL
 pref('zen.rice.api.url', 'https://share.zen-browser.app', locked);
 pref('zen.injections.match-urls', 'https://zen-browser.app/*,https://share.zen-browser.app/*', locked);
@@ -201,6 +199,7 @@ pref('zen.startup.smooth-scroll-in-tabs', true);

 // Zen Workspaces
 pref('zen.workspaces.disabled_for_testing', false);
+pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.force-container-workspace', false);
 pref('zen.workspaces.open-new-tab-if-last-unpinned-tab-is-closed', false);
--- a/src/browser/base/content/ZenUIManager.mjs
+++ b/src/browser/base/content/ZenUIManager.mjs
@@ -250,7 +250,7 @@ var gZenUIManager = {
    const toast = this._createToastElement(messageId, options);
    this._toastContainer.removeAttribute('hidden');
    this._toastContainer.appendChild(toast);
-    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.7 });
+    await this.motion.animate(toast, { opacity: [0, 1], scale: [0.8, 1] }, { type: 'spring', bounce: 0.5, duration: 0.5 });
    await new Promise((resolve) => setTimeout(resolve, 3000));
    await this.motion.animate(toast, { opacity: [1, 0], scale: [1, 0.9] }, { duration: 0.2, bounce: 0 });
    const toastHeight = toast.getBoundingClientRect().height;
@@ -265,6 +265,14 @@ var gZenUIManager = {
  get panelUIPosition() {
    return gZenVerticalTabsManager._hasSetSingleToolbar ? 'bottomleft topleft' : 'bottomright topright';
  },
+
+  openSettingsWindow() {
+    window.openDialog(
+      'chrome://browser/content/zen-components/windows/zen-settings.xhtml',
+      '_blank',
+      'centerscreen,chrome,dialog=no,resizable=no,titlebar'
+    );
+  },
 };

 var gZenVerticalTabsManager = {
--- a/src/browser/base/content/zen-assets.jar.inc.mn
+++ b/src/browser/base/content/zen-assets.jar.inc.mn
@@ -52,6 +52,8 @@
        content/browser/zen-styles/zen-welcome.css              (content/zen-styles/zen-welcome.css)
        content/browser/zen-styles/zen-media-controls.css       (content/zen-styles/zen-media-controls.css)

+        content/browser/zen-styles/windows/zen-settings.css     (content/zen-styles/windows/zen-settings.css)
+
        content/browser/zen-styles/zen-panels/bookmarks.css     (content/zen-styles/zen-panels/bookmarks.css)
        content/browser/zen-styles/zen-panels/extensions.css    (content/zen-styles/zen-panels/extensions.css)
        content/browser/zen-styles/zen-panels/print.css         (content/zen-styles/zen-panels/print.css)
@@ -81,3 +83,6 @@
        # JS Vendor
        content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (content/zen-vendor/tsparticles.confetti.bundle.min.js)
        content/browser/zen-vendor/motion.min.mjs                      (content/zen-vendor/motion.min.mjs)
+
+        # Windows
+        content/browser/zen-components/windows/zen-settings.xhtml (zen-components/windows/zen-settings.xhtml)
--- a/src/browser/base/content/zen-styles/windows/zen-settings.css
+++ b/src/browser/base/content/zen-styles/windows/zen-settings.css
@@ -0,0 +1,49 @@
+@namespace html 'http://www.w3.org/1999/xhtml';
+@namespace xul 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  font: message-box;
+}
+
+body {
+  width: 100%;
+}
+
+#main-content {
+  background: var(--zen-themed-toolbar-bg-transparent);
+  @supports (-moz-osx-font-smoothing: auto) {
+    appearance: -moz-window-titlebar;
+  }
+
+  user-select: none;
+  touch-action: none;
+  pointer-events: auto;
+
+  width: 100%;
+  height: 100%;
+
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.section {
+  width: 100%;
+  position: relative;
+  gap: 0.6rem;
+
+  .section-content {
+    width: 100%;
+    background: var(--zen-toolbar-element-bg);
+    border-radius: 6px;
+    padding: 1em;
+    font-size: 1.1em;
+  }
+}
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -109,7 +109,7 @@
 }

 #zen-main-app-wrapper {
-  background: var(--zen-themed-toolbar-bg-transparent);
+  background: transparent;
  overflow: hidden;

  & > * {
--- a/src/browser/base/content/zen-styles/zen-gradient-generator.css
+++ b/src/browser/base/content/zen-styles/zen-gradient-generator.css
@@ -5,7 +5,7 @@
 */

 #PanelUI-zen-gradient-generator {
-  --panel-width: 320px;
+  --panel-width: 300px;
  --panel-padding: 10px;
  min-width: var(--panel-width);
 }
--- a/src/browser/base/content/zen-styles/zen-media-controls.css
+++ b/src/browser/base/content/zen-styles/zen-media-controls.css
@@ -163,7 +163,6 @@
    font-size: x-small;
    opacity: 0.7;
    font-weight: 500;
-    font-variant-numeric: tabular-nums;
  }
 }

--- a/src/browser/base/content/zen-styles/zen-popup.css
+++ b/src/browser/base/content/zen-styles/zen-popup.css
@@ -360,14 +360,9 @@ menuitem {
  & .zen-toast {
    padding: 0.9rem 0.8rem;
    border-radius: 12px;
-    background: linear-gradient(
-      170deg,
-      var(--zen-primary-color) -40%,
-      color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
-    );
+    background: linear-gradient(170deg, light-dark(rgb(187, 187, 187), rgb(240, 240, 240)) -40%, var(--zen-primary-color) 140%);
    color: var(--button-primary-color);
-    box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    font-weight: 500;
    gap: 5px;
--- a/src/browser/base/content/zen-styles/zen-sidebar-panels.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar-panels.css
@@ -111,7 +111,7 @@
  background: transparent;
  border: none;
  cursor: ew-resize;
-  z-index: 3;
+  z-index: 2;

  &:is(.zen-split-view-splitter[orient='vertical']) {
    /* Bit of a hacky solution, but it works */
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -269,7 +269,7 @@
    }

    #tabbrowser-tabs:not([movingtab]) & .tab-content > image:active {
-      scale: 0.92;
+      scale: var(--zen-active-tab-scale);
    }

    & .tab-icon-image {
@@ -474,6 +474,9 @@
  }

  & #zen-workspaces-button {
+    margin-left: 2px;
+    margin-right: 2px;
+
    & .zen-workspace-sidebar-icon[no-icon='true'] {
      display: none;
    }
@@ -1047,14 +1050,14 @@
 #zen-essentials-container {
  padding-bottom: var(--zen-toolbox-padding);
  overflow: hidden;
-  gap: calc(var(--zen-toolbox-padding) - 2px);
+  gap: 3px;
 }

 #zen-essentials-container {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  opacity: 1;
-  grid-template-columns: repeat(auto-fit, minmax(49px, auto));
+  grid-template-columns: repeat(auto-fit, minmax(48px, auto));
  overflow: hidden;
  scrollbar-width: thin;
  display: grid;
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -158,13 +158,13 @@
  --zen-themed-toolbar-bg: light-dark(rgb(240, 240, 244), #171717);
  --zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), #171717);

-  --zen-workspace-indicator-height: 48px;
+  --zen-workspace-indicator-height: 45px;

  @media (-moz-windows-mica) or (-moz-platform: macos) {
    background: transparent;
    --zen-themed-toolbar-bg-transparent: transparent;
    @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 35%, transparent 65%);
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 75%, transparent 25%);
    }
  }

--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -20,15 +20,13 @@
  --toolbarbutton-hover-background: transparent !important;
  border-radius: var(--zen-button-border-radius) !important;
  background: transparent;
+  padding: 2px;
  appearance: unset !important;
  height: fit-content;
  gap: 3px;

-  container-type: inline-size;
-  width: 100%;
-
  & toolbarbutton {
-    margin: 0;
+    margin: auto;
    width: 25px;
    display: flex;
    justify-content: center;
@@ -36,43 +34,8 @@
    align-items: center;
    position: relative;

-    & .zen-workspace-icon[no-icon='true'] {
-      width: 6px;
-      height: 6px;
-      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
-      border-radius: 50%;
-    }
-
-    filter: grayscale(1);
-    opacity: 0.5;
-    transition:
-      filter 0.2s,
-      opacity 0.2s,
-      width 0.1s;
-
-    &[active='true'],
-    &:hover {
-      filter: grayscale(0);
-      opacity: 1;
-    }
-
-    &:hover {
-      background-color: var(--zen-toolbar-element-bg);
-    }
-  }
-
-  &[overflow] {
-    gap: 0 !important;
-
-    & toolbarbutton {
-      margin: 0;
-    }
-
-    & toolbarbutton:not([active='true']),
-    &:has(toolbarbutton:hover) toolbarbutton[active='true'] {
-      &:not(:hover) {
-        width: min(var(--zen-overflowed-workspace-button-width), 25px);
-
+    @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
+      &:not([active='true']):not(:hover) {
        &::after {
          content: '';
          position: absolute;
@@ -95,6 +58,33 @@
        }
      }
    }
+
+    & .zen-workspace-icon[no-icon='true'] {
+      width: 6px;
+      height: 6px;
+      background: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4));
+      border-radius: 50%;
+    }
+
+    @media not (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
+      & {
+        filter: grayscale(1);
+        opacity: 0.5;
+        transition:
+          filter 0.2s,
+          opacity 0.2s;
+      }
+
+      &[active='true'],
+      &:hover {
+        filter: grayscale(0);
+        opacity: 1;
+      }
+
+      &:hover {
+        background-color: var(--zen-toolbar-element-bg);
+      }
+    }
  }
 }

@@ -128,6 +118,8 @@

  & #zen-workspaces-button {
    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
    display: flex;
    gap: 0.5ch;
  }
@@ -433,7 +425,7 @@
 }

 .zen-current-workspace-indicator {
-  padding: calc(15px + var(--zen-toolbox-padding)) calc(4px + var(--tab-inline-padding));
+  padding: 15px calc(4px + var(--tab-inline-padding));
  font-weight: 600;
  position: absolute;
  max-height: var(--zen-workspace-indicator-height);
@@ -451,10 +443,11 @@
    pointer-events: none;
    content: '';
    position: absolute;
-    top: var(--zen-toolbox-padding);
-    left: calc(var(--zen-toolbox-padding) / 2);
-    width: calc(100% - var(--zen-toolbox-padding));
-    height: calc(100% - var(--zen-toolbox-padding) * 2);
+    top: 4px;
+    left: 2px;
+    z-index: -1;
+    width: calc(100% - 4px);
+    height: calc(100% - 10px);
  }

  &:hover,
--- a/src/browser/base/zen-components/ZenGradientGenerator.mjs
+++ b/src/browser/base/zen-components/ZenGradientGenerator.mjs
@@ -500,9 +500,10 @@
      const centerPosition = { x: rect.width / 2, y: rect.height / 2 };

      const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
-      this.useAlgo = harmonyAngles.type;
      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;

+      this.useAlgo = harmonyAngles.type;
+
      let primaryDot = dots.find((dot) => dot.ID === 0);
      if (!primaryDot) return [];

@@ -637,7 +638,7 @@
          }
        });

-        let colorPositions = this.calculateCompliments(this.dots, 'remove');
+        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
        this.handleColorPositions(colorPositions);
        this.updateCurrentWorkspace();
        return;
@@ -779,7 +780,7 @@
          }
        });

-        let colorPositions = this.calculateCompliments(this.dots, 'remove');
+        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
        this.handleColorPositions(colorPositions);

        this.updateCurrentWorkspace();
@@ -869,11 +870,8 @@
      if (color.isCustom) {
        return color.c;
      }
-      if (forToolbar) {
-        const toolbarBg = this.getToolbarModifiedBase();
-        return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
-      }
-      return `rgba(${color.c[0]}, ${color.c[1]}, ${color.c[2]}, ${this.currentOpacity})`;
+      const toolbarBg = forToolbar ? this.getToolbarModifiedBase() : 'var(--zen-themed-toolbar-bg-transparent)';
+      return `color-mix(in srgb, rgb(${color.c[0]}, ${color.c[1]}, ${color.c[2]}) ${this.currentOpacity * 100}%, ${toolbarBg} ${(1 - this.currentOpacity) * 100}%)`;
    }

    getGradient(colors, forToolbar = false) {
--- a/src/browser/base/zen-components/ZenMediaController.mjs
+++ b/src/browser/base/zen-components/ZenMediaController.mjs
@@ -21,8 +21,6 @@ class ZenMediaController {
  _controllerSwitchTimeout = null;

  init() {
-    if (!Services.prefs.getBoolPref('zen.mediacontrols.enabled', true)) return;
-
    this.mediaTitle = document.querySelector('#zen-media-title');
    this.mediaArtist = document.querySelector('#zen-media-artist');
    this.mediaControlBar = document.querySelector('#zen-media-controls-toolbar');
@@ -60,8 +58,16 @@ class ZenMediaController {
      }
    });

-    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
-    window.addEventListener('TabClose', onTabDiscardedOrClosed);
+    window.addEventListener('TabClose', (event) => {
+      const linkedBrowser = event.target.linkedBrowser;
+      if (!linkedBrowser?.browsingContext?.mediaController) return;
+      this.deinitMediaController(
+        linkedBrowser.browsingContext.mediaController,
+        true,
+        linkedBrowser.browserId === this._currentBrowser?.browserId,
+        true
+      );
+    });

    window.addEventListener('DOMAudioPlaybackStarted', (event) => {
      setTimeout(() => {
@@ -83,17 +89,6 @@ class ZenMediaController {
    window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
  }

-  onTabDiscardedOrClosed(event) {
-    const linkedBrowser = event.target.linkedBrowser;
-    if (!linkedBrowser?.browsingContext?.mediaController) return;
-    this.deinitMediaController(
-      linkedBrowser.browsingContext.mediaController,
-      true,
-      linkedBrowser.browserId === this._currentBrowser?.browserId,
-      true
-    );
-  }
-
  async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
    if (!mediaController) return;

@@ -143,7 +138,6 @@ class ZenMediaController {
      .then(() => {
        this.mediaControlBar.setAttribute('hidden', 'true');
        gZenUIManager.updateTabsToolbar();
-        gZenUIManager.restoreScrollbarState();
      });
  }

@@ -163,7 +157,6 @@ class ZenMediaController {
        this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
      this.mediaControlBar.style.opacity = 0;
      gZenUIManager.updateTabsToolbar();
-      gZenUIManager.restoreScrollbarState();
      gZenUIManager.motion.animate(
        this.mediaControlBar,
        {
@@ -217,12 +210,9 @@ class ZenMediaController {
    this.mediaArtist.textContent = metadata.artist || '';

    gZenUIManager.updateTabsToolbar();
-    gZenUIManager.restoreScrollbarState();

    this._currentPosition = positionState.position;
    this._currentDuration = positionState.duration;
-    this._currentPlaybackRate = positionState.playbackRate;
-
    this.updateMediaPosition();

    for (const key of this.supportedKeys) {
@@ -287,20 +277,18 @@ class ZenMediaController {
  }

  _onPositionstateChange(event) {
-    const mediaController = this.mediaControllersMap.get(event.target.id);
-    this.mediaControllersMap.set(event.target.id, {
-      ...mediaController,
-      position: event.position,
-      duration: event.duration,
-      lastUpdated: Date.now(),
-    });
-
-    if (event.target.id !== this._currentMediaController?.id) return;
+    if (event.target.id !== this._currentMediaController?.id) {
+      const mediaController = this.mediaControllersMap.get(event.target.id);
+      this.mediaControllersMap.set(event.target.id, {
+        ...mediaController,
+        position: event.position,
+        duration: event.duration,
+        lastUpdated: Date.now(),
+      });
+    }

    this._currentPosition = event.position;
    this._currentDuration = event.duration;
-    this._currentPlaybackRate = event.playbackRate;
-
    this.updateMediaPosition();
  }

@@ -361,7 +349,7 @@ class ZenMediaController {

    this._mediaUpdateInterval = setInterval(() => {
      if (this._currentMediaController?.isPlaying) {
-        this._currentPosition += 1 * this._currentPlaybackRate;
+        this._currentPosition += 1;
        if (this._currentPosition > this._currentDuration) {
          this._currentPosition = this._currentDuration;
        }
@@ -440,10 +428,7 @@ class ZenMediaController {
  }

  onMediaFocus() {
-    if (!this._currentBrowser) return;
-    const sidebarId = this._currentBrowser.getAttribute('zen-sidebar-id');
-    if (sidebarId) gZenBrowserManagerSidebar.open(sidebarId);
-    else this._currentMediaController?.focus();
+    this._currentMediaController?.focus();
  }

  onMediaMute() {
--- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs
+++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs
@@ -510,10 +510,6 @@
        case 'unload-switch':
        case 'reset-switch':
        case 'switch':
-          let { permitUnload } = selectedTab.linkedBrowser?.permitUnload();
-          if (!permitUnload) {
-            return;
-          }
          this._handleTabSwitch(selectedTab);
          if (behavior.includes('reset')) {
            this._resetTabToStoredState(selectedTab);
@@ -524,7 +520,8 @@
            }
            // Do not unload about:* pages
            if (!selectedTab.linkedBrowser?.currentURI.spec.startsWith('about:')) {
-              gZenTabUnloader.explicitUnloadTabs([selectedTab], { permitUnload });
+              gBrowser.explicitUnloadTabs([selectedTab]);
+              selectedTab.removeAttribute('linkedpanel');
            }
          }
          break;
@@ -834,7 +831,7 @@
    removeTabContainersDragoverClass() {
      this.dragIndicator.remove();
      this._dragIndicator = null;
-      ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
+      ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
    }

    get dragIndicator() {
@@ -894,9 +891,9 @@
      targetTab = targetTab?.group || targetTab;
      if (event.target.closest('.zen-current-workspace-indicator')) {
        this.removeTabContainersDragoverClass();
-        ZenWorkspaces.activeWorkspaceIndicator?.setAttribute('open', true);
+        ZenWorkspaces.activeWorkspaceIndicator.setAttribute('open', true);
      } else {
-        ZenWorkspaces.activeWorkspaceIndicator?.removeAttribute('open');
+        ZenWorkspaces.activeWorkspaceIndicator.removeAttribute('open');
      }

      // If there's no valid target tab, nothing to do
--- a/src/browser/base/zen-components/ZenSidebarManager.mjs
+++ b/src/browser/base/zen-components/ZenSidebarManager.mjs
@@ -280,10 +280,8 @@ class ZenBrowserManagerSidebar extends ZenDOMOperatedFeature {
    this.close();
  }

-  open(id = null) {
+  open() {
    let sidebar = document.getElementById('zen-sidebar-web-panel');
-    if (id) this._currentPanel = id;
-
    sidebar.removeAttribute('hidden');
    this.update();
  }
--- a/src/browser/base/zen-components/ZenTabUnloader.mjs
+++ b/src/browser/base/zen-components/ZenTabUnloader.mjs
@@ -22,6 +22,8 @@
      'TabAttrModified',
      'TabPinned',
      'TabUnpinned',
+      'TabBrowserInserted',
+      'TabBrowserDiscarded',
      'TabShow',
      'TabHide',
      'TabOpen',
@@ -148,6 +150,8 @@
      switch (action) {
        case 'TabPinned':
        case 'TabUnpinned':
+        case 'TabBrowserInserted':
+        case 'TabBrowserDiscarded':
        case 'TabShow':
        case 'TabHide':
          break;
@@ -231,9 +235,9 @@
      this.explicitUnloadTabs(tabs);
    }

-    explicitUnloadTabs(tabs, extraArgs = {}) {
+    explicitUnloadTabs(tabs) {
      for (let i = 0; i < tabs.length; i++) {
-        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true, extraArgs)) {
+        if (this.canUnloadTab(tabs[i], Date.now(), this.intervalUnloader.excludedUrls, true)) {
          this.unload(tabs[i]);
        }
      }
@@ -255,15 +259,15 @@
      }
    }

-    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false, extraArgs = {}) {
+    canUnloadTab(tab, currentTimestamp, excludedUrls, ignoreTimestamp = false) {
      if (
        (tab.pinned && !ignoreTimestamp) ||
        tab.selected ||
        (tab.multiselected && !ignoreTimestamp) ||
        (tab.hasAttribute('busy') && !ignoreTimestamp) ||
+        tab.hasAttribute('pending') ||
        !tab.linkedPanel ||
        tab.splitView ||
-        tab.group?.hasAttribute('split-view-group') ||
        tab.attention ||
        tab.hasAttribute('glance-id') ||
        tab.linkedBrowser?.zenModeActive ||
@@ -276,7 +280,7 @@
        return false;
      }
      if (ignoreTimestamp) {
-        return this._tabPermitsUnload(tab, extraArgs);
+        return true;
      }
      const lastActivity = tab.lastActivity;
      if (!lastActivity) {
@@ -284,13 +288,7 @@
      }
      const diff = currentTimestamp - lastActivity;
      // Check if the tab has been inactive for more than the timeout
-      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000 && this._tabPermitsUnload(tab, extraArgs);
-    }
-
-    _tabPermitsUnload(tab, extraArgs) {
-      return typeof extraArgs.permitUnload === 'undefined'
-        ? tab.linkedBrowser?.permitUnload()?.permitUnload
-        : extraArgs.permitUnload;
+      return diff > lazy.zenTabUnloaderTimeout * 60 * 1000;
    }
  }

--- a/src/browser/base/zen-components/ZenViewSplitter.mjs
+++ b/src/browser/base/zen-components/ZenViewSplitter.mjs
@@ -230,6 +230,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      const halfWidth = panelsWidth / 2;
      const side = event.clientX > halfWidth ? 'right' : 'left';
      this.fakeBrowser = document.createXULElement('vbox');
+      this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
      window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true });
      const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
      this.fakeBrowser.setAttribute('flex', '1');
@@ -276,7 +277,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
      ]);
      if (this._finishAllAnimatingPromise) {
        this._finishAllAnimatingPromise.then(() => {
-          this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit);
          this._canDrop = true;
          draggedTab._visuallySelected = true;
        });
--- a/src/browser/base/zen-components/ZenWelcome.mjs
+++ b/src/browser/base/zen-components/ZenWelcome.mjs
@@ -52,6 +52,13 @@
    }
  }

+  function openWelcomeTab() {
+    const tab = window.gBrowser.addTrustedTab('https://zen-browser.app/welcome', {
+      inBackground: true,
+    });
+    gBrowser.selectedTab = tab;
+  }
+
  class ZenWelcomePages {
    constructor(pages) {
      this._currentPage = -1;
@@ -403,6 +410,7 @@
            _tabsToPinEssentials.push(createdTab);
          }
          openInitialPinTab();
+          openWelcomeTab();
        },
      },
      {
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -77,8 +77,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    );
    ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
    this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
-
-    window.addEventListener('resize', this.onWindowResize.bind(this));
  }

  async afterLoadInit() {
@@ -601,7 +599,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      } catch (e) {
        console.error('ZenWorkspaces: Error initializing theme picker', e);
      }
-      this.onWindowResize();
      await this._selectStartPage();
      this._fixTabPositions();
      this._resolveInitialized();
@@ -873,7 +870,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    await ZenWorkspacesStorage.removeWorkspace(windowID);
    await this._propagateWorkspaceData();
    await this._updateWorkspacesChangeContextMenu();
-    this.onWindowResize();
  }

  isWorkspaceActive(workspace) {
@@ -1932,7 +1928,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
      }
      await this.changeWorkspace(workspaceData);
    }
-    this.onWindowResize();
    return workspaceData;
  }

@@ -2373,26 +2368,4 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
    const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace);
    return workspace.containerTabId;
  }
-
-  onWindowResize(event = undefined) {
-    if (!(!event || event.target === window)) return;
-    // Check if workspace icons overflow the parent container
-    const parent = document.getElementById('zen-workspaces-button');
-    if (!parent || this._processingResize) {
-      return;
-    }
-    this._processingResize = true;
-    // Once we are overflowing, we align the buttons to always stay inside the container,
-    // meaning we need to remove the overflow attribute to reset the width
-    parent.removeAttribute('overflow');
-    requestAnimationFrame(() => {
-      const overflow = parent.scrollWidth > parent.clientWidth;
-      parent.toggleAttribute('overflow', overflow);
-      // The maximum width a button has when it overflows based on the number of buttons
-      const numButtons = parent.children.length + 1; // +1 to exclude the active button
-      const maxWidth = 100 / numButtons;
-      parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
-      this._processingResize = false;
-    });
-  }
 })();
--- a/src/browser/base/zen-components/windows/zen-settings.xhtml
+++ b/src/browser/base/zen-components/windows/zen-settings.xhtml
@@ -0,0 +1,45 @@
+<?xml version="1.0"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - 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/. -->
+
+<html xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      id="zenSettingsWindow"
+      style="min-width: 35em; max-width: 35em; min-height: 40em;">
+  <head>
+    <linkset>
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/zen-theme.css"
+      />
+      <html:link
+        rel="stylesheet"
+        href="chrome://browser/content/zen-styles/windows/zen-settings.css"
+      />
+
+      <html:link rel="localization" href="browser/preferences/preferences.ftl" />
+      <html:link rel="localization" href="browser/preferences/zen-preferences.ftl" />
+    </linkset>
+
+    <script src="chrome://browser/content/zenThemeModifier.js"></script>
+  </head>
+
+  <html:body xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+    <vbox id="main-content">
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+          test
+        </div>
+      </vbox>
+      <vbox class="section">
+        <html:h2 data-l10n-id="pane-general-title"/>
+        <div class="section-content">
+          test
+        </div>
+      </vbox>
+    </vbox>
+  </html:body>
+</html>
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -959,6 +959,11 @@ Preferences.addAll([
    type: 'int',
    default: 10,
  },
+  {
+    id: 'zen.workspaces.hide-deactivated-workspaces',
+    type: 'bool',
+    default: true,
+  },
  {
    id: 'zen.pinned-tab-manager.restore-pinned-tabs-to-pinned-url',
    type: 'bool',
--- a/src/browser/components/preferences/zenTabsManagement.inc.xhtml
+++ b/src/browser/components/preferences/zenTabsManagement.inc.xhtml
@@ -23,6 +23,9 @@
      <checkbox id="zenWorkspacesForceContainerTabsToWorkspace"
            data-l10n-id="zen-settings-workspaces-force-container-tabs-to-workspace"
            preference="zen.workspaces.force-container-workspace"/>
+      <checkbox id="zenWorkspaceHideDeactivatedWorkspaces"
+            data-l10n-id="zen-settings-workspaces-hide-deactivated-workspaces"
+            preference="zen.workspaces.hide-deactivated-workspaces"/>
 </groupbox>

 <hbox id="zenTabsUnloadCategory"
--- a/src/browser/themes/windows/browser-css.patch
+++ b/src/browser/themes/windows/browser-css.patch
@@ -1,15 +1,8 @@
 diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
-index f49604e53780763b9aa19897458c45f0be6cbc9b..5ea9098a9b689470ef4ddfea91069cd23391d020 100644
+index f49604e53780763b9aa19897458c45f0be6cbc9b..aa9da99641ba4a3b7f67a27acbbf6c75c1346ced 100644
 --- a/browser/themes/windows/browser.css
 +++ b/browser/themes/windows/browser.css
-@@ -40,14 +40,13 @@
-          * override these on the tabs toolbar because the accent color is
-          * arbitrary, so the hardcoded colors from browser-custom-colors might
-          * not provide sufficient contrast. */
-        --toolbarbutton-icon-fill: currentColor;
-         --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
-         --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
-       }
+@@ -47,7 +47,7 @@
     }
 
     &[sizemode="normal"] #navigator-toolbox {
--- a/src/toolkit/components/pictureinpicture/content/player-js.patch
+++ b/src/toolkit/components/pictureinpicture/content/player-js.patch
@@ -1,16 +0,0 @@
-diff --git a/toolkit/components/pictureinpicture/content/player.js b/toolkit/components/pictureinpicture/content/player.js
-index 9a4971d5d24dba6e543be8ea321c6be8c43ad859..b0788967e51736b1ec95daf96a1504bfd7c1dea7 100644
--- a/toolkit/components/pictureinpicture/content/player.js
-+++ b/toolkit/components/pictureinpicture/content/player.js
-@@ -722,6 +722,11 @@ let Player = {
-         document.getElementById("large").click();
-         break;
-       }
-+
-+      case "minimize": {
-+        this.closePipWindow({ reason: "CloseButton" });
-+        break;
-+      }
-     }
-     // If the click came from a element that is not inside the subtitles settings panel
-     // then we want to hide the panel
--- a/src/toolkit/components/pictureinpicture/content/player-xhtml.patch
+++ b/src/toolkit/components/pictureinpicture/content/player-xhtml.patch
@@ -1,29 +0,0 @@
-diff --git a/toolkit/components/pictureinpicture/content/player.xhtml b/toolkit/components/pictureinpicture/content/player.xhtml
-index 440ce51e8e67e4d3a7bdcb78f38f2fb6684c9848..6b48a3178f9de460dd3b08728f5638ef2751de21 100644
--- a/toolkit/components/pictureinpicture/content/player.xhtml
-+++ b/toolkit/components/pictureinpicture/content/player.xhtml
-@@ -52,13 +52,22 @@
-       tabindex="10"
- #endif
-       />
-      <button id="unpip"
-      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
-+      <button id="minimize"
-+      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-minimize-btn" data-l10n-attrs="tooltip"
- #ifdef XP_MACOSX
-       mac="true"
-       tabindex="10"
- #else
-       tabindex="9"
-+#endif
-+      />
-+      <button id="unpip"
-+      class="control-item control-button tooltip-under-controls" data-l10n-id="pictureinpicture-unpip-btn" data-l10n-attrs="tooltip"
-+#ifdef XP_MACOSX
-+      mac="true"
-+      tabindex="11"
-+#else
-+      tabindex="10"
- #endif
-       />
-     <div id="controls-bottom-gradient" class="control-item"></div>
--- a/src/toolkit/themes/shared/pictureinpicture/player-css.patch
+++ b/src/toolkit/themes/shared/pictureinpicture/player-css.patch
@@ -1,22 +0,0 @@
-diff --git a/toolkit/themes/shared/pictureinpicture/player.css b/toolkit/themes/shared/pictureinpicture/player.css
-index a3ffe31d47cc81a0cb578acc9177aaa6f41668eb..cf69507804b7c50f9afcfabb744098cfbe409396 100644
--- a/toolkit/themes/shared/pictureinpicture/player.css
-+++ b/toolkit/themes/shared/pictureinpicture/player.css
-@@ -724,3 +724,17 @@ input:checked + .slider::before {
-     justify-self: center;
-   }
- }
-+
-+#minimize {
-+  background-image: url("chrome://browser/skin/zen-icons/unpin.svg");
-+  background-color: rgba(255, 255, 255, .8);
-+  position: absolute;
-+  fill: var(--close-btn-fill-color);
-+  right: 50px;
-+  top: 10px;
-+}
-+
-+#minimize[mac="true"] {
-+  right: auto;
-+  left: 50px;
-+}
--- a/surfer.json
+++ b/surfer.json
@@ -5,8 +5,8 @@
  "binaryName": "zen",
  "version": {
    "product": "firefox",
-    "version": "136.0.2",
-    "candidate": "136.0.2"
+    "version": "136.0.1",
+    "candidate": "136.0.1"
  },
  "buildOptions": {
    "generateBranding": true
@@ -19,7 +19,7 @@
      "brandShortName": "Zen",
      "brandFullName": "Zen Browser",
      "release": {
-        "displayVersion": "1.10.1b",
+        "displayVersion": "1.10b",
        "github": {
          "repo": "zen-browser/desktop"
        },
@@ -39,7 +39,7 @@
      "brandShortName": "Twilight",
      "brandFullName": "Zen Twilight",
      "release": {
-        "displayVersion": "1.10.1t",
+        "displayVersion": "1.10t",
        "github": {
          "repo": "zen-browser/desktop"
        }
Author	SHA1	Message	Date
mr. m	d7c131b5ca	style: adjust padding and border radius in settings window CSS; add test content in XHTML	2025-03-20 12:33:17 +01:00
mr. M	04f14c0d2f	feat: implement settings window with styling and layout adjustments	2025-03-20 00:16:38 +01:00
mr. M	1ceb5d6248	feat: add settings window for Zen UI	2025-03-19 22:58:38 +01:00