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

This commit is contained in:
Mr. M
2025-10-02 17:04:30 +02:00
parent f098ff9ddf
commit c701a24db5
12 changed files with 251 additions and 19 deletions

View File

@@ -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

View File

@@ -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.

View File

@@ -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>

View File

@@ -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>

View File

@@ -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;
}
}

View File

@@ -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>

View File

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

View File

@@ -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 {
}

View File

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

View File

@@ -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;
}

View File

@@ -978,9 +978,6 @@
& #PanelUI-button {
order: -2;
}
& #unified-extensions-button {
order: -1;
}
}
& #zen-sidebar-top-buttons-customization-target {

View File

@@ -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">
<image id="zen-site-data-icon"/>
<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();
@@ -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;
}
}