feat: Properly show panel view, b=no-bug, c=common

README.md

@@ -34,8 +34,8 @@ Zen is a firefox-based browser with the aim of pushing your productivity to a ne
 
 ### Firefox Versions
 
-- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `143.0.3`! 🚀
+- [`Release`](https://zen-browser.app/download) - Is currently built using Firefox version `143.0.1`! 🚀
-- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.3`!
+- [`Twilight`](https://zen-browser.app/download?twilight) - Is currently built using Firefox version `RC 143.0.1`!
 
 ### Contributing
 

build/firefox-cache/l10n-last-commit-hash

@@ -1 +1 @@
-c8042c4961ad61678121d8ce9ca2d17cc85fefbe
+1b0467f0c46520bbed6648f6583a9ba6710d76cb

locales/de/browser/browser/zen-general.ftl

@@ -48,4 +48,4 @@ zen-icons-picker-emoji =
     .label = Emojis
 zen-icons-picker-svg = 
     .label = Symbole
-urlbar-search-mode-zen_actions = Aktionen
+urlbar-search-mode-zen_actions = Actions

locales/en-US/browser/browser/zen-general.ftl

@@ -64,3 +64,6 @@ zen-icons-picker-svg =
   .label = Icons
 
 urlbar-search-mode-zen_actions = Actions
+zen-site-data-settings = Settings
+
+zen-generic-manage = Manage

locales/ga-IE/browser/browser/zen-general.ftl

@@ -48,4 +48,4 @@ zen-icons-picker-emoji =
     .label = Emojis
 zen-icons-picker-svg = 
     .label = Deilbhíní
-urlbar-search-mode-zen_actions = Gníomhartha
+urlbar-search-mode-zen_actions = Actions

locales/pt-PT/browser/browser/zen-general.ftl

@@ -48,4 +48,4 @@ zen-icons-picker-emoji =
     .label = Emojis
 zen-icons-picker-svg = 
     .label = Ícones
-urlbar-search-mode-zen_actions = Ações
+urlbar-search-mode-zen_actions = Actions

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..e3bda9bc28aeca7258fcd91fa1a4719b4950e28b 100644
 --- a/browser/base/content/browser-addons.js
 +++ b/browser/base/content/browser-addons.js
 @@ -1064,7 +1064,7 @@ var gXPInstallObserver = {
@@ -20,7 +20,20 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
        },
      };
  
-@@ -2608,7 +2608,7 @@ var gUnifiedExtensions = {
+@@ -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 +42,7 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
            triggerEvent: aEvent,
          });
        }
-@@ -2795,18 +2795,20 @@ var gUnifiedExtensions = {
+@@ -2795,18 +2791,20 @@ var gUnifiedExtensions = {
        this._maybeMoveWidgetNodeBack(widgetId);
      }
  

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

@@ -0,0 +1,64 @@
+# 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">
+      <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" />
+        </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-manage" />
+        </hbox>
+        <vstack id="zen-site-data-settings-list">
+          <!-- settings will be inserted here -->
+        </vstack>
+      </vbox>
+    </panelview>
+  </panelmultiview>
+</panel>

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

src/browser/components/tabbrowser/content/tabs-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221fb51207c6 100644
+index c7557dad38db9ef02b981c46de9595df77cb67db..f45ecacd23179f06a436d5f3d372b536322388ea 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -44,6 +44,9 @@
@@ -361,7 +361,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
      #ensureTabIsVisible(tab, shouldScrollInstantly = false) {
 -      let arrowScrollbox = tab.closest("arrowscrollbox");
 +      let arrowScrollbox = this.arrowScrollbox;
-       if (arrowScrollbox?.overflowing) {
+       if (arrowScrollbox.overflowing) {
          arrowScrollbox.ensureElementIsVisible(tab, shouldScrollInstantly);
        }
 @@ -2288,6 +2343,16 @@
@@ -410,9 +410,9 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
        translateX = Math.min(Math.max(translateX, firstBoundX), lastBoundX);
        translateY = Math.min(Math.max(translateY, firstBoundY), lastBoundY);
  
-@@ -2744,13 +2811,18 @@
+@@ -2743,13 +2810,18 @@
+ 
        this.#clearDragOverGroupingTimer();
-       this.#clearPinnedDropIndicatorTimer();
  
 -      let isPinned = draggedTab.pinned;
 -      let numPinned = gBrowser.pinnedTabCount;
@@ -433,7 +433,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2761,7 +2833,7 @@
+@@ -2760,7 +2832,7 @@
        let screenAxis = this.verticalMode ? "screenY" : "screenX";
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
@@ -442,7 +442,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
        let tabSize = this.verticalMode ? tabHeight : tabWidth;
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
-@@ -2777,6 +2849,12 @@
+@@ -2776,6 +2848,12 @@
        );
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -455,7 +455,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
        let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
        let lastMovingTabScreen = endEdge(lastMovingTab);
        let firstMovingTabScreen = firstMovingTab[screenAxis];
-@@ -2791,6 +2869,11 @@
+@@ -2790,6 +2868,11 @@
        let endBound = this.#rtlMode
          ? endEdge(this) - lastMovingTabScreen
          : periphery[screenAxis] - 1 - lastMovingTabScreen;
@@ -467,7 +467,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
        translate = Math.min(Math.max(translate, startBound), endBound);
  
        // Center the tab under the cursor if the tab is not under the cursor while dragging
-@@ -2980,6 +3063,8 @@
+@@ -2979,6 +3062,8 @@
        };
  
        let dropElement = getOverlappedElement();
@@ -476,7 +476,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
  
        let newDropElementIndex;
        if (dropElement) {
-@@ -3061,7 +3146,7 @@
+@@ -3060,7 +3145,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -485,7 +485,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -3094,6 +3179,7 @@
+@@ -3093,6 +3178,7 @@
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
          if (
@@ -493,7 +493,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            isTabGroupLabel(draggedTab) &&
            dropElement?.group &&
            (!dropElement.group.collapsed ||
-@@ -3120,20 +3206,13 @@
+@@ -3119,20 +3205,13 @@
          let isOutOfBounds = isPinned
            ? dropElement.elementIndex >= numPinned
            : dropElement.elementIndex < numPinned;
@@ -518,7 +518,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
          let groupingDelay = Services.prefs.getIntPref(
            "browser.tabs.dragDrop.createGroup.delayMS"
          );
-@@ -3141,6 +3220,7 @@
+@@ -3140,6 +3219,7 @@
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          let shouldCreateGroupOnDrop =
@@ -526,7 +526,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            !movingTabsSet.has(dropElement) &&
            isTab(dropElement) &&
            !dropElement?.group &&
-@@ -3149,6 +3229,7 @@
+@@ -3148,6 +3228,7 @@
          // When dragging tab(s) over a collapsed tab group label, signal to the
          // user that dropping the tab(s) will add them to the group.
          let shouldDropIntoCollapsedTabGroup =
@@ -534,7 +534,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            isTabGroupLabel(dropElement) &&
            dropElement.group.collapsed &&
            overlapPercent > dragOverGroupingThreshold;
-@@ -3193,19 +3274,14 @@
+@@ -3192,19 +3273,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -562,7 +562,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-addToGroup", colorCode);
-@@ -3224,11 +3300,11 @@
+@@ -3223,11 +3299,11 @@
        dragData.dropElement = dropElement;
        dragData.dropBefore = dropBefore;
        dragData.animDropElementIndex = newDropElementIndex;
@@ -576,7 +576,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            continue;
          }
  
-@@ -3350,12 +3426,14 @@
+@@ -3346,12 +3422,14 @@
        element?.removeAttribute("dragover-groupTarget");
      }
  
@@ -593,7 +593,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
  
        for (let item of this.ariaFocusableItems) {
          this.#resetGroupTarget(item);
-@@ -3402,16 +3480,15 @@
+@@ -3394,16 +3472,15 @@
          tab.style.left = "";
          tab.style.top = "";
          tab.style.maxWidth = "";
@@ -612,7 +612,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
        }
        let periphery = draggedTabDocument.getElementById(
          "tabbrowser-arrowscrollbox-periphery"
-@@ -3483,7 +3560,7 @@
+@@ -3475,7 +3552,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -621,7 +621,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3647,7 +3724,7 @@
+@@ -3639,7 +3716,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -630,7 +630,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
          return;
        }
  
-@@ -3756,7 +3833,10 @@
+@@ -3748,7 +3825,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -642,7 +642,7 @@ index b2d54218ca51f86d4591730054d0e7e1138adb94..d2c1f7f5b68ecc531c4e9e597457221f
            break;
          }
          target = target.parentNode;
-@@ -3773,6 +3853,9 @@
+@@ -3765,6 +3845,9 @@
            return null;
          }
        }

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;
 }
 
@@ -466,8 +467,14 @@
 }
 
 /* permissions */
-#permissions-granted-icon {
+#identity-permission-box,
-  list-style-image: url('permissions.svg') !important;
+#identity-icon-box {
+  display: none !important;
+}
+
+#zen-site-data-icon {
+  list-style-image: url('permissions.svg');
+  -moz-context-properties: fill, fill-opacity;
 }
 
 .geo-icon {

src/browser/themes/windows/browser-css.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
-index 4485369284ee762bc8b35afb84fec0874a831fff..6a1ad15f657437aa4ef98fda63ae921a378f7310 100644
+index 4485369284ee762bc8b35afb84fec0874a831fff..7096e2e5d50cda99b62a2aa7118fea6371e76b85 100644
 --- a/browser/themes/windows/browser.css
 +++ b/browser/themes/windows/browser.css
 @@ -31,7 +31,6 @@
@@ -10,14 +10,13 @@ index 4485369284ee762bc8b35afb84fec0874a831fff..6a1ad15f657437aa4ef98fda63ae921a
      }
  
      /* Using a semitransparent background preserves the tinting from the backdrop.
-@@ -60,14 +59,13 @@
+@@ -60,14 +59,12 @@
  }
  
  /* This is needed for Windows 10, see bug 1961257 */
 -@media (-moz-windows-accent-color-in-titlebar) {
 -  :root[customtitlebar][sizemode="normal"] #navigator-toolbox {
 +  :root[customtitlebar][sizemode="normal"] #browser {
-+    --zen-sidebar-compact-top-offset: 1px;
      border-top: 0.5px solid ActiveBorder;
      &:-moz-window-inactive {
        border-top-color: InactiveBorder;

src/zen/common/ZenHasPolyfill.mjs

@@ -15,11 +15,7 @@
     observeSelectorExistence(element, descendantSelectors, stateAttribute, attributeFilter = []) {
       const updateState = () => {
         const exists = descendantSelectors.some(({ selector }) => {
-          let selected = element.querySelector(selector);
+          return element.querySelector(selector);
-          if (selected?.tagName?.toLowerCase() === 'menu') {
-            return null;
-          }
-          return selected;
         });
         const { exists: shouldExist = true } = descendantSelectors;
         if (exists === shouldExist) {

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();

src/zen/common/styles/zen-omnibox.css

@@ -155,11 +155,8 @@
   order: 2 !important;
 }
 
-#urlbar[breakout] {
-  position: fixed;
-}
-
 #urlbar[breakout-extend='true'] {
+  position: fixed;
   z-index: 2;
 
   & .urlbar-input-container {
@@ -227,17 +224,7 @@
     display: none;
   }
 
-  #identity-box:not([pageproxystate='invalid']):not(.notSecure) #identity-icon-box:not([open]) {
+  #identity-permission-box > *:not(#zen-site-data-icon) {
-    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) {
     visibility: collapse;
   }
 
@@ -245,25 +232,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;
     }

src/zen/common/styles/zen-popup.css

@@ -241,12 +241,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;

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

@@ -261,3 +261,98 @@ body > #confetti {
 #customization-container {
   --toolbar-bgcolor: var(--zen-dialog-background);
 }
+
+/* Site Data popup */
+
+#zen-unified-site-data-panel {
+  --panel-padding: 0px;
+  --panel-width: 250px;
+  --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: 6px;
+  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: 42px;
+      height: 28px;
+      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-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;
+
+    .zen-site-data-section:hover & {
+      opacity: 0.8;
+    }
+  }
+}
+
+#zen-site-data-new-addon-button .toolbarbutton-text {
+  display: none;
+}

src/zen/compact-mode/ZenCompactMode.mjs

@@ -661,7 +661,7 @@ var gZenCompactModeManager = {
           requestAnimationFrame(() => {
             delete this._hasHoveredUrlbar;
           });
-        }, 10);
+        }, 0);
       }, 0);
     });
   },

src/zen/compact-mode/zen-compact-mode.css

@@ -29,7 +29,7 @@
   &,
   &::before,
   &::after {
-    border-radius: calc(var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px));
+    border-radius: calc(var(--zen-native-inner-radius) + var(--zen-element-separation) / 4 - var(--zen-compact-mode-no-padding-radius-fix, 0px));
   }
 }
 
@@ -97,10 +97,7 @@
           bottom: var(--zen-compact-float);
           padding: 0 var(--zen-compact-float) !important;
           :root[zen-single-toolbar='true'] & {
-            /* We add an extra offset since windows users have a border top
+            top: calc(var(--zen-compact-float) / 2);
-             * in the window in order to compensate how windows renders the
-             * titlebar */ 
-            top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
             height: calc(100% - var(--zen-compact-float));
           }
           :root:not([zen-single-toolbar='true']) & {

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -0,0 +1,223 @@
+/* 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 {
+  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" role="button" align="center" class="identity-box-button">
+        <image id="zen-site-data-icon"/>
+      </box>
+    `);
+    this.anchor = button.querySelector('#zen-site-data-icon');
+    this.document.getElementById('identity-icon-box').after(button);
+
+    // Remove the old permissions dialog
+    this.document.getElementById('unified-extensions-panel-template').remove();
+
+    this.#initEventListeners();
+  }
+
+  #initEventListeners() {
+    this.anchor.addEventListener('click', this);
+    this.document
+      .getElementById('zen-site-data-new-addon-button')
+      .addEventListener('command', this);
+  }
+
+  show(event) {
+    this.#preparePanel();
+
+    this.window.PanelMultiView.openPopup(this.panel, this.anchor, {
+      triggerEvent: event,
+    });
+  }
+
+  #preparePanel() {
+    this.#setSitePermissions();
+  }
+
+  #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 = '';
+    let totalBlockedPopups = gBrowser.selectedBrowser.popupBlocker.getBlockedPopupCount();
+    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;
+      }
+
+      let item = this.#createPermissionItem(id, key, permission);
+      if (item) {
+        list.appendChild(item);
+      }
+    }
+
+    section.hidden = list.childElementCount == 0;
+  }
+
+  #createPermissionItem(id, key, permission) {
+    const { SitePermissions } = this.window;
+
+    // Create a permission item for the site data panel.
+    let container = 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');
+
+    let img = document.createXULElement('image');
+    img.classList.add('permission-popup-permission-icon', idNoSuffix + '-icon');
+    if (
+      permission.state == SitePermissions.BLOCK ||
+      permission.state == SitePermissions.AUTOPLAY_BLOCKED_ALL
+    ) {
+      img.classList.add('blocked-permission-icon');
+    }
+
+    let nameLabel = 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;
+
+    container.appendChild(img);
+    container.appendChild(nameLabel);
+    return container;
+  }
+
+  #onCommandEvent(event) {
+    const id = event.target.id;
+    switch (id) {
+      case 'zen-site-data-new-addon-button':
+        const { BrowserAddonUI } = this.window;
+        BrowserAddonUI.openAddonsMgr('addons://list/extension');
+        break;
+    }
+  }
+
+  handleEvent(event) {
+    const type = event.type;
+    switch (type) {
+      case 'click':
+        this.show(event);
+        break;
+      case 'command':
+        this.#onCommandEvent(event);
+        break;
+    }
+  }
+}

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",

src/zen/workspaces/zen-workspaces.css

@@ -237,10 +237,7 @@
     --toolbarbutton-inner-padding: 6px;
 
     & image {
-      border-radius: calc(var(--border-radius-medium) - 4px) !important;
+      border-radius: calc(var(--border-radius-medium) - 4px);
-      width: 26px;
-      height: 26px;
-      margin-right: -1px;
     }
 
     :root[zen-renaming-tab='true'] & {

surfer.json

@@ -5,8 +5,8 @@
   "binaryName": "zen",
   "version": {
     "product": "firefox",
-    "version": "143.0.3",
+    "version": "143.0.1",
-    "candidate": "143.0.3"
+    "candidate": "143.0.1"
   },
   "buildOptions": {
     "generateBranding": true
@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.16.3b",
+        "displayVersion": "1.16.2b",
         "github": {
           "repo": "zen-browser/desktop"
         },