mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-06-13 15:03:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

gh-13949: Secondary dot snapping to center in a new Boost (gh-13965)

Browse Source 
Co-authored-by: mr. m <mr.m@tuta.com>
Signed-off-by: fen4flo <75260616+FlorianButz@users.noreply.github.com>
This commit is contained in:
fen4flo
2026-05-31 15:53:33 +02:00
committed by GitHub
parent c7818fe355
commit feca914821
3 changed files with 52 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/content/UrlbarInput.mjs b/browser/components/urlbar/content/UrlbarInput.mjs
index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e6463b45191 100644
index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..c166b7de23c35716bf8c51b6b9c72f771f0a75a8 100644
--- a/browser/components/urlbar/content/UrlbarInput.mjs
+++ b/browser/components/urlbar/content/UrlbarInput.mjs
@@ -98,6 +98,13 @@ const lazy = XPCOMUtils.declareLazy({
@@ -132,7 +132,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
// 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")) {
@@ -2891,6 +2966,27 @@ ${
@@ -2891,6 +2966,29 @@ ${
return;
}
@@ -140,7 +140,9 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
+ this._zenHandleUrlbarClose();
+ } else if (!this._untrimmedValue || this.searchMode) {
+ // Restore the current page URL when the urlbar is empty on blur
+ this.handleRevert();
+ this.window.setTimeout(() => {
+ this.handleRevert();
+ }, 0);
+ }
+
+ // Arc like URLbar: Blur the input on exit
@@ -160,7 +162,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
this.removeAttribute("breakout-extend");
this.#updateTextboxPosition();
}
@@ -2921,7 +3017,7 @@ ${
@@ -2921,7 +3019,7 @@ ${
forceUnifiedSearchButtonAvailable = false
) {
let prevState = this.getAttribute("pageproxystate");
@@ -169,7 +171,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
this.setAttribute("pageproxystate", state);
this._inputContainer.setAttribute("pageproxystate", state);
this._identityBox?.setAttribute("pageproxystate", state);
@@ -3198,10 +3294,12 @@ ${
@@ -3198,10 +3296,12 @@ ${
return;
}
this.style.top = px(
@@ -182,7 +184,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
);
}
@@ -3260,9 +3358,10 @@ ${
@@ -3260,9 +3360,10 @@ ${
return;
}
@@ -194,7 +196,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
);
this.style.setProperty(
"--urlbar-height",
@@ -3768,6 +3867,7 @@ ${
@@ -3768,6 +3869,7 @@ ${
}
_toggleActionOverride(event) {
@@ -202,7 +204,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
if (
event.keyCode == KeyEvent.DOM_VK_SHIFT ||
event.keyCode == KeyEvent.DOM_VK_ALT ||
@@ -3880,8 +3980,8 @@ ${
@@ -3880,8 +3982,8 @@ ${
if (!this.#isAddressbar) {
return val;
}
@@ -213,7 +215,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
: val;
// Only trim value if the directionality doesn't change to RTL and we're not
// showing a strikeout https protocol.
@@ -4180,6 +4280,7 @@ ${
@@ -4180,6 +4282,7 @@ ${
resultDetails = null,
browser = this.window.gBrowser.selectedBrowser
) {
@@ -221,7 +223,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
if (this.#isAddressbar) {
this.#prepareAddressbarLoad(
url,
@@ -4291,6 +4392,10 @@ ${
@@ -4291,6 +4394,10 @@ ${
}
reuseEmpty = true;
}
@@ -232,7 +234,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
if (
where == "tab" &&
reuseEmpty &&
@@ -4298,6 +4403,9 @@ ${
@@ -4298,6 +4405,9 @@ ${
) {
where = "current";
}
@@ -242,7 +244,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
return where;
}
@@ -4552,6 +4660,7 @@ ${
@@ -4552,6 +4662,7 @@ ${
this.setResultForCurrentValue(null);
this.handleCommand();
this.controller.clearLastQueryContextCache();
@@ -250,7 +252,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
this._suppressStartQuery = false;
});
@@ -4559,7 +4668,6 @@ ${
@@ -4559,7 +4670,6 @@ ${
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.
@@ -258,7 +260,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
let controller =
this.document.commandDispatcher.getControllerForCommand("cmd_paste");
@@ -4715,7 +4823,11 @@ ${
@@ -4715,7 +4825,11 @@ ${
if (!engineName && !source && !this.hasAttribute("searchmode")) {
return;
}
@@ -271,7 +273,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
if (this._searchModeIndicatorTitle) {
this._searchModeIndicatorTitle.textContent = "";
this._searchModeIndicatorTitle.removeAttribute("data-l10n-id");
@@ -5031,6 +5143,7 @@ ${
@@ -5031,6 +5145,7 @@ ${
this.document.l10n.setAttributes(
this.inputField,
@@ -279,7 +281,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
l10nId,
l10nId == "urlbar-placeholder-with-name"
? { name: engineName }
@@ -5156,6 +5269,11 @@ ${
@@ -5156,6 +5271,11 @@ ${
}
_on_click(event) {
@@ -291,7 +293,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
switch (event.target) {
case this.inputField:
case this._inputContainer:
@@ -5242,7 +5360,7 @@ ${
@@ -5242,7 +5362,7 @@ ${
}
}
@@ -300,7 +302,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
this.view.autoOpen({ event });
} else {
if (this._untrimOnFocusAfterKeydown) {
@@ -5282,9 +5400,16 @@ ${
@@ -5282,9 +5402,16 @@ ${
}
_on_mousedown(event) {
@@ -318,7 +320,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
if (
event.composedTarget != this.inputField &&
event.composedTarget != this._inputContainer
@@ -5294,6 +5419,10 @@ ${
@@ -5294,6 +5421,10 @@ ${
this.focusedViaMousedown = !this.focused;
this.#preventClickSelectsAll = this.focused;
@@ -329,7 +331,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
// Keep the focus status, since the attribute may be changed
// upon calling this.focus().
@@ -5329,7 +5458,7 @@ ${
@@ -5329,7 +5460,7 @@ ${
}
// 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.
@@ -338,7 +340,7 @@ index d6615ec5a29f3e3327ac4171f3fc5d9a69bd09fe..e1128b0d7f5accfd48af27f99e3b2e64
break;
}
@@ -5636,7 +5765,7 @@ ${
@@ -5636,7 +5767,7 @@ ${
// When we are in actions search mode we can show more results so
// increase the limit.
let maxResults =

36
src/zen/boosts/ZenBoostsEditor.mjs
View File

@@ -824,13 +824,19 @@ ${cssSelector} {
const dotSec = this.doc.querySelector(
"#zen-boost-color-picker-dot-secondary"
);
const dotDistance = this.currentBoostData.dotDistance;
const dotAngleDeg = this.currentBoostData.dotAngleDeg;
const secondaryDotAngleDelta =
this.currentBoostData.secondaryDotAngleDegDelta ?? 0;
dot.style.setProperty(
"--zen-theme-picker-dot-color",
`hsl(${this.currentBoostData.dotAngleDeg}deg, ${this.currentBoostData.dotDistance * 100}%, 55%)`
`hsl(${dotAngleDeg}deg, ${dotDistance * 100}%, 55%)`
);
dotSec.style.setProperty(
"--zen-theme-picker-dot-color",
`hsl(${this.currentBoostData.dotAngleDeg + this.currentBoostData.secondaryDotAngleDegDelta}deg, ${this.currentBoostData.dotDistance * 100}%, 20%)`
`hsl(${dotAngleDeg + secondaryDotAngleDelta}deg, ${dotDistance * 100}%, 20%)`
);
}
@@ -854,22 +860,23 @@ ${cssSelector} {
const centerY = rect.top + rect.height / 2;
const radius = (rect.width - padding) / 2;
const dotDistance = this.currentBoostData.dotDistance;
const primaryDotAngleDeg = this.currentBoostData.dotAngleDeg;
let angle = null;
if (!pixelX || !pixelY) {
if (pixelX == null || pixelY == null) {
pixelX = centerX;
pixelY = centerY;
angle = this.currentBoostData.secondaryDotAngleDegDelta;
} else {
angle = Math.atan2(pixelY - centerY, pixelX - centerX);
pixelX =
centerX + Math.cos(angle) * this.currentBoostData.dotDistance * radius;
pixelY =
centerY + Math.sin(angle) * this.currentBoostData.dotDistance * radius;
pixelX = centerX + Math.cos(angle) * dotDistance * radius;
pixelY = centerY + Math.sin(angle) * dotDistance * radius;
}
// Rad to degree
this.currentBoostData.secondaryDotAngleDegDelta =
((angle * 180) / Math.PI + 100 - this.currentBoostData.dotAngleDeg) % 360;
((angle * 180) / Math.PI + 100 - primaryDotAngleDeg) % 360;
if (this.currentBoostData.secondaryDotAngleDegDelta < 0) {
this.currentBoostData.secondaryDotAngleDegDelta += 360;
}
@@ -902,14 +909,19 @@ ${cssSelector} {
const cx = rect.width / 2;
const cy = rect.height / 2;
const dotDistance = this.currentBoostData.dotDistance;
const dotAngleDeg = this.currentBoostData.dotAngleDeg;
const secondaryDotAngleDelta =
this.currentBoostData.secondaryDotAngleDegDelta ?? 0;
// Updating the circle size to match the distance of the point
const circle = this.doc.querySelector(".zen-boost-color-picker-circle");
circle.setAttribute("animated", "false");
circle.style.width = `${this.currentBoostData.dotDistance * radius * 2}px`;
circle.style.height = `${this.currentBoostData.dotDistance * radius * 2}px`;
circle.style.width = `${dotDistance * radius * 2}px`;
circle.style.height = `${dotDistance * radius * 2}px`;
const dotColor = `hsl(${this.currentBoostData.dotAngleDeg}deg, ${this.currentBoostData.dotDistance * 100}%, 55%)`;
const dotColorSec = `hsl(${this.currentBoostData.dotAngleDeg + this.currentBoostData.secondaryDotAngleDegDelta}deg, ${this.currentBoostData.dotDistance * 100}%, 20%)`;
const dotColor = `hsl(${dotAngleDeg}deg, ${dotDistance * 100}%, 55%)`;
const dotColorSec = `hsl(${dotAngleDeg + secondaryDotAngleDelta}deg, ${dotDistance * 100}%, 20%)`;
this.updateArcFill(cx, cy, radius, dotColor, dotColorSec);
}

7
src/zen/boosts/ZenBoostsManager.sys.mjs
View File

@@ -114,9 +114,12 @@ class nsZenBoostsManager {
boostData: {
boostName: "My Boost",
dotAngleDeg: 0,
/* These initial values depend on
each other. Changing one means having to
recalculate all of them manually. */
dotAngleDeg: 131.61,
dotPos: { x: 0.76, y: 0.66 },
dotDistance: 0,
dotDistance: 0.91,
secondaryDotAngleDegDelta: 55,
secondaryDotPos: { x: 0.5, y: 0.81 },