perf: Improved performance for ocmpact mode polyfill and resize observers, b=no-bug, c=common, compact-mode, workspaces

* New translations zen-preferences.ftl (Ukrainian)

* New translations zen-preferences.ftl (Portuguese, Brazilian)

* New translations zen-preferences.ftl (Indonesian)

* New translations zen-workspaces.ftl (Ukrainian)

* New translations zen-workspaces.ftl (Portuguese, Brazilian)

* New translations zen-preferences.ftl (Portuguese)

* New translations zen-preferences.ftl (German)

* New translations zen-workspaces.ftl (German)

build/flatpak/app.zen_browser.zen.yml.template

@@ -1,14 +1,17 @@
 app-id: app.zen_browser.zen
 runtime: org.freedesktop.Platform
-runtime-version: '24.08'
+runtime-version: '25.08'
 sdk: org.freedesktop.Sdk
 base: org.mozilla.firefox.BaseApp
-base-version: '24.08'
+base-version: '25.08'
 add-extensions:
   org.freedesktop.Platform.ffmpeg-full:
     directory: lib/ffmpeg
-    version: '24.08'
+    version: '25.08'
     add-ld-path: .
+  app.zen_browser.zen.systemconfig:
+    directory: etc/zen
+    no-autodownload: true
 command: launch-script.sh
 finish-args:
   - --allow=devel
@@ -29,7 +32,6 @@ finish-args:
   - --system-talk-name=org.freedesktop.NetworkManager
   - --talk-name=org.a11y.Bus
   - --talk-name=org.gtk.vfs.*
-  - --talk-name=org.freedesktop.Notifications
   - --own-name=org.mpris.MediaPlayer2.firefox.*
   - --own-name=org.mozilla.zen.*
 cleanup:
@@ -50,6 +52,7 @@ modules:
     build-commands:
       - mv zen /app/
       - mkdir -p /app/lib/ffmpeg
+      - mkdir -p /app/etc/zen
 
       - install -Dm0755 metadata/launch-script.sh ${{FLATPAK_DEST}}/bin/launch-script.sh
       - install -Dm0644 metadata/policies.json ${{FLATPAK_DEST}}/bin/distribution/policies.json

configs/common/mozconfig

@@ -52,24 +52,15 @@ if test "$ZEN_RELEASE"; then
   ac_add_options --disable-debug-symbols
   ac_add_options --disable-debug-js-modules
   ac_add_options --disable-tests
-  ac_add_options --disable-js-shell
-
-  ac_add_options --disable-vtune
 
   ac_add_options --enable-rust-simd
   ac_add_options --enable-wasm-simd
 
   mk_add_options MOZ_PARALLEL_COMPILE=1
 
-  ac_add_options --enable-proxy-bypass-protection
-  ac_add_options --enable-hardening
-  ac_add_options --disable-profiling
-
   ac_add_options --disable-geckodriver
   ac_add_options --disable-rust-tests
 
-  ac_add_options --disable-default-browser-agent
-
   if ! test "$ZEN_DISABLE_LTO"; then
     # only enable full LTO when ZEN_RELEASE_BRANCH is 'release'
     if test "$ZEN_RELEASE_BRANCH" = "release"; then
@@ -99,6 +90,7 @@ if test "$ZEN_RELEASE"; then
 
   ac_add_options --enable-updater
 
+  ac_add_options --enable-js-shell
   export MOZ_PACKAGE_JSSHELL=1
 else
   ac_add_options --disable-crashreporter

configs/windows/mozconfig

@@ -22,8 +22,6 @@ if test "$ZEN_CROSS_COMPILING"; then
   fi
 fi
 
-#? https://bugzilla.mozilla.org/show_bug.cgi?id=1617793
-#? https://phabricator.services.mozilla.com/D170170
 ac_add_options --disable-maintenance-service
 ac_add_options --disable-bits-download
 
@@ -32,8 +30,6 @@ if test "$SURFER_COMPAT" = "x86_64"; then
   ac_add_options --target=x86_64-pc-windows-msvc
   ac_add_options --enable-eme=widevine,wmfcdm
 
-# ac_add_options --disable-jemalloc
-
   ac_add_options --enable-optimize="-O3 -w -ftree-vectorize -mfpmath=sse -mprfchw -msse3 -mcx16 -msahf"
 
   export LDFLAGS="-Wl,-O3"
@@ -55,8 +51,6 @@ elif test "$SURFER_COMPAT" = "aarch64"; then
   export RUSTFLAGS="-C target-feature=+v8.2a -Ctarget-cpu=cortex-a55"
 fi
 
-#export POLLY="-mllvm -polly -mllvm -polly-2nd-level-tiling -mllvm -polly-loopfusion-greedy -mllvm -polly-pattern-matching-based-opts -mllvm -polly-position=before-vectorizer -mllvm -polly-vectorizer=stripmine"
-
 if test "$ZEN_CROSS_COMPILING"; then
   if test "$ZEN_GA_GENERATE_PROFILE"; then
     export CXXFLAGS="$CXXFLAGS -fprofile-generate -mllvm -enable-name-compression=false -mllvm -pgo-temporal-instrumentation -fprofile-update=atomic"

locales/de/browser/browser/preferences/zen-preferences.ftl

@@ -43,7 +43,7 @@ pane-settings-workspaces-title = Arbeitsbereiche
 zen-tabs-unloader-enabled = 
     .label = Tab-Entlader aktivieren
 zen-look-and-feel-compact-toolbar-themed = 
-    .label = Use themed background for compact toolbar
+    .label = Theme Hintergrund für kompakte Symbolleiste verwenden
 zen-workspace-continue-where-left-off = 
     .label = Dort fortfahren, wo Sie aufgehört haben
 pane-zen-pinned-tab-manager-title = Angepinnte Tabs
@@ -274,7 +274,7 @@ zen-split-view-shortcut-grid = Geteilte Ansicht Raster umschalten
 zen-split-view-shortcut-vertical = Geteilte Ansicht vertikal umschalten
 zen-split-view-shortcut-horizontal = Geteilte Ansicht horizontal umschalten
 zen-split-view-shortcut-unsplit = Geteilte Ansicht schließen
-zen-new-empty-split-view-shortcut = New Empty Split View
+zen-new-empty-split-view-shortcut = Neuer leerer Split View
 zen-key-select-tab-1 = Tab #1 auswählen
 zen-key-select-tab-2 = Tab #2 auswählen
 zen-key-select-tab-3 = Tab #3 auswählen

locales/de/browser/browser/zen-workspaces.ftl

@@ -4,7 +4,7 @@ zen-panel-ui-workspaces-create =
 zen-panel-ui-folder-create = 
     .label = Ordner erstellen
 zen-panel-ui-new-empty-split = 
-    .label = New Split
+    .label = Split View erstellen
 zen-workspaces-panel-context-delete = 
     .label = Arbeitsbereich löschen
     .accesskey = D

locales/id/browser/browser/preferences/zen-preferences.ftl

@@ -43,7 +43,7 @@ pane-settings-workspaces-title = Ruang Kerja
 zen-tabs-unloader-enabled = 
     .label = Aktifkan Pelepas Tab
 zen-look-and-feel-compact-toolbar-themed = 
-    .label = Use themed background for compact toolbar
+    .label = Gunakan latar belakang bertema untuk bilah atas dalam mode ringkas
 zen-workspace-continue-where-left-off = 
     .label = Lanjutkan dari halaman terakhir yang dibuka
 pane-zen-pinned-tab-manager-title = Tab yang Disematkan

locales/pt-BR/browser/browser/preferences/zen-preferences.ftl

@@ -43,7 +43,7 @@ pane-settings-workspaces-title = Áreas de Trabalho
 zen-tabs-unloader-enabled = 
     .label = Ativar Descarregador de Guias
 zen-look-and-feel-compact-toolbar-themed = 
-    .label = Use themed background for compact toolbar
+    .label = Usar fundo temático na barra de ferramentas compacta
 zen-workspace-continue-where-left-off = 
     .label = Continue de onde você parou
 pane-zen-pinned-tab-manager-title = Guias Fixadas
@@ -221,7 +221,7 @@ zen-key-exit-full-screen = Sair de Tela Cheia
 zen-ai-chatbot-sidebar-shortcut = Alternar barra lateral de AI Chatbot
 zen-key-inspector-mac = Ativar/Desativar Inspetor
 zen-toggle-sidebar-shortcut = Alternar barra lateral Firefox
-zen-toggle-pin-tab-shortcut = Toggle Pin Tab
+zen-toggle-pin-tab-shortcut = Alternar fixação da aba
 zen-reader-mode-toggle-shortcut-other = Ativar/desativar modo leitor
 zen-picture-in-picture-toggle-shortcut = Alternar Picture-in-Picture
 zen-nav-reload-shortcut-2 = Recarregar Página
@@ -255,7 +255,7 @@ zen-close-tab-shortcut = Fechar Aba
 zen-compact-mode-shortcut-show-sidebar = Alternar barra lateral flutuante
 zen-compact-mode-shortcut-show-toolbar = Alternar barra flutuante
 zen-compact-mode-shortcut-toggle = Ativar/Desativar Modo Compacto
-zen-glance-expand = Expand Glance
+zen-glance-expand = Expandir Visualização Rápida
 zen-workspace-shortcut-switch-1 = Mudar para Área de Trabalho 1
 zen-workspace-shortcut-switch-2 = Mudar para Área de Trabalho 2
 zen-workspace-shortcut-switch-3 = Mudar para Área de Trabalho 3
@@ -274,7 +274,7 @@ zen-split-view-shortcut-grid = Alternar grade de visualização dividida
 zen-split-view-shortcut-vertical = Alternar visualização de divisão vertical
 zen-split-view-shortcut-horizontal = Alternar visualização horizontal de divisão
 zen-split-view-shortcut-unsplit = Fechar visualização dividida
-zen-new-empty-split-view-shortcut = New Empty Split View
+zen-new-empty-split-view-shortcut = Nova Divisão de Tela Vazia
 zen-key-select-tab-1 = Selecionar guia #1
 zen-key-select-tab-2 = Selecionar guia #2
 zen-key-select-tab-3 = Selecionar guia #3

locales/pt-BR/browser/browser/zen-workspaces.ftl

@@ -4,7 +4,7 @@ zen-panel-ui-workspaces-create =
 zen-panel-ui-folder-create = 
     .label = Nova Pasta
 zen-panel-ui-new-empty-split = 
-    .label = New Split
+    .label = Nova Divisão
 zen-workspaces-panel-context-delete = 
     .label = Excluir Espaço
     .accesskey = D

locales/pt-PT/browser/browser/preferences/zen-preferences.ftl

@@ -43,7 +43,7 @@ pane-settings-workspaces-title = Espaços de Trabalho
 zen-tabs-unloader-enabled = 
     .label = Habilitar a Hibernação de Separadores
 zen-look-and-feel-compact-toolbar-themed = 
-    .label = Use themed background for compact toolbar
+    .label = Usar fundo temático para a barra de ferramentas compacta
 zen-workspace-continue-where-left-off = 
     .label = Continuar a partir do ponto onde parou
 pane-zen-pinned-tab-manager-title = Separadores Fixados

locales/uk/browser/browser/preferences/zen-preferences.ftl

@@ -43,7 +43,7 @@ pane-settings-workspaces-title = Робочі області
 zen-tabs-unloader-enabled = 
     .label = Увімкнути вивантаження вкладок
 zen-look-and-feel-compact-toolbar-themed = 
-    .label = Use themed background for compact toolbar
+    .label = Використовувати тематичний фон для компактної панелі інструментів
 zen-workspace-continue-where-left-off = 
     .label = Продовжити з місця зупинки
 pane-zen-pinned-tab-manager-title = Прикріплені вкладки
@@ -221,7 +221,7 @@ zen-key-exit-full-screen = Вийти з повноекранного режим
 zen-ai-chatbot-sidebar-shortcut = Перемкнути бічну панель ШІ чат-бота
 zen-key-inspector-mac = Перемкнути інспектор (Mac)
 zen-toggle-sidebar-shortcut = Перемкнути бічну панель Firefox
-zen-toggle-pin-tab-shortcut = Toggle Pin Tab
+zen-toggle-pin-tab-shortcut = Закріпити / відкріпити вкладку
 zen-reader-mode-toggle-shortcut-other = Перемкнути режим читання
 zen-picture-in-picture-toggle-shortcut = Показати/приховати зображення
 zen-nav-reload-shortcut-2 = Перезавантажити сторінку
@@ -255,7 +255,7 @@ zen-close-tab-shortcut = Закрити вкладку
 zen-compact-mode-shortcut-show-sidebar = Перемкнути спливну бічну панель
 zen-compact-mode-shortcut-show-toolbar = Перемкнути спливну панель інструментів
 zen-compact-mode-shortcut-toggle = Компактний режим
-zen-glance-expand = Expand Glance
+zen-glance-expand = Розгорнути огляд
 zen-workspace-shortcut-switch-1 = Перейти на робочу область 1
 zen-workspace-shortcut-switch-2 = Перейти на робочу область 2
 zen-workspace-shortcut-switch-3 = Перейти на робочу область 3
@@ -274,7 +274,7 @@ zen-split-view-shortcut-grid = Перемкнути розділену сітк
 zen-split-view-shortcut-vertical = Перемкнути розділений Перегляд вертикально
 zen-split-view-shortcut-horizontal = Перемкнути розділений Перегляд горизонтально
 zen-split-view-shortcut-unsplit = Закрити розділений вигляд
-zen-new-empty-split-view-shortcut = New Empty Split View
+zen-new-empty-split-view-shortcut = Новий пустий розділений перегляд
 zen-key-select-tab-1 = Вибрати вкладку #1
 zen-key-select-tab-2 = Вибрати вкладку #2
 zen-key-select-tab-3 = Вибрати вкладку #3

locales/uk/browser/browser/zen-workspaces.ftl

@@ -4,7 +4,7 @@ zen-panel-ui-workspaces-create =
 zen-panel-ui-folder-create = 
     .label = Створити теку
 zen-panel-ui-new-empty-split = 
-    .label = New Split
+    .label = Нове розділення
 zen-workspaces-panel-context-delete = 
     .label = Видалити простір
     .accesskey = D

package.json

@@ -19,9 +19,9 @@
     "update-ff:raw": "surfer update",
     "update-ff:rc": "python3 scripts/update_ff.py --rc",
     "update-ff:l10n": "python3 scripts/update_ff.py --just-l10n",
-    "pretty": "prettier . --write && autopep8 -r --in-place scripts/ src/",
+    "pretty": "prettier . --write --cache && autopep8 -r --in-place scripts/ src/",
     "lint": "npx eslint src/ && prettier . --check && autopep8 --diff scripts/ src/",
-    "lint:fix": "npx eslint src/ --fix && npm run pretty",
+    "lint:fix": "npm run pretty && npx eslint src/ --fix",
     "prepare": "husky",
     "reset-ff": "surfer reset",
     "surfer": "surfer",

prefs/zen.yaml

@@ -14,6 +14,9 @@
 - name: zen.tabs.show-newtab-vertical
   value: true
 
+- name: zen.tabs.close-window-with-empty
+  value: true
+
 - name: zen.ctrlTab.show-pending-tabs
   value: false
 

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 3204f253c23551650991d3385dd256d55892a012..29e0471616f979bfe40bb4d34148bf35a63f59ee 100644
+index 3204f253c23551650991d3385dd256d55892a012..792e54079e9f82013617306243fe313c1ee4358d 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -427,15 +427,64 @@
@@ -481,7 +481,7 @@ index 3204f253c23551650991d3385dd256d55892a012..29e0471616f979bfe40bb4d34148bf35
 +        index = Math.min(index, tab.hasAttribute("zen-essential") ? this._numZenEssentials : this._numVisiblePinTabsWithoutCollapsed);
        } else {
 -        index = Math.max(index, this.pinnedTabCount);
-+        index = Math.max(index, this._numVisiblePinTabsWithoutCollapsed);
++        index = Math.max(index, typeof elementIndex == "number" ? this._numVisiblePinTabsWithoutCollapsed : this.pinnedTabCount);
          index = Math.min(index, allItems.length);
        }
        /** @type {MozTabbrowserTab|undefined} */

src/browser/components/urlbar/UrlbarPrefs-sys-mjs.patch

@@ -0,0 +1,12 @@
+diff --git a/browser/components/urlbar/UrlbarPrefs.sys.mjs b/browser/components/urlbar/UrlbarPrefs.sys.mjs
+index 3c179db3b310c43f8c6c06b1ecbcf5ed59feefe6..693bef15401cd4428c8a0222de57b83b78564194 100644
+--- a/browser/components/urlbar/UrlbarPrefs.sys.mjs
++++ b/browser/components/urlbar/UrlbarPrefs.sys.mjs
+@@ -719,6 +719,7 @@ function makeResultGroups({ showSearchSuggestionsFirst }) {
+    */
+   let rootGroup = {
+     children: [
++      { group: lazy.UrlbarUtils.RESULT_GROUP.ZEN_ACTION },
+       // heuristic
+       {
+         maxResultCount: 1,

src/browser/components/urlbar/UrlbarUtils-sys-mjs.patch

@@ -0,0 +1,21 @@
+diff --git a/browser/components/urlbar/UrlbarUtils.sys.mjs b/browser/components/urlbar/UrlbarUtils.sys.mjs
+index 0bc15c02f56dd8f46a21fed02b4e21a741f27f41..b69a4d34f700637bd352620c520b989cf00fa39f 100644
+--- a/browser/components/urlbar/UrlbarUtils.sys.mjs
++++ b/browser/components/urlbar/UrlbarUtils.sys.mjs
+@@ -75,6 +75,7 @@ export var UrlbarUtils = {
+     RESTRICT_SEARCH_KEYWORD: "restrictSearchKeyword",
+     SUGGESTED_INDEX: "suggestedIndex",
+     TAIL_SUGGESTION: "tailSuggestion",
++    ZEN_ACTION: "zenAction",
+   }),
+ 
+   // Defines provider types.
+@@ -576,6 +577,8 @@ export var UrlbarUtils = {
+         return this.RESULT_GROUP.INPUT_HISTORY;
+       case "UrlbarProviderQuickSuggest":
+         return this.RESULT_GROUP.GENERAL_PARENT;
++      case "ZenUrlbarProviderGlobalActions":
++        return this.RESULT_GROUP.ZEN_ACTION;
+       default:
+         break;
+     }

src/zen/common/ZenHasPolyfill.mjs

@@ -12,7 +12,7 @@
     /**
      * @param {{selector: string, exists: boolean}} descendantSelectors
      */
-    observeSelectorExistence(element, descendantSelectors, stateAttribute) {
+    observeSelectorExistence(element, descendantSelectors, stateAttribute, attributeFilter = []) {
       const updateState = () => {
         const exists = descendantSelectors.some(({ selector }) => {
           return element.querySelector(selector);
@@ -36,6 +36,7 @@
         id: observerId,
         observer,
         element,
+        attributeFilter,
       });
       return observerId;
     }
@@ -54,6 +55,7 @@
           childList: true,
           subtree: true,
           attributes: true,
+          attributeFilter: observer.attributeFilter.length ? observer.attributeFilter : undefined,
         });
       }
     }

src/zen/common/ZenUIManager.mjs

@@ -14,12 +14,6 @@ var gZenUIManager = {
   init() {
     document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
     document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'sidebarHeightThrottle',
-      'zen.view.sidebar-height-throttle',
-      500
-    );
     XPCOMUtils.defineLazyPreferenceGetter(
       this,
       'contentElementSeparation',
@@ -52,14 +46,10 @@ var gZenUIManager = {
 
     gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
 
-    new ResizeObserver(this.updateTabsToolbar.bind(this)).observe(
-      document.getElementById('TabsToolbar')
-    );
-
     new ResizeObserver(
       gZenCommonActions.throttle(
         gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager),
-        this.sidebarHeightThrottle
+        Services.prefs.getIntPref('zen.view.sidebar-height-throttle', 500)
       )
     ).observe(gNavToolbox);
 
@@ -643,7 +633,8 @@ var gZenVerticalTabsManager = {
       !aItem.isConnected ||
       gZenUIManager.testingEnabled ||
       !gZenStartup.isReady ||
-      !gZenPinnedTabManager.hasInitializedPins
+      !gZenPinnedTabManager.hasInitializedPins ||
+      aItem.group?.hasAttribute('split-view-group')
     ) {
       return;
     }

src/zen/common/styles/zen-omnibox.css

@@ -163,7 +163,7 @@
   z-index: 2;
 
   & .urlbar-input-container {
-    font-weight: 500;
+    font-weight: 400;
   }
 
   & #identity-box {
@@ -584,7 +584,11 @@
 
 #urlbar-label-box,
 #urlbar-search-mode-indicator {
-  background-color: color-mix(in srgb, var(--zen-primary-color), transparent 30%) !important;
+  background-color: color-mix(
+    in srgb,
+    var(--zen-primary-color) 50%,
+    light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2)) 50%
+  ) !important;
   color: white;
   padding: 4px 8px;
   border-radius: 50px;
@@ -611,7 +615,7 @@
     --zen-selected-bg: color-mix(
       in srgb,
       var(--zen-primary-color) 50%,
-      light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.2)) 50%
+      light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2)) 50%
     );
     --zen-selected-color: color-mix(in srgb, var(--zen-selected-bg), light-dark(white, black) 40%);
     background-color: var(--zen-selected-bg) !important;

src/zen/compact-mode/ZenCompactMode.mjs

@@ -150,7 +150,8 @@ var gZenCompactModeManager = {
             ":is([panelopen='true'], [open='true'], [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(tab):not(.zen-compact-mode-ignore)",
         },
       ],
-      'zen-compact-mode-active'
+      'zen-compact-mode-active',
+      ['panelopen', 'open', 'breakout-extend', 'zen-floating-urlbar']
     );
   },
 
@@ -229,11 +230,6 @@ var gZenCompactModeManager = {
     // IF we are animating IN, call the callbacks first so we can calculate the width
     // once the window buttons are shown
     this.updateContextMenu();
-    if (this.preference) {
-      ZenHasPolyfill.connectObserver(this.sidebarObserverId);
-    } else {
-      ZenHasPolyfill.disconnectObserver(this.sidebarObserverId);
-    }
     if (!this.preference) {
       this._evenListeners.forEach((callback) => callback());
       await this.animateCompactMode();
@@ -245,6 +241,11 @@ var gZenCompactModeManager = {
     if (isUrlbarFocused) {
       gURLBar.focus();
     }
+    if (this.preference) {
+      ZenHasPolyfill.connectObserver(this.sidebarObserverId);
+    } else {
+      ZenHasPolyfill.disconnectObserver(this.sidebarObserverId);
+    }
   },
 
   // NOTE: Dont actually use event, it's just so we make sure

src/zen/folders/ZenFolder.mjs

@@ -33,41 +33,21 @@
           </linearGradient>
         </defs>
         <!--Back Folder (path)-->
-        <path d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="fill: var(--zen-folder-behind-bgcolor);">
+        <path class="back" d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="fill: var(--zen-folder-behind-bgcolor);">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-2 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </path>
-        <path d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="stroke-width: 1.5px; stroke: var(--zen-folder-stroke); fill: url(#gradient-0); fill-opacity: 0.1;">
+        <path class="back" d="M8 5.625H11.9473C12.4866 5.625 13.0105 5.80861 13.4316 6.14551L14.2881 6.83105C14.9308 7.34508 15.7298 7.625 16.5527 7.625H20C21.3117 7.625 22.375 8.68832 22.375 10V20C22.375 21.3117 21.3117 22.375 20 22.375H8C6.68832 22.375 5.625 21.3117 5.625 20V8C5.625 6.68832 6.68832 5.625 8 5.625Z" style="stroke-width: 1.5px; stroke: var(--zen-folder-stroke); fill: url(#gradient-0); fill-opacity: 0.1;">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;-2 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </path>
         <!--Front Folder (rect)-->
-        <rect x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="fill: var(--zen-folder-front-bgcolor);">
+        <rect class="front" x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="fill: var(--zen-folder-front-bgcolor);">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </rect>
-        <rect x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="stroke-width: 1.5px; stroke: var(--zen-folder-stroke); fill: url(#gradient-1); fill-opacity: 0.1;">
+        <rect class="front" x="5.625" y="9.625" width="16.75" height="12.75" rx="2.375" style="stroke-width: 1.5px; stroke: var(--zen-folder-stroke); fill: url(#gradient-1); fill-opacity: 0.1;">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </rect>
         <!--Icon (g)-->
-        <g id="folder-icon" style="fill: var(--zen-folder-stroke);">
+        <g class="icon" style="fill: var(--zen-folder-stroke);">
           <image href="" height="19" width="20"/>
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animate attributeName="opacity" values="0;0" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
         </g>
         <!--End Icon (g)-->
-        <g id="folder-dots" style="fill: var(--zen-folder-stroke);">
+        <g class="dots" style="fill: var(--zen-folder-stroke);">
-          <animateTransform type="skewX" additive="sum" attributeName="transform" values="0;-16" begin="0s" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="translate" additive="sum" attributeName="transform" values="0 0;11.1 3.4" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animateTransform type="scale" additive="sum" attributeName="transform" values="1 1;0.85 0.85" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
-          <animate attributeName="opacity" values="0;0" dur="0.3s" fill="freeze" keyTimes="0; 1" calcMode="spline" keySplines="0.42 0 0 1"/>
           <ellipse cx="10" cy="16" rx="1.25" ry="1.25"/>
           <ellipse cx="14" cy="16" rx="1.25" ry="1.25"/>
           <ellipse cx="18" cy="16" rx="1.25" ry="1.25"/>
@@ -89,13 +69,6 @@
       this.#initialized = true;
       this._activeTabs = [];
       this.icon.appendChild(ZenFolder.rawIcon.cloneNode(true));
-      // Save original values for animations
-      this.icon.querySelectorAll('animate, animateTransform, animateMotion').forEach((anim) => {
-        const vals = anim.getAttribute('values');
-        if (vals) {
-          anim.dataset.origValues = vals;
-        }
-      });
 
       this.labelElement.parentElement.setAttribute('context', 'zenFolderActions');
 

src/zen/folders/ZenFolders.mjs

@@ -40,7 +40,6 @@
     #lastFolderContextMenu = null;
 
     #foldersEnabled = false;
-    #folderAnimCache = new Map();
 
     #animationCount = 0;
 
@@ -304,7 +303,7 @@
             folder.removeAttribute('has-active');
           }
           this.collapseVisibleTab(folder, true);
-          this.updateFolderIcon(folder, 'close', false);
+          this.updateFolderIcon(folder, 'close');
         }
       }
     }
@@ -721,7 +720,7 @@
     async #convertFolderToSpace(folder) {
       const currentWorkspace = gZenWorkspaces.getActiveWorkspaceFromCache();
       let selectedTab = folder.tabs.find((tab) => tab.selected);
-      const icon = folder.icon?.querySelector('svg #folder-icon image');
+      const icon = folder.icon?.querySelector('svg .icon image');
 
       const newSpace = await gZenWorkspaces.createAndSaveWorkspace(
         folder.label,
@@ -855,7 +854,7 @@
         gBrowser.TabStateFlusher.flush(tab.linkedBrowser);
       });
 
-      this.updateFolderIcon(folder, 'auto', false);
+      this.updateFolderIcon(folder, 'auto');
 
       if (options.renameFolder) {
         folder.rename();
@@ -1116,71 +1115,14 @@
       }
     }
 
-    updateFolderIcon(group, state = 'auto', play = true) {
+    updateFolderIcon(group, state = 'auto') {
       const svg = group.querySelector('svg');
       if (!svg) return [];
-      let animations = this.#folderAnimCache.get(group);
-      if (!animations) {
-        animations = svg.querySelectorAll('animate, animateTransform, animateMotion');
-        this.#folderAnimCache.set(group, animations);
-      }
 
       const isCollapsed = group.collapsed;
       svg.setAttribute('state', state === 'auto' ? (isCollapsed ? 'close' : 'open') : state);
       const hasActive = group.hasAttribute('has-active');
-
+      svg.setAttribute('active', hasActive && isCollapsed ? 'true' : 'false');
-      const OPACITY = {
-        'folder-dots': { active: '0;1', baseOrig: '0;0' },
-        'folder-icon': { active: '1;0', baseOrig: '1;1' },
-      };
-
-      animations.forEach((animation) => {
-        const parentId = animation.parentElement.id;
-        const isOpacity = animation.getAttribute('attributeName') === 'opacity';
-
-        if (!animation.dataset.origValues) {
-          animation.dataset.origValues = animation.getAttribute('values');
-        }
-
-        const origValues = animation.dataset.origValues;
-        const [fromValue, toValue] = origValues.split(';');
-
-        const isActiveState = isCollapsed && hasActive && isOpacity;
-
-        if (!play && !isActiveState) {
-          if (isOpacity && OPACITY[parentId]) {
-            const staticValue = OPACITY[parentId].baseOrig;
-            animation.dataset.origValues = staticValue;
-            animation.setAttribute('values', staticValue);
-            animation.beginElement();
-          }
-          return;
-        }
-
-        if (isOpacity && OPACITY[parentId]) {
-          animation.dataset.origValues = OPACITY[parentId].baseOrig;
-        }
-
-        let newValues;
-
-        if (isActiveState && OPACITY[parentId]) {
-          newValues = OPACITY[parentId].active;
-          const [activeFrom, activeTo] = newValues.split(';');
-          animation.dataset.origValues = `${activeTo};${activeFrom}`;
-        } else {
-          const stateValues = {
-            open: `${fromValue};${toValue}`,
-            close: `${toValue};${fromValue}`,
-            auto: isCollapsed ? `${toValue};${fromValue}` : `${fromValue};${toValue}`,
-          };
-          newValues = stateValues[state] || stateValues.auto;
-        }
-
-        if (animation.getAttribute('values') !== newValues) {
-          animation.setAttribute('values', newValues);
-          animation.beginElement();
-        }
-      });
 
       return [];
     }
@@ -1256,7 +1198,7 @@
     }
 
     setFolderUserIcon(group, icon) {
-      const svgIcon = group.icon.querySelector('svg #folder-icon image');
+      const svgIcon = group.icon.querySelector('svg .icon image');
       if (!svgIcon) return;
       svgIcon.setAttribute('href', icon ?? '');
       if (svgIcon.getAttribute('href') !== icon) {
@@ -1305,7 +1247,7 @@
 
       if (group.activeTabs.length === 0) {
         group.removeAttribute('has-active');
-        this.updateFolderIcon(group, 'close', false);
+        this.updateFolderIcon(group, 'close');
       }
 
       return this.on_TabGroupCollapse({
@@ -1332,7 +1274,7 @@
 
       if (group.activeTabs.length === 0) {
         group.removeAttribute('has-active');
-        this.updateFolderIcon(group, 'close', false);
+        this.updateFolderIcon(group, 'close');
       }
 
       this.on_TabGroupExpand({ target: group, forExpandVisible: true });
@@ -1408,7 +1350,7 @@
 
               if (tabsContainer.hasAttribute('hidden')) tabsContainer.removeAttribute('hidden');
 
-              animations.push(...this.updateFolderIcon(current, 'close', false));
+              animations.push(...this.updateFolderIcon(current, 'close'));
               animations.push(
                 gZenUIManager.motion.animate(
                   groupStart,
@@ -1518,7 +1460,7 @@
 
     #groupInit(group, stateData) {
       // Setup zen-folder icon to the correct position
-      this.updateFolderIcon(group, 'auto', false);
+      this.updateFolderIcon(group, 'auto');
       if (stateData?.userIcon) {
         this.setFolderUserIcon(group, stateData.userIcon);
       }
@@ -1575,7 +1517,7 @@
 
         let prevSiblingInfo = null;
         const prevSibling = folder.previousElementSibling;
-        const userIcon = folder?.icon?.querySelector('svg #folder-icon image');
+        const userIcon = folder?.icon?.querySelector('svg .icon image');
 
         if (prevSibling) {
           if (gBrowser.isTabGroup(prevSibling)) {

src/zen/folders/zen-folders.css

@@ -6,6 +6,7 @@
 
 tab-group[split-view-group] {
   display: block;
+
   @media (prefers-reduced-motion: no-preference) {
     transition: var(--zen-tabbox-element-indent-transition);
 
@@ -149,6 +150,10 @@ tab-group[split-view-group] {
   tab-group .tab-group-container {
     flex-direction: column;
   }
+
+  tab-group[split-view-group] {
+    min-width: 100%;
+  }
 }
 
 tab-group[split-view-group] .tabbrowser-tab {
@@ -293,6 +298,38 @@ zen-folder {
           fill: var(--zen-folder-stroke);
           transform: translate(4px, 6.5px);
         }
+
+        & g,
+        & rect,
+        & path {
+          transition:
+            transform 0.3s cubic-bezier(0.42, 0, 0, 1),
+            opacity 0.3s cubic-bezier(0.42, 0, 0, 1);
+        }
+
+        &[state='open'] .back {
+          transform: skewX(16deg) translate(-2px, 3.4px) scale(0.85);
+        }
+
+        &[state='open'] :is(.front, .dots, .icon) {
+          transform: skewX(-16deg) translate(11.1px, 3.4px) scale(0.85);
+        }
+
+        & .icon {
+          opacity: 1;
+        }
+
+        & .dots {
+          opacity: 0;
+        }
+
+        &[active='true'] .icon {
+          opacity: 0;
+        }
+
+        &[active='true'] .dots {
+          opacity: 1;
+        }
       }
     }
 

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -955,10 +955,10 @@ class nsZenKeyboardShortcutsVersioner {
       data.push(
         new KeyShortcut(
           'zen-toggle-sidebar',
-          'B',
+          '',
           '',
           ZEN_OTHER_SHORTCUTS_GROUP,
-          nsKeyShortcutModifiers.fromObject({ alt: true }),
+          nsKeyShortcutModifiers.fromObject({}),
           'cmd_zenToggleSidebar',
           'zen-sidebar-shortcut-toggle'
         )

src/zen/split-view/ZenViewSplitter.mjs

@@ -889,7 +889,9 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
   removeGroup(groupIndex) {
     const group = this._data[groupIndex];
     for (const tab of group.tabs.reverse()) {
-      gBrowser.ungroupTab(tab);
+      if (tab.group?.hasAttribute('split-view-group')) {
+        gBrowser.ungroupTab(tab);
+      }
     }
     if (this.currentView === groupIndex) {
       this.deactivateCurrentSplitView();
@@ -1951,7 +1953,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
         const groupIndex = this._data.findIndex((group) => group.tabs.includes(emptyTab));
         const newSelectedTab = gBrowser.selectedTab;
         const cleanup = () => {
-          this.removeTabFromGroup(emptyTab, groupIndex, { changeTab: !onSwitch });
+          this.removeTabFromGroup(emptyTab, groupIndex, { changeTab: !onSwitch, forUnsplit: true });
           const command = document.getElementById('cmd_zenNewEmptySplit');
           command.removeAttribute('disabled');
         };

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -1246,6 +1246,7 @@
       for (const item of this.dragShiftableItems) {
         item.style.transform = '';
       }
+      delete this._topToNormalTabs;
       for (const item of gBrowser.tabContainer.ariaFocusableItems) {
         if (gBrowser.isTab(item)) {
           let isVisible = true;
@@ -1280,7 +1281,7 @@
         : [separator];
     }
 
-    animateSeparatorMove(movingTabs, dropElement, isPinned, event) {
+    animateSeparatorMove(movingTabs, dropElement, isPinned) {
       let draggedTab = movingTabs[0];
       if (gBrowser.isTabGroupLabel(draggedTab) && draggedTab.group.isZenFolder) {
         this._isGoingToPinnedTabs = true;
@@ -1290,14 +1291,19 @@
         draggedTab = draggedTab.group;
       }
       const itemsToCheck = this.dragShiftableItems;
-      const translate = event.screenY;
+      let translate = movingTabs[isPinned ? movingTabs.length - 1 : 0].getBoundingClientRect().top;
+      if (isPinned) {
+        const rect = draggedTab.getBoundingClientRect();
+        translate += rect.height;
+      }
       const draggingTabHeight = movingTabs.reduce((acc, item) => {
         return acc + window.windowUtils.getBoundsWithoutFlushing(item).height;
       }, 0);
-      let topToNormalTabs = itemsToCheck[0].screenY;
+      if (typeof this._topToNormalTabs === 'undefined') {
-      if (!isPinned) {
+        const rects = itemsToCheck.map((item) => window.windowUtils.getBoundsWithoutFlushing(item));
-        topToNormalTabs += draggedTab.getBoundingClientRect().height;
+        this._topToNormalTabs = rects[0].top + rects.at(-1).height / (isPinned ? 2 : 4);
       }
+      let topToNormalTabs = this._topToNormalTabs;
       const isGoingToPinnedTabs =
         translate < topToNormalTabs && gBrowser.pinnedTabCount - gBrowser._numZenEssentials > 0;
       const multiplier = isGoingToPinnedTabs !== isPinned ? (isGoingToPinnedTabs ? 1 : -1) : 0;

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

@@ -20,6 +20,11 @@
   width: 100%;
 }
 
+#pinned-drop-indicator {
+  /* We dont use this firefox feature */
+  display: none !important;
+}
+
 /* ==========================================================================
    Single Toolbar Mode Specific Styles (`zen-single-toolbar='true'`)
    ========================================================================== */

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2258,7 +2258,6 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
 
     // Update workspace UI
     await this._updateWorkspacesChangeContextMenu();
-    // gZenUIManager.updateTabsToolbar();
     await this._propagateWorkspaceData({ clearCache: false, onInit });
 
     gZenThemePicker.onWorkspaceChange(workspace);
@@ -3082,7 +3081,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
   }
 
   handleTabCloseWindow() {
-    if (this.shouldCloseWindow()) {
+    if (Services.prefs.getBoolPref('zen.tabs.close-window-with-empty')) {
       document.getElementById('cmd_closeWindow').doCommand();
     }
   }

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.16b",
+        "displayVersion": "1.16.1b",
         "github": {
           "repo": "zen-browser/desktop"
         },