diff --git a/src/browser/base/content/browser-addons-js.patch b/src/browser/base/content/browser-addons-js.patch index acb98ccc7b..728a3b33ae 100644 --- a/src/browser/base/content/browser-addons-js.patch +++ b/src/browser/base/content/browser-addons-js.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js -index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2bd5a757d 100644 +index f33a300eb0eed74e286da24919ad3e8505f632c3..b45c1e5f3b93643ece3b8214e33d40b093689671 100644 --- a/browser/base/content/browser-addons.js +++ b/browser/base/content/browser-addons.js @@ -1069,7 +1069,7 @@ var gXPInstallObserver = { @@ -10,7 +10,7 @@ index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2 + position: gZenUIManager.panelUIPosition(), }, }; - + @@ -1279,7 +1279,7 @@ var gXPInstallObserver = { hideClose: true, timeout: Date.now() + 30000, @@ -19,7 +19,7 @@ index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2 + position: gZenUIManager.panelUIPosition(), }, }; - + @@ -2211,7 +2211,7 @@ var gUnifiedExtensions = { // If the new ID is not added in NOTIFICATION_IDS, consider handling the case // in the "PopupNotificationsBeforeAnchor" handler elsewhere in this file. @@ -27,7 +27,7 @@ index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2 - const anchorID = "unified-extensions-button"; + const anchorID = "zen-site-data-icon-button"; const attr = anchorID + "popupnotificationanchor"; - + if (!aBrowser[attr]) { @@ -2222,7 +2222,7 @@ var gUnifiedExtensions = { anchorID @@ -36,46 +36,91 @@ index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2 - ).firstElementChild; + ); } - + return anchorID; -@@ -2646,11 +2646,7 @@ var gUnifiedExtensions = { - // Lazy load the unified-extensions-panel panel the first time we need to - // display it. - if (!this._panel) { -- let template = document.getElementById( -- "unified-extensions-panel-template" -- ); -- template.replaceWith(template.content); -- this._panel = document.getElementById("unified-extensions-panel"); -+ this._panel = document.getElementById("zen-unified-site-data-panel"); - let customizationArea = this._panel.querySelector( - "#unified-extensions-area" - ); -@@ -2703,6 +2699,7 @@ var gUnifiedExtensions = { - // and no alternative content is available for display in the panel. - const policies = this.getActivePolicies(); +@@ -2536,7 +2536,7 @@ var gUnifiedExtensions = { + requestAnimationFrame(() => this.updateAttention()); + }, + +- onToolbarVisibilityChange(toolbarId, isVisible) { ++ onToolbarVisibilityChange(toolbarId, isVisible, panel = this.panel) { + // A list of extension widget IDs (possibly empty). + let widgetIDs; + +@@ -2550,7 +2550,7 @@ var gUnifiedExtensions = { + } + + // The list of overflowed extensions in the extensions panel. +- const overflowedExtensionsList = this.panel.querySelector( ++ const overflowedExtensionsList = panel.querySelector( + "#overflowed-extensions-list" + ); + +@@ -2681,7 +2681,7 @@ var gUnifiedExtensions = { + + // `aEvent` and `reason` are optional. If `reason` is specified, it should be + // a valid argument to gUnifiedExtensions.recordButtonTelemetry(). +- async togglePanel(aEvent, reason) { ++ async togglePanel(aEvent, reason, panel = this._panel, view, button) { + if (!CustomizationHandler.isCustomizing()) { + if (aEvent) { if ( -+ false && - policies.length && - !this.hasExtensionsInPanel(policies) && - !this.isPrivateWindowMissingExtensionsWithoutPBMAccess() && -@@ -2743,7 +2740,7 @@ var gUnifiedExtensions = { +@@ -2718,32 +2718,30 @@ var gUnifiedExtensions = { + this.blocklistAttentionInfo = + await AddonManager.getBlocklistAttentionInfo(); + +- let panel = this.panel; +- + if (!this._listView) { + this._listView = PanelMultiView.getViewNode( + document, +- "unified-extensions-view" ++ view, + ); + this._listView.addEventListener("ViewShowing", this); + this._listView.addEventListener("ViewHiding", this); + } + +- if (this._button.open) { ++ if (button.open) { + PanelMultiView.hidePopup(panel); +- this._button.open = false; ++ button.open = false; + } else { + // Overflow extensions placed in collapsed toolbars, if any. + for (const toolbarId of CustomizableUI.getCollapsedToolbarIds(window)) { + // We pass `false` because all these toolbars are collapsed. +- this.onToolbarVisibilityChange(toolbarId, /* isVisible */ false); ++ this.onToolbarVisibilityChange(toolbarId, /* isVisible */ false, panel); + } + + panel.hidden = false; this.recordButtonTelemetry(reason || "extensions_panel_showing"); this.ensureButtonShownBeforeAttachingPanel(panel); - PanelMultiView.openPopup(panel, this._button, { +- PanelMultiView.openPopup(panel, this._button, { - position: "bottomright topright", -+ position: gZenUIManager.panelUIPosition(panel, this._button), ++ PanelMultiView.openPopup(panel, button, { ++ position: gZenUIManager.panelUIPosition(panel, button), triggerEvent: aEvent, }); } -@@ -2930,18 +2927,20 @@ var gUnifiedExtensions = { +@@ -2830,7 +2828,7 @@ var gUnifiedExtensions = { + if ( + notInPanel || + document.querySelector("#unified-extensions-area > :first-child") +- ?.id === widgetId ++ ?.id === widgetIdz + ) { + moveUp.hidden = true; + } +@@ -2930,18 +2928,20 @@ var gUnifiedExtensions = { this._maybeMoveWidgetNodeBack(widgetId); } - + - this.pinToToolbar(widgetId, shouldPinToToolbar); + await this.pinToToolbar(widgetId, shouldPinToToolbar); }, - + - pinToToolbar(widgetId, shouldPinToToolbar) { + async pinToToolbar(widgetId, shouldPinToToolbar) { let newArea = shouldPinToToolbar @@ -83,11 +128,11 @@ index f33a300eb0eed74e286da24919ad3e8505f632c3..9f400e887424693d0ecceb9db79fccf2 : CustomizableUI.AREA_ADDONS; let newPosition = shouldPinToToolbar ? undefined : 0; + await gZenVerticalTabsManager._preCustomize(); - + CustomizableUI.addWidgetToArea(widgetId, newArea, newPosition); // addWidgetToArea() will trigger onWidgetAdded or onWidgetMoved as needed, // and our handlers will call updateAttention() as needed. + await gZenVerticalTabsManager._postCustomize(); }, - + async moveWidget(menu, direction) { diff --git a/src/browser/base/content/navigator-toolbox-js.patch b/src/browser/base/content/navigator-toolbox-js.patch index 9dc57d082e..6b85e4e4a5 100644 --- a/src/browser/base/content/navigator-toolbox-js.patch +++ b/src/browser/base/content/navigator-toolbox-js.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js -index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..d9a3404905b73db7c8f202ab166d5f3c625351f6 100644 +index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..4df8419b20b25810bea8b344af84655f16b532c8 100644 --- a/browser/base/content/navigator-toolbox.js +++ b/browser/base/content/navigator-toolbox.js @@ -6,7 +6,7 @@ @@ -9,9 +9,24 @@ index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..d9a3404905b73db7c8f202ab166d5f3c - const navigatorToolbox = document.getElementById("navigator-toolbox"); + const navigatorToolbox = document.getElementById("browser"); const widgetOverflow = document.getElementById("widget-overflow"); - + function onPopupShowing(event) { -@@ -185,6 +185,7 @@ document.addEventListener( +@@ -137,7 +137,13 @@ document.addEventListener( + break; + + case "unified-extensions-button": +- gUnifiedExtensions.togglePanel(event); ++ gUnifiedExtensions.togglePanel( ++ event, ++ null, ++ window.gZenSiteDataPanel.extensionsPanel, ++ window.gZenSiteDataPanel.extensionsPanelView, ++ window.gZenSiteDataPanel.extensionsPanelButton, ++ ); + break; + + case "library-button": +@@ -185,6 +191,7 @@ document.addEventListener( #reload-button , #urlbar-go-button, #reader-mode-button, @@ -19,15 +34,15 @@ index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..d9a3404905b73db7c8f202ab166d5f3c #picture-in-picture-button, #urlbar-zoom-button, #star-button-box, -@@ -206,6 +207,7 @@ document.addEventListener( +@@ -206,6 +213,7 @@ document.addEventListener( case "vertical-tabs-newtab-button": case "tabs-newtab-button": case "new-tab-button": + case "zen-tabs-wrapper": gBrowser.handleNewTabMiddleClick(element, event); break; - -@@ -315,7 +317,7 @@ document.addEventListener( + +@@ -315,7 +323,7 @@ document.addEventListener( #pageActionButton, #downloads-button, #fxa-toolbar-menu-button, @@ -36,12 +51,20 @@ index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..d9a3404905b73db7c8f202ab166d5f3c #library-button `); if (!element) { -@@ -394,7 +396,7 @@ document.addEventListener( +@@ -394,8 +402,14 @@ document.addEventListener( gSync.toggleAccountPanel(element, event); break; - + - case "unified-extensions-button": +- gUnifiedExtensions.togglePanel(event); + case "zen-site-data-icon-button": - gUnifiedExtensions.togglePanel(event); ++ gUnifiedExtensions.togglePanel( ++ event, ++ null, ++ window.gZenSiteDataPanel.unifiedPanel, ++ window.gZenSiteDataPanel.unifiedPanelView, ++ window.gZenSiteDataPanel.unifiedPanelButton, ++ ); break; - + + case "library-button": diff --git a/src/browser/base/content/zen-panels/site-data.inc b/src/browser/base/content/zen-panels/site-data.inc index e149df52ed..4929a16455 100644 --- a/src/browser/base/content/zen-panels/site-data.inc +++ b/src/browser/base/content/zen-panels/site-data.inc @@ -32,7 +32,7 @@ command="Browser:AddBookmarkAs" flex="1" /> - + @@ -85,7 +85,7 @@ - #confetti { #unified-extensions-button { display: none !important; } + + #unified-extensions-button:not([showing]) { + display: none !important; + } } -#unified-extensions-button:not([showing]) { - display: none !important; +@media not -moz-pref('zen.theme.hide-unified-extensions-button') { + #zen-site-data-section-addons { + display: none; + } } #zen-site-data-header { gap: 8px; align-items: center; padding: 10px 9px; - padding-bottom: 0; + padding-bottom: 8px; :root[zen-single-toolbar='true']:not([zen-right-side='true']) & { flex-direction: row-reverse; @@ -519,7 +525,7 @@ body > #confetti { -moz-context-properties: fill; fill: currentColor; color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)); - max-width: 48px; + width: 48px; height: 32px; position: relative; diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs index 48b94bace1..78e46f15d3 100644 --- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs +++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs @@ -21,7 +21,16 @@ export class nsZenSiteDataPanel { this.window = window; this.document = window.document; - this.panel = this.document.getElementById('zen-unified-site-data-panel'); + this.unifiedPanel = this.#initUnifiedPanel(); + this.unifiedPanelView = 'unified-extensions-view'; + this.extensionsPanelView = 'original-unified-extensions-view'; + + if (!Services.prefs.getBoolPref('zen.theme.hide-unified-extensions-button', true)) { + this.extensionsPanel = this.#initExtensionsPanel(); + } else { + this.window.gUnifiedExtensions._panel = this.unifiedPanel; + } + this.#init(); } @@ -34,22 +43,21 @@ export class nsZenSiteDataPanel { `); this.anchor = button.querySelector('#zen-site-data-icon-button'); this.document.getElementById('identity-icon-box').before(button); - this.window.gUnifiedExtensions._button = this.anchor; + + this.unifiedPanelButton = this.window.gUnifiedExtensions._button = this.anchor; + this.extensionsPanelButton = this.document.getElementById('unified-extensions-button'); this.document .getElementById('nav-bar') .setAttribute('addon-webext-overflowbutton', 'zen-site-data-icon-button'); - // Remove the old permissions dialog - this.document.getElementById('unified-extensions-panel-template').remove(); - this.#initCopyUrlButton(); this.#initEventListeners(); this.#maybeShowFeatureCallout(); } #initEventListeners() { - this.panel.addEventListener('popupshowing', this); + this.unifiedPanel.addEventListener('popupshowing', this); this.document.getElementById('zen-site-data-manage-addons').addEventListener('click', this); this.document.getElementById('zen-site-data-settings-more').addEventListener('click', this); this.anchor.addEventListener('click', this); @@ -124,6 +132,45 @@ export class nsZenSiteDataPanel { } } + #initExtensionsPanel() { + const panel = this.window.gUnifiedExtensions.panel; + + const extensionsView = panel?.querySelector('#unified-extensions-view'); + extensionsView.setAttribute('id', this.extensionsPanelView); + + const panelMultiView = panel?.querySelector('panelmultiview'); + panelMultiView.setAttribute('mainViewId', this.extensionsPanelView); + + return panel; + } + + #initUnifiedPanel() { + const panel = this.document.getElementById('zen-unified-site-data-panel'); + const customizationArea = panel?.querySelector('#unified-extensions-area'); + + // Partial implementation of "get panel()" from engine/browser/base/content/browser-addons.js + const { BrowserAddonUI, CustomizableUI } = this.window; + + CustomizableUI.registerPanelNode(customizationArea, CustomizableUI.AREA_ADDONS); + CustomizableUI.addPanelCloseListeners(panel); + + panel.querySelector('#unified-extensions-manage-extensions').addEventListener('command', () => { + BrowserAddonUI.openAddonsMgr('addons://list/extension'); + }); + + // Lazy-load the l10n strings. Those strings are used for the CUI and + // non-CUI extensions in the unified extensions panel. + this.document + .getElementById('unified-extensions-context-menu') + .querySelectorAll('[data-lazy-l10n-id]') + .forEach((el) => { + el.setAttribute('data-l10n-id', el.getAttribute('data-lazy-l10n-id')); + el.removeAttribute('data-lazy-l10n-id'); + }); + + return panel; + } + #preparePanel() { this.#setSitePermissions(); this.#setSiteSecurityInfo(); @@ -498,7 +545,7 @@ export class nsZenSiteDataPanel { this.window.gZenCommonActions.copyCurrentURLToClipboard(); } if (AppConstants.platform !== 'macosx') { - this.panel.hidePopup(); + this.unifiedPanel.hidePopup(); } } } @@ -556,7 +603,23 @@ export class nsZenSiteDataPanel { break; } case 'zen-site-data-icon-button': { - this.window.gUnifiedExtensions.togglePanel(event); + this.window.gUnifiedExtensions.togglePanel( + event, + null, + this.unifiedPanel, + this.unifiedPanelView, + this.unifiedPanelButton + ); + break; + } + case 'unified-extensions-button': { + this.window.gUnifiedExtensions.togglePanel( + event, + null, + this.extensionsPanel, + this.extensionsPanelView, + this.extensionsPanelButton + ); break; } default: {