mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-07 18:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: New site data popup, p=#10651

Browse Source
This commit is contained in:
mr. m
2025-10-05 18:56:41 +02:00
committed by GitHub
parent e340923623
commit 3ac31a96a6
33 changed files with 1393 additions and 681 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
locales/en-US/browser/browser/zen-general.ftl
View File

@@ -49,6 +49,9 @@ zen-library-sidebar-workspaces =
zen-library-sidebar-mods =
.label = Mods
zen-toggle-compact-mode-button =
.tooltiptext = Toggle Compact Mode
# note: Do not translate the "<br/>" tags in the following string
zen-learn-more-text = Learn More
@@ -64,3 +67,24 @@ zen-icons-picker-svg =
.label = Icons
urlbar-search-mode-zen_actions = Actions
zen-site-data-settings = Settings
zen-generic-manage = Manage
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

11
locales/en-US/browser/browser/zen-vertical-tabs.ftl
View File

@@ -3,20 +3,9 @@ zen-toolbar-context-tabs-right =
.label = Tabs on the right
.accesskey = R
zen-toolbar-context-compact-mode =
.label = Compact mode
.accesskey = C
zen-toolbar-context-compact-mode-enable =
.label = Enable compact mode
.accesskey = D
zen-toolbar-context-compact-mode-just-tabs =
.label = Hide sidebar
zen-toolbar-context-compact-mode-just-toolbar =
.label = Hide toolbar
zen-toolbar-context-compact-mode-hide-both =
.label = Hide both
.accesskey = H
zen-toolbar-context-new-folder =
.label = New Folder
.accesskey = N

6
prefs/compact-mode.yaml
View File

@@ -2,12 +2,6 @@
# 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/.
- name: zen.view.compact.hide-tabbar
value: true
- name: zen.view.compact.hide-toolbar
value: false
- name: zen.view.compact.toolbar-flash-popup
value: false

2
prefs/folders.yaml
View File

@@ -6,7 +6,7 @@
value: true
- name: zen.folders.search.hover-delay
value: 1000 # ms
value: 900 # ms
- name: zen.folders.max-subfolders
value: 5

3
prefs/zen-urlbar.yaml
View File

@@ -8,6 +8,9 @@
- name: zen.urlbar.show-protections-icon
value: false
- name: zen.urlbar.show-contextual-id
value: false
- name: zen.urlbar.behavior
value: floating-on-type

37
src/browser/base/content/browser-addons-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js
index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd693f1f1135 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,7 +20,38 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
},
};
@@ -2608,7 +2608,7 @@ var gUnifiedExtensions = {
@@ -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.
if (!this._panel) {
- let template = document.getElementById(
- "unified-extensions-panel-template"
- );
- template.replaceWith(template.content);
- this._panel = document.getElementById("unified-extensions-panel");
+ this._panel = document.getElementById("zen-unified-site-data-panel");
let customizationArea = this._panel.querySelector(
"#unified-extensions-area"
);
@@ -2608,7 +2604,7 @@ var gUnifiedExtensions = {
this.recordButtonTelemetry(reason || "extensions_panel_showing");
this.ensureButtonShownBeforeAttachingPanel(panel);
PanelMultiView.openPopup(panel, this._button, {
@@ -29,7 +60,7 @@ index d7542a38a0242dd9c9c6390171d59992d75a0c19..d20e5a9fa42c88c7ba28fac1ef13dd69
triggerEvent: aEvent,
});
}
@@ -2795,18 +2795,20 @@ var gUnifiedExtensions = {
@@ -2795,18 +2791,20 @@ var gUnifiedExtensions = {
this._maybeMoveWidgetNodeBack(widgetId);
}

12
src/browser/base/content/browser-pageActions-js.patch Normal file
View File

@@ -0,0 +1,12 @@
diff --git a/browser/base/content/browser-pageActions.js b/browser/base/content/browser-pageActions.js
index 00da33bc11189db17b6a2e656acb3a778531197c..9571155baccad9a886cbe9c7bf0bd76a135331c4 100644
--- a/browser/base/content/browser-pageActions.js
+++ b/browser/base/content/browser-pageActions.js
@@ -451,6 +451,7 @@ var BrowserPageActions = {
),
document.getElementById(this.mainButtonNode.id),
document.getElementById("identity-icon"),
+ document.getElementById("zen-site-data-icon-button"),
];
for (let node of potentialAnchorNodes) {
if (node && !node.hidden) {

38
src/browser/base/content/navigator-toolbox-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.js b/browser/base/content/navigator-toolbox.js
index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e71604425 100644
index 413bad2a62058a1c434d6a44e927e44eb397289d..472eab5d3bca2bc665920707a71105167cbe75ec 100644
--- a/browser/base/content/navigator-toolbox.js
+++ b/browser/base/content/navigator-toolbox.js
@@ -8,7 +8,7 @@
@@ -11,6 +11,24 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
const widgetOverflow = document.getElementById("widget-overflow");
function onPopupShowing(event) {
@@ -110,7 +110,7 @@ document.addEventListener(
#pageActionButton,
#downloads-button,
#fxa-toolbar-menu-button,
- #unified-extensions-button,
+ #zen-site-data-icon-button,
#library-button
`);
if (!element) {
@@ -138,7 +138,7 @@ document.addEventListener(
gSync.toggleAccountPanel(element, event);
break;
- case "unified-extensions-button":
+ case "zen-site-data-icon-button":
gUnifiedExtensions.togglePanel(event);
break;
@@ -187,6 +187,7 @@ document.addEventListener(
#reload-button ,
#urlbar-go-button,
@@ -27,3 +45,21 @@ index 413bad2a62058a1c434d6a44e927e44eb397289d..b621c586e679bb8686fe9a5e6743512e
gBrowser.handleNewTabMiddleClick(element, event);
break;
@@ -317,7 +319,7 @@ document.addEventListener(
#pageActionButton,
#downloads-button,
#fxa-toolbar-menu-button,
- #unified-extensions-button,
+ #zen-site-data-icon-button,
#library-button
`);
if (!element) {
@@ -396,7 +398,7 @@ document.addEventListener(
gSync.toggleAccountPanel(element, event);
break;
- case "unified-extensions-button":
+ case "zen-site-data-icon-button":
gUnifiedExtensions.togglePanel(event);
break;

5
src/browser/base/content/zen-commands.inc.xhtml
View File

@@ -5,10 +5,7 @@
<commandset id="zenCommandSet">
<command id="cmd_zenCompactModeToggle" />
<command id="cmd_zenCompactModeShowSidebar" />
<command id="cmd_zenCompactModeShowToolbar" />
<command id="cmd_zenCompactModeHideSidebar" />
<command id="cmd_zenCompactModeHideToolbar" />
<command id="cmd_zenCompactModeHideBoth" />
<command id="cmd_toggleCompactModeIgnoreHover" />
<command id="cmd_zenWorkspaceForward" />
<command id="cmd_zenWorkspaceBackward" />

9
src/browser/base/content/zen-panels/popups.inc
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>

87
src/browser/base/content/zen-panels/site-data.inc Normal file
View File

@@ -0,0 +1,87 @@
# 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/.
<panel id="zen-unified-site-data-panel"
role="group"
type="arrow"
noautofocus="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
# to change the functionality of this view
<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"
flex="1"
closemenu="none" />
<toolbarbutton id="zen-site-data-header-reader-mode"
command="View:ReaderView"
flex="1" />
<toolbarbutton id="zen-site-data-header-screenshot"
command="Browser:Screenshot"
flex="1" />
<toolbarbutton id="zen-site-data-header-bookmark"
command="Browser:AddBookmarkAs"
flex="1" />
</hbox>
<vbox class="zen-site-data-section">
<hbox class="zen-site-data-section-header">
<label data-l10n-id="unified-extensions-header-title" flex="1" />
<label data-l10n-id="zen-generic-manage" id="zen-site-data-manage-addons" />
</hbox>
<hbox class="panel-subview-body" context="unified-extensions-context-menu" id="zen-site-data-addons">
<html:div id="unified-extensions-messages-container">
<!-- messages will be inserted here -->
</html:div>
<vbox id="overflowed-extensions-list">
<!-- overflowed extension buttons from the nav-bar will go here -->
</vbox>
<vbox id="unified-extensions-area">
<!-- default area for extension browser action buttons -->
</vbox>
<vbox class="unified-extensions-list">
<!-- active visible extensions go here -->
</vbox>
<vbox id="zen-site-data-new-addon-button-container">
<toolbarbutton id="zen-site-data-new-addon-button"
class="subviewbutton toolbarbutton-1" />
</vbox>
</hbox>
# Keep this button on the DOM even though we hide it for ever,
# again, to keep firefox happy if they decide to change functionality
# for this specific button / id
<toolbarbutton id="unified-extensions-manage-extensions"
class="subviewbutton panel-subview-footer-button unified-extensions-manage-extensions"
data-l10n-id="unified-extensions-manage-extensions"
hidden="true" />
</vbox>
<vbox class="zen-site-data-section">
<hbox class="zen-site-data-section-header">
<label data-l10n-id="zen-site-data-settings" flex="1" />
<label data-l10n-id="zen-generic-more" id="zen-site-data-settings-more" />
</hbox>
<vbox id="zen-site-data-settings-list">
<!-- 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>

1
src/browser/base/content/zen-popupset.inc.xhtml
View File

@@ -5,5 +5,6 @@
#include zen-panels/gradient-generator.inc
#include zen-panels/emojis-picker.inc
#include zen-panels/folders-search.inc
#include zen-panels/site-data.inc
#include zen-panels/popups.inc

11
src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/customizableui/CustomizableUI.sys.mjs b/browser/components/customizableui/CustomizableUI.sys.mjs
index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0ade05e3b 100644
index 4f62449d670701c77c681ae36e00bae8bf2f636c..ac542f33927f9de9040bab9cd98351a4d74ede4e 100644
--- a/browser/components/customizableui/CustomizableUI.sys.mjs
+++ b/browser/components/customizableui/CustomizableUI.sys.mjs
@@ -14,6 +14,7 @@ ChromeUtils.defineESModuleGetters(lazy, {
@@ -10,6 +10,15 @@ index 4f62449d670701c77c681ae36e00bae8bf2f636c..132c77e396cb259181ed13ca8ff784e0
HomePage: "resource:///modules/HomePage.sys.mjs",
PanelMultiView:
"moz-src:///browser/components/customizableui/PanelMultiView.sys.mjs",
@@ -323,7 +324,7 @@ var CustomizableUIInternal = {
{
type: CustomizableUI.TYPE_PANEL,
defaultPlacements: [],
- anchor: "unified-extensions-button",
+ anchor: "zen-site-data-icon-button",
},
false
);
@@ -333,19 +334,14 @@ var CustomizableUIInternal = {
"back-button",
"forward-button",

42
src/browser/components/preferences/zen-settings.js
View File

@@ -648,8 +648,6 @@ var gZenLooksAndFeel = {
Services.prefs.removeObserver(pref, this);
}
});
this.setCompactModeStyle();
this.applySidebarLayout();
},
@@ -696,41 +694,6 @@ var gZenLooksAndFeel = {
});
}
},
setCompactModeStyle() {
const chooser = document.getElementById('zen-compact-mode-styles-form');
const radios = [...chooser.querySelectorAll('input')];
let value = '';
if (
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false) &&
Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false)
) {
value = 'both';
} else {
value = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ? 'left' : 'top';
}
chooser.querySelector(`[value='${value}']`).checked = true;
for (let radio of radios) {
radio.addEventListener('change', (e) => {
let value = e.target.value;
switch (value) {
case 'left':
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
break;
case 'top':
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
default:
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
break;
}
});
}
},
};
/* eslint-disable no-unused-vars */
@@ -1075,11 +1038,6 @@ var gZenCKSSettings = {
};
Preferences.addAll([
{
id: 'zen.view.compact.hide-toolbar',
type: 'bool',
default: false,
},
{
id: 'zen.view.compact.toolbar-flash-popup',
type: 'bool',

37
src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
View File

@@ -56,43 +56,6 @@
<label><html:h2 data-l10n-id="zen-look-and-feel-compact-view-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-look-and-feel-compact-view-description" />
<html:div id="ZenCompactModeStyle">
<form xmlns="http://www.w3.org/1999/xhtml" autocomplete="off" id="zen-compact-mode-styles-form">
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" left="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="left" data-l10n-id="preferences-web-appearance-choice-input-auto"
/><span data-l10n-id="zen-compact-mode-styles-left" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" top="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="top" data-l10n-id="preferences-web-appearance-choice-input-light"
/><span data-l10n-id="zen-compact-mode-styles-top" />
</div>
</label>
<label class="web-appearance-choice">
<div class="web-appearance-choice-image-container">
<div class="zen-compact-mode-styles-browser-wrapper" both="">
<div></div>
</div>
</div>
<div class="web-appearance-choice-footer">
<input type="radio" name="web-appearance" value="both" data-l10n-id="preferences-web-appearance-choice-input-dark"
/><span data-l10n-id="zen-compact-mode-styles-both" />
</div>
</label>
</form>
</html:div>
<vbox class="indent">
<checkbox id="zenLooksAndFeelEnableToolbarFlashPopup"
data-l10n-id="zen-look-and-feel-compact-toolbar-flash-popup"

32
src/browser/themes/shared/preferences/zen-preferences.css
View File

@@ -156,38 +156,6 @@ groupbox h2 {
margin-bottom: 15px;
}
#zen-compact-mode-styles-form {
display: flex;
justify-content: space-between;
gap: var(--space-large);
margin-top: 5px;
& .web-appearance-choice-image-container {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
background: color-mix(in srgb, var(--zen-colors-tertiary) 50%, transparent 50%);
}
}
@media -moz-pref('zen.view.use-single-toolbar') {
#zen-compact-mode-styles-form {
display: none;
}
}
#zen-expand-tabbar-strat {
display: flex;
flex-direction: column;
}
#zen-expand-tabbar-strat > hbox {
margin-top: 10px;
}
#category-zen-looks > .category-icon {
list-style-image: url('chrome://browser/skin/customize.svg');
}

92
src/browser/themes/shared/zen-icons/icons.css
View File

@@ -54,7 +54,8 @@
}
#sidebar-button:-moz-locale-dir(ltr):not([positionend]),
#sidebar-button:-moz-locale-dir(rtl)[positionend] {
#sidebar-button:-moz-locale-dir(rtl)[positionend],
#zen-toggle-compact-mode {
list-style-image: url('chrome://browser/skin/sidebars.svg') !important;
}
@@ -74,7 +75,8 @@
}
#appMenu-zoom-controls,
#PanelUI-zen-gradient-generator-color-add {
#PanelUI-zen-gradient-generator-color-add,
#zen-site-data-new-addon-button {
list-style-image: url('plus.svg') !important;
}
@@ -213,7 +215,8 @@
.search-setting-button > .button-box > .button-icon,
#appMenu-settings-button,
#PanelUI-zen-profiles-managePrfs,
.unified-extensions-item-open-menu.subviewbutton {
.unified-extensions-item-open-menu.subviewbutton,
.zen-site-data-permission-icon {
list-style-image: url('settings.svg') !important;
}
@@ -263,6 +266,7 @@
}
#bookmarks-menu-button,
#zen-site-data-header-bookmark,
#appMenu-bookmarks-button,
#sidebar-switcher-bookmarks,
#appMenu-library-bookmarks-button,
@@ -407,7 +411,8 @@
list-style-image: url('customize.svg') !important;
}
#zen-copy-current-url-button {
#zen-copy-current-url-button,
#zen-site-data-header-share {
list-style-image: url('share.svg');
}
@@ -466,8 +471,20 @@
}
/* permissions */
#permissions-granted-icon {
list-style-image: url('permissions.svg') !important;
#identity-permission-box,
#identity-box:not([pageproxystate='invalid']) #identity-icon-box,
#identity-box[pageproxystate='invalid'] #zen-site-data-icon-button {
display: none !important;
}
#zen-site-data-icon-button {
padding: 0 6px;
& image {
list-style-image: url('permissions.svg');
-moz-context-properties: fill, fill-opacity;
pointer-events: none;
}
}
.geo-icon {
@@ -495,7 +512,8 @@
list-style-image: url('desktop-notification-blocked.svg') !important;
}
.camera-icon {
.camera-icon,
#zen-site-data-header-screenshot {
list-style-image: url('camera.svg') !important;
}
@@ -558,7 +576,8 @@
list-style-image: url('midi.svg') !important;
}
.install-icon {
.install-icon,
.zen-permission-extension-icon {
list-style-image: url('extension.svg') !important;
}
@@ -598,7 +617,8 @@
background-image: url('stop-to-reload.svg') !important;
}
#reader-mode-button > .urlbar-icon {
#reader-mode-button > .urlbar-icon,
#zen-site-data-header-reader-mode {
list-style-image: url('reader-mode.svg') !important;
}
@@ -811,3 +831,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
src/browser/themes/shared/zen-icons/lin/security-broken.svg
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>

16
src/zen/common/ZenCustomizableUI.sys.mjs
View File

@@ -67,6 +67,10 @@ export var ZenCustomizableUI = new (class {
addon-webext-overflowtarget="overflowed-extensions-list"
mode="icons">
<hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
<toolbarbutton id="zen-toggle-compact-mode"
class="toolbarbutton-1"
command="cmd_toggleCompactModeIgnoreHover"
data-l10n-id="zen-toggle-compact-mode-button" />
<html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
</hbox>
</toolbar>
@@ -106,12 +110,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
);
});
}

46
src/zen/common/ZenUIManager.mjs
View File

@@ -1,6 +1,11 @@
// 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/.
ChromeUtils.defineESModuleGetters(this, {
nsZenSiteDataPanel: 'resource:///modules/ZenSiteDataPanel.sys.mjs',
});
var gZenUIManager = {
_popupTrackingElements: [],
_hoverPausedForExpand: false,
@@ -14,19 +19,6 @@ var gZenUIManager = {
init() {
document.addEventListener('popupshowing', this.onPopupShowing.bind(this));
document.addEventListener('popuphidden', this.onPopupHidden.bind(this));
XPCOMUtils.defineLazyPreferenceGetter(
this,
'contentElementSeparation',
'zen.theme.content-element-separation',
0
);
XPCOMUtils.defineLazyPreferenceGetter(this, 'urlbarWaitToClear', 'zen.urlbar.wait-to-clear', 0);
XPCOMUtils.defineLazyPreferenceGetter(
this,
'urlbarShowDomainOnly',
'zen.urlbar.show-domain-only-in-sidebar',
true
);
document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);
@@ -44,6 +36,8 @@ var gZenUIManager = {
return document.getElementById('zen-toast-container');
});
window.gZenSiteDataPanel = new nsZenSiteDataPanel(window);
gURLBar._zenTrimURL = this.urlbarTrim.bind(this);
new ResizeObserver(
@@ -596,6 +590,26 @@ var gZenUIManager = {
},
};
XPCOMUtils.defineLazyPreferenceGetter(
gZenUIManager,
'contentElementSeparation',
'zen.theme.content-element-separation',
0
);
XPCOMUtils.defineLazyPreferenceGetter(
gZenUIManager,
'urlbarWaitToClear',
'zen.urlbar.wait-to-clear',
0
);
XPCOMUtils.defineLazyPreferenceGetter(
gZenUIManager,
'urlbarShowDomainOnly',
'zen.urlbar.show-domain-only-in-sidebar',
true
);
var gZenVerticalTabsManager = {
init() {
this._multiWindowFeature = new nsZenMultiWindowFeature();
@@ -1034,6 +1048,11 @@ var gZenVerticalTabsManager = {
) {
topButtons.prepend(windowButtons);
}
if (!isSingleToolbar && isCompactMode) {
navBar.prepend(topButtons);
}
// Case: single toolbar, compact mode, right side and windows styled buttons
if (isSingleToolbar && isCompactMode && isRightSide && this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
@@ -1072,7 +1091,6 @@ var gZenVerticalTabsManager = {
appContentNavbarContaienr.append(windowButtons);
}
gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
this.recalculateURLBarHeight();
// Always move the splitter next to the sidebar

8
src/zen/common/styles/zen-browser-container.css
View File

@@ -17,7 +17,13 @@
}
& browser[type='content'] {
background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
&:not([transparent='true']) {
background: light-dark(rgb(255, 255, 255), rgb(32, 32, 32));
}
&[transparent='true'] {
background: light-dark(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}
}
@media not -moz-pref('layout.css.prefers-color-scheme.content-override', 2) {

76
src/zen/common/styles/zen-omnibox.css
View File

@@ -120,6 +120,21 @@
border-radius: 10px !important;
}
}
.identity-box-button {
opacity: 0;
transition:
opacity 0.2s,
visibility 0.2s;
visibility: collapse;
#navigator-toolbox:hover &,
&[open],
#identity-box[pageproxystate='invalid'] & {
opacity: 1;
visibility: visible;
}
}
}
.urlbar-page-action,
@@ -220,24 +235,14 @@
}
:root[zen-single-toolbar='true'] {
--urlbar-icon-border-radius: 10px !important;
--urlbar-icon-border-radius: 8px !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-box:not([pageproxystate='invalid']):not(.notSecure) #identity-icon-box:not([open]) {
margin-inline-start: calc(-8px - 2 * var(--urlbar-icon-padding));
transform: translateX(100%);
opacity: 0;
:root:not([supress-primary-adjustment]) & {
transition: all 0.1s ease;
}
}
#identity-permission-box > *:not(#permissions-granted-icon) {
#identity-permission-box > *:not(#zen-site-data-icon-button) {
visibility: collapse;
}
@@ -245,25 +250,7 @@
display: none;
}
#urlbar[open]
:is(#tracking-protection-icon-container, .urlbar-page-action, .identity-box-button):not(
[hidden]
):not(#identity-permission-box),
#urlbar:hover #identity-icon-box {
opacity: 1 !important;
margin-inline-start: 0 !important;
transform: none !important;
display: flex;
#urlbar:not(:hover) & {
transition: none;
}
}
#urlbar:not([open]) #userContext-icons {
margin-inline: 0;
}
#urlbar:not([open]) {
#urlbar:not([breakout-extend='true']) {
#identity-box:not([pageproxystate='invalid']) {
order: 2;
}
@@ -335,10 +322,6 @@
}
@container urlbar-container (width < 350px) {
#userContext-icons {
transition: all 0.1s ease;
}
#userContext-label {
display: none;
}
@@ -346,12 +329,6 @@
#userContext-indicator {
margin-inline-end: 4px;
}
#urlbar:hover:not([breakout-extend='true']) #userContext-icons {
margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)) !important;
opacity: 0;
pointer-events: none;
}
}
#notification-popup-box {
@@ -683,3 +660,18 @@
font-weight: 600;
padding: 0px;
}
/* These are buttons that we dont need to be
* displayed anymore, since now zen displays
* them into a single, unified button */
#reader-mode-button,
#urlbar-go-button,
#star-button-box {
display: none !important;
}
@media not -moz-pref('zen.urlbar.show-contextual-id') {
#userContext-icons {
display: none !important;
}
}

15
src/zen/common/styles/zen-popup.css
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,12 +227,8 @@ panel {
.permission-popup-permission-item,
#permission-popup-storage-access-permission-list-header {
margin-block: var(--uc-permission-item-margin-block);
}
.permission-popup-permission-label,
.permission-popup-permission-header-label {
margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline);
padding-block: 4px;
margin-block: 0px;
}
#editBookmarkPanel > #editBookmarkHeaderSeparator,
@@ -241,12 +236,6 @@ panel {
margin-inline: 0;
}
#identity-popup-mainView > toolbarseparator:first-child,
#unified-extensions-view > toolbarseparator:first-child {
display: none;
opacity: 0;
}
menupopup,
panel {
box-shadow: none;

276
src/zen/common/styles/zen-single-components.css
View File

@@ -190,6 +190,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 {
@@ -262,3 +277,264 @@ body > #confetti {
#customization-container {
--toolbar-bgcolor: var(--zen-dialog-background);
}
/* Site Data popup */
#zen-unified-site-data-panel {
--panel-padding: 0px;
--panel-width: 228px;
--menu-panel-width-wide: calc(var(--panel-width) - var(--panel-padding) * 2);
--uei-icon-size: 14px;
--arrowpanel-menuitem-border-radius: 10px;
}
#unified-extensions-messages-container {
display: none;
}
#zen-site-data-addons {
display: flex;
flex-wrap: wrap;
gap: 8px;
overflow: visible;
.unified-extensions-item-name,
.unified-extensions-item-message,
.unified-extensions-item-message-hover,
.unified-extensions-item-message-hover-menu-button,
.unified-extensions-item-menu-button {
display: none;
}
#overflowed-extensions-list,
#unified-extensions-area,
.unified-extensions-list,
#zen-site-data-new-addon-button-container {
display: contents;
&:empty {
display: none;
}
& > * {
background-color: color-mix(in srgb, currentcolor 6%, transparent);
width: 46px;
height: 34px;
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 {
background: transparent !important;
}
& .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: 6px;
padding: 8px;
}
.zen-site-data-section-header {
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;
padding: 0px 4px;
.zen-site-data-section:hover & {
opacity: 0.8;
}
}
}
#zen-site-data-new-addon-button .toolbarbutton-text {
display: none;
}
.permission-popup-permission-item {
gap: 8px;
overflow: hidden;
align-items: center;
}
.permission-popup-permission-label {
margin: 0px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.permission-popup-permission-icon {
fill: var(--button-primary-color);
padding: 8px;
width: 34px;
height: 34px;
overflow: visible;
position: relative;
appearance: none;
& label {
display: none;
}
& image {
-moz-context-properties: fill;
z-index: 1;
}
&::before {
content: '';
position: absolute;
inset: 1px;
border-radius: 99px;
width: 32px;
height: 32px;
background: var(--button-primary-bgcolor);
opacity: 0.6;
transition:
transform 0.12s ease-in-out,
opacity 0.12s ease-in-out;
}
.permission-popup-permission-item:hover &::before {
transform: scale(1.05);
}
.permission-popup-permission-item:active:hover &::before {
transform: scale(0.95);
}
.permission-popup-permission-item[state='allow'] &::before {
opacity: 1;
}
}
.zen-permission-popup-permission-state-label {
opacity: 0.8;
font-size: smaller;
font-weight: 400;
margin: 0;
}
#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;
}
#zen-site-data-header {
gap: 6px;
align-items: center;
padding: 8px;
padding-bottom: 0;
& toolbarbutton {
margin: 0;
appearance: none;
-moz-context-properties: fill;
fill: currentColor;
color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
padding: 8px 0px;
position: relative;
&[disabled] {
opacity: 0.5;
pointer-events: none;
}
& .toolbarbutton-text {
display: none;
}
& image {
width: 18px;
pointer-events: none;
z-index: 1;
}
&::before {
content: '';
position: absolute;
inset: 1px;
background: linear-gradient(
to bottom,
color-mix(
in srgb,
light-dark(rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.3)) 15%,
transparent 100%
),
color-mix(
in srgb,
light-dark(rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.8)) 100%,
transparent 100%
)
);
transition: transform 0.12s ease-in-out;
box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.1);
border-radius: 6px;
--base-border-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1));
border: 1px solid;
border-top-color: light-dark(var(--base-border-color), rgba(255, 255, 255, 0.12));
border-left-color: light-dark(var(--base-border-color), transparent);
border-right-color: light-dark(var(--base-border-color), transparent);
border-bottom-color: light-dark(var(--base-border-color), rgba(0, 0, 0, 0.12));
will-change: transform;
}
&.active {
color: var(--button-primary-color);
&::before {
background: var(--button-primary-bgcolor);
}
}
&:hover::before {
transform: scale(1.03);
}
&:active:hover::before {
transform: scale(0.97);
}
}
}

13
src/zen/common/zen-sets.js
View File

@@ -17,17 +17,8 @@ document.addEventListener(
case 'cmd_zenCompactModeShowSidebar':
gZenCompactModeManager.toggleSidebar();
break;
case 'cmd_zenCompactModeHideSidebar':
gZenCompactModeManager.hideSidebar();
break;
case 'cmd_zenCompactModeHideToolbar':
gZenCompactModeManager.hideToolbar();
break;
case 'cmd_zenCompactModeHideBoth':
gZenCompactModeManager.hideBoth();
break;
case 'cmd_zenCompactModeShowToolbar':
gZenCompactModeManager.toggleToolbar();
case 'cmd_toggleCompactModeIgnoreHover':
gZenCompactModeManager.toggle(true);
break;
case 'cmd_zenWorkspaceForward':
gZenWorkspaces.changeWorkspaceShortcut();

104
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -115,6 +115,7 @@ var gZenCompactModeManager = {
// We wont do anything with it anyway, so we remove it
delete this._wasInCompactMode;
}
delete this._ignoreNextHover;
// We dont want the user to be able to spam the button
return;
}
@@ -173,47 +174,12 @@ var gZenCompactModeManager = {
addContextMenu() {
const fragment = window.MozXULElement.parseXULToFragment(`
<menu id="zen-context-menu-compact-mode" data-l10n-id="zen-toolbar-context-compact-mode">
<menupopup>
<menuitem id="zen-context-menu-compact-mode-toggle" data-l10n-id="zen-toolbar-context-compact-mode-enable" type="checkbox" command="cmd_zenCompactModeToggle"/>
<menuseparator/>
<menuitem id="zen-context-menu-compact-mode-hide-sidebar" data-l10n-id="zen-toolbar-context-compact-mode-just-tabs" type="radio" command="cmd_zenCompactModeHideSidebar"/>
<menuitem id="zen-context-menu-compact-mode-hide-toolbar" data-l10n-id="zen-toolbar-context-compact-mode-just-toolbar" type="radio" command="cmd_zenCompactModeHideToolbar"/>
<menuitem id="zen-context-menu-compact-mode-hide-both" data-l10n-id="zen-toolbar-context-compact-mode-hide-both" type="radio" command="cmd_zenCompactModeHideBoth"/>
</menupopup>
</menu>
<menuitem id="zen-context-menu-compact-mode-toggle" data-l10n-id="zen-toolbar-context-compact-mode-enable" type="checkbox" command="cmd_zenCompactModeToggle"/>
`);
document.getElementById('viewToolbarsMenuSeparator').before(fragment);
this.updateContextMenu();
},
updateCompactModeContext(isSingleToolbar) {
const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
const menu = document.getElementById('zen-context-menu-compact-mode');
if (isSingleToolbar) {
menu.setAttribute('hidden', 'true');
menu.before(menuitem);
} else {
menu.removeAttribute('hidden');
menu.querySelector('menupopup').prepend(menuitem);
}
},
hideSidebar() {
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false);
},
hideToolbar() {
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false);
},
hideBoth() {
Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true);
Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true);
},
addEventListener(callback) {
this._evenListeners.push(callback);
},
@@ -281,13 +247,6 @@ var gZenCompactModeManager = {
return sidebarWidth;
},
get canHideSidebar() {
return (
Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') ||
gZenVerticalTabsManager._hasSetSingleToolbar
);
},
animateCompactMode() {
// Get the splitter width before hiding it (we need to hide it before animating on right)
document.documentElement.setAttribute('zen-compact-animating', 'true');
@@ -297,7 +256,6 @@ var gZenCompactModeManager = {
.getElementById('zen-sidebar-splitter')
.getBoundingClientRect().width;
const isCompactMode = this.preference;
const canHideSidebar = this.canHideSidebar;
let canAnimate =
lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && !this.isSidebarPotentiallyOpen();
if (typeof this._wasInCompactMode !== 'undefined') {
@@ -308,6 +266,9 @@ var gZenCompactModeManager = {
if (canAnimate) {
this.sidebar.setAttribute('animate', 'true');
}
if (this._ignoreNextHover) {
this.sidebar.removeAttribute('zen-has-hover');
}
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transform');
@@ -325,7 +286,7 @@ var gZenCompactModeManager = {
resolve();
return;
}
if (canHideSidebar && isCompactMode) {
if (isCompactMode) {
if (document.documentElement.hasAttribute('zen-sidebar-expanded')) {
sidebarWidth -= 0.5 * splitterWidth;
if (elementSeparation < splitterWidth) {
@@ -335,20 +296,19 @@ var gZenCompactModeManager = {
} else {
sidebarWidth -= elementSeparation;
}
this.sidebar.style.marginRight = '0px';
this.sidebar.style.marginLeft = '0px';
this.sidebar.removeAttribute('zen-has-hover');
gZenUIManager.motion
.animate(
this.sidebar,
{
marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
marginRight: [0, this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0],
marginLeft: [0, this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`],
},
{
ease: 'easeIn',
type: 'spring',
bounce: 0,
duration: 0.15,
duration: 0.12,
}
)
.then(() => {
@@ -365,6 +325,12 @@ var gZenCompactModeManager = {
this._ignoreNextResize = true;
setTimeout(() => {
if (this._ignoreNextHover) {
setTimeout(() => {
delete this._ignoreNextHover;
});
}
this.sidebar.style.removeProperty('margin-right');
this.sidebar.style.removeProperty('margin-left');
this.sidebar.style.removeProperty('transition');
@@ -375,11 +341,12 @@ var gZenCompactModeManager = {
titlebar.style.removeProperty('transition');
gURLBar.textbox.style.removeProperty('visibility');
resolve();
});
});
});
} else if (canHideSidebar && !isCompactMode) {
} else {
document.getElementById('browser').style.overflow = 'clip';
if (this.sidebarIsOnRight) {
this.sidebar.style.marginRight = `-${sidebarWidth}px`;
@@ -399,7 +366,7 @@ var gZenCompactModeManager = {
ease: 'easeOut',
type: 'spring',
bounce: 0,
duration: 0.15,
duration: 0.12,
}
)
.then(() => {
@@ -415,9 +382,6 @@ var gZenCompactModeManager = {
resolve();
});
});
} else {
this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
document.documentElement.removeAttribute('zen-compact-animating');
}
});
});
@@ -427,15 +391,6 @@ var gZenCompactModeManager = {
document
.getElementById('zen-context-menu-compact-mode-toggle')
.setAttribute('checked', this.preference);
const hideTabBar = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar', false);
const hideToolbar = Services.prefs.getBoolPref('zen.view.compact.hide-toolbar', false);
const hideBoth = hideTabBar && hideToolbar;
const idName = 'zen-context-menu-compact-mode-hide-';
document.getElementById(idName + 'sidebar').setAttribute('checked', !hideBoth && hideTabBar);
document.getElementById(idName + 'toolbar').setAttribute('checked', !hideBoth && hideToolbar);
document.getElementById(idName + 'both').setAttribute('checked', hideBoth);
},
_removeOpenStateOnUnifiedExtensions() {
@@ -448,7 +403,9 @@ var gZenCompactModeManager = {
}
},
toggle() {
toggle(ignoreHover = false) {
// Only ignore the next hover when we are enabling compact mode
this._ignoreNextHover = ignoreHover && !this.preference;
return (this.preference = !this.preference);
},
@@ -551,7 +508,8 @@ var gZenCompactModeManager = {
window.requestAnimationFrame(() => {
if (
document.documentElement.getAttribute('supress-primary-adjustment') === 'true' ||
this._hasHoveredUrlbar
this._hasHoveredUrlbar ||
this._ignoreNextHover
) {
return;
}
@@ -596,7 +554,8 @@ var gZenCompactModeManager = {
event.explicitOriginalTarget.closest('#urlbar[zen-floating-urlbar]') ||
(document.documentElement.getAttribute('supress-primary-adjustment') === 'true' &&
gZenVerticalTabsManager._hasSetSingleToolbar) ||
this._hasHoveredUrlbar
this._hasHoveredUrlbar ||
this._ignoreNextHover
) {
return;
}
@@ -682,11 +641,6 @@ var gZenCompactModeManager = {
else return bBox.left - error < x && x < bBox.right + error;
},
toggleToolbar() {
let toolbar = document.getElementById('zen-appcontent-navbar-wrapper');
toolbar.toggleAttribute('zen-user-show');
},
_clearAllHoverStates() {
// Clear hover attributes from all hoverable elements
for (let entry of this.hoverableElements) {
@@ -699,6 +653,9 @@ var gZenCompactModeManager = {
},
isSidebarPotentiallyOpen() {
if (this._ignoreNextHover) {
this.sidebar.removeAttribute('zen-has-hover');
}
return (
this.sidebar.hasAttribute('zen-user-show') ||
this.sidebar.hasAttribute('zen-has-hover') ||
@@ -713,8 +670,7 @@ var gZenCompactModeManager = {
!this.isSidebarPotentiallyOpen() &&
this._canShowBackgroundTabToast &&
!gZenGlanceManager._animating &&
!this._nextTimeWillBeActive &&
this.canHideSidebar
!this._nextTimeWillBeActive
) {
gZenUIManager.showToast('zen-background-tab-opened-toast', {
button: {

578
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -20,7 +20,7 @@
&::before,
&::after {
outline: 1px solid rgba(255, 255, 255, .15);
outline: 1px solid rgba(255, 255, 255, 0.15);
outline-offset: -1px;
background-attachment: fixed !important;
background-size: 100vw 100vh !important;
@@ -29,7 +29,9 @@
&,
&::before,
&::after {
border-radius: calc(var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px));
border-radius: calc(
var(--zen-native-inner-radius) - var(--zen-compact-mode-no-padding-radius-fix, 0px)
);
}
}
@@ -40,366 +42,272 @@
visibility: visible;
}
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
&:not([zen-compact-animating]) {
& #zen-sidebar-splitter {
display: none !important;
&:not([zen-compact-animating]) {
& #zen-sidebar-splitter {
display: none !important;
}
#zen-tabbox-wrapper {
/* Remove extra 1px of margine we have to add to the tabbox */
margin-left: var(--zen-element-separation) !important;
margin-right: var(--zen-element-separation) !important;
}
#zen-appcontent-wrapper {
& #tabbrowser-tabbox {
margin-left: 0 !important;
}
}
#zen-sidebar-splitter {
display: none !important;
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(
var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)
) !important;
}
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
margin-left: var(--zen-element-separation) !important;
}
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
#navigator-toolbox {
--zen-toolbox-max-width: 74px !important;
--zen-compact-float: var(--zen-element-separation);
:root[zen-no-padding='true'] & {
--zen-compact-float: 10px;
--zen-compact-mode-no-padding-radius-fix: 2px;
}
#zen-tabbox-wrapper {
/* Remove extra 1px of margine we have to add to the tabbox */
margin-left: var(--zen-element-separation) !important;
margin-right: var(--zen-element-separation) !important;
}
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
#zen-appcontent-wrapper {
& #tabbrowser-tabbox {
margin-left: 0 !important;
&:not([animate='true']) {
position: fixed;
z-index: 10;
transition:
left 0.15s ease,
right 0.15s ease,
visibility 0.15s ease;
bottom: var(--zen-compact-float);
padding: 0 var(--zen-compact-float) !important;
:root[zen-single-toolbar='true'] & {
/* We add an extra offset since windows users have a border top
* in the window in order to compensate how windows renders the
* titlebar */
top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
height: calc(100% - var(--zen-compact-float));
}
:root:not([zen-single-toolbar='true']) & {
bottom: calc(var(--zen-compact-float) / 2);
height: calc(100% - var(--zen-toolbar-height));
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
#zen-sidebar-splitter {
display: none !important;
&:not([zen-right-side='true']) #nav-bar {
margin-left: 0 !important;
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
}
&:not([zen-sidebar-expanded='true']) .zen-essentials-container {
padding: 0;
}
&[zen-right-side='true'] {
& #navigator-toolbox:not([animate='true']) {
right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
}
#zen-sidebar-top-buttons-customization-target {
padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
#navigator-toolbox:not([animate='true']) #titlebar {
padding: var(--zen-toolbox-padding) !important;
:root:not([zen-sidebar-expanded='true']) & {
padding: var(--zen-toolbox-padding) 0 !important;
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
width: var(--zen-sidebar-width);
}
position: relative;
min-width: var(--zen-toolbox-min-width);
transition: visibility 0.15s; /* Same as the toolbox */
visibility: hidden;
:root[zen-sidebar-expanded='true'] & {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
&:not([zen-window-buttons-reversed='true']) #zen-appcontent-navbar-wrapper #nav-bar {
margin-left: var(--zen-element-separation) !important;
& .zen-toolbar-background {
display: flex;
}
}
&[zen-window-buttons-reversed='true'] #zen-appcontent-navbar-wrapper #nav-bar {
margin-right: var(--zen-element-separation) !important;
margin-left: calc(var(--zen-element-separation) - 3px) !important;
}
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox[zen-compact-mode-active] {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7.000000000000001%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14.000000000000002%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28.000000000000004%,
0.723104 28.999999999999996%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55.00000000000001%,
0.993837 56.00000000000001%,
0.99639 56.99999999999999%,
0.998664 57.99999999999999%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
);
--zen-compact-mode-time: 0.25s;
transition:
left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
#navigator-toolbox {
--zen-toolbox-max-width: 74px !important;
--zen-compact-float: var(--zen-element-separation);
:root[zen-no-padding='true'] & {
--zen-compact-float: 10px;
--zen-compact-mode-no-padding-radius-fix: 2px;
}
/* Initial padding for when we are animating */
padding: 0 0 0 var(--zen-toolbox-padding) !important;
&:not([animate='true']) {
position: fixed;
z-index: 10;
transition:
left 0.15s ease,
right 0.15s ease,
visibility 0.15s ease;
top: 0;
bottom: var(--zen-compact-float);
padding: 0 var(--zen-compact-float) !important;
:root[zen-single-toolbar='true'] & {
/* We add an extra offset since windows users have a border top
* in the window in order to compensate how windows renders the
* titlebar */
top: calc(var(--zen-compact-float) / 2 + var(--zen-sidebar-compact-top-offset, 0px));
height: calc(100% - var(--zen-compact-float));
:root:not([supress-primary-adjustment='true']) & {
& #titlebar {
transition: none;
visibility: visible;
}
:root:not([zen-single-toolbar='true']) & {
top: calc(var(--zen-compact-float) / -2);
height: calc(100% - var(--zen-toolbar-height));
@media -moz-pref('zen.view.compact.hide-toolbar') {
height: 100%;
}
}
& #zen-sidebar-top-buttons {
margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
&:not([zen-right-side='true']) #nav-bar {
margin-left: 0 !important;
}
}
&:not([zen-right-side='true']) #navigator-toolbox {
left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
}
/* When we have multiple toolbars and the top-toolbar is NOT being hidden,
* we need to adjust the top-padding of the toolbox to account for the
* extra toolbar height. */
@media not -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
#navigator-toolbox:not([animate='true']) {
margin-top: var(--zen-toolbar-height) !important;
}
}
}
&:not([zen-sidebar-expanded='true']) .zen-essentials-container {
padding: 0;
}
&[zen-right-side='true'] {
& #navigator-toolbox:not([animate='true']) {
right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
}
& .browserSidebarContainer {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
#navigator-toolbox:not([animate='true']) #titlebar {
padding: var(--zen-toolbox-padding) !important;
:root:not([zen-sidebar-expanded='true']) & {
padding: var(--zen-toolbox-padding) 0 !important;
max-width: calc(var(--zen-sidebar-width) - var(--zen-toolbox-padding) * 2);
width: var(--zen-sidebar-width);
}
position: relative;
min-width: var(--zen-toolbox-min-width);
transition: visibility 0.15s; /* Same as the toolbox */
visibility: hidden;
:root[zen-sidebar-expanded='true'] & {
width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
& .zen-toolbar-background {
display: flex;
}
}
#navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
#navigator-toolbox[zen-user-show],
#navigator-toolbox[zen-has-empty-tab],
#navigator-toolbox[flash-popup],
#navigator-toolbox[has-popup-menu],
#navigator-toolbox[movingtab],
&[zen-renaming-tab='true'] #navigator-toolbox,
#navigator-toolbox[zen-compact-mode-active] {
&:not([animate='true']) {
--zen-compact-mode-func: linear(
0 0%,
0.002748 1%,
0.010544 2%,
0.022757 3%,
0.038804 4%,
0.058151 5%,
0.080308 6%,
0.104828 7.000000000000001%,
0.131301 8%,
0.159358 9%,
0.188662 10%,
0.21891 11%,
0.249828 12%,
0.281172 13%,
0.312724 14.000000000000002%,
0.344288 15%,
0.375693 16%,
0.40679 17%,
0.437447 18%,
0.467549 19%,
0.497 20%,
0.525718 21%,
0.553633 22%,
0.580688 23%,
0.60684 24%,
0.632052 25%,
0.656298 26%,
0.679562 27%,
0.701831 28.000000000000004%,
0.723104 28.999999999999996%,
0.743381 30%,
0.76267 31%,
0.780983 32%,
0.798335 33%,
0.814744 34%,
0.830233 35%,
0.844826 36%,
0.858549 37%,
0.87143 38%,
0.883498 39%,
0.894782 40%,
0.905314 41%,
0.915125 42%,
0.924247 43%,
0.93271 44%,
0.940547 45%,
0.947787 46%,
0.954463 47%,
0.960603 48%,
0.966239 49%,
0.971397 50%,
0.976106 51%,
0.980394 52%,
0.984286 53%,
0.987808 54%,
0.990984 55.00000000000001%,
0.993837 56.00000000000001%,
0.99639 56.99999999999999%,
0.998664 57.99999999999999%,
1.000679 59%,
1.002456 60%,
1.004011 61%,
1.005363 62%,
1.006528 63%,
1.007522 64%,
1.008359 65%,
1.009054 66%,
1.009618 67%,
1.010065 68%,
1.010405 69%,
1.010649 70%,
1.010808 71%,
1.01089 72%,
1.010904 73%,
1.010857 74%,
1.010757 75%,
1.010611 76%,
1.010425 77%,
1.010205 78%,
1.009955 79%,
1.009681 80%,
1.009387 81%,
1.009077 82%,
1.008754 83%,
1.008422 84%,
1.008083 85%,
1.00774 86%,
1.007396 87%,
1.007052 88%,
1.00671 89%,
1.006372 90%,
1.00604 91%,
1.005713 92%,
1.005394 93%,
1.005083 94%,
1.004782 95%,
1.004489 96%,
1.004207 97%,
1.003935 98%,
1.003674 99%,
1.003423 100%
);
--zen-compact-mode-time: 0.25s;
transition:
left var(--zen-compact-mode-time) var(--zen-compact-mode-func),
right var(--zen-compact-mode-time) var(--zen-compact-mode-func);
:root:not([supress-primary-adjustment='true']) & {
& #titlebar {
transition: none;
visibility: visible;
}
left: calc(var(--zen-compact-float) / -2);
:root[zen-right-side='true'] & {
right: calc(var(--zen-compact-float) / -2);
left: auto;
}
left: calc(var(--zen-compact-float) / -2);
:root[zen-right-side='true'] & {
right: calc(var(--zen-compact-float) / -2);
left: auto;
}
}
}
}
}
@media -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
& #navigator-toolbox {
top: 0;
}
& #navigator-toolbox {
--zen-toolbox-top-align: var(--zen-element-separation);
}
& #titlebar,
& #zen-appcontent-wrapper {
margin-top: var(--zen-element-separation) !important;
}
& #zen-appcontent-wrapper {
z-index: 3 !important;
}
& #zen-appcontent-navbar-wrapper {
& .zen-toolbar-background {
display: flex;
}
--zen-compact-toolbar-offset: 5px;
position: absolute;
top: calc(-1 * var(--zen-toolbar-height) + 1px);
left: 0;
z-index: 20;
transition: all 0.15s ease;
width: 100%;
max-height: var(--zen-toolbar-height);
overflow: hidden;
& #urlbar:not([breakout-extend='true']) {
opacity: 0 !important;
}
& #zen-appcontent-navbar-container {
visibility: hidden;
box-shadow: var(--zen-big-shadow);
border-bottom-left-radius: var(--zen-border-radius);
border-bottom-right-radius: var(--zen-border-radius);
:root:not([sizemode='maximized']) & {
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
}
transition: all 0.15s ease;
width: 100%;
}
}
& #zen-appcontent-navbar-wrapper[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)),
& #zen-appcontent-navbar-wrapper[zen-user-show],
& #zen-appcontent-navbar-wrapper[has-popup-menu],
& #zen-appcontent-navbar-wrapper:has(
*:is([panelopen='true'], [open='true'], #urlbar:focus-within, [breakout-extend='true']):not(#urlbar[zen-floating-urlbar='true']):not(.zen-compact-mode-ignore)
) {
& #zen-appcontent-navbar-container {
visibility: visible !important;
}
border-top-width: 0px;
top: -1px;
overflow: initial;
max-height: unset;
& #urlbar {
opacity: 1 !important;
}
& #urlbar[breakout-extend='true']:not([zen-floating-urlbar='true']) {
top: 2px !important;
opacity: 1;
}
}
&:not([zen-single-toolbar='true']) #zen-sidebar-top-buttons {
max-width: fit-content;
:root[zen-right-side='true'] & {
order: 999;
}
}
}
/* Fix for https://github.com/zen-browser/desktop/issues/7615 */
:root[zen-compact-mode='true']:not([customizing])[inDOMFullscreen='true'] {
@media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') {
&:not([zen-compact-animating]) {
#navigator-toolbox {
opacity: 0;
}
}
}
@media -moz-pref('zen.view.compact.hide-toolbar') {
&:not([zen-single-toolbar='true']) {
& #zen-appcontent-navbar-wrapper {
opacity: 0;
}
&:not([zen-compact-animating]) {
#navigator-toolbox {
opacity: 0;
}
}
}

50
src/zen/kbs/ZenKeyboardShortcuts.mjs
View File

@@ -302,7 +302,6 @@ class KeyShortcut {
#disabled = false;
#reserved = false;
#internal = false;
#shouldBeEmpty = false;
constructor(
id,
@@ -404,16 +403,11 @@ class KeyShortcut {
}
set shouldBeEmpty(value) {
this.#shouldBeEmpty = value;
if (value) {
this.clearKeybind();
}
}
get shouldBeEmpty() {
return this.#shouldBeEmpty;
}
toXHTMLElement(window) {
let key = window.document.createXULElement('key');
return this.replaceWithChild(key);
@@ -691,17 +685,6 @@ class nsZenKeyboardShortcutsLoader {
'zen-compact-mode-shortcut-show-sidebar'
)
);
newShortcutList.push(
new KeyShortcut(
'zen-compact-mode-show-toolbar',
'T',
'',
ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
nsKeyShortcutModifiers.fromObject({ accel: true, alt: true }),
'cmd_zenCompactModeShowToolbar',
'zen-compact-mode-shortcut-show-toolbar'
)
);
// Workspace shortcuts
for (let i = 10; i > 0; i--) {
@@ -816,7 +799,7 @@ class nsZenKeyboardShortcutsLoader {
}
class nsZenKeyboardShortcutsVersioner {
static LATEST_KBS_VERSION = 11;
static LATEST_KBS_VERSION = 12;
constructor() {}
@@ -865,7 +848,7 @@ class nsZenKeyboardShortcutsVersioner {
return newData;
}
console.error('Unknown keyboar shortcuts version');
console.error('Unknown keyboard shortcuts version');
this.version = 0;
return this.migrateIfNeeded(data);
}
@@ -884,17 +867,6 @@ class nsZenKeyboardShortcutsVersioner {
// Apply migrations and ensure defaults exist
let out = this.fillDefaultIfNotPresent(this.migrateIfNeeded(data));
// Hard-remove deprecated or conflicting defaults regardless of version
// - Remove the built-in "Open File" keybinding; menu item remains available
// - Remove default "Bookmark All Tabs" keybinding (Ctrl+Shift+D) to avoid conflict
// - Remove "Stop" keybinding to avoid conflict with Firefox's built-in binding
const shouldBeEmptyShortcuts = ['openFileKb', 'bookmarkAllTabsKb', 'key_stop'];
for (let shortcut of out) {
if (shouldBeEmptyShortcuts.includes(shortcut.getID?.())) {
shortcut.shouldBeEmpty = true;
}
}
return out;
}
@@ -1024,7 +996,6 @@ class nsZenKeyboardShortcutsVersioner {
const commandMap = {
'zen-compact-mode-toggle': 'cmd_zenCompactModeToggle',
'zen-compact-mode-show-sidebar': 'cmd_zenCompactModeShowSidebar',
'zen-compact-mode-show-toolbar': 'cmd_zenCompactModeShowToolbar',
'zen-workspace-forward': 'cmd_zenWorkspaceForward',
'zen-workspace-backward': 'cmd_zenWorkspaceBackward',
'zen-split-view-grid': 'cmd_zenSplitViewGrid',
@@ -1093,6 +1064,23 @@ class nsZenKeyboardShortcutsVersioner {
)
);
}
if (version < 12) {
// Hard-remove deprecated or conflicting defaults regardless of version
// - Remove the built-in "Open File" keybinding; menu item remains available
// - Remove default "Bookmark All Tabs" keybinding (Ctrl+Shift+D) to avoid conflict
// - Remove "Stop" keybinding to avoid conflict with Firefox's built-in binding
const shouldBeEmptyShortcuts = ['openFileKb', 'bookmarkAllTabsKb', 'key_stop'];
for (let shortcut of data) {
if (shouldBeEmptyShortcuts.includes(shortcut.getID?.())) {
shortcut.shouldBeEmpty = true;
}
}
// Also remove zen-compact-mode-show-toolbar
data = data.filter((shortcut) => shortcut.getID() != 'zen-compact-mode-show-toolbar');
}
return data;
}
}

11
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -60,12 +60,6 @@
&:root[zen-right-side='true'] #zen-sidebar-top-buttons .titlebar-buttonbox-container {
margin-right: calc(-1 * var(--zen-toolbox-padding));
margin-top: -10px;
height: calc(4px + var(--zen-toolbar-height)) !important;
& .titlebar-button {
align-items: end;
}
}
}
@@ -723,7 +717,6 @@
& #zen-sidebar-top-buttons-customization-target {
flex-direction: column;
padding-top: var(--zen-element-separation);
}
& #zen-sidebar-foot-buttons {
@@ -972,15 +965,13 @@
:root[zen-sidebar-expanded='true'] & {
--toolbarbutton-inner-padding: var(--zen-toolbar-button-inner-padding) !important;
}
:root[zen-single-toolbar='true'] & {
--toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important;
& #PanelUI-button {
order: -2;
}
& #unified-extensions-button {
order: -1;
}
}
& #zen-sidebar-top-buttons-customization-target {

426
src/zen/urlbar/ZenSiteDataPanel.sys.mjs Normal file
View File

@@ -0,0 +1,426 @@
/* 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/. */
export class nsZenSiteDataPanel {
#iconMap = {
install: 'extension',
};
constructor(window) {
this.window = window;
this.document = window.document;
this.panel = this.document.getElementById('zen-unified-site-data-panel');
this.#init();
}
#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" 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();
this.#initEventListeners();
}
#initEventListeners() {
this.panel.addEventListener('popupshowing', this);
this.document.getElementById('zen-site-data-manage-addons').addEventListener('click', this);
this.document.getElementById('zen-site-data-settings-more').addEventListener('click', this);
const kCommandIDs = [
'zen-site-data-header-share',
'zen-site-data-header-bookmark',
'zen-site-data-security-info',
'zen-site-data-actions',
'zen-site-data-new-addon-button',
];
for (let id of kCommandIDs) {
this.document.getElementById(id).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();
this.#setSiteHeader();
}
#setSiteHeader() {
{
const button = this.document.getElementById('zen-site-data-header-reader-mode');
const urlbarButton = this.window.document.getElementById('reader-mode-button');
const isActive = urlbarButton?.hasAttribute('readeractive');
const isVisible = !urlbarButton?.hidden || isActive;
button.disabled = !isVisible;
if (isActive) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
this.document.l10n.setAttributes(button, urlbarButton?.getAttribute('data-l10n-id'));
}
{
const button = this.document.getElementById('zen-site-data-header-bookmark');
const isPageBookmarked = this.window.BookmarkingUI.star?.hasAttribute('starred');
if (isPageBookmarked) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
}
{
const button = this.document.getElementById('zen-site-data-header-share');
if (
this.window.gBrowser.currentURI.schemeIs('http') ||
this.window.gBrowser.currentURI.schemeIs('https')
) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', 'true');
}
}
}
#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() {
const { gBrowser, SitePermissions } = this.window;
const list = this.document.getElementById('zen-site-data-settings-list');
const section = list.closest('.zen-site-data-section');
// show permission icons
let permissions = SitePermissions.getAllPermissionDetailsForBrowser(gBrowser.selectedBrowser);
// Don't display origin-keyed 3rdPartyStorage permissions that are covered by
// site-keyed 3rdPartyFrameStorage permissions.
let thirdPartyStorageSites = new Set(
permissions
.map(function (permission) {
let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
if (id == '3rdPartyFrameStorage') {
return key;
}
return null;
})
.filter(function (key) {
return key != null;
})
);
permissions = permissions.filter(function (permission) {
let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
if (id != '3rdPartyStorage') {
return true;
}
try {
let origin = Services.io.newURI(key);
let site = Services.eTLD.getSite(origin);
return !thirdPartyStorageSites.has(site);
} catch {
return false;
}
});
this._sharingState = gBrowser.selectedTab._sharingState;
if (this._sharingState?.geo) {
let geoPermission = permissions.find((perm) => perm.id === 'geo');
if (!geoPermission) {
permissions.push({
id: 'geo',
state: SitePermissions.ALLOW,
scope: SitePermissions.SCOPE_REQUEST,
sharingState: true,
});
}
}
if (this._sharingState?.xr) {
let xrPermission = permissions.find((perm) => perm.id === 'xr');
if (!xrPermission) {
permissions.push({
id: 'xr',
state: SitePermissions.ALLOW,
scope: SitePermissions.SCOPE_REQUEST,
sharingState: true,
});
}
}
if (this._sharingState?.webRTC) {
let webrtcState = this._sharingState.webRTC;
// If WebRTC device or screen are in use, we need to find
// the associated ALLOW permission item to set the sharingState field.
for (let id of ['camera', 'microphone', 'screen']) {
if (webrtcState[id]) {
let found = false;
for (let permission of permissions) {
let [permId] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
if (permId != id || permission.state != SitePermissions.ALLOW) {
continue;
}
found = true;
}
if (!found) {
// If the ALLOW permission item we were looking for doesn't exist,
// the user has temporarily allowed sharing and we need to add
// an item in the permissions array to reflect this.
permissions.push({
id,
state: SitePermissions.ALLOW,
scope: SitePermissions.SCOPE_REQUEST,
sharingState: webrtcState[id],
});
}
}
}
}
list.innerHTML = '';
for (let permission of permissions) {
let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
if (id == 'storage-access') {
// Ignore storage access permissions here, they are made visible inside
// the Content Blocking UI.
continue;
}
if (permission.state == SitePermissions.PROMPT) {
// We don't display "ask" permissions in the site data panel.
continue;
}
let item = this.#createPermissionItem(id, key, permission);
if (item) {
list.appendChild(item);
}
}
section.hidden = list.childElementCount == 0;
}
#getPermissionStateLabelId(permission) {
const { SitePermissions } = this.window;
switch (permission.state) {
// There should only be these types being displayed in the panel.
case SitePermissions.ALLOW:
return 'zen-site-data-setting-allow';
case SitePermissions.BLOCK:
case SitePermissions.AUTOPLAY_BLOCKED_ALL:
return 'zen-site-data-setting-block';
default:
return null;
}
}
#createPermissionItem(id, key, permission) {
const { SitePermissions } = this.window;
// Create a permission item for the site data panel.
let container = this.document.createXULElement('hbox');
const idNoSuffix = permission.id;
container.classList.add(
'permission-popup-permission-item',
`permission-popup-permission-item-${idNoSuffix}`
);
container.setAttribute('align', 'center');
container.setAttribute('role', 'group');
container.setAttribute('state', permission.state == SitePermissions.ALLOW ? 'allow' : 'block');
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');
labelContainer.setAttribute('align', 'start');
labelContainer.classList.add('permission-popup-permission-label-container');
labelContainer._permission = permission;
labelContainer.addEventListener('click', this);
let nameLabel = this.document.createXULElement('label');
nameLabel.setAttribute('flex', '1');
nameLabel.setAttribute('class', 'permission-popup-permission-label');
let label = SitePermissions.getPermissionLabel(permission.id);
if (label === null) {
return null;
}
nameLabel.textContent = label;
labelContainer.appendChild(nameLabel);
let stateLabel = this.document.createXULElement('label');
stateLabel.setAttribute('class', 'zen-permission-popup-permission-state-label');
stateLabel.setAttribute('data-l10n-id', this.#getPermissionStateLabelId(permission));
labelContainer.appendChild(stateLabel);
container.appendChild(img);
container.appendChild(labelContainer);
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': {
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;
}
case 'zen-site-data-header-bookmark': {
this.window.BookmarkingUI.onStarCommand(event);
break;
}
}
}
#onPermissionClick(label) {
const { SitePermissions, gBrowser } = this.window;
const permission = label._permission;
let newState;
switch (permission.state) {
case SitePermissions.ALLOW:
newState = SitePermissions.BLOCK;
break;
case SitePermissions.BLOCK:
case SitePermissions.AUTOPLAY_BLOCKED_ALL:
newState = SitePermissions.ALLOW;
break;
default:
return;
}
SitePermissions.setForPrincipal(gBrowser.contentPrincipal, permission.id, newState);
label.parentNode.setAttribute('state', newState == SitePermissions.ALLOW ? 'allow' : 'block');
label
.querySelector('.zen-permission-popup-permission-state-label')
.setAttribute('data-l10n-id', this.#getPermissionStateLabelId({ state: newState }));
label._permission.state = newState;
}
#onClickEvent(event) {
const id = event.target.id;
switch (id) {
case 'zen-site-data-manage-addons': {
const { BrowserAddonUI } = this.window;
BrowserAddonUI.openAddonsMgr('addons://list/extension');
break;
}
case 'zen-site-data-settings-more': {
const { BrowserCommands } = this.window;
BrowserCommands.pageInfo(null, 'permTab');
break;
}
default: {
const label = event.target.closest('.permission-popup-permission-label-container');
if (label?._permission) {
this.#onPermissionClick(label);
}
break;
}
}
}
handleEvent(event) {
const type = event.type;
switch (type) {
case 'click':
this.#onClickEvent(event);
break;
case 'command':
this.#onCommandEvent(event);
break;
case 'popupshowing':
this.#preparePanel();
break;
}
}
}

1
src/zen/urlbar/moz.build
View File

@@ -3,6 +3,7 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
EXTRA_JS_MODULES += [
"ZenSiteDataPanel.sys.mjs",
"ZenUBActionsProvider.sys.mjs",
"ZenUBGlobalActions.sys.mjs",
"ZenUBProvider.sys.mjs",

1
src/zen/workspaces/zen-workspaces.css
View File

@@ -153,6 +153,7 @@
/* Mark workspaces indicator */
.zen-current-workspace-indicator {
margin-top: 1px;
padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
font-weight: 500;
position: relative;

2
src/zen/zen.globals.js
View File

@@ -7,6 +7,8 @@ export default [
'nsZenDOMOperatedFeature',
'nsZenPreloadedFeature',
'nsZenSiteDataPanel',
'ZenThemeModifier',
'ZenHasPolyfill',