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:
commit
24d09cc134
2 changed files with 56 additions and 34 deletions
|
@ -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);
|
||||||
},
|
},
|
||||||
};
|
};
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue