diff --git a/locales/en-US/browser/browser/zen-general.ftl b/locales/en-US/browser/browser/zen-general.ftl
index 708bc05d95..77f8a014be 100644
--- a/locales/en-US/browser/browser/zen-general.ftl
+++ b/locales/en-US/browser/browser/zen-general.ftl
@@ -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 "
" 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
\ No newline at end of file
diff --git a/locales/en-US/browser/browser/zen-vertical-tabs.ftl b/locales/en-US/browser/browser/zen-vertical-tabs.ftl
index 63fd3ef6da..3b4975bb65 100644
--- a/locales/en-US/browser/browser/zen-vertical-tabs.ftl
+++ b/locales/en-US/browser/browser/zen-vertical-tabs.ftl
@@ -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
diff --git a/prefs/compact-mode.yaml b/prefs/compact-mode.yaml
index f48e2d8cde..8e8003411f 100644
--- a/prefs/compact-mode.yaml
+++ b/prefs/compact-mode.yaml
@@ -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
diff --git a/prefs/folders.yaml b/prefs/folders.yaml
index b1e98dcf52..7a8edc5ca0 100644
--- a/prefs/folders.yaml
+++ b/prefs/folders.yaml
@@ -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
diff --git a/prefs/zen-urlbar.yaml b/prefs/zen-urlbar.yaml
index b9b0533d4f..97be59be9a 100644
--- a/prefs/zen-urlbar.yaml
+++ b/prefs/zen-urlbar.yaml
@@ -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
diff --git a/src/browser/base/content/browser-addons-js.patch b/src/browser/base/content/browser-addons-js.patch
index 318539af96..71135dc459 100644
--- a/src/browser/base/content/browser-addons-js.patch
+++ b/src/browser/base/content/browser-addons-js.patch
@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser-addons.js b/browser/base/content/browser-addons.js
-index d7542a38a0242dd9c9c6390171d59992d75a0c19..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);
}
diff --git a/src/browser/base/content/browser-pageActions-js.patch b/src/browser/base/content/browser-pageActions-js.patch
new file mode 100644
index 0000000000..197789f45a
--- /dev/null
+++ b/src/browser/base/content/browser-pageActions-js.patch
@@ -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) {
diff --git a/src/browser/base/content/navigator-toolbox-js.patch b/src/browser/base/content/navigator-toolbox-js.patch
index e775bcd15d..167525ff89 100644
--- a/src/browser/base/content/navigator-toolbox-js.patch
+++ b/src/browser/base/content/navigator-toolbox-js.patch
@@ -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;
+
diff --git a/src/browser/base/content/zen-commands.inc.xhtml b/src/browser/base/content/zen-commands.inc.xhtml
index aad8b0c741..25db87158c 100644
--- a/src/browser/base/content/zen-commands.inc.xhtml
+++ b/src/browser/base/content/zen-commands.inc.xhtml
@@ -5,10 +5,7 @@
-
-
-
-
+
diff --git a/src/browser/base/content/zen-panels/popups.inc b/src/browser/base/content/zen-panels/popups.inc
index 955609aa47..cdada56559 100644
--- a/src/browser/base/content/zen-panels/popups.inc
+++ b/src/browser/base/content/zen-panels/popups.inc
@@ -49,3 +49,12 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/browser/base/content/zen-panels/site-data.inc b/src/browser/base/content/zen-panels/site-data.inc
new file mode 100644
index 0000000000..e5a774b88d
--- /dev/null
+++ b/src/browser/base/content/zen-panels/site-data.inc
@@ -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/.
+
+
+
+# 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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+# 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
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml
index 3a812435ae..e58a85c4c8 100644
--- a/src/browser/base/content/zen-popupset.inc.xhtml
+++ b/src/browser/base/content/zen-popupset.inc.xhtml
@@ -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
diff --git a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
index 396dbf5a94..4635de61c5 100644
--- a/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
+++ b/src/browser/components/customizableui/CustomizableUI-sys-mjs.patch
@@ -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",
diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js
index a93ba5b460..b37ba5dcba 100644
--- a/src/browser/components/preferences/zen-settings.js
+++ b/src/browser/components/preferences/zen-settings.js
@@ -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',
diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
index 6af7b0a5ca..259fff79e1 100644
--- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
+++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml
@@ -56,43 +56,6 @@
-
-
-
hbox {
- margin-top: 10px;
-}
-
#category-zen-looks > .category-icon {
list-style-image: url('chrome://browser/skin/customize.svg');
}
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
index fec5a4d24e..8dff5e399d 100644
--- a/src/browser/themes/shared/zen-icons/icons.css
+++ b/src/browser/themes/shared/zen-icons/icons.css
@@ -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;
+ }
+}
diff --git a/src/browser/themes/shared/zen-icons/lin/security-broken.svg b/src/browser/themes/shared/zen-icons/lin/security-broken.svg
index 06097d2ea5..86396585e4 100644
--- a/src/browser/themes/shared/zen-icons/lin/security-broken.svg
+++ b/src/browser/themes/shared/zen-icons/lin/security-broken.svg
@@ -2,4 +2,4 @@
# This Source Code Form is subject to the terms of the Mozilla Public
# License, v. 2.0. If a copy of the MPL was not distributed with this
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
-
+
diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs
index 04304dec03..329eb2e8f1 100644
--- a/src/zen/common/ZenCustomizableUI.sys.mjs
+++ b/src/zen/common/ZenCustomizableUI.sys.mjs
@@ -67,6 +67,10 @@ export var ZenCustomizableUI = new (class {
addon-webext-overflowtarget="overflowed-extensions-list"
mode="icons">
@@ -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
+ );
});
}
diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs
index c98f8fdcaf..a23c0cf0af 100644
--- a/src/zen/common/ZenUIManager.mjs
+++ b/src/zen/common/ZenUIManager.mjs
@@ -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
diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css
index 1407dbe83a..62045e7b05 100644
--- a/src/zen/common/styles/zen-browser-container.css
+++ b/src/zen/common/styles/zen-browser-container.css
@@ -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) {
diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css
index 377688fc0b..5b245f5f9f 100644
--- a/src/zen/common/styles/zen-omnibox.css
+++ b/src/zen/common/styles/zen-omnibox.css
@@ -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;
+ }
+}
diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css
index 5eceee4ebd..31058262f0 100644
--- a/src/zen/common/styles/zen-popup.css
+++ b/src/zen/common/styles/zen-popup.css
@@ -31,7 +31,6 @@
--uc-autocomplete-panel-separator-margin-vertical: 4px;
--uc-permission-itemcontainer-padding-block: 8px;
- --uc-permission-item-margin-block: 4px;
--uc-permission-item-padding-inline: 16px;
--zen-panel-separator-width: 1px;
}
@@ -228,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;
diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css
index 8bdaa80c07..3756313118 100644
--- a/src/zen/common/styles/zen-single-components.css
+++ b/src/zen/common/styles/zen-single-components.css
@@ -189,6 +189,21 @@ body > #confetti {
}
}
+.zen-interactive-button {
+ background: color-mix(in srgb, currentColor 6%, transparent) !important;
+ transition:
+ background-color 0.12s ease-in-out,
+ transform 0.12s ease-in-out;
+
+ &:hover {
+ background-color: color-mix(in srgb, currentColor 10%, transparent) !important;
+ }
+
+ &:active:hover {
+ transform: scale(0.95);
+ }
+}
+
/** Update animation */
#zen-update-animation {
@@ -261,3 +276,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);
+ }
+ }
+}
diff --git a/src/zen/common/zen-sets.js b/src/zen/common/zen-sets.js
index 5d8316589c..4609d2e762 100644
--- a/src/zen/common/zen-sets.js
+++ b/src/zen/common/zen-sets.js
@@ -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();
diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs
index 0606498ff6..619e5e0511 100644
--- a/src/zen/compact-mode/ZenCompactMode.mjs
+++ b/src/zen/compact-mode/ZenCompactMode.mjs
@@ -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(`
-
+
`);
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: {
diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css
index af798fa331..0a2dda72a2 100644
--- a/src/zen/compact-mode/zen-compact-mode.css
+++ b/src/zen/compact-mode/zen-compact-mode.css
@@ -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-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-appcontent-wrapper {
+ & #tabbrowser-tabbox {
+ margin-left: 0 !important;
}
+ }
- #zen-sidebar-splitter {
- display: none !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;
- }
+ #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;
- }
+ &: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;
- }
+ &[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;
- }
+ #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([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;
- }
+ /* 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;
+ 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));
}
- &:not([zen-right-side='true']) #nav-bar {
- margin-left: 0 !important;
+ :root:not([zen-single-toolbar='true']) & {
+ bottom: calc(var(--zen-compact-float) / 2);
+ height: calc(100% - var(--zen-toolbar-height));
}
- }
-
- &: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;
- }
+ & #zen-sidebar-top-buttons {
+ margin: 0 0 calc(var(--zen-toolbox-padding) / 2) 0;
}
}
- &: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;
- }
+ &:not([zen-right-side='true']) #nav-bar {
+ margin-left: 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;
+ &:not([zen-right-side='true']) #navigator-toolbox {
+ left: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
+ }
- :root[zen-sidebar-expanded='true'] & {
- width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
- }
+ &:not([zen-sidebar-expanded='true']) .zen-essentials-container {
+ padding: 0;
+ }
- & .zen-toolbar-background {
- display: flex;
- }
+ &[zen-right-side='true'] {
+ & #navigator-toolbox:not([animate='true']) {
+ right: calc(-1 * var(--actual-zen-sidebar-width) + var(--zen-element-separation) / 2 + 1px);
}
- #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;
- }
- }
- }
+ & .browserSidebarContainer {
+ margin-left: 0 !important;
+ margin-right: 0 !important;
}
}
- }
-
- @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);
+ #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;
- & #titlebar,
- & #zen-appcontent-wrapper {
- margin-top: var(--zen-element-separation) !important;
+ :root[zen-sidebar-expanded='true'] & {
+ width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
}
- & #zen-appcontent-wrapper {
- z-index: 3 !important;
+ & .zen-toolbar-background {
+ display: flex;
}
+ }
- & #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;
+ #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;
+ }
- 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);
+ left: calc(var(--zen-compact-float) / -2);
+ :root[zen-right-side='true'] & {
+ right: calc(var(--zen-compact-float) / -2);
+ left: auto;
}
- 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;
}
}
}
diff --git a/src/zen/kbs/ZenKeyboardShortcuts.mjs b/src/zen/kbs/ZenKeyboardShortcuts.mjs
index dcb61e09ce..ad7a7c5f4f 100644
--- a/src/zen/kbs/ZenKeyboardShortcuts.mjs
+++ b/src/zen/kbs/ZenKeyboardShortcuts.mjs
@@ -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;
}
}
diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css
index 0012ebfd64..c75b7896d0 100644
--- a/src/zen/tabs/zen-tabs/vertical-tabs.css
+++ b/src/zen/tabs/zen-tabs/vertical-tabs.css
@@ -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 {
diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
new file mode 100644
index 0000000000..aebbfc657f
--- /dev/null
+++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs
@@ -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(`
+
+
+
+ `);
+ 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;
+ }
+ }
+}
diff --git a/src/zen/urlbar/moz.build b/src/zen/urlbar/moz.build
index 1e331db904..f321a86bb5 100644
--- a/src/zen/urlbar/moz.build
+++ b/src/zen/urlbar/moz.build
@@ -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",
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
index 5ac09c7c26..0946b6dd53 100644
--- a/src/zen/workspaces/zen-workspaces.css
+++ b/src/zen/workspaces/zen-workspaces.css
@@ -152,6 +152,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;
diff --git a/src/zen/zen.globals.js b/src/zen/zen.globals.js
index c8dc0987fb..a225ca767e 100644
--- a/src/zen/zen.globals.js
+++ b/src/zen/zen.globals.js
@@ -7,6 +7,8 @@ export default [
'nsZenDOMOperatedFeature',
'nsZenPreloadedFeature',
+ 'nsZenSiteDataPanel',
+
'ZenThemeModifier',
'ZenHasPolyfill',