mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-02 16:08:41 +00:00
feat: Implement site security section, b=no-bug, c=common, tabs
This commit is contained in:
@@ -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
|
@@ -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.
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
|
@@ -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 {
|
||||
}
|
||||
|
@@ -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,
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -978,9 +978,6 @@
|
||||
& #PanelUI-button {
|
||||
order: -2;
|
||||
}
|
||||
& #unified-extensions-button {
|
||||
order: -1;
|
||||
}
|
||||
}
|
||||
|
||||
& #zen-sidebar-top-buttons-customization-target {
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user