feat: Enable original extensions panel on hide-unified-extensions-button: false, p=#11335

* feat: Enable original extensions panel on hide-unified-extensions-button: false

* Update to fix prettier issues

* Add site-data attribute for CSS usage

* Update to set gUnifiedExtensions._panel

* Update to fix prettier issues

* Set default panel on onToolbarVisibilityChange

* Update panel initialization

* Remove extra char

* Restore unified-extensions-panel-template deletion

* Reduce reimplementation

* Update patch against Firefox 145.0.2

* Fix conflict

* Add panelUIPosition case

* Fix lint

* feat: Improve and reduce patch sizes, b=no-bug, c=common

---------

Signed-off-by: Blake Gearin <[email protected]>
Co-authored-by: mr. m <[email protected]>

Author: blakegearin

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 fadcbfca95ee28140579430c0371baad0e2f216a..7454b801b4ad892d6ad122277eb7c7736e976f9f 100644
+index fadcbfca95ee28140579430c0371baad0e2f216a..22a92ca450ef5087610169b15d7f3344c9accddf 100644
 --- a/browser/base/content/browser-addons.js
 +++ b/browser/base/content/browser-addons.js
 @@ -1069,7 +1069,7 @@ var gXPInstallObserver = {
@@ -38,37 +38,131 @@ index fadcbfca95ee28140579430c0371baad0e2f216a..7454b801b4ad892d6ad122277eb7c773
      }
 
      return anchorID;
-@@ -2657,11 +2657,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"
+@@ -2547,7 +2547,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;
+ 
+@@ -2561,7 +2561,7 @@ var gUnifiedExtensions = {
+     }
+ 
+     // The list of overflowed extensions in the extensions panel.
+-    const overflowedExtensionsList = this.panel.querySelector(
++    const overflowedExtensionsList = panel.querySelector(
+       "#overflowed-extensions-list"
+     );
+ 
+@@ -2662,37 +2662,41 @@ var gUnifiedExtensions = {
        );
-@@ -2714,6 +2710,7 @@ var gUnifiedExtensions = {
-         // and no alternative content is available for display in the panel.
-         const policies = this.getActivePolicies();
+       template.replaceWith(template.content);
+       this._panel = document.getElementById("unified-extensions-panel");
+-      let customizationArea = this._panel.querySelector(
+-        "#unified-extensions-area"
+-      );
+-      CustomizableUI.registerPanelNode(
+-        customizationArea,
+-        CustomizableUI.AREA_ADDONS
+-      );
+-      CustomizableUI.addPanelCloseListeners(this._panel);
+-
+-      this._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.
+-      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");
+-        });
++      this.initializePanel(this._panel);
+     }
+     return this._panel;
+   },
+ 
++  initializePanel(panel) {
++    let customizationArea = panel.querySelector(
++      "#unified-extensions-area"
++    );
++    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.
++    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");
++      });
++  },
++
+   // `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 = "unified-extensions-view", button = this._button) {
+     if (!CustomizationHandler.isCustomizing()) {
+       if (aEvent) {
          if (
-+          false &&
-           policies.length &&
-           !this.hasExtensionsInPanel(policies) &&
-           !this.isPrivateWindowMissingExtensionsWithoutPBMAccess() &&
-@@ -2754,7 +2751,7 @@ var gUnifiedExtensions = {
+@@ -2729,32 +2733,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,
          });
        }
-@@ -2941,18 +2938,20 @@ var gUnifiedExtensions = {
+@@ -2941,18 +2943,20 @@ var gUnifiedExtensions = {
        this._maybeMoveWidgetNodeBack(widgetId);
      }
 

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..da23f716c753f5a43f17bb5ed7a3d335891168c2 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
 @@ -6,7 +6,7 @@
@@ -27,21 +27,28 @@ index 7b776b15d52367a008ce6bf53dcfcbbe007b7453..d9a3404905b73db7c8f202ab166d5f3c
            gBrowser.handleNewTabMiddleClick(element, event);
            break;
 
-@@ -315,7 +317,7 @@ document.addEventListener(
-         #pageActionButton,
+@@ -316,6 +318,7 @@ document.addEventListener(
          #downloads-button,
          #fxa-toolbar-menu-button,
--        #unified-extensions-button,
+         #unified-extensions-button,
 +        #zen-site-data-icon-button,
          #library-button
        `);
        if (!element) {
-@@ -394,7 +396,7 @@ document.addEventListener(
-           gSync.toggleAccountPanel(element, event);
+@@ -398,6 +401,16 @@ document.addEventListener(
+           gUnifiedExtensions.togglePanel(event);
            break;
 
--        case "unified-extensions-button":
 +        case "zen-site-data-icon-button":
-           gUnifiedExtensions.togglePanel(event);
++          gUnifiedExtensions.togglePanel(
++            event,
++            null,
++            window.gZenSiteDataPanel.unifiedPanel,
++            window.gZenSiteDataPanel.unifiedPanelView,
++            window.gZenSiteDataPanel.anchor,
++          );
++          break;
++
+         case "library-button":
+           PanelUI.showSubView("appMenu-libraryView", element, event);
            break;
- 

src/browser/base/content/zen-panels/site-data.inc

@@ -32,7 +32,7 @@
                         command="Browser:AddBookmarkAs"
                         flex="1" />
       </hbox>
-      <vbox class="zen-site-data-section">
+      <vbox id="zen-site-data-section-addons" class="zen-site-data-section">
         <hbox class="zen-site-data-section-header">
           <label data-l10n-id="unified-extensions-header-title" flex="1" />
           <label data-l10n-id="zen-generic-manage" id="zen-site-data-manage-addons" />
@@ -72,7 +72,7 @@
 # for this specific button / id
         <toolbarbutton id="unified-extensions-manage-extensions"
                         class="subviewbutton panel-subview-footer-button unified-extensions-manage-extensions"
-                        data-l10n-id="unified-extensions-manage-extensions" 
+                        data-l10n-id="unified-extensions-manage-extensions"
                         hidden="true" />
       </vbox>
       <vbox class="zen-site-data-section">
@@ -85,7 +85,7 @@
         </vbox>
       </vbox>
       <hbox id="zen-site-data-footer">
-        <toolbarbutton id="zen-site-data-security-info" 
+        <toolbarbutton id="zen-site-data-security-info"
                        class="subviewbutton zen-interactive-button" />
         <toolbarbutton id="zen-site-data-actions"
                        class="subviewbutton zen-interactive-button"

src/zen/common/modules/ZenUIManager.mjs

@@ -669,7 +669,9 @@ window.gZenUIManager = {
     }
     if (
       (gZenVerticalTabsManager._hasSetSingleToolbar && gZenVerticalTabsManager._prefsRightSide) ||
-      (panel?.id === 'zen-unified-site-data-panel' && !gZenVerticalTabsManager._hasSetSingleToolbar)
+      (panel?.id === 'zen-unified-site-data-panel' &&
+        !gZenVerticalTabsManager._hasSetSingleToolbar) ||
+      (panel?.id === 'unified-extensions-panel' && gZenVerticalTabsManager._hasSetSingleToolbar)
     ) {
       block = 'bottomright';
       inline = 'topright';

src/zen/common/styles/zen-single-components.css

@@ -495,20 +495,22 @@ body > #confetti {
 }
 
 @media -moz-pref('zen.theme.hide-unified-extensions-button') {
-  #unified-extensions-button {
+  #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;
@@ -520,7 +522,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;
 

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -4,6 +4,11 @@
 
 import { AppConstants } from 'resource://gre/modules/AppConstants.sys.mjs';
 
+const ADDONS_BUTTONS_HIDDEN = Services.prefs.getBoolPref(
+  'zen.theme.hide-unified-extensions-button',
+  true
+);
+
 const lazy = {};
 
 ChromeUtils.defineESModuleGetters(lazy, {
@@ -21,7 +26,19 @@ 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 (ADDONS_BUTTONS_HIDDEN) {
+      this.window.gUnifiedExtensions._panel = this.unifiedPanel;
+
+      // Remove the old permissions dialog
+      this.document.getElementById('unified-extensions-panel-template').remove();
+    } else {
+      this.extensionsPanel = this.#initExtensionsPanel();
+    }
+
     this.#init();
   }
 
@@ -34,22 +51,23 @@ 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.extensionsPanelButton = this.document.getElementById('unified-extensions-button');
+    this.window.gUnifiedExtensions._button = ADDONS_BUTTONS_HIDDEN
+      ? this.anchor
+      : this.extensionsPanelButton;
 
     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 +142,24 @@ 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');
+    this.window.gUnifiedExtensions.initializePanel(panel);
+    return panel;
+  }
+
   #preparePanel() {
     this.#setSitePermissions();
     this.#setSiteSecurityInfo();
@@ -498,7 +534,7 @@ export class nsZenSiteDataPanel {
           this.window.gZenCommonActions.copyCurrentURLToClipboard();
         }
         if (AppConstants.platform !== 'macosx') {
-          this.panel.hidePopup();
+          this.unifiedPanel.hidePopup();
         }
       }
     }
@@ -556,7 +592,13 @@ 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.anchor
+        );
         break;
       }
       default: {