refactor: streamline preference handling and update event management in ZenUIManager

This commit is contained in:
mr. M
2024-12-03 20:28:41 +01:00
parent 139ab630e0
commit 97c18ef67c
5 changed files with 75 additions and 30 deletions

View File

@@ -123,17 +123,16 @@ var gZenVerticalTabsManager = {
});
var updateEvent = this._updateEvent.bind(this);
Services.prefs.addObserver('zen.tabs.vertical', updateEvent);
Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent);
Services.prefs.addObserver('zen.view.use-single-toolbar', updateEvent);
Services.prefs.addObserver('zen.view.sidebar-expanded', updateEvent);
this.initializePreferences(updateEvent);
this._toolbarOriginalParent = document.getElementById('nav-bar').parentElement;
gZenCompactModeManager.addEventListener(updateEvent);
this.initRightSideOrderContextMenu();
window.addEventListener('customizationstarting', this._preCustomize.bind(this));
window.addEventListener('aftercustomization', updateEvent);
window.addEventListener('DOMContentLoaded', updateEvent, { once: true });
const tabs = document.getElementById('tabbrowser-tabs');
@@ -201,7 +200,57 @@ var gZenVerticalTabsManager = {
return this.__actualWindowButtons;
},
_updateEvent() {
_preCustomize() {
this._updateEvent({ forceMultipleToolbar: true });
},
initializePreferences(updateEvent) {
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsCompactMode",
"zen.view.compact",
false
// no need to update the event, it's handled by the compact mode manager
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsVerticalTabs",
"zen.tabs.vertical",
true,
updateEvent
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsRightSide",
"zen.tabs.vertical.right-side",
false,
updateEvent
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsUseSingleToolbar",
"zen.view.use-single-toolbar",
false,
updateEvent
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsSidebarExpanded",
"zen.view.sidebar-expanded",
false,
updateEvent
);
XPCOMUtils.defineLazyPreferenceGetter(
this,
"_prefsSidebarExpandedMaxWidth",
"zen.view.sidebar-expanded.max-width",
300,
updateEvent
);
},
_updateEvent({ forceMultipleToolbar = false } = {}) {
if (this._isUpdating) {
return;
}
@@ -209,14 +258,14 @@ var gZenVerticalTabsManager = {
try {
this._updateMaxWidth();
const topButtons = document.getElementById('zen-sidebar-top-buttons');
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
const isVerticalTabs = Services.prefs.getBoolPref('zen.tabs.vertical');
const isSidebarExpanded = Services.prefs.getBoolPref('zen.view.sidebar-expanded') || !isVerticalTabs;
const isRightSide = Services.prefs.getBoolPref('zen.tabs.vertical.right-side') && isVerticalTabs;
const isSingleToolbar = (Services.prefs.getBoolPref('zen.view.use-single-toolbar') && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs;
const isCompactMode = this._prefsCompactMode;
const isVerticalTabs = this._prefsVerticalTabs || forceMultipleToolbar;
const isSidebarExpanded = this._prefsSidebarExpanded || !isVerticalTabs;
const isRightSide = this._prefsRightSide && isVerticalTabs;
const isSingleToolbar = ((this._prefsUseSingleToolbar && (isVerticalTabs && isSidebarExpanded) )|| !isVerticalTabs) && !forceMultipleToolbar;
const titlebar = document.getElementById('titlebar');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'vertical');
gBrowser.tabContainer.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
gBrowser.tabContainer.arrowScrollbox.setAttribute('orient', isVerticalTabs ? 'vertical' : 'horizontal');
const buttonsTarget = document.getElementById('zen-sidebar-top-buttons-customization-target');
@@ -347,10 +396,9 @@ var gZenVerticalTabsManager = {
},
_updateMaxWidth() {
const isCompactMode = Services.prefs.getBoolPref('zen.view.compact');
const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
const toolbox = document.getElementById('navigator-toolbox');
if (!isCompactMode) {
if (!this._prefsCompactMode) {
toolbox.style.maxWidth = `${maxWidth}px`;
} else {
toolbox.style.removeProperty('maxWidth');

View File

@@ -24,7 +24,7 @@
--zen-compact-float: calc(var(--zen-element-separation) - 1px);
position: absolute;
z-index: 10;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.15s ease-in-out, opacity 0.1s ease-in-out;
right: calc(100% - var(--zen-element-separation));
top: 0;
bottom: var(--zen-element-separation);

View File

@@ -127,6 +127,7 @@
--zen-themed-toolbar-bg-transparent: light-dark(var(--zen-branding-bg), var(--zen-colors-tertiary));
@media (-moz-windows-mica) or (-moz-platform: macos) {
background: transparent;
--zen-themed-toolbar-bg-transparency: 0.05;
--zen-themed-toolbar-bg-transparent: light-dark(rgba(255, 255, 255, var(--zen-themed-toolbar-bg-transparency)), rgba(0, 0, 0, var(--zen-themed-toolbar-bg-transparency)));
}

View File

@@ -90,7 +90,11 @@
#urlbar-background {
border: transparent !important;
margin: 1px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
:root[zen-single-toolbar='true'] & {
box-shadow: none !important;
}
}
#urlbar[focused='true']:not([suppress-focus-border]) > #urlbar-background,

View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7bc9a0477 100644
index 45d0e0e4872eeabf87862dbadfee1dc211ed7bed..5a0825ff92c115bf30046a01cff17f189005d5ef 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -13,6 +13,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -19,7 +19,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
const kSpecialWidgetPfx = "customizableui-special-";
@@ -323,13 +324,14 @@ var CustomizableUIInternal = {
@@ -307,13 +308,14 @@ var CustomizableUIInternal = {
"spring",
"urlbar-container",
"spring",
@@ -37,7 +37,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
this.registerArea(
CustomizableUI.AREA_NAVBAR,
{
@@ -338,7 +340,7 @@ var CustomizableUIInternal = {
@@ -322,7 +324,7 @@ var CustomizableUIInternal = {
defaultPlacements: navbarPlacements,
verticalTabsDefaultPlacements: [
"firefox-view-button",
@@ -46,7 +46,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
"alltabs-button",
],
defaultCollapsed: false,
@@ -363,10 +365,10 @@ var CustomizableUIInternal = {
@@ -347,10 +349,10 @@ var CustomizableUIInternal = {
{
type: CustomizableUI.TYPE_TOOLBAR,
defaultPlacements: [
@@ -60,7 +60,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
],
verticalTabsDefaultPlacements: [],
defaultCollapsed: null,
@@ -429,6 +431,7 @@ var CustomizableUIInternal = {
@@ -413,6 +415,7 @@ var CustomizableUIInternal = {
CustomizableUI.AREA_NAVBAR,
CustomizableUI.AREA_BOOKMARKS,
CustomizableUI.AREA_TABSTRIP,
@@ -68,7 +68,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
]);
if (AppConstants.platform != "macosx") {
toolbars.add(CustomizableUI.AREA_MENUBAR);
@@ -1144,6 +1147,9 @@ var CustomizableUIInternal = {
@@ -1128,6 +1131,9 @@ var CustomizableUIInternal = {
placements = gPlacements.get(area);
}
@@ -78,15 +78,7 @@ index 989e69245aeb1185125752db6b9c58e462d554e4..3eef114cc711505c647e21e35a063fb7
// For toolbars that need it, mark as dirty.
let defaultPlacements = areaProperties.get("defaultPlacements");
if (
@@ -3603,6 +3609,7 @@ var CustomizableUIInternal = {
if (area.get("type") == CustomizableUI.TYPE_TOOLBAR) {
let defaultCollapsed = area.get("defaultCollapsed");
let win = areaNode.ownerGlobal;
+ win.gZenVerticalTabsManager._updateEvent();
if (defaultCollapsed !== null) {
win.setToolbarVisibility(
areaNode,
@@ -4558,6 +4565,7 @@ export var CustomizableUI = {
@@ -4572,6 +4578,7 @@ export var CustomizableUI = {
unregisterArea(aName, aDestroyPlacements) {
CustomizableUIInternal.unregisterArea(aName, aDestroyPlacements);
},