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

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..8a4f3334029ac339990a93f47a1f87e1ffe97313 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,15 +19,15 @@ 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.
    getPopupAnchorID(aBrowser, aWindow) {
 -    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,58 +36,112 @@ 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();
+@@ -2391,7 +2391,7 @@ var gUnifiedExtensions = {
+         break;
+
+       case "toolbarvisibilitychange":
+-        this.onToolbarVisibilityChange(event.target.id, event.detail.visible);
++        this.onToolbarVisibilityChange(event.target.id, event.detail.visible, panel);
+         break;
+     }
+   },
+@@ -2536,7 +2536,7 @@ var gUnifiedExtensions = {
+     requestAnimationFrame(() => this.updateAttention());
+   },
+
+-  onToolbarVisibilityChange(toolbarId, isVisible) {
++  onToolbarVisibilityChange(toolbarId, isVisible, 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
        ? CustomizableUI.AREA_NAVBAR
        : 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) {

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,25 +9,40 @@ 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,
 +        #zen-tabs-wrapper,
          #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":

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/styles/zen-single-components.css

@@ -497,17 +497,23 @@ body > #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;