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

Enhance Zen Glance functionality with confirmation on close and improved styling

Browse Source
This commit is contained in:
mr. M
2025-03-09 15:34:19 +01:00
parent d5d101d3f8
commit a0b372e7d9
9 changed files with 86 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: 1a15769b8d...1db9cb464e

2
src/browser/base/content/zen-glance.inc.xhtml
View File

@@ -1,4 +1,4 @@
<vbox id="zen-glance-sidebar-container" hidden="true">
<toolbarbutton id="zen-glance-sidebar-close" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
<toolbarbutton id="zen-glance-sidebar-close" data-l10n-id="zen-general-confrim" class="toolbarbutton-1" oncommand="gZenGlanceManager.closeGlance({ onTabClose: true })"/>
<toolbarbutton id="zen-glance-sidebar-open" class="toolbarbutton-1" oncommand="gZenGlanceManager.fullyOpenGlance()"/>
</vbox>

26
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -36,6 +36,7 @@
appearance: none;
box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.07);
opacity: 0;
padding: 8px;
&:hover {
background: light-dark(rgb(41, 41, 41), rgb(204, 204, 204));
@@ -54,6 +55,31 @@
filter: invert(1);
}
}
& #zen-glance-sidebar-close {
width: fit-content;
& label {
display: block;
max-width: 0px;
margin: 0;
overflow: hidden;
transition: max-width 0.2s ease, margin-left 0.2s ease;
}
&[waitconfirmation] {
background: rgb(220, 53, 69);
color: white;
fill: white;
& label {
max-width: 100px;
margin-left: 8px;
}
& image {
filter: none;
}
}
}
}
.browserSidebarContainer.zen-glance-overlay {

2
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -326,7 +326,7 @@ button.popup-notification-dropmarker {
background: transparent;
&[notificationside='top'] {
position: absolute;
position: fixed;
bottom: calc(var(--zen-element-separation) * 1.5);
right: calc(var(--zen-element-separation) * 1.5);
width: fit-content;

44
src/browser/base/zen-components/ZenGlanceManager.mjs
View File

@@ -6,8 +6,9 @@
#glances = new Map();
#currentGlanceID = null;
#confirmationTimeout = null;
init() {
window.addEventListener('keydown', this.onKeyDown.bind(this));
window.addEventListener('TabClose', this.onTabClose.bind(this));
window.addEventListener('TabSelect', this.onLocationChange.bind(this));
@@ -37,17 +38,6 @@
return this.#glances.get(this.#currentGlanceID)?.parentTab;
}
onKeyDown(event) {
if (event.defaultPrevented) {
return;
}
if (event.key === 'Escape' && this.#currentGlanceID) {
event.preventDefault();
event.stopPropagation();
this.closeGlance({ onTabClose: true });
}
}
onOverlayClick(event) {
if (event.target === this.overlay && event.originalTarget !== this.contentWrapper) {
this.closeGlance({ onTabClose: true });
@@ -216,11 +206,22 @@
});
}
closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false } = {}) {
closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false, hasFocused = false } = {}) {
if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) {
return;
}
console.log(hasFocused)
if (onTabClose && hasFocused && !this.#confirmationTimeout) {
const cancelButton = document.getElementById('zen-glance-sidebar-close');
cancelButton.setAttribute('waitconfirmation', true);
this.#confirmationTimeout = setTimeout(() => {
cancelButton.removeAttribute('waitconfirmation');
this.#confirmationTimeout = null;
}, 3000);
return;
}
this.browserWrapper.removeAttribute('has-finished-animation');
if (noAnimation) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
@@ -275,7 +276,7 @@
...originalPosition,
opacity: 0,
},
{ type: 'spring', bounce: 0, duration: 0.6, easing: 'ease-in' }
{ type: 'spring', bounce: 0, duration: 0.5, easing: 'ease-in' }
)
.then(() => {
this.browserWrapper.removeAttribute('animate');
@@ -398,9 +399,18 @@
}
}
// note: must be async to avoid timing issues
clearConfirmationTimeout() {
if (this.#confirmationTimeout) {
clearTimeout(this.#confirmationTimeout);
this.#confirmationTimeout = null;
}
document.getElementById('zen-glance-sidebar-close')?.removeAttribute('waitconfirmation');
}
// note: must be sync to avoid timing issues
onLocationChange(event) {
const tab = event.target;
this.clearConfirmationTimeout();
if (this.animatingFullOpen || this.closingGlance) {
return;
}
@@ -586,8 +596,12 @@
esModuleURI: 'chrome://browser/content/zen-components/actors/ZenGlanceChild.sys.mjs',
events: {
DOMContentLoaded: {},
keydown: {
capture: true,
},
},
},
allFrames: true,
matches: ['https://*/*'],
});
}

2
src/browser/base/zen-components/ZenRices.mjs
View File

@@ -176,7 +176,7 @@
<checkbox data-l10n-id="zen-rice-share-include-workspace-themes" id="zen-rice-share-include-workspace-themes" />
</vbox>
<html:moz-button-group class="panel-footer">
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-rice-share-cancel" />
<button onclick="gZenThemePicker.riceManager.cancel()" class="footer-button" data-l10n-id="zen-general-cancel" />
<button onclick="gZenThemePicker.riceManager.submit()" class="footer-button" data-l10n-id="zen-rice-share-save" default="true" slot="primary" id="zen-rice-share-save" disabled="true" />
</html:moz-button-group>
</vbox>

10
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -245,7 +245,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
paddingLeft: 0,
},
{
duration: 0.1,
duration: 0.08 ,
easing: 'ease-out',
}
),
@@ -260,7 +260,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
: {}),
},
{
duration: 0.1,
duration: 0.08,
easing: 'ease-out',
}
),
@@ -320,7 +320,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
paddingRight: [`${halfWidth}px`, 0],
},
{
duration: 0.15,
duration: 0.1,
easing: 'ease-out',
}
),
@@ -335,7 +335,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
: {}),
},
{
duration: 0.15,
duration: 0.1,
easing: 'ease-out',
}
),
@@ -1550,7 +1550,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
const containerRect = this.fakeBrowser.getBoundingClientRect();
const padding = Services.prefs.getIntPref('zen.theme.content-element-separation', 0);
const dropTarget = document.elementFromPoint(
side == 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
dropSide == 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5,
event.clientY
);
const browser = dropTarget?.closest('browser');

12
src/browser/base/zen-components/actors/ZenGlanceChild.sys.mjs
View File

@@ -12,6 +12,9 @@ export class ZenGlanceChild extends JSWindowActorChild {
case 'DOMContentLoaded':
await this.initiateGlance();
break;
case 'keydown':
this.onKeyDown(event);
break;
default:
}
}
@@ -120,4 +123,13 @@ export class ZenGlanceChild extends JSWindowActorChild {
this.openGlance(target);
}
}
onKeyDown(event) {
if (event.defaultPrevented || event.key !== 'Escape') {
return;
}
this.sendAsyncMessage('ZenGlance:CloseGlance', {
hasFocused: this.contentWindow.document.activeElement !== this.contentWindow.document.body
});
}
}

10
src/browser/base/zen-components/actors/ZenGlanceParent.sys.mjs
View File

@@ -15,6 +15,16 @@ export class ZenGlanceParent extends JSWindowActorParent {
this.openGlance(this.browsingContext.topChromeWindow, message.data);
break;
}
case 'ZenGlance:CloseGlance': {
const params = {
onTabClose: true,
...message.data,
};
this.browsingContext.topChromeWindow.gZenGlanceManager.closeGlance(params);
break;
}
default:
console.warn(`[glance]: Unknown message: ${message.name}`);
}
}