Refactor sidebar expanded on-hover functionality and fix sidebar expa…

…nd/collapse behavior

- **Preferences**:
  - Added a new preference `zen.view.sidebar-expanded.on-hover.paused-for-expand` to manage the paused state of the sidebar hover functionality.
  - Updated `zen.view.sidebar-expanded.on-hover` preference handling to ensure proper behavior when toggling the sidebar.

- **ZenUIManager.mjs**:
  - Updated `_updateOnHoverVerticalTabs` method to handle the expanded state and remove hover attributes when the sidebar is expanded.
  - Refactored `_updateEvent` method to check and handle the expanded state of the sidebar, and to open or close the sidebar accordingly.
  - Added `openSidebar` and `closeSidebar` methods to manage the sidebar's expanded state and related attributes.
  - Refactored `toggleExpand` method to handle the new `paused-for-expand` preference and ensure proper toggling of the sidebar's expanded state.

- **zen-settings.js**:
  - Updated `setCompactModeStyle` method to handle the new `paused-for-expand` preference.
  - Ensured that the `paused-for-expand` preference is reset when the sidebar expand strategy is changed.

- **zen-browser.js**:
  - Added the new preference `zen.view.sidebar-expanded.on-hover.paused-for-expand` with a default value of `false`.

- **Submodule Updates**:
  - Updated `l10n` submodule to the latest commit `dd93803b84f398834049a3f650536fbdbd14cbca`.
  - Updated `zen-components` submodule to the latest commit `d853fa8de4167dfd4d1289f4f15792a698c738c3-dirty`.

- **Miscellaneous**:
  - Fixed indentation issues in `ZenUIManager.mjs`.
  - Removed commented-out code in `ZenUIManager.mjs`.
  - Ensured proper formatting and alignment of code blocks.

ISSUE: #2156

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

@@ -94,6 +94,7 @@ pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
 pref('zen.view.sidebar-height-throttle', 200); // in ms
 pref('zen.view.sidebar-expanded', false);
 pref('zen.view.sidebar-expanded.on-hover', false);
+pref('zen.view.sidebar-expanded.on-hover.paused-for-expand', false);
 pref('zen.view.sidebar-expanded.show-button', true);
 pref('zen.view.sidebar-expanded.max-width', 400);
 

src/browser/base/content/ZenUIManager.mjs

@@ -112,8 +112,13 @@ var gZenVerticalTabsManager = {
 
   _updateOnHoverVerticalTabs() {
     let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
+    let expanded = this.expanded;
     let sidebar = this.navigatorToolbox;
-    if (onHover) {
+
+    if (expanded) {
+      sidebar.setAttribute('zen-expanded', 'true');
+      sidebar.removeAttribute('zen-user-hover');
+    } else if (onHover) {
       sidebar.setAttribute('zen-user-hover', 'true');
     } else {
       sidebar.removeAttribute('zen-user-hover');
@@ -127,8 +132,8 @@ var gZenVerticalTabsManager = {
                 type="checkbox"
                 ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
                 data-lazy-l10n-id="zen-toolbar-context-tabs-right"
-				oncommand="gZenVerticalTabsManager.toggleTabsOnRight();"
-		/>
+                oncommand="gZenVerticalTabsManager.toggleTabsOnRight();"
+        />
     `);
     document.getElementById('viewToolbarsMenuSeparator').before(fragment);
   },
@@ -139,17 +144,21 @@ var gZenVerticalTabsManager = {
     const customizationTarget = document.getElementById('nav-bar-customization-target');
     const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
     const browser = document.getElementById('browser');
+
     if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
       this.navigatorToolbox.setAttribute('zen-right-side', 'true');
     } else {
       this.navigatorToolbox.removeAttribute('zen-right-side');
     }
+
+    // Check if the sidebar is expanded
     if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) {
-      this.navigatorToolbox.setAttribute('zen-expanded', 'true');
+      this.openSidebar(this.navigatorToolbox);
     } else {
-      this.navigatorToolbox.removeAttribute('zen-expanded');
+      this.closeSidebar(this.navigatorToolbox);
     }
 
+    // Check if the sidebar is in hover mode
     if (
       this.navigatorToolbox.hasAttribute('zen-expanded') &&
       !this.navigatorToolbox.hasAttribute('zen-right-side') &&
@@ -193,25 +202,39 @@ var gZenVerticalTabsManager = {
     return this._expandButton;
   },
 
-  //_updateExpandButton() {
-  //  let isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
-  //  let button = this.expandButton;
-  //  let expanded = this.expanded;
-  //  if (expanded && !isCompactMode) {
-  //    button.setAttribute('open', 'true');
-  //  } else {
-  //    button.removeAttribute('open');
-  //  }
-  //},
-
   toggleExpand() {
-    let expanded = !this.expanded;
-    Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded);
-    Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
+    const pausedForExpand = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover.paused-for-expand');
+    const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
+    let expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
+
+    if (onHover && !expanded) {
+      // Expand sidebar and disable hover detection
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false);
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover.paused-for-expand', true);
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded', true);
+    } else if (pausedForExpand && expanded) {
+      // Re-enable hover detection when closing
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded', false);
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', true); // Re-enable hover detection when closing
+    }
+    else if(expanded || !expanded) {
+      // Toggle sidebar
+      Services.prefs.setBoolPref('zen.view.sidebar-expanded', !expanded);
+    }
+  },
+
+  closeSidebar(navigatorToolbox) {
+    navigatorToolbox.removeAttribute('zen-expanded');
+    navigatorToolbox.removeAttribute('zen-user-hover');
+    navigatorToolbox.removeAttribute('zen-has-hover');
+  },
+
+  openSidebar(navigatorToolbox) {
+    navigatorToolbox.setAttribute('zen-expanded', 'true');
   },
 
   toggleTabsOnRight() {
     const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
     Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
   },
-};
+};

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

@@ -596,6 +596,7 @@ var gZenLooksAndFeel = {
     const form = document.getElementById('zen-expand-tabbar-strat');
     const radios = form.querySelectorAll('input[type=radio]');
     const onHoverPref = 'zen.view.sidebar-expanded.on-hover';
+    const pausedForExpandPref = 'zen.view.sidebar-expanded.on-hover.paused-for-expand';
     const defaultExpandPref = 'zen.view.sidebar-expanded';
     if (Services.prefs.getBoolPref(onHoverPref)) {
       form.querySelector('input[value="hover"]').checked = true;
@@ -617,6 +618,7 @@ var gZenLooksAndFeel = {
         switch (e.target.value) {
           case 'expand':
             Services.prefs.setBoolPref(onHoverPref, false);
+            Services.prefs.setBoolPref(pausedForExpandPref, false);
             Services.prefs.setBoolPref(defaultExpandPref, true);
             break;
           case 'none':
@@ -626,7 +628,7 @@ var gZenLooksAndFeel = {
           case 'hover':
             disableCompactTabbar();
             Services.prefs.setBoolPref(onHoverPref, true);
-            Services.prefs.setBoolPref(defaultExpandPref, true);
+            Services.prefs.setBoolPref(defaultExpandPref, false);
             break;
         }
       });