1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 23:25:30 +02:00

Merge pull request #2288 from Richard-Woessner/I2156

Refactor sidebar expanded on-hover functionality and fix sidebar expa…
This commit is contained in:
mr. m 🤙 2024-10-24 22:03:08 +03:00 committed by GitHub
commit 24d09cc134
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 56 additions and 34 deletions

View file

@ -1,5 +1,6 @@
var gZenUIManager = { var gZenUIManager = {
_popupTrackingElements: [], _popupTrackingElements: [],
_hoverPausedForExpand: false,
init() { init() {
document.addEventListener('popupshowing', this.onPopupShowing.bind(this)); document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
@ -8,11 +9,11 @@ var gZenUIManager = {
openAndChangeToTab(url, options) { openAndChangeToTab(url, options) {
if (window.ownerGlobal.parent) { 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; window.ownerGlobal.parent.gBrowser.selectedTab = tab;
return tab; return tab;
} }
let tab = window.gBrowser.addTrustedTab(url, options); const tab = window.gBrowser.addTrustedTab(url, options);
window.gBrowser.selectedTab = tab; window.gBrowser.selectedTab = tab;
return tab; return tab;
}, },
@ -85,7 +86,7 @@ var gZenVerticalTabsManager = {
this._updateEvent(); this._updateEvent();
this.initRightSideOrderContextMenu(); 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); XPCOMUtils.defineLazyPreferenceGetter(this, 'canOpenTabOnMiddleClick', 'zen.tabs.newtab-on-middle-click', true);
@ -111,12 +112,28 @@ var gZenVerticalTabsManager = {
}, },
_updateOnHoverVerticalTabs() { _updateOnHoverVerticalTabs() {
let onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover'); const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
let sidebar = this.navigatorToolbox; const expanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
const sidebar = this.navigatorToolbox;
if (onHover) { 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.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 { } 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" type="checkbox"
${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''} ${Services.prefs.getBoolPref(kConfigKey) ? 'checked="true"' : ''}
data-lazy-l10n-id="zen-toolbar-context-tabs-right" data-lazy-l10n-id="zen-toolbar-context-tabs-right"
oncommand="gZenVerticalTabsManager.toggleTabsOnRight();" oncommand="gZenVerticalTabsManager.toggleTabsOnRight();"
/> />
`); `);
document.getElementById('viewToolbarsMenuSeparator').before(fragment); document.getElementById('viewToolbarsMenuSeparator').before(fragment);
}, },
@ -139,19 +156,17 @@ var gZenVerticalTabsManager = {
const customizationTarget = document.getElementById('nav-bar-customization-target'); const customizationTarget = document.getElementById('nav-bar-customization-target');
const tabboxWrapper = document.getElementById('zen-tabbox-wrapper'); const tabboxWrapper = document.getElementById('zen-tabbox-wrapper');
const browser = document.getElementById('browser'); const browser = document.getElementById('browser');
const sidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded');
if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) { if (Services.prefs.getBoolPref('zen.tabs.vertical.right-side')) {
this.navigatorToolbox.setAttribute('zen-right-side', 'true'); this.navigatorToolbox.setAttribute('zen-right-side', 'true');
} else { } else {
this.navigatorToolbox.removeAttribute('zen-right-side'); 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 ( if (
this.navigatorToolbox.hasAttribute('zen-expanded') && sidebarExpanded &&
!this.navigatorToolbox.hasAttribute('zen-right-side') && !this.navigatorToolbox.hasAttribute('zen-right-side') &&
!Services.prefs.getBoolPref('zen.view.compact') && !Services.prefs.getBoolPref('zen.view.compact') &&
!Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover') !Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover')
@ -170,10 +185,10 @@ var gZenVerticalTabsManager = {
}, },
_updateMaxWidth() { _updateMaxWidth() {
let isCompactMode = Services.prefs.getBoolPref('zen.view.compact'); const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
let expanded = this.expanded; const expanded = this.expanded;
let maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width'); const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
let toolbox = document.getElementById('navigator-toolbox'); const toolbox = document.getElementById('navigator-toolbox');
if (expanded && !isCompactMode) { if (expanded && !isCompactMode) {
toolbox.style.maxWidth = `${maxWidth}px`; toolbox.style.maxWidth = `${maxWidth}px`;
} else { } else {
@ -193,25 +208,32 @@ var gZenVerticalTabsManager = {
return this._expandButton; 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() { toggleExpand() {
let expanded = !this.expanded; const pausedForExpand = this._hoverPausedForExpand;
Services.prefs.setBoolPref('zen.view.sidebar-expanded', expanded); const onHover = Services.prefs.getBoolPref('zen.view.sidebar-expanded.on-hover');
Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); 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() { toggleTabsOnRight() {
const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side'); const newVal = !Services.prefs.getBoolPref('zen.tabs.vertical.right-side');
Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal); Services.prefs.setBoolPref('zen.tabs.vertical.right-side', newVal);
}, },
}; };

View file

@ -626,7 +626,7 @@ var gZenLooksAndFeel = {
case 'hover': case 'hover':
disableCompactTabbar(); disableCompactTabbar();
Services.prefs.setBoolPref(onHoverPref, true); Services.prefs.setBoolPref(onHoverPref, true);
Services.prefs.setBoolPref(defaultExpandPref, true); Services.prefs.setBoolPref(defaultExpandPref, false);
break; break;
} }
}); });