mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor sidebar expanded on-hover functionality and fix sidebar expand/collapse behavior

Browse Source 
- **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
This commit is contained in:
ricky
2024-10-22 22:01:05 -04:00
parent d75c797553
commit 2214ab3a17
2 changed files with 57 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/browser/base/content/ZenUIManager.mjs
View File

@@ -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);
},
};
};

3
src/browser/components/preferences/zen-settings.js
View File

@@ -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;
}
});