mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-08-04 14:18:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Finished implementation of the panel, b=no-bug, c=common, compact-mode, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-10-02 22:22:35 +02:00
parent c701a24db5
commit 074847dd09
13 changed files with 232 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
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

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

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) {

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

@@ -9,6 +9,7 @@
<command id="cmd_zenCompactModeHideSidebar" />
<command id="cmd_zenCompactModeHideToolbar" />
<command id="cmd_zenCompactModeHideBoth" />
<command id="cmd_toggleCompactModeIgnoreHover" />
<command id="cmd_zenWorkspaceForward" />
<command id="cmd_zenWorkspaceBackward" />

12
src/browser/base/content/zen-panels/site-data.inc
View File

@@ -16,11 +16,17 @@
mainview-with-header="true">
<hbox id="zen-site-data-header">
<toolbarbutton id="zen-site-data-header-share"
data-l10n-id="zen-site-data-share" />
data-l10n-id="zen-site-data-share"
flex="1" />
<toolbarbutton id="zen-site-data-header-reader-mode"
command="View:ReaderView" />
command="View:ReaderView"
flex="1" />
<toolbarbutton id="zen-site-data-header-screenshot"
command="Browser: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">

28
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;
}
@@ -265,6 +266,7 @@
}
#bookmarks-menu-button,
#zen-site-data-header-bookmark,
#appMenu-bookmarks-button,
#sidebar-switcher-bookmarks,
#appMenu-library-bookmarks-button,
@@ -409,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');
}
@@ -469,14 +472,19 @@
/* permissions */
#identity-permission-box,
#identity-icon-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 image {
list-style-image: url('permissions.svg');
-moz-context-properties: fill, fill-opacity;
pointer-events: none;
#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 {
@@ -504,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;
}
@@ -608,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;
}

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

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

@@ -129,7 +129,8 @@
visibility: collapse;
#navigator-toolbox:hover &,
&[open] {
&[open],
#identity-box[pageproxystate='invalid'] & {
opacity: 1;
visibility: visible;
}
@@ -234,7 +235,7 @@
}
:root[zen-single-toolbar='true'] {
--urlbar-icon-border-radius: 10px !important;
--urlbar-icon-border-radius: 8px !important;
.urlbar-page-action:not([open]):not([showing]):not(#identity-permission-box),
#tracking-protection-icon-container {
@@ -249,10 +250,6 @@
display: none;
}
#urlbar:not([open]) #userContext-icons {
margin-inline: 0;
}
#urlbar:not([breakout-extend='true']) {
#identity-box:not([pageproxystate='invalid']) {
order: 2;
@@ -325,10 +322,6 @@
}
@container urlbar-container (width < 350px) {
#userContext-icons {
transition: all 0.1s ease;
}
#userContext-label {
display: none;
}
@@ -336,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 {
@@ -674,5 +661,17 @@
padding: 0px;
}
#reader-mode-button {
/* 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;
}
}

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

@@ -460,3 +460,80 @@ body > #confetti {
#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);
}
}
}

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

@@ -29,6 +29,9 @@ document.addEventListener(
case 'cmd_zenCompactModeShowToolbar':
gZenCompactModeManager.toggleToolbar();
break;
case 'cmd_toggleCompactModeIgnoreHover':
gZenCompactModeManager.toggle(true);
break;
case 'cmd_zenWorkspaceForward':
gZenWorkspaces.changeWorkspaceShortcut();
break;

35
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;
}
@@ -308,6 +309,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');
@@ -335,20 +339,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 +368,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,6 +384,7 @@ var gZenCompactModeManager = {
titlebar.style.removeProperty('transition');
gURLBar.textbox.style.removeProperty('visibility');
resolve();
});
});
@@ -399,7 +409,7 @@ var gZenCompactModeManager = {
ease: 'easeOut',
type: 'spring',
bounce: 0,
duration: 0.15,
duration: 0.12,
}
)
.then(() => {
@@ -448,7 +458,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 +563,8 @@ var gZenCompactModeManager = {
window.requestAnimationFrame(() => {
if (
document.documentElement.getAttribute('supress-primary-adjustment') === 'true' ||
this._hasHoveredUrlbar
this._hasHoveredUrlbar ||
this._ignoreNextHover
) {
return;
}
@@ -596,7 +609,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;
}
@@ -699,6 +713,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') ||

70
src/zen/urlbar/ZenSiteDataPanel.sys.mjs
View File

@@ -38,13 +38,19 @@ export class nsZenSiteDataPanel {
#initEventListeners() {
this.panel.addEventListener('popupshowing', this);
this.document
.getElementById('zen-site-data-new-addon-button')
.addEventListener('command', this);
this.document.getElementById('zen-site-data-manage-addons').addEventListener('click', this);
this.document.getElementById('zen-site-data-settings-more').addEventListener('click', this);
this.document.getElementById('zen-site-data-security-info').addEventListener('command', this);
this.document.getElementById('zen-site-data-actions').addEventListener('command', this);
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();
}
@@ -71,6 +77,47 @@ export class nsZenSiteDataPanel {
#preparePanel() {
this.#setSitePermissions();
this.#setSiteSecurityInfo();
this.#setSiteHeader();
}
#setSiteHeader() {
const { gReaderMode } = this.window;
{
const button = this.document.getElementById('zen-site-data-header-reader-mode');
const urlbarButton = this.window.document.getElementById('reader-mode-button');
const isActive = gReaderMode?.isActive;
const isVisible = (urlbarButton && !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() {
@@ -139,9 +186,7 @@ export class nsZenSiteDataPanel {
if (this._sharingState?.geo) {
let geoPermission = permissions.find((perm) => perm.id === 'geo');
if (geoPermission) {
geoPermission.sharingState = true;
} else {
if (!geoPermission) {
permissions.push({
id: 'geo',
state: SitePermissions.ALLOW,
@@ -153,9 +198,7 @@ export class nsZenSiteDataPanel {
if (this._sharingState?.xr) {
let xrPermission = permissions.find((perm) => perm.id === 'xr');
if (xrPermission) {
xrPermission.sharingState = true;
} else {
if (!xrPermission) {
permissions.push({
id: 'xr',
state: SitePermissions.ALLOW,
@@ -178,7 +221,6 @@ export class nsZenSiteDataPanel {
continue;
}
found = true;
permission.sharingState = webrtcState[id];
}
if (!found) {
// If the ALLOW permission item we were looking for doesn't exist,
@@ -313,6 +355,10 @@ export class nsZenSiteDataPanel {
);
break;
}
case 'zen-site-data-header-bookmark': {
this.window.BookmarkingUI.onStarCommand(event);
break;
}
}
}

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

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