mixa/zen-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add a bounce to the glance element float and format, b=no-bug, c=common, glance

Browse Source
This commit is contained in:
Mr. M
2025-10-11 00:21:01 +02:00
parent d5e73cf360
commit 21d5273bb9
5 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
prefs/README.md
View File

@@ -1,8 +1,7 @@
# Browser Preferences
This directory contains configuration files for Zen. They are divided by folder according to the source / component they belong to and further divided by file according to their purpose.
- `firefox/`: Preferences to override Firefox defaults.
- `zen/`: Preferences to configure Zen-specific features.
- `privatefox/` & `fastfox/`: *Some* of the preferences got extracted from [Betterfox](https://github.com/yokoffing/Betterfox).
- `privatefox/` & `fastfox/`: _Some_ of the preferences got extracted from [Betterfox](https://github.com/yokoffing/Betterfox).

44
src/browser/components/urlbar/UrlbarInput-sys-mjs.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0ce222c46 100644
index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..77955d888e70409c83b217e676e1575417018831 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -76,6 +76,13 @@ ChromeUtils.defineLazyGetter(lazy, "logger", () =>
@@ -75,10 +75,14 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
}
if (isCanonized) {
@@ -2298,6 +2330,13 @@ export class UrlbarInput {
@@ -2298,6 +2330,17 @@ export class UrlbarInput {
await this.#updateLayoutBreakoutDimensions();
}
+ zenFormatURLValue() {
+ return this.#lazy.valueFormatter._formatURL();
+ }
+
+ get zenUrlbarBehavior() {
+ if (this.document.documentElement.hasAttribute("inDOMFullscreen")) {
+ return "float";
@@ -89,7 +93,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
startLayoutExtend() {
if (!this.#allowBreakout || this.hasAttribute("breakout-extend")) {
// Do not expand if the Urlbar does not support being expanded or it is
@@ -2312,6 +2351,12 @@ export class UrlbarInput {
@@ -2312,6 +2355,12 @@ export class UrlbarInput {
this.setAttribute("breakout-extend", "true");
@@ -102,7 +106,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
// Enable the animation only after the first extend call to ensure it
// doesn't run when opening a new window.
if (!this.hasAttribute("breakout-extend-animate")) {
@@ -2331,6 +2376,24 @@ export class UrlbarInput {
@@ -2331,6 +2380,24 @@ export class UrlbarInput {
return;
}
@@ -127,7 +131,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
this.removeAttribute("breakout-extend");
this.#updateTextboxPosition();
}
@@ -2660,7 +2723,7 @@ export class UrlbarInput {
@@ -2660,7 +2727,7 @@ export class UrlbarInput {
this.textbox.parentNode.style.setProperty(
"--urlbar-container-height",
@@ -136,7 +140,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
);
this.textbox.style.setProperty(
"--urlbar-height",
@@ -3093,6 +3156,7 @@ export class UrlbarInput {
@@ -3093,6 +3160,7 @@ export class UrlbarInput {
}
_toggleActionOverride(event) {
@@ -144,7 +148,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
if (
event.keyCode == KeyEvent.DOM_VK_SHIFT ||
event.keyCode == KeyEvent.DOM_VK_ALT ||
@@ -3197,7 +3261,7 @@ export class UrlbarInput {
@@ -3197,7 +3265,7 @@ export class UrlbarInput {
return val;
}
let trimmedValue = lazy.UrlbarPrefs.get("trimURLs")
@@ -153,7 +157,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
: val;
// Only trim value if the directionality doesn't change to RTL and we're not
// showing a strikeout https protocol.
@@ -3407,6 +3471,7 @@ export class UrlbarInput {
@@ -3407,6 +3475,7 @@ export class UrlbarInput {
);
}
@@ -161,7 +165,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
// No point in setting these because we'll handleRevert() a few rows below.
if (openUILinkWhere == "current") {
// Make sure URL is formatted properly (don't show punycode).
@@ -3608,6 +3673,10 @@ export class UrlbarInput {
@@ -3608,6 +3677,10 @@ export class UrlbarInput {
}
reuseEmpty = true;
}
@@ -172,7 +176,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
if (
where == "tab" &&
reuseEmpty &&
@@ -3615,6 +3684,9 @@ export class UrlbarInput {
@@ -3615,6 +3688,9 @@ export class UrlbarInput {
) {
where = "current";
}
@@ -182,7 +186,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
return where;
}
@@ -3872,6 +3944,7 @@ export class UrlbarInput {
@@ -3872,6 +3948,7 @@ export class UrlbarInput {
this.setResultForCurrentValue(null);
this.handleCommand();
this.controller.clearLastQueryContextCache();
@@ -190,7 +194,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
this._suppressStartQuery = false;
});
@@ -3879,7 +3952,6 @@ export class UrlbarInput {
@@ -3879,7 +3956,6 @@ export class UrlbarInput {
contextMenu.addEventListener("popupshowing", () => {
// Close the results pane when the input field contextual menu is open,
// because paste and go doesn't want a result selection.
@@ -198,7 +202,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
let controller =
this.document.commandDispatcher.getControllerForCommand("cmd_paste");
@@ -3991,7 +4063,11 @@ export class UrlbarInput {
@@ -3991,7 +4067,11 @@ export class UrlbarInput {
if (!engineName && !source && !this.hasAttribute("searchmode")) {
return;
}
@@ -211,7 +215,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
if (this._searchModeIndicatorTitle) {
this._searchModeIndicatorTitle.textContent = "";
this._searchModeIndicatorTitle.removeAttribute("data-l10n-id");
@@ -4302,6 +4378,7 @@ export class UrlbarInput {
@@ -4302,6 +4382,7 @@ export class UrlbarInput {
this.document.l10n.setAttributes(
this.inputField,
@@ -219,7 +223,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
l10nId,
l10nId == "urlbar-placeholder-with-name" ? { name } : undefined
);
@@ -4413,6 +4490,11 @@ export class UrlbarInput {
@@ -4413,6 +4494,11 @@ export class UrlbarInput {
}
_on_click(event) {
@@ -231,7 +235,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
if (
event.target == this.inputField ||
event.target == this._inputContainer
@@ -4485,7 +4567,7 @@ export class UrlbarInput {
@@ -4485,7 +4571,7 @@ export class UrlbarInput {
}
}
@@ -240,7 +244,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
this.view.autoOpen({ event });
} else {
if (this._untrimOnFocusAfterKeydown) {
@@ -4525,9 +4607,16 @@ export class UrlbarInput {
@@ -4525,9 +4611,16 @@ export class UrlbarInput {
}
_on_mousedown(event) {
@@ -258,7 +262,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
if (
event.target != this.inputField &&
@@ -4538,6 +4627,10 @@ export class UrlbarInput {
@@ -4538,6 +4631,10 @@ export class UrlbarInput {
this.focusedViaMousedown = !this.focused;
this._preventClickSelectsAll = this.focused;
@@ -269,7 +273,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
// Keep the focus status, since the attribute may be changed
// upon calling this.focus().
@@ -4573,7 +4666,7 @@ export class UrlbarInput {
@@ -4573,7 +4670,7 @@ export class UrlbarInput {
}
// Don't close the view when clicking on a tab; we may want to keep the
// view open on tab switch, and the TabSelect event arrived earlier.
@@ -278,7 +282,7 @@ index afc7a6c6ddbf4cf5a5b27c0bd60577b833c63093..3aafb612152af88d570c7d7046ca3bd0
break;
}
@@ -4890,7 +4983,7 @@ export class UrlbarInput {
@@ -4890,7 +4987,7 @@ export class UrlbarInput {
// When we are in actions search mode we can show more results so
// increase the limit.
let maxResults =

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

@@ -889,6 +889,7 @@ var gZenVerticalTabsManager = {
if (typeof height !== 'undefined') {
document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
}
gURLBar.zenFormatURLValue();
});
},

39
src/zen/glance/ZenGlanceManager.mjs
View File

@@ -388,6 +388,18 @@
this.browserWrapper.prepend(imageDataElement);
this.#glances.get(this.#currentGlanceID).elementImageData = data.elementData;
gZenUIManager.motion.animate(
imageDataElement,
{
scale: [1, 3],
},
{
duration: 0.3,
easing: 'easeInOut',
}
);
return imageDataElement;
}
@@ -437,6 +449,19 @@
const transformOrigin = this.#getTransformOrigin(data);
this.browserWrapper.style.transformOrigin = transformOrigin;
gZenUIManager.motion
.animate(
this.contentWrapper,
{ opacity: [0, 1] },
{
duration: 0.1,
easing: 'easeInOut',
}
)
.then(() => {
this.contentWrapper.style.opacity = '';
});
gZenUIManager.motion
.animate(this.browserWrapper, arcSequence, {
duration: gZenUIManager.testingEnabled ? 0 : 0.4,
@@ -876,7 +901,7 @@
}
/**
* Add element preview if available
* Add element preview if available, used for the closing animation
* @param {string} elementImageData - The element image data
* @param {Object} rect - The rectangle data
*/
@@ -888,6 +913,18 @@
imageDataElement.style.width = rect.width;
imageDataElement.style.height = rect.height;
this.browserWrapper.prepend(imageDataElement);
gZenUIManager.motion.animate(
imageDataElement,
{
scale: [3, 1],
},
{
duration: 0.3,
easing: 'easeInOut',
bounce: 0.1,
}
);
}
}

13
src/zen/glance/zen-glance.css
View File

@@ -146,12 +146,6 @@
border-radius: var(--zen-native-inner-radius);
overflow: hidden;
box-shadow: var(--zen-big-shadow);
opacity: 1;
transition: opacity 0.08s;
@starting-style {
opacity: 0;
}
}
& browser {
@@ -167,7 +161,7 @@
&[fade-out='true'] {
& .browserStack {
transition: opacity 0.2s ease-in-out;
transition: opacity 0.15s ease-in-out;
opacity: 0;
}
}
@@ -178,6 +172,9 @@
pointer-events: none;
width: 100%;
height: 100%;
z-index: -1;
z-index: 0;
border-radius: var(--zen-native-inner-radius);
inset: 50%;
translate: -50% -50%;
will-change: transform;
}