diff --git a/locales/en-US/browser/browser/zen-general.ftl b/locales/en-US/browser/browser/zen-general.ftl
index f8fbf0879..f21b87b76 100644
--- a/locales/en-US/browser/browser/zen-general.ftl
+++ b/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
\ No newline at end of file
diff --git a/src/browser/base/content/browser-addons-js.patch b/src/browser/base/content/browser-addons-js.patch
index 968b5f924..71135dc45 100644
--- 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..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.
diff --git a/src/browser/base/content/zen-panels/popups.inc b/src/browser/base/content/zen-panels/popups.inc
index 955609aa4..cdada5655 100644
--- a/src/browser/base/content/zen-panels/popups.inc
+++ b/src/browser/base/content/zen-panels/popups.inc
@@ -49,3 +49,12 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/browser/base/content/zen-panels/site-data.inc b/src/browser/base/content/zen-panels/site-data.inc
index aa0092a61..54737bdf6 100644
--- a/src/browser/base/content/zen-panels/site-data.inc
+++ b/src/browser/base/content/zen-panels/site-data.inc
@@ -14,6 +14,14 @@
+
+
\ No newline at end of file
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index c31d16ae9..016e8b19a 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/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;
+ }
+}
diff --git a/src/browser/themes/shared/zen-icons/lin/security-broken.svg b/src/browser/themes/shared/zen-icons/lin/security-broken.svg
index 06097d2ea..86396585e 100644
--- 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/.
-
+
diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs
index 04304dec0..0ce977d6d 100644
--- 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
+ );
});
}
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index 3d3482ed1..a216a1482 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/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 {
+}
diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css
index f5de08932..31058262f 100644
--- 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,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,
diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css
index 740b944f4..f77bf2ef4 100644
--- 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 {
@@ -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;
+}
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 0012ebfd6..614785823 100644
--- 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 {
diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
index 0bb8d1ba5..e917b33c3 100644
--- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
+++ b/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(`
-
-
+
+
`);
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');
- const { switchToTabHavingURI } = this.window;
- switchToTabHavingURI(amoUrl, true);
+ 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;
}
}