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

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

@@ -72,3 +72,16 @@ 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

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..e3bda9bc28aeca7258fcd91fa1a4719b4950e28b 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,6 +20,24 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..e3bda9bc28aeca7258fcd91fa1a4719b
        },
      };
  
+@@ -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.

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>

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

@@ -14,6 +14,14 @@
     <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" />
@@ -59,6 +67,14 @@
           <!-- 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>

src/browser/themes/shared/zen-icons/icons.css

@@ -473,7 +473,7 @@
   display: none !important;
 }
 
-#zen-site-data-icon {
+#zen-site-data-icon-button image {
   list-style-image: url('permissions.svg');
   -moz-context-properties: fill, fill-opacity;
   pointer-events: none;
@@ -567,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;
 }
 
@@ -820,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;
+  }
+}

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>

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
+      );
     });
   }
 

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

@@ -236,12 +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-permission-box > *:not(#zen-site-data-icon) {
+  #identity-permission-box > *:not(#zen-site-data-icon-button) {
     visibility: collapse;
   }
 
@@ -673,3 +673,6 @@
   font-weight: 600;
   padding: 0px;
 }
+
+#reader-mode-button {
+}

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,7 +227,8 @@ panel {
 
 .permission-popup-permission-item,
 #permission-popup-storage-access-permission-list-header {
-  padding-block: var(--uc-permission-item-margin-block);
+  padding-block: 4px;
+  margin-block: 0px;
 }
 
 #editBookmarkPanel > #editBookmarkHeaderSeparator,

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 {
@@ -363,7 +378,9 @@ body > #confetti {
 }
 
 .permission-popup-permission-item {
-  gap: 6px;
+  gap: 8px;
+  overflow: hidden;
+  align-items: center;
 }
 
 .permission-popup-permission-label {
@@ -429,3 +446,17 @@ body > #confetti {
 #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;
+}

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 {

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -3,6 +3,10 @@
  * 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;
@@ -14,14 +18,18 @@ export class nsZenSiteDataPanel {
   #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">
+      <box id="zen-site-data-icon-button" role="button" align="center" class="identity-box-button" delegatesanchor="true">
-        <image id="zen-site-data-icon"/>
+        <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();
 
@@ -35,10 +43,59 @@ export class nsZenSiteDataPanel {
       .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() {
@@ -193,6 +250,9 @@ export class nsZenSiteDataPanel {
 
     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');
@@ -222,13 +282,35 @@ export class nsZenSiteDataPanel {
     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': {
-        let amoUrl = Services.urlFormatter.formatURLPref('extensions.getAddons.link.url');
+        this.#openGetAddons();
-        const { switchToTabHavingURI } = this.window;
+        break;
-        switchToTabHavingURI(amoUrl, true);
+      }
+      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;
       }
     }