feat: New updating animation and changed some default keyboard shortcuts, b=no-bug, c=common, kbs, tabs

src/zen/common/ZenStartup.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/.
 {
-  var gZenStartup = {
-    _watermarkIgnoreElements: ['zen-toast-container'],
+  var gZenStartup = new (class {
+    #watermarkIgnoreElements = ['zen-toast-container'];
+    #hasInitializedLayout = false;
 
-    isReady: false,
+    isReady = false;
 
     async init() {
       // important: We do this to ensure that some firefox components
@@ -14,23 +15,23 @@
       // test the startup process.
       await new Promise((resolve) => resolve());
       this.openWatermark();
-      this._initBrowserBackground();
-      this._changeSidebarLocation();
-      this._zenInitBrowserLayout();
-    },
+      this.#initBrowserBackground();
+      this.#changeSidebarLocation();
+      this.#zenInitBrowserLayout();
+    }
 
-    _initBrowserBackground() {
+    #initBrowserBackground() {
       const background = document.createXULElement('box');
       background.id = 'zen-browser-background';
       const grain = document.createXULElement('box');
       grain.id = 'zen-browser-grain';
       background.appendChild(grain);
       document.getElementById('browser').prepend(background);
-    },
+    }
 
-    _zenInitBrowserLayout() {
-      if (this.__hasInitBrowserLayout) return;
-      this.__hasInitBrowserLayout = true;
+    #zenInitBrowserLayout() {
+      if (this.#hasInitializedLayout) return;
+      this.#hasInitializedLayout = true;
       try {
         const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
         const kNewContainerId = 'zen-appcontent-navbar-container';
@@ -51,7 +52,7 @@
         gZenWorkspaces.init();
         setTimeout(() => {
           gZenUIManager.init();
-          this._checkForWelcomePage();
+          this.#checkForWelcomePage();
 
           document.l10n.setAttributes(
             document.getElementById('tabs-newtab-button'),
@@ -66,7 +67,7 @@
       } else {
         Services.obs.addObserver(this, 'browser-delayed-startup-finished');
       }
-    },
+    }
 
     observe(aSubject, aTopic) {
       // This nsIObserver method allows us to defer initialization until after
@@ -75,14 +76,14 @@
         Services.obs.removeObserver(this, 'browser-delayed-startup-finished');
         this.delayedStartupFinished();
       }
-    },
+    }
 
     delayedStartupFinished() {
       gZenWorkspaces.promiseInitialized.then(async () => {
         await delayedStartupPromise;
         await SessionStore.promiseAllWindowsRestored;
         delete gZenUIManager.promiseInitialized;
-        this._initSearchBar();
+        this.#initSearchBar();
         gZenCompactModeManager.init();
         // Fix for https://github.com/zen-browser/desktop/issues/7605, specially in compact mode
         if (gURLBar.hasAttribute('breakout-extend')) {
@@ -94,7 +95,7 @@
         this.closeWatermark();
         this.isReady = true;
       });
-    },
+    }
 
     openWatermark() {
       if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
@@ -104,12 +105,12 @@
       for (let elem of document.querySelectorAll('#browser > *, #urlbar')) {
         elem.style.opacity = 0;
       }
-    },
+    }
 
     closeWatermark() {
       document.documentElement.removeAttribute('zen-before-loaded');
       if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
-        let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', ');
+        let elementsToIgnore = this.#watermarkIgnoreElements.map((id) => '#' + id).join(', ');
         gZenUIManager.motion
           .animate(
             '#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *',
@@ -131,9 +132,9 @@
       window.requestAnimationFrame(() => {
         window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
       });
-    },
+    }
 
-    _changeSidebarLocation() {
+    #changeSidebarLocation() {
       const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
 
       const browser = document.getElementById('browser');
@@ -146,23 +147,54 @@
           sidebarPanelWrapper.prepend(elem);
         }
       }
-    },
+    }
 
-    _initSearchBar() {
+    #initSearchBar() {
       // Only focus the url bar
       gURLBar.focus();
-    },
+    }
 
-    _checkForWelcomePage() {
+    #checkForWelcomePage() {
       if (!Services.prefs.getBoolPref('zen.welcome-screen.seen', false)) {
         Services.prefs.setBoolPref('zen.welcome-screen.seen', true);
+        Services.prefs.setStringPref('zen.updates.last-build-id', Services.appinfo.appBuildID);
         Services.scriptloader.loadSubScript(
           'chrome://browser/content/zen-components/ZenWelcome.mjs',
           window
         );
+      } else {
+        this.#createUpdateAnimation();
       }
-    },
-  };
+    }
+
+    async #createUpdateAnimation() {
+      const appID = Services.appinfo.appBuildID;
+      if (Services.prefs.getStringPref('zen.updates.last-build-id', '') === appID) {
+        return;
+      }
+      Services.prefs.setStringPref('zen.updates.last-build-id', appID);
+      if (gReduceMotion) return;
+      await gZenWorkspaces.promiseInitialized;
+      const appWrapper = document.getElementById('zen-main-app-wrapper');
+      const element = document.createElement('div');
+      element.id = 'zen-update-animation';
+      appWrapper.appendChild(element);
+      gZenUIManager.motion
+        .animate(
+          '#zen-update-animation',
+          {
+            top: ['100%', '-50%'],
+            opacity: [0.5, 1],
+          },
+          {
+            duration: 0.35,
+          }
+        )
+        .then(() => {
+          element.remove();
+        });
+    }
+  })();
 
   window.addEventListener(
     'MozBeforeInitialXULLayout',

src/zen/common/styles/zen-single-components.css

@@ -181,3 +181,23 @@ body > #confetti {
     transform: scale(0.98);
   }
 }
+
+/** Update animation */
+
+#zen-update-animation {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    rgba(255, 255, 255, 0.5) 40%,
+    rgba(255, 255, 255, 0.5) 60%,
+    transparent 100%
+  );
+  left: 0;
+  z-index: 999;
+  opacity: 0;
+  transform: translateY(-50%);
+  pointer-events: none;
+}

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -623,7 +623,7 @@ class nsZenKeyboardShortcutsLoader {
         'C',
         '',
         ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
-        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ alt: true }),
         'cmd_zenCompactModeToggle',
         'zen-compact-mode-shortcut-toggle'
       )
@@ -668,10 +668,10 @@ class nsZenKeyboardShortcutsLoader {
     newShortcutList.push(
       new KeyShortcut(
         'zen-workspace-forward',
-        'E',
         '',
+        'VK_RIGHT',
         ZEN_WORKSPACE_SHORTCUTS_GROUP,
-        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true }),
         'cmd_zenWorkspaceForward',
         'zen-workspace-shortcut-forward'
       )
@@ -679,10 +679,10 @@ class nsZenKeyboardShortcutsLoader {
     newShortcutList.push(
       new KeyShortcut(
         'zen-workspace-backward',
-        'Q',
         '',
+        'VK_LEFT',
         ZEN_WORKSPACE_SHORTCUTS_GROUP,
-        nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
+        nsKeyShortcutModifiers.fromObject({ accel: true }),
         'cmd_zenWorkspaceBackward',
         'zen-workspace-shortcut-backward'
       )

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -140,7 +140,6 @@
         return;
       }
       await ZenPinnedTabsStorage.promiseInitialized;
-      await gZenWorkspaces.promiseSectionsInitialized;
       await this.#initializePinsCache();
       setTimeout(async () => {
         // Execute in a separate task to avoid blocking the main thread
@@ -150,7 +149,7 @@
         if (init) {
           this._hasFinishedLoading = true;
         }
-      });
+      }, 10);
     }
 
     async #initializePinsCache() {