Merge pull request #1306 from BrhmDev/feature/Flash-sidebar-on-tab-select-in-compact-mode

Briefly make the toolbar popup when switching or opening new tabs in compact mode

src/browser/app/profile/zen-browser.js

@@ -73,6 +73,7 @@ pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);
 pref('zen.view.compact.hide-toolbar', false);
+pref('zen.view.compact.toolbar-flash-popup', true);
 
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);

src/browser/base/content/ZenUIManager.mjs

@@ -110,6 +110,8 @@ var gZenVerticalTabsManager = {
 };
 
 var gZenCompactModeManager = {
+  _flashSidebarTimeout: null,
+
   init() {
     Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this));
   },
@@ -135,6 +137,27 @@ var gZenCompactModeManager = {
     sidebar.toggleAttribute('zen-user-show');
   },
 
+  flashSidebar() {
+    let sidebar = document.getElementById('navigator-toolbox');
+    if (sidebar.matches(':hover')) {
+      return;
+    }
+    if (this._flashSidebarTimeout) {
+      clearTimeout(this._flashSidebarTimeout);
+    } else {
+      window.requestAnimationFrame(() =>
+          sidebar.setAttribute('flash-popup', '')
+      );
+    }
+    this._flashSidebarTimeout =
+        setTimeout(() => {
+          window.requestAnimationFrame(() => {
+            sidebar.removeAttribute('flash-popup')
+            this._flashSidebarTimeout = null;
+          });
+        }, 1600);
+  },
+
   toggleToolbar() {
     let toolbar = document.getElementById('zen-appcontent-navbar-container');
     toolbar.toggleAttribute('zen-user-show');

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -95,6 +95,7 @@
   #navigator-toolbox:hover,
   #navigator-toolbox:focus-within,
   #navigator-toolbox[zen-user-show],
+  #navigator-toolbox[flash-popup],
   #navigator-toolbox[movingtab],
   #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
   #navigator-toolbox:has(.tabbrowser-tab:active),
@@ -187,6 +188,7 @@
     #navigator-toolbox:hover,
     #navigator-toolbox:focus-within,
     #navigator-toolbox[zen-user-show],
+    #navigator-toolbox[flash-popup],
     #navigator-toolbox[movingtab],
     #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
     #navigator-toolbox:has(.tabbrowser-tab:active),

src/browser/components/preferences/zen-settings.js

@@ -522,6 +522,11 @@ Preferences.addAll([
     type: "bool",
     default: false,
   },
+  {
+    id: "zen.view.compact.toolbar-flash-popup",
+    type: "bool",
+    default: true,
+  },
   {
     id: "zen.workspaces.enabled",
     type: "bool",

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

@@ -30,7 +30,10 @@
       <vbox class="indent">
             <checkbox id="zenLooksAndFeelShowCompactViewToolbar"
                   data-l10n-id="zen-look-and-feel-compact-view-top-toolbar"
-                  preference="zen.view.compact.hide-toolbar"/> 
+                  preference="zen.view.compact.hide-toolbar"/>
+            <checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
+                      data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"
+                      preference="zen.view.compact.toolbar-flash-popup"/>
       </vbox>
       <checkbox id="zenLooksAndFeelShowLegacyToolbar"
             data-l10n-id="zen-look-and-feel-legacy-toolbar"

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

@@ -1,8 +1,8 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 282e7f31fe158d929130c17628f7e30f690fd666..2eb7123611947c5bc3da4ae864dd6f6f68fa6f9e 100644
+index 282e7f31fe158d929130c17628f7e30f690fd666..7225cb6bae5af213718a4e2df41f855631d6ce4e 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
-@@ -1387,9 +1387,7 @@
+@@ -1387,10 +1387,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -11,5 +11,10 @@ index 282e7f31fe158d929130c17628f7e30f690fd666..2eb7123611947c5bc3da4ae864dd6f6f
 -      }
 +      this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
  
++      if (!aInstant && Services.prefs.getBoolPref('zen.view.compact')
++          && Services.prefs.getBoolPref('zen.view.compact.toolbar-flash-popup')) {
++        gZenCompactModeManager.flashSidebar();
++      }
        selectedTab._notselectedsinceload = false;
      }
+