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

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

@@ -6,8 +6,7 @@
         role="group"
         type="arrow"
         noautofocus="true"
-        position="bottomright topright"
-        hidden="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

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

@@ -265,10 +265,10 @@ body > #confetti {
 /* Site Data popup */
 
 #zen-unified-site-data-panel {
-  --panel-padding: 14px;
+  --panel-padding: 0px;
   --panel-width: 250px;
   --menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
-  --uei-icon-size: 16px;
+  --uei-icon-size: 14px;
   --arrowpanel-menuitem-border-radius: 10px;
 }
 
@@ -280,6 +280,7 @@ body > #confetti {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
+  overflow: visible;
 
   .unified-extensions-item-name,
   .unified-extensions-item-message,
@@ -300,34 +301,49 @@ body > #confetti {
     }
 
     & > * {
-      background-color: color-mix(in srgb, currentcolor 6%, transparent) !important;
-      width: 48px;
-      height: 32px;
+      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: 8px;
-  padding-bottom: 20px;
+  gap: 6px;
+  padding: 8px;
 }
 
 .zen-site-data-section-header {
-  font-weight: 600;
+  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;
 

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -19,11 +19,19 @@ export class nsZenSiteDataPanel {
       </box>
     `);
     this.anchor = button.querySelector('#zen-site-data-icon');
-    this.anchor.addEventListener('click', this);
     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) {
@@ -191,12 +199,25 @@ export class nsZenSiteDataPanel {
     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;
     }
   }
 }