feat: Implement site security section, b=no-bug, c=common, tabs

Merge branch 'dev' into feat/permissions-panel
feat: Finished permissions and addons, b=no-bug, c=common
2025-10-02 16:08:41 +00:00 · 2025-10-02 17:04:30 +02:00 · 2025-10-02 12:02:50 +02:00 · 2025-10-02 12:02:00 +02:00 · 2025-10-01 23:44:55 +02:00 · 2025-10-01 14:57:07 +02:00
18 changed files with 905 additions and 69 deletions
--- a/locales/en-US/browser/browser/zen-general.ftl
+++ b/locales/en-US/browser/browser/zen-general.ftl
@@ -64,3 +64,24 @@ zen-icons-picker-svg =
  .label = Icons

 urlbar-search-mode-zen_actions = Actions
+zen-site-data-settings = Settings
+
+zen-generic-manage = Manage
+zen-generic-more = More
+
+# These labels will be used for the site data panel settings
+zen-site-data-setting-allow = Allowed
+zen-site-data-setting-block = Blocked
+zen-site-data-security-info-extension =
+    .label = Extension
+zen-site-data-security-info-secure =
+    .label = Secure
+zen-site-data-security-info-not-secure =
+    .label = Not Secure
+
+zen-site-data-manage-addons =
+    .label = Manage Extensions
+zen-site-data-get-addons =
+    .label = Add Extensions
+zen-site-data-site-settings =
+    .label = All Site Settings
--- 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 d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd693f1f1135 100644
+index d7542a38a0242dd9c9c6390171d59992d75a0c19..baa5d84c26f7e74c779bc7e1a2b83b543b413441 100644
 --- a/browser/base/content/browser-addons.js
 +++ b/browser/base/content/browser-addons.js
@@ -1064,7 +1064,7 @@ var gXPInstallObserver = {
@@ -20,7 +20,38 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
       },
     };
 
-@@ -2608,7 +2608,7 @@ var gUnifiedExtensions = {
+@@ -2205,7 +2205,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]) {
+@@ -2216,7 +2216,7 @@ var gUnifiedExtensions = {
+         anchorID
+         // Anchor on the toolbar icon to position the popup right below the
+         // button.
+-      ).firstElementChild;
+      );
+     }
+ 
+     return anchorID;
+@@ -2509,11 +2509,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"
+       );
+@@ -2608,7 +2604,7 @@ var gUnifiedExtensions = {
         this.recordButtonTelemetry(reason || "extensions_panel_showing");
         this.ensureButtonShownBeforeAttachingPanel(panel);
         PanelMultiView.openPopup(panel, this._button, {
@@ -29,7 +60,7 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
           triggerEvent: aEvent,
         });
       }
-@@ -2795,18 +2795,20 @@ var gUnifiedExtensions = {
+@@ -2795,18 +2791,20 @@ var gUnifiedExtensions = {
       this._maybeMoveWidgetNodeBack(widgetId);
     }
 
--- 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 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e71604425 100644
+index 413bad2a62058a1c434d6a44e927e44eb397289d..472eab5d3bca2bc665920707a71105167cbe75ec 100644
 --- a/browser/base/content/navigator-toolbox.js
 +++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -11,6 +11,24 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
     const widgetOverflow = document.getElementById("widget-overflow");
 
     function onPopupShowing(event) {
+@@ -110,7 +110,7 @@ document.addEventListener(
+         #pageActionButton,
+         #downloads-button,
+         #fxa-toolbar-menu-button,
+-        #unified-extensions-button,
+        #zen-site-data-icon-button,
+         #library-button
+         `);
+       if (!element) {
+@@ -138,7 +138,7 @@ document.addEventListener(
+           gSync.toggleAccountPanel(element, event);
+           break;
+ 
+-        case "unified-extensions-button":
+        case "zen-site-data-icon-button":
+           gUnifiedExtensions.togglePanel(event);
+           break;
+ 
@@ -187,6 +187,7 @@ document.addEventListener(
         #reload-button ,
         #urlbar-go-button,
@@ -27,3 +45,21 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
           gBrowser.handleNewTabMiddleClick(element, event);
           break;
 
+@@ -317,7 +319,7 @@ document.addEventListener(
+         #pageActionButton,
+         #downloads-button,
+         #fxa-toolbar-menu-button,
+-        #unified-extensions-button,
+        #zen-site-data-icon-button,
+         #library-button
+       `);
+       if (!element) {
+@@ -396,7 +398,7 @@ document.addEventListener(
+           gSync.toggleAccountPanel(element, event);
+           break;
+ 
+-        case "unified-extensions-button":
+        case "zen-site-data-icon-button":
+           gUnifiedExtensions.togglePanel(event);
+           break;
+ 
--- a/src/browser/base/content/zen-panels/popups.inc
+++ b/src/browser/base/content/zen-panels/popups.inc
@@ -49,3 +49,12 @@
  <menuitem id="context_zenFolderUnpack" data-l10n-id="zen-folders-panel-unpack-folder"/>
  <menuitem id="context_zenFolderDelete" data-l10n-id="zen-folders-panel-delete-folder"/>
 </menupopup>
+
+<menupopup id="zenSiteDataActions">
+  <menuitem id="context_zenClearSiteData" data-l10n-id="identity-clear-site-data"/>
+  <menuseparator />
+  <menuitem command="Tools:Addons" data-l10n-id="zen-site-data-manage-addons"/>
+  <menuitem id="context_zenOpenGetAddons" data-l10n-id="zen-site-data-get-addons"/>
+  <menuseparator />
+  <menuitem id="context_zenOpenSiteSettings" data-l10n-id="zen-site-data-site-settings"/>
+</menupopup>
--- a/src/browser/base/content/zen-panels/site-data.inc
+++ b/src/browser/base/content/zen-panels/site-data.inc
@@ -0,0 +1,80 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+<panel id="zen-unified-site-data-panel"
+        role="group"
+        type="arrow"
+        noautofocus="true"
+        position="bottomright topright">
+  <panelmultiview mainViewId="unified-extensions-view">
+# We'll keep the view with this name/id in order to prevent
+# any sort of future issues we may have if firefox decides
+# to change the functionality of this view
+    <panelview id="unified-extensions-view"
+                class="cui-widget-panelview"
+                mainview-with-header="true">
+      <hbox id="zen-site-data-header">
+        <toolbarbutton id="zen-site-data-header-share"
+                        data-l10n-id="zen-site-data-share" />
+        <toolbarbutton id="zen-site-data-header-reader-mode"
+                        command="View:ReaderView" />
+        <toolbarbutton id="zen-site-data-header-screenshot"
+                        command="Browser:Screenshot" />
+      </hbox>
+      <vbox 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" />
+        </hbox>
+        <hbox class="panel-subview-body" context="unified-extensions-context-menu" id="zen-site-data-addons">
+          <html:div id="unified-extensions-messages-container">
+            <!-- messages will be inserted here -->
+          </html:div>
+
+          <vbox id="overflowed-extensions-list">
+            <!-- overflowed extension buttons from the nav-bar will go here -->
+          </vbox>
+
+          <vbox id="unified-extensions-area">
+            <!-- default area for extension browser action buttons -->
+          </vbox>
+
+          <vbox class="unified-extensions-list">
+            <!-- active visible extensions go here -->
+          </vbox>
+
+          <vbox id="zen-site-data-new-addon-button-container">
+            <toolbarbutton id="zen-site-data-new-addon-button"
+                  class="subviewbutton toolbarbutton-1" />
+          </vbox>
+        </hbox>
+
+# Keep this button on the DOM even though we hide it for ever,
+# again, to keep firefox happy if they decide to change functionality
+# 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" 
+                        hidden="true" />
+      </vbox>
+      <vbox class="zen-site-data-section">
+        <hbox class="zen-site-data-section-header">
+          <label data-l10n-id="zen-site-data-settings" flex="1" />
+          <label data-l10n-id="zen-generic-more" id="zen-site-data-settings-more" />
+        </hbox>
+        <vbox id="zen-site-data-settings-list">
+          <!-- settings will be inserted here -->
+        </vbox>
+      </vbox>
+      <hbox id="zen-site-data-footer">
+        <toolbarbutton id="zen-site-data-security-info" 
+                       class="subviewbutton zen-interactive-button" />
+        <toolbarbutton id="zen-site-data-actions"
+                       class="subviewbutton zen-interactive-button"
+                       closemenu="none"
+                       context="zenSiteDataActions" />
+      </hbox>
+    </panelview>
+  </panelmultiview>
+</panel>
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -5,5 +5,6 @@
 #include zen-panels/gradient-generator.inc
 #include zen-panels/emojis-picker.inc
 #include zen-panels/folders-search.inc
+#include zen-panels/site-data.inc

 #include zen-panels/popups.inc
--- a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
+++ b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
@@ -1,5 +1,5 @@
 diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
-index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0ade05e3b 100644
+index 4f62449d670701c77c681ae36e00bae8bf2f636c..ac542f33927f9de9040bab9cd98351a4d74ede4e 100644
 --- a/browser/components/customizableui/CustomizableUI.sys.mjs
 +++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -10,6 +10,15 @@ index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0
   HomePage: "resource:///modules/HomePage.sys.mjs",
   PanelMultiView:
     "moz-src:///browser/components/customizableui/PanelMultiView.sys.mjs",
+@@ -323,7 +324,7 @@ var CustomizableUIInternal = {
+       {
+         type: CustomizableUI.TYPE_PANEL,
+         defaultPlacements: [],
+-        anchor: "unified-extensions-button",
+        anchor: "zen-site-data-icon-button",
+       },
+       false
+     );
@@ -333,19 +334,14 @@ var CustomizableUIInternal = {
       "back-button",
       "forward-button",
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -74,7 +74,8 @@
 }

 #appMenu-zoom-controls,
-#PanelUI-zen-gradient-generator-color-add {
+#PanelUI-zen-gradient-generator-color-add,
+#zen-site-data-new-addon-button {
  list-style-image: url('plus.svg') !important;
 }

@@ -213,7 +214,8 @@
 .search-setting-button > .button-box > .button-icon,
 #appMenu-settings-button,
 #PanelUI-zen-profiles-managePrfs,
-.unified-extensions-item-open-menu.subviewbutton {
+.unified-extensions-item-open-menu.subviewbutton,
+.zen-site-data-permission-icon {
  list-style-image: url('settings.svg') !important;
 }

@@ -466,8 +468,15 @@
 }

 /* permissions */
-#permissions-granted-icon {
-  list-style-image: url('permissions.svg') !important;
+#identity-permission-box,
+#identity-icon-box {
+  display: none !important;
+}
+
+#zen-site-data-icon-button image {
+  list-style-image: url('permissions.svg');
+  -moz-context-properties: fill, fill-opacity;
+  pointer-events: none;
 }

 .geo-icon {
@@ -558,7 +567,8 @@
  list-style-image: url('midi.svg') !important;
 }

-.install-icon {
+.install-icon,
+.zen-permission-extension-icon {
  list-style-image: url('extension.svg') !important;
 }

@@ -811,3 +821,57 @@
  -moz-context-properties: fill;
  fill: currentColor;
 }
+
+#zen-site-data-security-info {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  appearance: none;
+  border-radius: 4px;
+  padding: 5px;
+
+  &[identity='secure'] {
+    list-style-image: url('security.svg');
+  }
+
+  &[identity='not-secure'] {
+    list-style-image: url('security-broken.svg');
+  }
+
+  &[identity='extension'] {
+    list-style-image: url('extension.svg');
+  }
+
+  &:not([identity='secure']) * {
+    color: light-dark(var(--color-red-70), var(--color-red-30));
+  }
+
+  & .toolbarbutton-text {
+    padding-inline-start: 4px !important;
+  }
+
+  & .toolbarbutton-icon {
+    width: 16px;
+  }
+
+  & > * {
+    opacity: 0.8;
+  }
+}
+
+#zen-site-data-actions {
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  appearance: none;
+  width: 26px;
+  height: 26px;
+  border-radius: 99px;
+  margin-left: auto !important;
+  list-style-image: url('menu.svg');
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+
+  & label {
+    display: none;
+  }
+}
--- a/src/browser/themes/shared/zen-icons/lin/security-broken.svg
+++ b/src/browser/themes/shared/zen-icons/lin/security-broken.svg
@@ -2,4 +2,4 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10" data-color="color-2"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor" data-color="color-2" data-stroke="none" stroke="none"></path></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round"><path d="M7.638,3.495L2.213,12.891c-.605,1.048,.151,2.359,1.362,2.359H14.425c1.211,0,1.967-1.31,1.362-2.359L10.362,3.495c-.605-1.048-2.119-1.048-2.724,0Z"></path><line x1="9" y1="6.5" x2="9" y2="10"></line><path d="M9,13.569c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="context-fill" data-stroke="none" stroke="none"></path></g></svg>
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -106,12 +106,20 @@ export var ZenCustomizableUI = new (class {

  _initCreateNewButton(window) {
    const button = window.document.getElementById('zen-create-new-button');
-    button.addEventListener('command', () => {
+    button.addEventListener('command', (event) => {
      if (button.hasAttribute('open')) {
        return;
      }
      const popup = window.document.getElementById('zenCreateNewPopup');
-      popup.openPopup(button, 'before_start');
+      popup.openPopup(
+        button,
+        'before_start',
+        0,
+        0,
+        true /* isContextMenu */,
+        false /* attributesOverride */,
+        event
+      );
    });
  }

--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -1,6 +1,11 @@
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+ChromeUtils.defineESModuleGetters(this, {
+  nsZenSiteDataPanel: 'resource:///modules/ZenSiteDataPanel.sys.mjs',
+});
+
 var gZenUIManager = {
  _popupTrackingElements: [],
  _hoverPausedForExpand: false,
@@ -14,19 +19,6 @@ var gZenUIManager = {
  init() {
    document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
    document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'contentElementSeparation',
-      'zen.theme.content-element-separation',
-      0
-    );
-    XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      'urlbarShowDomainOnly',
-      'zen.urlbar.show-domain-only-in-sidebar',
-      true
-    );

    document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);

@@ -44,6 +36,8 @@ var gZenUIManager = {
      return document.getElementById('zen-toast-container');
    });

+    window.gZenSiteDataPanel = new nsZenSiteDataPanel(window);
+
    gURLBar._zenTrimURL = this.urlbarTrim.bind(this);

    new ResizeObserver(
@@ -596,6 +590,26 @@ var gZenUIManager = {
  },
 };

+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'contentElementSeparation',
+  'zen.theme.content-element-separation',
+  0
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'urlbarWaitToClear',
+  'zen.urlbar.wait-to-clear',
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  gZenUIManager,
+  'urlbarShowDomainOnly',
+  'zen.urlbar.show-domain-only-in-sidebar',
+  true
+);
+
 var gZenVerticalTabsManager = {
  init() {
    this._multiWindowFeature = new nsZenMultiWindowFeature();
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -120,6 +120,20 @@
      border-radius: 10px !important;
    }
  }
+
+  .identity-box-button {
+    opacity: 0;
+    transition:
+      opacity 0.2s,
+      visibility 0.2s;
+    visibility: collapse;
+
+    #navigator-toolbox:hover &,
+    &[open] {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
 }

 .urlbar-page-action,
@@ -222,22 +236,12 @@
 :root[zen-single-toolbar='true'] {
  --urlbar-icon-border-radius: 10px !important;

-  .urlbar-page-action:not([open]):not(#identity-permission-box),
+  .urlbar-page-action:not([open]):not([showing]):not(#identity-permission-box),
  #tracking-protection-icon-container {
    display: none;
  }

-  #identity-box:not([pageproxystate='invalid']):not(.notSecure) #identity-icon-box:not([open]) {
-    margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
-    transform: translateX(100%);
-    opacity: 0;
-
-    :root:not([supress-primary-adjustment]) & {
-      transition: all 0.1s ease;
-    }
-  }
-
-  #identity-permission-box > *:not(#permissions-granted-icon) {
+  #identity-permission-box > *:not(#zen-site-data-icon-button) {
    visibility: collapse;
  }

@@ -245,25 +249,11 @@
    display: none;
  }

-  #urlbar[open]
-    :is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button):not(
-      [hidden]
-    ):not(#identity-permission-box),
-  #urlbar:hover #identity-icon-box {
-    opacity: 1 !important;
-    margin-inline-start: 0 !important;
-    transform: none !important;
-    display: flex;
-    #urlbar:not(:hover) & {
-      transition: none;
-    }
-  }
-
  #urlbar:not([open]) #userContext-icons {
    margin-inline: 0;
  }

-  #urlbar:not([open]) {
+  #urlbar:not([breakout-extend='true']) {
    #identity-box:not([pageproxystate='invalid']) {
      order: 2;
    }
@@ -683,3 +673,6 @@
  font-weight: 600;
  padding: 0px;
 }
+
+#reader-mode-button {
+}
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -31,7 +31,6 @@
  --uc-autocomplete-panel-separator-margin-vertical: 4px;

  --uc-permission-itemcontainer-padding-block: 8px;
-  --uc-permission-item-margin-block: 4px;
  --uc-permission-item-padding-inline: 16px;
  --zen-panel-separator-width: 1px;
 }
@@ -228,12 +227,8 @@ panel {

 .permission-popup-permission-item,
 #permission-popup-storage-access-permission-list-header {
-  margin-block: var(--uc-permission-item-margin-block);
-}
-
-.permission-popup-permission-label,
-.permission-popup-permission-header-label {
-  margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
+  padding-block: 4px;
+  margin-block: 0px;
 }

 #editBookmarkPanel > #editBookmarkHeaderSeparator,
@@ -241,12 +236,6 @@ panel {
  margin-inline: 0;
 }

-#identity-popup-mainView > toolbarseparator:first-child,
-#unified-extensions-view > toolbarseparator:first-child {
-  display: none;
-  opacity: 0;
-}
-
 menupopup,
 panel {
  box-shadow: none;
--- a/src/zen/common/styles/zen-single-components.css
+++ b/src/zen/common/styles/zen-single-components.css
@@ -189,6 +189,21 @@ body > #confetti {
  }
 }

+.zen-interactive-button {
+  background: color-mix(in srgb, currentColor 6%, transparent) !important;
+  transition:
+    background-color 0.12s ease-in-out,
+    transform 0.12s ease-in-out;
+
+  &:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
+  }
+
+  &:active:hover {
+    transform: scale(0.95);
+  }
+}
+
 /** Update animation */

 #zen-update-animation {
@@ -261,3 +276,187 @@ body > #confetti {
 #customization-container {
  --toolbar-bgcolor: var(--zen-dialog-background);
 }
+
+/* Site Data popup */
+
+#zen-unified-site-data-panel {
+  --panel-padding: 0px;
+  --panel-width: 228px;
+  --menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
+  --uei-icon-size: 14px;
+  --arrowpanel-menuitem-border-radius: 10px;
+}
+
+#unified-extensions-messages-container {
+  display: none;
+}
+
+#zen-site-data-addons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  overflow: visible;
+
+  .unified-extensions-item-name,
+  .unified-extensions-item-message,
+  .unified-extensions-item-message-hover,
+  .unified-extensions-item-message-hover-menu-button,
+  .unified-extensions-item-menu-button {
+    display: none;
+  }
+
+  #overflowed-extensions-list,
+  #unified-extensions-area,
+  .unified-extensions-list,
+  #zen-site-data-new-addon-button-container {
+    display: contents;
+
+    &:empty {
+      display: none;
+    }
+
+    & > * {
+      background-color: color-mix(in srgb, currentcolor 6%, transparent);
+      width: 46px;
+      height: 34px;
+      margin: 0;
+      justify-content: center;
+      align-items: center;
+      border-radius: 6px;
+      transition:
+        background-color 0.1s ease-in-out,
+        transform 0.12s ease-in-out;
+
+      & toolbarbutton {
+        background: transparent !important;
+      }
+
+      & .toolbarbutton-badge-stack {
+        margin: 0;
+      }
+
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      &:active:hover {
+        transform: scale(0.95);
+        background-color: color-mix(in srgb, currentcolor 10%, transparent);
+      }
+    }
+  }
+}
+
+.zen-site-data-section {
+  gap: 6px;
+  padding: 8px;
+}
+
+.zen-site-data-section-header {
+  font-weight: 500;
+  font-size: small;
+
+  & label {
+    margin: 0;
+  }
+
+  & > label:nth-child(2) {
+    font-weight: 400;
+    font-size: smaller;
+    transition: opacity 0.15s ease-in-out;
+    opacity: 0;
+    padding: 0px 4px;
+
+    .zen-site-data-section:hover & {
+      opacity: 0.8;
+    }
+  }
+}
+
+#zen-site-data-new-addon-button .toolbarbutton-text {
+  display: none;
+}
+
+.permission-popup-permission-item {
+  gap: 8px;
+  overflow: hidden;
+  align-items: center;
+}
+
+.permission-popup-permission-label {
+  margin: 0px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.permission-popup-permission-icon {
+  fill: var(--button-primary-color);
+  padding: 8px;
+  width: 34px;
+  height: 34px;
+  overflow: visible;
+  position: relative;
+  appearance: none;
+
+  & label {
+    display: none;
+  }
+
+  & image {
+    -moz-context-properties: fill;
+    z-index: 1;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    border-radius: 99px;
+    width: 32px;
+    height: 32px;
+    background: var(--button-primary-bgcolor);
+    opacity: 0.6;
+    transition:
+      transform 0.12s ease-in-out,
+      opacity 0.12s ease-in-out;
+  }
+
+  .permission-popup-permission-item:hover &::before {
+    transform: scale(1.05);
+  }
+
+  .permission-popup-permission-item:active:hover &::before {
+    transform: scale(0.95);
+  }
+
+  .permission-popup-permission-item[state='allow'] &::before {
+    opacity: 1;
+  }
+}
+
+.zen-permission-popup-permission-state-label {
+  opacity: 0.8;
+  font-size: smaller;
+  font-weight: 400;
+  margin: 0;
+}
+
+#identity-box {
+  opacity: 0.6;
+}
+
+#zen-site-data-footer {
+  border-top: 1px solid color-mix(in srgb, currentColor 6%, transparent);
+  padding-top: 8px;
+  margin: 2px 8px 8px 8px;
+
+  & toolbarbutton {
+    margin: 0;
+  }
+}
+
+#unified-extensions-button:not([showing]) {
+  display: none !important;
+}
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -978,9 +978,6 @@
    & #PanelUI-button {
      order: -2;
    }
-    & #unified-extensions-button {
-      order: -1;
-    }
  }

  & #zen-sidebar-top-buttons-customization-target {
--- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
+++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
@@ -0,0 +1,382 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export class nsZenSiteDataPanel {
+  #iconMap = {
+    install: 'extension',
+  };
+
+  constructor(window) {
+    this.window = window;
+    this.document = window.document;
+
+    this.panel = this.document.getElementById('zen-unified-site-data-panel');
+    this.#init();
+  }
+
+  #init() {
+    // Add a new button to the urlbar popup
+    const button = this.window.MozXULElement.parseXULToFragment(`
+      <box id="zen-site-data-icon-button" role="button" align="center" class="identity-box-button" delegatesanchor="true">
+        <image />
+      </box>
+    `);
+    this.anchor = button.querySelector('#zen-site-data-icon-button');
+    this.document.getElementById('identity-icon-box').after(button);
+    this.window.gUnifiedExtensions._button = this.anchor;
+
+    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.#initEventListeners();
+  }
+
+  #initEventListeners() {
+    this.panel.addEventListener('popupshowing', this);
+    this.document
+      .getElementById('zen-site-data-new-addon-button')
+      .addEventListener('command', this);
+    this.document.getElementById('zen-site-data-manage-addons').addEventListener('click', this);
+    this.document.getElementById('zen-site-data-settings-more').addEventListener('click', this);
+    this.document.getElementById('zen-site-data-security-info').addEventListener('command', this);
+    this.document.getElementById('zen-site-data-actions').addEventListener('command', this);
+
+    this.#initContextMenuEventListener();
+  }
+
+  #initContextMenuEventListener() {
+    const kCommands = {
+      context_zenClearSiteData: (event) => {
+        this.window.gIdentityHandler.clearSiteData(event);
+      },
+      context_zenOpenGetAddons: () => {
+        this.#openGetAddons();
+      },
+      context_zenOpenSiteSettings: () => {
+        const { BrowserCommands } = this.window;
+        BrowserCommands.pageInfo(null, 'permTab');
+      },
+    };
+
+    for (let [id, handler] of Object.entries(kCommands)) {
+      this.document.getElementById(id).addEventListener('command', handler);
+    }
+  }
+
+  #preparePanel() {
+    this.#setSitePermissions();
+    this.#setSiteSecurityInfo();
+  }
+
+  #setSiteSecurityInfo() {
+    const { gIdentityHandler } = this.window;
+    const button = this.document.getElementById('zen-site-data-security-info');
+
+    if (gIdentityHandler._isSecureInternalUI) {
+      button.parentNode.hidden = true;
+      return;
+    }
+
+    let identity;
+    if (gIdentityHandler._pageExtensionPolicy) {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-extension');
+      identity = 'extension';
+    } else if (gIdentityHandler._uriHasHost && gIdentityHandler._isSecureConnection) {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-secure');
+      identity = 'secure';
+    } else {
+      this.document.l10n.setAttributes(button, 'zen-site-data-security-info-not-secure');
+      identity = 'not-secure';
+    }
+
+    button.parentNode.hidden = false;
+    button.setAttribute('identity', identity);
+  }
+
+  #setSitePermissions() {
+    const { gBrowser, SitePermissions } = this.window;
+    const list = this.document.getElementById('zen-site-data-settings-list');
+    const section = list.closest('.zen-site-data-section');
+
+    // show permission icons
+    let permissions = SitePermissions.getAllPermissionDetailsForBrowser(gBrowser.selectedBrowser);
+
+    // Don't display origin-keyed 3rdPartyStorage permissions that are covered by
+    // site-keyed 3rdPartyFrameStorage permissions.
+    let thirdPartyStorageSites = new Set(
+      permissions
+        .map(function (permission) {
+          let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+          if (id == '3rdPartyFrameStorage') {
+            return key;
+          }
+          return null;
+        })
+        .filter(function (key) {
+          return key != null;
+        })
+    );
+    permissions = permissions.filter(function (permission) {
+      let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+      if (id != '3rdPartyStorage') {
+        return true;
+      }
+      try {
+        let origin = Services.io.newURI(key);
+        let site = Services.eTLD.getSite(origin);
+        return !thirdPartyStorageSites.has(site);
+      } catch {
+        return false;
+      }
+    });
+
+    this._sharingState = gBrowser.selectedTab._sharingState;
+
+    if (this._sharingState?.geo) {
+      let geoPermission = permissions.find((perm) => perm.id === 'geo');
+      if (geoPermission) {
+        geoPermission.sharingState = true;
+      } else {
+        permissions.push({
+          id: 'geo',
+          state: SitePermissions.ALLOW,
+          scope: SitePermissions.SCOPE_REQUEST,
+          sharingState: true,
+        });
+      }
+    }
+
+    if (this._sharingState?.xr) {
+      let xrPermission = permissions.find((perm) => perm.id === 'xr');
+      if (xrPermission) {
+        xrPermission.sharingState = true;
+      } else {
+        permissions.push({
+          id: 'xr',
+          state: SitePermissions.ALLOW,
+          scope: SitePermissions.SCOPE_REQUEST,
+          sharingState: true,
+        });
+      }
+    }
+
+    if (this._sharingState?.webRTC) {
+      let webrtcState = this._sharingState.webRTC;
+      // If WebRTC device or screen are in use, we need to find
+      // the associated ALLOW permission item to set the sharingState field.
+      for (let id of ['camera', 'microphone', 'screen']) {
+        if (webrtcState[id]) {
+          let found = false;
+          for (let permission of permissions) {
+            let [permId] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+            if (permId != id || permission.state != SitePermissions.ALLOW) {
+              continue;
+            }
+            found = true;
+            permission.sharingState = webrtcState[id];
+          }
+          if (!found) {
+            // If the ALLOW permission item we were looking for doesn't exist,
+            // the user has temporarily allowed sharing and we need to add
+            // an item in the permissions array to reflect this.
+            permissions.push({
+              id,
+              state: SitePermissions.ALLOW,
+              scope: SitePermissions.SCOPE_REQUEST,
+              sharingState: webrtcState[id],
+            });
+          }
+        }
+      }
+    }
+
+    list.innerHTML = '';
+    for (let permission of permissions) {
+      let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
+
+      if (id == 'storage-access') {
+        // Ignore storage access permissions here, they are made visible inside
+        // the Content Blocking UI.
+        continue;
+      }
+
+      if (permission.state == SitePermissions.PROMPT) {
+        // We don't display "ask" permissions in the site data panel.
+        continue;
+      }
+
+      let item = this.#createPermissionItem(id, key, permission);
+      if (item) {
+        list.appendChild(item);
+      }
+    }
+
+    section.hidden = list.childElementCount == 0;
+  }
+
+  #getPermissionStateLabelId(permission) {
+    const { SitePermissions } = this.window;
+    switch (permission.state) {
+      // There should only be these types being displayed in the panel.
+      case SitePermissions.ALLOW:
+        return 'zen-site-data-setting-allow';
+      case SitePermissions.BLOCK:
+      case SitePermissions.AUTOPLAY_BLOCKED_ALL:
+        return 'zen-site-data-setting-block';
+      default:
+        return null;
+    }
+  }
+
+  #createPermissionItem(id, key, permission) {
+    const { SitePermissions } = this.window;
+
+    // Create a permission item for the site data panel.
+    let container = this.document.createXULElement('hbox');
+    const idNoSuffix = permission.id;
+    container.classList.add(
+      'permission-popup-permission-item',
+      `permission-popup-permission-item-${idNoSuffix}`
+    );
+    container.setAttribute('align', 'center');
+    container.setAttribute('role', 'group');
+
+    container.setAttribute('state', permission.state == SitePermissions.ALLOW ? 'allow' : 'block');
+
+    let img = this.document.createXULElement('toolbarbutton');
+    img.classList.add('permission-popup-permission-icon', 'zen-site-data-permission-icon');
+    if (this.#iconMap[id]) {
+      img.classList.add(`zen-permission-${this.#iconMap[id]}-icon`);
+    }
+
+    let labelContainer = this.document.createXULElement('vbox');
+    labelContainer.setAttribute('flex', '1');
+    labelContainer.setAttribute('align', 'start');
+    labelContainer.classList.add('permission-popup-permission-label-container');
+    labelContainer._permission = permission;
+    labelContainer.addEventListener('click', this);
+
+    let nameLabel = this.document.createXULElement('label');
+    nameLabel.setAttribute('flex', '1');
+    nameLabel.setAttribute('class', 'permission-popup-permission-label');
+    let label = SitePermissions.getPermissionLabel(permission.id);
+    if (label === null) {
+      return null;
+    }
+    nameLabel.textContent = label;
+    labelContainer.appendChild(nameLabel);
+
+    let stateLabel = this.document.createXULElement('label');
+    stateLabel.setAttribute('class', 'zen-permission-popup-permission-state-label');
+    stateLabel.setAttribute('data-l10n-id', this.#getPermissionStateLabelId(permission));
+    labelContainer.appendChild(stateLabel);
+
+    container.appendChild(img);
+    container.appendChild(labelContainer);
+
+    return container;
+  }
+
+  #openGetAddons() {
+    const { switchToTabHavingURI } = this.window;
+    let amoUrl = Services.urlFormatter.formatURLPref('extensions.getAddons.link.url');
+    switchToTabHavingURI(amoUrl, true);
+  }
+
+  #onCommandEvent(event) {
+    const id = event.target.id;
+    switch (id) {
+      case 'zen-site-data-new-addon-button': {
+        this.#openGetAddons();
+        break;
+      }
+      case 'zen-site-data-security-info': {
+        this.window.displaySecurityInfo();
+        break;
+      }
+      case 'zen-site-data-actions': {
+        const button = this.document.getElementById('zen-site-data-actions');
+        const popup = this.document.getElementById('zenSiteDataActions');
+        popup.openPopup(
+          button,
+          'after_start',
+          0,
+          0,
+          /* context menu */ true,
+          false,
+          this.window.event
+        );
+        break;
+      }
+    }
+  }
+
+  #onPermissionClick(label) {
+    const { SitePermissions, gBrowser } = this.window;
+    const permission = label._permission;
+
+    let newState;
+    switch (permission.state) {
+      case SitePermissions.ALLOW:
+        newState = SitePermissions.BLOCK;
+        break;
+      case SitePermissions.BLOCK:
+      case SitePermissions.AUTOPLAY_BLOCKED_ALL:
+        newState = SitePermissions.ALLOW;
+        break;
+      default:
+        return;
+    }
+
+    SitePermissions.setForPrincipal(gBrowser.contentPrincipal, permission.id, newState);
+
+    label.parentNode.setAttribute('state', newState == SitePermissions.ALLOW ? 'allow' : 'block');
+    label
+      .querySelector('.zen-permission-popup-permission-state-label')
+      .setAttribute('data-l10n-id', this.#getPermissionStateLabelId({ state: newState }));
+    label._permission.state = newState;
+  }
+
+  #onClickEvent(event) {
+    const id = event.target.id;
+    switch (id) {
+      case 'zen-site-data-manage-addons': {
+        const { BrowserAddonUI } = this.window;
+        BrowserAddonUI.openAddonsMgr('addons://list/extension');
+        break;
+      }
+      case 'zen-site-data-settings-more': {
+        const { BrowserCommands } = this.window;
+        BrowserCommands.pageInfo(null, 'permTab');
+        break;
+      }
+      default: {
+        const label = event.target.closest('.permission-popup-permission-label-container');
+        if (label?._permission) {
+          this.#onPermissionClick(label);
+        }
+        break;
+      }
+    }
+  }
+
+  handleEvent(event) {
+    const type = event.type;
+    switch (type) {
+      case 'click':
+        this.#onClickEvent(event);
+        break;
+      case 'command':
+        this.#onCommandEvent(event);
+        break;
+      case 'popupshowing':
+        this.#preparePanel();
+        break;
+    }
+  }
+}
--- a/src/zen/urlbar/moz.build
+++ b/src/zen/urlbar/moz.build
@@ -3,6 +3,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 EXTRA_JS_MODULES += [
+  "ZenSiteDataPanel.sys.mjs",
  "ZenUBActionsProvider.sys.mjs",
  "ZenUBGlobalActions.sys.mjs",
  "ZenUBProvider.sys.mjs",
--- a/src/zen/zen.globals.js
+++ b/src/zen/zen.globals.js
@@ -7,6 +7,8 @@ export default [
  'nsZenDOMOperatedFeature',
  'nsZenPreloadedFeature',

+  'nsZenSiteDataPanel',
+
  'ZenThemeModifier',
  'ZenHasPolyfill',
Author	SHA1	Message	Date
Mr. M	c701a24db5	feat: Implement site security section, b=no-bug, c=common, tabs	2025-10-02 17:04:30 +02:00
mr. m	f098ff9ddf	Merge branch 'dev' into feat/permissions-panel	2025-10-02 12:02:50 +02:00
Mr. M	8bd7d835b4	feat: Finished permissions and addons, b=no-bug, c=common	2025-10-02 12:02:00 +02:00
Mr. M	ebcd77d9ce	feat: Properly show panel view, b=no-bug, c=common	2025-10-01 23:44:55 +02:00
Mr. M	8d00b54e03	feat: Start fetching site permissions, b=no-bug, c=no-component	2025-10-01 14:57:07 +02:00
mr. m	a1a2ae0a67	Merge branch 'dev' into feat/permissions-panel	2025-10-01 13:24:03 +02:00
mr. m	fc68cc5ab3	feat: New site data popup, b=no-bug, c=common	2025-10-01 13:13:19 +02:00