chore: Finish refactor and fix tests, b=no-bug, c=tests, scripts, glance

* New translations zen-preferences.ftl (Greek)

* New translations zen-preferences.ftl (Russian)

* New translations zen-workspaces.ftl (Russian)

* New translations zen-general.ftl (Russian)

* New translations zen-vertical-tabs.ftl (Russian)

* New translations zen-folders.ftl (Russian)

README.md

@@ -34,8 +34,8 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
 
 ### Firefox Versions
 
-- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `143.0.3`! 🚀
+- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `143.0.4`! 🚀
-- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.3`!
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.4`!
 
 ### Contributing
 

build/firefox-cache/l10n-last-commit-hash

@@ -1 +1 @@
-c8042c4961ad61678121d8ce9ca2d17cc85fefbe
+5cbf54e3cfaf4cfb375088d7e11702e8974b238f

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

@@ -43,9 +43,9 @@ 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 = Συνεχεία από εκεί που σταματήσατε
+    .label = Συνέχεια από εκεί που σταματήσατε
 pane-zen-pinned-tab-manager-title = Καρφιτσωμένες Καρτέλες
 zen-pinned-tab-manager-header = Γενικές ρυθμίσεις για καρφιτσωμένες καρτέλες
 zen-pinned-tab-manager-description = Διαχείριση πρόσθετης συμπεριφοράς καρφιτσωμένων καρτελών

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

@@ -33,8 +33,6 @@ zen-glance-trigger-shift-click =
     .label = Shift + Click
 zen-glance-trigger-meta-click =
     .label = Meta (Command) + Click
-zen-glance-trigger-mantain-click =
-    .label = Hold Click (Coming Soon!)
 
 zen-look-and-feel-compact-view-header = Show in compact view
 zen-look-and-feel-compact-view-description = Only show the toolbars you use!

locales/ru/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 = Закреплённые вкладки
@@ -195,7 +195,7 @@ zen-picture-in-picture-toggle-shortcut-mac = Переключить изобра
 zen-picture-in-picture-toggle-shortcut-mac-alt = Переключить изображение в картинке (Mac Alt)
 zen-page-source-shortcut-safari = Просмотр исходного кода страницы (Safari)
 zen-nav-stop-shortcut = Остановить загрузку
-zen-history-sidebar-shortcut = Show History Sidebar
+zen-history-sidebar-shortcut = Показать боковую панель истории
 zen-window-minimize-shortcut = Свернуть окно
 zen-help-shortcut = Открыть справку
 zen-preferences-shortcut = Открыть настройки
@@ -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/ru/browser/browser/zen-folders.ftl

@@ -1,21 +1,21 @@
 zen-folders-search-placeholder = 
-    .placeholder = Искать { $folder-name }…
+    .placeholder = Искать в { $folder-name }...
 zen-folders-panel-rename-folder = 
-    .label = Rename Folder
+    .label = Переименовать папку
 zen-folders-panel-unpack-folder = 
-    .label = Unpack Folder
+    .label = Распаковать папку
 zen-folders-new-subfolder = 
-    .label = New Subfolder
+    .label = Новая подпапка
 zen-folders-panel-delete-folder = 
-    .label = Delete Folder
+    .label = Удалить папку
 zen-folders-panel-convert-folder-to-space = 
-    .label = Convert folder to Space
+    .label = Конвертировать папку в пространство
 zen-folders-panel-change-folder-space = 
-    .label = Change Space...
+    .label = Переместить в пространство...
 zen-folders-panel-change-icon-folder = 
-    .label = Change Icon
+    .label = Изменить значок
 zen-folders-unload-all-tooltip = 
-    .tooltiptext = Unload active in this folder
+    .tooltiptext = Выгрузить все активные вкладки в этой папке
 zen-folders-unload-folder = 
-    .label = Unload All Tabs
+    .label = Выгрузить все вкладки
-zen-folders-search-no-results = No tabs matching that search 🤔
+zen-folders-search-no-results = Ничего не найдено 🤔

locales/ru/browser/browser/zen-general.ftl

@@ -45,7 +45,7 @@ zen-close-label = Закрыть
 zen-singletoolbar-urlbar-placeholder-with-name = 
     .placeholder = Найти...
 zen-icons-picker-emoji = 
-    .label = Emojis
+    .label = Эмодзи
 zen-icons-picker-svg = 
-    .label = Icons
+    .label = Иконки
-urlbar-search-mode-zen_actions = Actions
+urlbar-search-mode-zen_actions = Действия

locales/ru/browser/browser/zen-vertical-tabs.ftl

@@ -8,14 +8,14 @@ zen-toolbar-context-compact-mode-enable =
     .label = Включить компактный вид
     .accesskey = D
 zen-toolbar-context-compact-mode-just-tabs = 
-    .label = Hide sidebar
+    .label = Скрыть боковую панель
 zen-toolbar-context-compact-mode-just-toolbar = 
     .label = Скрыть панель инструментов
 zen-toolbar-context-compact-mode-hide-both = 
     .label = Скрыть оба
     .accesskey = Н
 zen-toolbar-context-new-folder = 
-    .label = New Folder
+    .label = Новая папка
     .accesskey = N
 sidebar-zen-expand = 
     .label = Развернуть боковую панель

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

@@ -2,9 +2,9 @@ zen-panel-ui-workspaces-text = Рабочие пространства
 zen-panel-ui-workspaces-create = 
     .label = Создать пространство
 zen-panel-ui-folder-create = 
-    .label = Create Folder
+    .label = Создать папку
 zen-panel-ui-new-empty-split = 
-    .label = New Split
+    .label = Новая разделённая вкладка
 zen-workspaces-panel-context-delete = 
     .label = Удалить пространство
     .accesskey = D
@@ -50,4 +50,4 @@ zen-workspace-creation-profile = Профиль
 zen-workspace-creation-header = Создать пространство
 zen-workspace-creation-label = Пространства используются для организации ваших вкладок и сеансов.
 zen-workspaces-delete-workspace-title = Удалить пространство?
-zen-workspaces-delete-workspace-body = Are you sure you want to delete { $name }? This action cannot be undone.
+zen-workspaces-delete-workspace-body = Вы уверены, что хотите удалить { $name }? Это действие необратимо.

prefs/glance.yaml

@@ -8,9 +8,6 @@
 - name: zen.glance.enable-contextmenu-search
   value: true
 
-- name: zen.glance.hold-duration
-  value: 300 # in ms
-
 - name: zen.glance.open-essential-external-links
   value: true
 

scripts/run_tests.py

@@ -15,6 +15,15 @@ IGNORE_PREFS_FILE_OUT = os.path.join(
 )
 
 
+class JSONWithCommentsDecoder(json.JSONDecoder):
+  def __init__(self, **kw):
+    super().__init__(**kw)
+
+  def decode(self, s: str) -> any:
+    s = '\n'.join(l for l in s.split('\n') if not l.lstrip(' ').startswith('//'))
+    return super().decode(s)
+
+
 def copy_ignore_prefs():
   print("Copying ignorePrefs.json from src/zen/tests to engine/testing/mochitest...")
   # if there are prefs that dont exist on output file, copy them from input file
@@ -22,7 +31,7 @@ def copy_ignore_prefs():
   with open(IGNORE_PREFS_FILE_OUT, 'r') as f:
     all_prefs = json.load(f)
     with open(IGNORE_PREFS_FILE_IN, 'r') as f_in:
-      new_prefs = json.load(f_in)
+      new_prefs = json.load(f_in, cls=JSONWithCommentsDecoder)
       all_prefs.extend(p for p in new_prefs if p not in all_prefs)
   with open(IGNORE_PREFS_FILE_OUT, 'w') as f_out:
     json.dump(all_prefs, f_out, indent=2)

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -124,7 +124,6 @@
 #ifdef XP_MACOSX
                         <menuitem data-l10n-id="zen-glance-trigger-meta-click" value="meta"/>
 #endif
-                        <menuitem data-l10n-id="zen-glance-trigger-mantain-click" value="mantain" disabled="true"/>
                   </menupopup>
             </menulist>
         </hbox>

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

@@ -8,12 +8,12 @@
   #tabbrowser-tabpanels[dragging-split='true'] {
     width: -moz-available;
     position: relative;
-    overflow: clip;
 
     &.browserSidebarContainer {
-      :root:not([zen-no-padding='true']) & {
+      :root:not([zen-no-padding='true']) &:not(.zen-glance-overlay) {
         border-radius: var(--zen-native-inner-radius);
         box-shadow: var(--zen-big-shadow);
+        overflow: clip;
       }
 
       & browser[type='content'] {

src/zen/folders/ZenFolder.mjs

@@ -117,10 +117,6 @@
       return activeGroups;
     }
 
-    get childActiveGroups() {
-      return Array.from(this.querySelectorAll('zen-folder[has-active]'));
-    }
-
     rename() {
       if (!document.documentElement.hasAttribute('zen-sidebar-expanded')) {
         return;
@@ -244,10 +240,9 @@
     }
 
     async #unloadAllActiveTabs(event, noClose = false) {
-      await gZenPinnedTabManager._onCloseTabShortcut(event, this.tabs, {
+      for (const tab of this.tabs) {
-        noClose,
+        await gZenPinnedTabManager._onCloseTabShortcut(event, tab, { noClose });
-        folderToUnload: this,
+      }
-      });
       this.activeTabs = [];
     }
 

src/zen/glance/actors/ZenGlanceChild.sys.mjs

@@ -2,11 +2,10 @@
 // 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/.
 export class ZenGlanceChild extends JSWindowActorChild {
+  #activationMethod;
+
   constructor() {
     super();
-
-    this.mouseUpListener = this.handleMouseUp.bind(this);
-    this.mouseDownListener = this.handleMouseDown.bind(this);
     this.clickListener = this.handleClick.bind(this);
   }
 
@@ -22,51 +21,34 @@ export class ZenGlanceChild extends JSWindowActorChild {
     }
   }
 
-  async getActivationMethod() {
+  async #initActivationMethod() {
-    if (this._activationMethod === undefined) {
+    this.#activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
-      this._activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
-    }
-    return this._activationMethod;
-  }
-
-  async getHoverActivationDelay() {
-    if (this._hoverActivationDelay === undefined) {
-      this._hoverActivationDelay = await this.sendQuery('ZenGlance:GetHoverActivationDelay');
-    }
-    return this._hoverActivationDelay;
   }
 
   async initiateGlance() {
     this.mouseIsDown = false;
-    const activationMethod = await this.getActivationMethod();
+    await this.#initActivationMethod();
-    if (activationMethod === 'mantain') {
-      this.contentWindow.addEventListener('mousedown', this.mouseDownListener);
-      this.contentWindow.addEventListener('mouseup', this.mouseUpListener);
-
-      this.contentWindow.document.removeEventListener('click', this.clickListener);
-    } else if (
-      activationMethod === 'ctrl' ||
-      activationMethod === 'alt' ||
-      activationMethod === 'shift'
-    ) {
     this.contentWindow.document.addEventListener('click', this.clickListener, { capture: true });
-
-      this.contentWindow.removeEventListener('mousedown', this.mouseDownListener);
-      this.contentWindow.removeEventListener('mouseup', this.mouseUpListener);
-    }
   }
 
   ensureOnlyKeyModifiers(event) {
     return !(event.ctrlKey ^ event.altKey ^ event.shiftKey ^ event.metaKey);
   }
 
-  openGlance(target) {
+  openGlance(target, originalTarget) {
     let url = target.href;
     // Add domain to relative URLs
     if (!url.match(/^(?:[a-z]+:)?\/\//i)) {
       url = this.contentWindow.location.origin + url;
     }
-    const rect = target.getBoundingClientRect();
+    // Get the largest element we can get. If the `A` element
+    // is a parent of the original target, use the anchor element,
+    // otherwise use the original target.
+    let rect = originalTarget.getBoundingClientRect();
+    const anchorRect = target.getBoundingClientRect();
+    if (anchorRect.width * anchorRect.height > rect.width * rect.height) {
+      rect = anchorRect;
+    }
     this.sendAsyncMessage('ZenGlance:OpenGlance', {
       url,
       clientX: rect.left,
@@ -76,35 +58,11 @@ export class ZenGlanceChild extends JSWindowActorChild {
     });
   }
 
-  handleMouseUp(event) {
-    if (this.hasClicked) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.hasClicked = false;
-    }
-    this.mouseIsDown = null;
-  }
-
-  async handleMouseDown(event) {
-    const target = event.target.closest('A');
-    if (!target) {
-      return;
-    }
-    this.mouseIsDown = target;
-    const hoverActivationDelay = await this.getHoverActivationDelay();
-    this.contentWindow.setTimeout(() => {
-      if (this.mouseIsDown === target) {
-        this.hasClicked = true;
-        this.openGlance(target);
-      }
-    }, hoverActivationDelay);
-  }
-
   handleClick(event) {
     if (this.ensureOnlyKeyModifiers(event) || event.button !== 0 || event.defaultPrevented) {
       return;
     }
-    const activationMethod = this._activationMethod;
+    const activationMethod = this.#activationMethod;
     if (activationMethod === 'ctrl' && !event.ctrlKey) {
       return;
     } else if (activationMethod === 'alt' && !event.altKey) {
@@ -113,8 +71,6 @@ export class ZenGlanceChild extends JSWindowActorChild {
       return;
     } else if (activationMethod === 'meta' && !event.metaKey) {
       return;
-    } else if (activationMethod === 'mantain' || typeof activationMethod === 'undefined') {
-      return;
     }
     // get closest A element
     const target = event.target.closest('A');
@@ -122,7 +78,7 @@ export class ZenGlanceChild extends JSWindowActorChild {
       event.preventDefault();
       event.stopPropagation();
 
-      this.openGlance(target);
+      this.openGlance(target, event.originalTarget || event.target);
     }
   }
 

src/zen/glance/actors/ZenGlanceParent.sys.mjs

@@ -11,9 +11,6 @@ export class ZenGlanceParent extends JSWindowActorParent {
       case 'ZenGlance:GetActivationMethod': {
         return Services.prefs.getStringPref('zen.glance.activation-method', 'ctrl');
       }
-      case 'ZenGlance:GetHoverActivationDelay': {
-        return Services.prefs.getIntPref('zen.glance.hold-duration', 500);
-      }
       case 'ZenGlance:OpenGlance': {
         this.openGlance(this.browsingContext.topChromeWindow, message.data);
         break;
@@ -31,7 +28,38 @@ export class ZenGlanceParent extends JSWindowActorParent {
     }
   }
 
-  openGlance(window, data) {
+  #imageBitmapToBase64(imageBitmap) {
+    // 1. Create a canvas with the same size as the ImageBitmap
+    const canvas = this.browsingContext.topChromeWindow.document.createElement('canvas');
+    canvas.width = imageBitmap.width;
+    canvas.height = imageBitmap.height;
+
+    // 2. Draw the ImageBitmap onto the canvas
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(imageBitmap, 0, 0);
+
+    // 3. Convert the canvas content to a Base64 string (PNG by default)
+    const base64String = canvas.toDataURL('image/png');
+    return base64String;
+  }
+
+  async openGlance(window, data) {
+    const win = this.browsingContext.topChromeWindow;
+    const tabPanels = win.gBrowser.tabpanels;
+    // Make the rect relative to the tabpanels. We dont do it directly on the
+    // content process since it does not take into account scroll. This way, we can
+    // be sure that the coordinates are correct.
+    const tabPanelsRect = tabPanels.getBoundingClientRect();
+    const rect = new DOMRect(
+      data.clientX + tabPanelsRect.left,
+      data.clientY + tabPanelsRect.top,
+      data.width,
+      data.height
+    );
+    const elementData = await this.#imageBitmapToBase64(
+      await win.browsingContext.currentWindowGlobal.drawSnapshot(rect, 1, 'transparent', true)
+    );
+    data.elementData = elementData;
     window.gZenGlanceManager.openGlance(data);
   }
 }

src/zen/glance/zen-glance.css

@@ -14,11 +14,11 @@
   gap: 12px;
   max-width: 56px;
 
-  :root[zen-right-side='true'] & {
+  :root:not([zen-right-side='true']) & {
     left: 100%;
   }
 
-  :root:not([zen-right-side='true']) & {
+  :root[zen-right-side='true'] & {
     right: 100%;
   }
 
@@ -99,7 +99,7 @@
 }
 
 .browserSidebarContainer.zen-glance-background,
-.browserSidebarContainer.zen-glance-overlay .browserContainer {
+.browserSidebarContainer.zen-glance-overlay .browserContainer:not([fade-out='true']) {
   border-radius: var(--zen-native-inner-radius);
   box-shadow: var(--zen-big-shadow);
 }
@@ -116,14 +116,19 @@
   }
 
   & .browserContainer {
-    background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
+    transform: translate(-50%, -50%);
     position: fixed;
-    opacity: 0;
     top: 0;
     left: 0;
     flex: unset !important;
     /* Promote to its own layer during transitions to reduce jank */
-    will-change: transform, opacity, top, left, width, height;
+    will-change: transform, top, left;
+    width: 85%;
+    height: 100%;
+
+    &:not([has-finished-animation='true']) #statuspanel {
+      display: none;
+    }
 
     &[has-finished-animation='true'] {
       position: relative !important;
@@ -140,10 +145,15 @@
     }
 
     & browser {
+      background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32)) !important;
       width: 100%;
       height: 100%;
       opacity: 1;
-      transition: opacity 0.2s ease-in-out;
+      transition: opacity 0.08s;
+
+      @starting-style {
+        opacity: 0;
+      }
     }
 
     &[animate='true'] {
@@ -153,8 +163,17 @@
 
   &[fade-out='true'] {
     & browser {
-      transition: opacity 0.2s ease;
+      transition: opacity 0.2s ease-in-out;
       opacity: 0;
     }
   }
 }
+
+.zen-glance-element-preview {
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: var(--zen-native-inner-radius);
+}

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -1084,7 +1084,7 @@ class nsZenKeyboardShortcutsVersioner {
       data.push(
         new KeyShortcut(
           'zen-new-empty-split-view',
-          AppConstants.platform == 'linux' ? '*' : '+',
+          AppConstants.platform == 'macosx' ? '+' : '*',
           '',
           ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
           nsKeyShortcutModifiers.fromObject({ accel: true, shift: true }),

src/zen/split-view/ZenViewSplitter.mjs

@@ -958,10 +958,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    * @returns {Element} The tab browser panel.
    */
   get tabBrowserPanel() {
-    if (!this._tabBrowserPanel) {
+    return gBrowser.tabpanels;
-      this._tabBrowserPanel = document.getElementById('tabbrowser-tabpanels');
-    }
-    return this._tabBrowserPanel;
   }
 
   get splitViewActive() {

src/zen/tests/ignorePrefs.json

@@ -1,6 +1,14 @@
+// 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/.
+//
+// This file lists preferences that are ignored when running mochitests.
+// Add here any preference that is not relevant for testing Zen Modus.
+// This prevents unnecessary test re-runs when these preferences are changed.
 [
   "zen.mods.updated-value-observer",
   "zen.mods.last-update",
   "zen.view.compact.enable-at-startup",
+  "zen.urlbar.suggestions-learner",
   "browser.newtabpage.activity-stream.trendingSearch.defaultSearchEngine"
 ]

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "143.0.3",
+    "version": "143.0.4",
-    "candidate": "143.0.3"
+    "candidate": "143.0.4"
   },
   "buildOptions": {
     "generateBranding": true