From 2214ab3a17b60bc835674413f8e34c7420f17f21 Mon Sep 17 00:00:00 2001 From: ricky Date: Tue, 22 Oct 2024 22:01:05 -0400 Subject: [PATCH 1/2] Refactor sidebar expanded on-hover functionality and fix sidebar expand/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/base/content/ZenUIManager.mjs | 88 ++++++++++++------- .../components/preferences/zen-settings.js | 3 +- 2 files changed, 57 insertions(+), 34 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 788f97f1..eff4ef02 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -1,5 +1,6 @@ var gZenUIManager = { _popupTrackingElements: [], + _hoverPausedForExpand: false, init() { document.addEventListener('popupshowing', this.onPopupShowing.bind(this)); @@ -8,11 +9,11 @@ var gZenUIManager = { openAndChangeToTab(url, options) { if (window.ownerGlobal.parent) { - let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options); + const tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options); window.ownerGlobal.parent.gBrowser.selectedTab = tab; return tab; } - let tab = window.gBrowser.addTrustedTab(url, options); + const tab = window.gBrowser.addTrustedTab(url, options); window.gBrowser.selectedTab = tab; return tab; }, @@ -85,7 +86,7 @@ var gZenVerticalTabsManager = { this._updateEvent(); this.initRightSideOrderContextMenu(); - let tabs = document.getElementById('tabbrowser-tabs'); + const tabs = document.getElementById('tabbrowser-tabs'); XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true); @@ -111,12 +112,28 @@ var gZenVerticalTabsManager = { }, _updateOnHoverVerticalTabs() { - let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); - let sidebar = this.navigatorToolbox; + const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); + const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded'); + const sidebar = this.navigatorToolbox; + + if (onHover) { + // if the sidebar is not expanded, and hover detection is enabled, show the sidebar + sidebar.setAttribute('zen-expanded', 'false'); sidebar.setAttribute('zen-user-hover', 'true'); + + sidebar.removeAttribute('zen-has-hover'); + } + else if (expanded) { + // if the sidebar is expanded, close, and remove hover detection + sidebar.setAttribute('zen-expanded', 'true'); + sidebar.setAttribute('zen-user-hover', 'false'); + sidebar.setAttribute('zen-has-hover','false'); } else { - sidebar.removeAttribute('zen-user-hover'); + // if the sidebar is not expanded, and hover detection is disabled, hide the sidebar + sidebar.setAttribute('zen-expanded','false'); + sidebar.setAttribute('zen-user-show','false'); + sidebar.setAttribute('zen-user-hover','false'); } }, @@ -127,8 +144,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,19 +156,17 @@ var gZenVerticalTabsManager = { const customizationTarget = document.getElementById('nav-bar-customization-target'); const tabboxWrapper = document.getElementById('zen-tabbox-wrapper'); const browser = document.getElementById('browser'); + const sidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded'); + if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) { this.navigatorToolbox.setAttribute('zen-right-side', 'true'); } else { this.navigatorToolbox.removeAttribute('zen-right-side'); } - if (Services.prefs.getBoolPref('zen.view.sidebar-expanded')) { - this.navigatorToolbox.setAttribute('zen-expanded', 'true'); - } else { - this.navigatorToolbox.removeAttribute('zen-expanded'); - } + // Check if the sidebar is in hover mode if ( - this.navigatorToolbox.hasAttribute('zen-expanded') && + sidebarExpanded && !this.navigatorToolbox.hasAttribute('zen-right-side') && !Services.prefs.getBoolPref('zen.view.compact') && !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover') @@ -170,10 +185,10 @@ var gZenVerticalTabsManager = { }, _updateMaxWidth() { - let isCompactMode = Services.prefs.getBoolPref('zen.view.compact'); - let expanded = this.expanded; - let maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width'); - let toolbox = document.getElementById('navigator-toolbox'); + const isCompactMode = Services.prefs.getBoolPref('zen.view.compact'); + const expanded = this.expanded; + const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width'); + const toolbox = document.getElementById('navigator-toolbox'); if (expanded && !isCompactMode) { toolbox.style.maxWidth = `${maxWidth}px`; } else { @@ -193,25 +208,32 @@ 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 = this._hoverPausedForExpand; + const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); + const 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); + this._hoverPausedForExpand = true; + Services.prefs.setBoolPref('zen.view.sidebar-expanded', true); + } else if (pausedForExpand && expanded) { + // Re-enable hover detection when closing + this._hoverPausedForExpand = false; + 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 { + // Toggle sidebar + Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); + Services.prefs.setBoolPref('zen.view.sidebar-expanded', !expanded); + } }, toggleTabsOnRight() { const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side'); Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal); }, -}; +}; \ No newline at end of file diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index bb78c2db..7ce24d89 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -591,6 +591,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; @@ -621,7 +622,7 @@ var gZenLooksAndFeel = { case 'hover': disableCompactTabbar(); Services.prefs.setBoolPref(onHoverPref, true); - Services.prefs.setBoolPref(defaultExpandPref, true); + Services.prefs.setBoolPref(defaultExpandPref, false); break; } }); From 94b32c38e485789596c20c7b519008e74939aebb Mon Sep 17 00:00:00 2001 From: ricky Date: Tue, 22 Oct 2024 22:20:39 -0400 Subject: [PATCH 2/2] #2156 Removed unused code --- src/browser/components/preferences/zen-settings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 7ce24d89..b5d533dd 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -591,7 +591,6 @@ 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;