Revert "chore: Rollback from new folder animation until release (#10451)" (#10668)

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.4`! 🚀
+- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `143.0.3`! 🚀
-- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.4`!
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.3`!
 
 ### Contributing
 

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

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

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 = Χρήση παρασκηνίου με θέμα για συμπαγή γραμμή εργαλειών
+    .label = Use themed background for compact toolbar
 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,6 +33,8 @@ 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 = Использовать цвета темы для фона компактной панели инструментов
+    .label = Use themed background for compact toolbar
 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 = Показать боковую панель истории
+zen-history-sidebar-shortcut = Show History Sidebar
 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 = Переключить закрепление вкладки
+zen-toggle-pin-tab-shortcut = Toggle Pin Tab
 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 = Раскрыть предпросмотр
+zen-glance-expand = Expand Glance
 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 = Новая разделённая вкладка
+zen-new-empty-split-view-shortcut = New Empty Split View
 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 = Переименовать папку
+    .label = Rename Folder
 zen-folders-panel-unpack-folder = 
-    .label = Распаковать папку
+    .label = Unpack Folder
 zen-folders-new-subfolder = 
-    .label = Новая подпапка
+    .label = New Subfolder
 zen-folders-panel-delete-folder = 
-    .label = Удалить папку
+    .label = Delete Folder
 zen-folders-panel-convert-folder-to-space = 
-    .label = Конвертировать папку в пространство
+    .label = Convert folder to Space
 zen-folders-panel-change-folder-space = 
-    .label = Переместить в пространство...
+    .label = Change Space...
 zen-folders-panel-change-icon-folder = 
-    .label = Изменить значок
+    .label = Change Icon
 zen-folders-unload-all-tooltip = 
-    .tooltiptext = Выгрузить все активные вкладки в этой папке
+    .tooltiptext = Unload active in this folder
 zen-folders-unload-folder = 
-    .label = Выгрузить все вкладки
+    .label = Unload All Tabs
-zen-folders-search-no-results = Ничего не найдено 🤔
+zen-folders-search-no-results = No tabs matching that search 🤔

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 = Эмодзи
+    .label = Emojis
 zen-icons-picker-svg = 
-    .label = Иконки
+    .label = Icons
-urlbar-search-mode-zen_actions = Действия
+urlbar-search-mode-zen_actions = 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 = Скрыть боковую панель
+    .label = Hide sidebar
 zen-toolbar-context-compact-mode-just-toolbar = 
     .label = Скрыть панель инструментов
 zen-toolbar-context-compact-mode-hide-both = 
     .label = Скрыть оба
     .accesskey = Н
 zen-toolbar-context-new-folder = 
-    .label = Новая папка
+    .label = New Folder
     .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 = Создать папку
+    .label = Create Folder
 zen-panel-ui-new-empty-split = 
-    .label = Новая разделённая вкладка
+    .label = New Split
 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 = Вы уверены, что хотите удалить { $name }? Это действие необратимо.
+zen-workspaces-delete-workspace-body = Are you sure you want to delete { $name }? This action cannot be undone.

prefs/glance.yaml

@@ -8,6 +8,9 @@
 - 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,15 +15,6 @@ 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
@@ -31,7 +22,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, cls=JSONWithCommentsDecoder)
+      new_prefs = json.load(f_in)
       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,6 +124,7 @@
 #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']) &:not(.zen-glance-overlay) {
+      :root:not([zen-no-padding='true']) & {
         border-radius: var(--zen-native-inner-radius);
         box-shadow: var(--zen-big-shadow);
-        overflow: clip;
       }
 
       & browser[type='content'] {

src/zen/folders/ZenFolder.mjs

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

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

@@ -2,10 +2,11 @@
 // 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);
   }
 
@@ -21,34 +22,51 @@ export class ZenGlanceChild extends JSWindowActorChild {
     }
   }
 
-  async #initActivationMethod() {
+  async getActivationMethod() {
-    this.#activationMethod = await this.sendQuery('ZenGlance:GetActivationMethod');
+    if (this._activationMethod === undefined) {
+      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;
-    await this.#initActivationMethod();
+    const activationMethod = await this.getActivationMethod();
+    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, originalTarget) {
+  openGlance(target) {
     let url = target.href;
     // Add domain to relative URLs
     if (!url.match(/^(?:[a-z]+:)?\/\//i)) {
       url = this.contentWindow.location.origin + url;
     }
-    // Get the largest element we can get. If the `A` element
+    const rect = target.getBoundingClientRect();
-    // 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,
@@ -58,11 +76,35 @@ 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) {
@@ -71,6 +113,8 @@ 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');
@@ -78,7 +122,7 @@ export class ZenGlanceChild extends JSWindowActorChild {
       event.preventDefault();
       event.stopPropagation();
 
-      this.openGlance(target, event.originalTarget || event.target);
+      this.openGlance(target);
     }
   }
 

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

@@ -11,6 +11,9 @@ 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;
@@ -28,38 +31,7 @@ export class ZenGlanceParent extends JSWindowActorParent {
     }
   }
 
-  #imageBitmapToBase64(imageBitmap) {
+  openGlance(window, data) {
-    // 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:not([zen-right-side='true']) & {
+  :root[zen-right-side='true'] & {
     left: 100%;
   }
 
-  :root[zen-right-side='true'] & {
+  :root:not([zen-right-side='true']) & {
     right: 100%;
   }
 
@@ -99,7 +99,7 @@
 }
 
 .browserSidebarContainer.zen-glance-background,
-.browserSidebarContainer.zen-glance-overlay .browserContainer:not([fade-out='true']) {
+.browserSidebarContainer.zen-glance-overlay .browserContainer {
   border-radius: var(--zen-native-inner-radius);
   box-shadow: var(--zen-big-shadow);
 }
@@ -116,19 +116,14 @@
   }
 
   & .browserContainer {
-    transform: translate(-50%, -50%);
+    background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
     position: fixed;
+    opacity: 0;
     top: 0;
     left: 0;
     flex: unset !important;
     /* Promote to its own layer during transitions to reduce jank */
-    will-change: transform, top, left;
+    will-change: transform, opacity, top, left, width, height;
-    width: 85%;
-    height: 100%;
-
-    &:not([has-finished-animation='true']) #statuspanel {
-      display: none;
-    }
 
     &[has-finished-animation='true'] {
       position: relative !important;
@@ -145,15 +140,10 @@
     }
 
     & browser {
-      background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32)) !important;
       width: 100%;
       height: 100%;
       opacity: 1;
-      transition: opacity 0.08s;
+      transition: opacity 0.2s ease-in-out;
-
-      @starting-style {
-        opacity: 0;
-      }
     }
 
     &[animate='true'] {
@@ -163,17 +153,8 @@
 
   &[fade-out='true'] {
     & browser {
-      transition: opacity 0.2s ease-in-out;
+      transition: opacity 0.2s ease;
       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 == 'macosx' ? '+' : '*',
+          AppConstants.platform == 'linux' ? '*' : '+',
           '',
           ZEN_SPLIT_VIEW_SHORTCUTS_GROUP,
           nsKeyShortcutModifiers.fromObject({ accel: true, shift: true }),

src/zen/split-view/ZenViewSplitter.mjs

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

src/zen/tests/ignorePrefs.json

@@ -1,14 +1,6 @@
-// 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.4",
+    "version": "143.0.3",
-    "candidate": "143.0.4"
+    "candidate": "143.0.3"
   },
   "buildOptions": {
     "generateBranding": true