Added options for floating urlbar, fixed macos weird window control positioning, added newtab animations, fixed top toolbar hiding when hovering reload button and new URLBar UI

This commit is contained in:
mr. M
2024-12-13 00:49:43 +01:00
parent 85028b060c
commit c67fc71069
13 changed files with 253 additions and 79 deletions

View File

@@ -1087,6 +1087,11 @@ Preferences.addAll([
type: "bool",
default: true,
},
{
id: "zen.urlbar.behavior",
type: "string",
default: "float",
},
{
id: "zen.view.compact.color-sidebar",
type: "bool",

View File

@@ -340,6 +340,29 @@
</hbox>
</groupbox>
<hbox id="zenUrlBarCategory"
class="subcategory"
hidden="true"
data-category="paneZenLooks">
<html:h1 data-l10n-id="zen-urlbar-title"/>
</hbox>
<groupbox id="zenUrlbarGroup" data-category="paneZenLooks" hidden="true" class="highlighting-group">
<label><html:h2 data-l10n-id="zen-urlbar-header"/></label>
<description class="description-deemphasized" data-l10n-id="zen-urlbar-description" />
<hbox align="center">
<label data-l10n-id="zen-urlbar-behavior-label"/>
<menulist preference="zen.urlbar.behavior">
<menupopup>
<menuitem data-l10n-id="zen-urlbar-behavior-normal" value="normal"/>
<menuitem data-l10n-id="zen-urlbar-behavior-floating-on-type" value="floating-on-type"/>
<menuitem data-l10n-id="zen-urlbar-behavior-float" value="float"/>
</menupopup>
</menulist>
</hbox>
</groupbox>
<hbox id="zenSplitViewCategory"
class="subcategory"
hidden="true"

View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415bbc9b9800 100644
index fec3dc8129a4d235fdd05e0390145a02064ebaa5..65f0675f558bda9a1d02335418ffb92bcb2463de 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -402,11 +402,26 @@
@@ -110,7 +110,21 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
@@ -3342,6 +3374,23 @@
@@ -2862,6 +2894,13 @@
}
}
+ requestAnimationFrame(() => {
+ t.setAttribute("zen-initial-fadein", "true");
+ setTimeout(() => {
+ t.removeAttribute("zen-initial-fadein");
+ }, 2000);
+ });
+
// Additionally send pinned tab events
if (pinned) {
this._notifyPinnedStatus(t);
@@ -3342,6 +3381,23 @@
) {
tabWasReused = true;
tab = this.selectedTab;
@@ -134,7 +148,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
@@ -3355,6 +3404,9 @@
@@ -3355,6 +3411,9 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
@@ -144,7 +158,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
@@ -3391,6 +3443,21 @@
@@ -3391,6 +3450,21 @@
preferredRemoteType,
});
@@ -166,7 +180,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
if (select) {
tabToSelect = tab;
}
@@ -3444,7 +3511,6 @@
@@ -3444,7 +3518,6 @@
this.tabContainer._invalidateCachedTabs();
}
}
@@ -174,7 +188,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
tab.initialize();
}
@@ -3992,6 +4058,10 @@
@@ -3992,6 +4065,10 @@
return;
}
@@ -185,7 +199,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
this.removeTabs(selectedTabs);
},
@@ -4309,6 +4379,13 @@
@@ -4309,6 +4386,13 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@@ -199,7 +213,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4324,6 +4401,10 @@
@@ -4324,6 +4408,10 @@
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -210,7 +224,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4472,7 +4553,7 @@
@@ -4472,7 +4560,7 @@
var closeWindow = false;
var newTab = false;
@@ -219,7 +233,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
closeWindow =
closeWindowWithLastTab != null
? closeWindowWithLastTab
@@ -5265,10 +5346,10 @@
@@ -5265,10 +5353,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
},
@@ -232,7 +246,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -7181,6 +7262,7 @@
@@ -7181,6 +7269,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -240,7 +254,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
gBrowser.syncThrobberAnimations(this.mTab);
@@ -8114,7 +8196,7 @@ var TabContextMenu = {
@@ -8114,7 +8203,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@@ -249,7 +263,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -8148,7 +8230,7 @@ var TabContextMenu = {
@@ -8148,7 +8237,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab =
tabsToMove[0] == visibleTabs[0] ||
@@ -258,7 +272,7 @@ index fec3dc8129a4d235fdd05e0390145a02064ebaa5..8eab9fc985ca701a11b309acfada415b
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled =
@@ -8376,6 +8458,7 @@ var TabContextMenu = {
@@ -8376,6 +8465,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {

View File

@@ -1,36 +1,65 @@
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
index c504c9afc43785b5f003bb1f9f1dfbddef38d78b..e5a1ce5d61962d485d092cf3d1a90ff4833037f1 100644
index c504c9afc43785b5f003bb1f9f1dfbddef38d78b..289a9dfdc2fd38f7d7c3571732e3897aa978d8d9 100644
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
@@ -3901,6 +3901,9 @@ export class UrlbarInput {
@@ -65,6 +65,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
false
);
+XPCOMUtils.defineLazyPreferenceGetter(
+ lazy,
+ "ZEN_URLBAR_BEHAVIOR",
+ "zen.urlbar.behavior",
+ 'default'
+);
+
const DEFAULT_FORM_HISTORY_NAME = "searchbar-history";
const SEARCH_BUTTON_CLASS = "urlbar-search-button";
@@ -2154,6 +2161,10 @@ export class UrlbarInput {
this.setAttribute("breakout-extend", "true");
+ if (lazy.ZEN_URLBAR_BEHAVIOR == 'float' || (lazy.ZEN_URLBAR_BEHAVIOR == 'floating-on-type' && !this.focusedViaMousedown)) {
+ this.setAttribute("zen-floating-urlbar", "true");
+ } else this.removeAttribute("zen-floating-urlbar");
+
// 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")) {
@@ -3901,6 +3912,11 @@ export class UrlbarInput {
}
_on_click(event) {
+ event.zenOriginalTarget = this.textbox;
+ this._on_mousedown(event);
+ if (lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
+ event.zenOriginalTarget = this.textbox;
+ this._on_mousedown(event);
+ }
+
if (
event.target == this.inputField ||
event.target == this._inputContainer ||
@@ -4012,8 +4015,11 @@ export class UrlbarInput {
@@ -4012,8 +4028,11 @@ export class UrlbarInput {
}
_on_mousedown(event) {
- switch (event.currentTarget) {
+ switch (event.zenOriginalTarget || event.currentTarget) {
case this.textbox: {
+ if (event.type != "click") {
+ if (event.type != "click" && lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
+ return true;
+ }
this._mousedownOnUrlbarDescendant = true;
if (
@@ -4025,7 +4031,7 @@ export class UrlbarInput {
@@ -4024,8 +4043,8 @@ export class UrlbarInput {
break;
}
this.focusedViaMousedown = !this.focused;
- this.focusedViaMousedown = !this.focused;
- this._preventClickSelectsAll = this.focused;
+ this._preventClickSelectsAll = this.hasAttribute("breakout-extend");
+ this.focusedViaMousedown = !(lazy.ZEN_URLBAR_BEHAVIOR === 'float' ? this.hasAttribute("breakout-extend") : this.focused);
+ this._preventClickSelectsAll = lazy.ZEN_URLBAR_BEHAVIOR === 'default' ? this.focused : this.hasAttribute("breakout-extend");
// Keep the focus status, since the attribute may be changed
// upon calling this.focus().

View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/urlbar/UrlbarView.sys.mjs b/browser/components/urlbar/UrlbarView.sys.mjs
index 197e0a1c3030b6346c49a010338130797c1e5f4b..8a3cbba1b533572de4ca7f10d229f16ae7bb6184 100644
index 197e0a1c3030b6346c49a010338130797c1e5f4b..333d38aea2116c5407ffc242b805db633df12968 100644
--- a/browser/components/urlbar/UrlbarView.sys.mjs
+++ b/browser/components/urlbar/UrlbarView.sys.mjs
@@ -628,7 +628,7 @@ export class UrlbarView {
@@ -7,7 +7,7 @@ index 197e0a1c3030b6346c49a010338130797c1e5f4b..8a3cbba1b533572de4ca7f10d229f16a
this.input.getAttribute("pageproxystate") == "valid"
) {
- if (!this.isOpen && ["mousedown", "command"].includes(event.type)) {
+ if (!this.isOpen && ["click", "command"].includes(event.type)) {
+ if (!this.isOpen && ["mousedown", "click", "command"].includes(event.type)) {
// Try to reuse the cached top-sites context. If it's not cached, then
// there will be a gap of time between when the input is focused and
// when the view opens that can be perceived as flicker.