1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-08 11:49:59 +02:00

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
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
13 changed files with 253 additions and 79 deletions

2
l10n

@ -1 +1 @@
Subproject commit 6b7d9d351f2c874e2700204eeebf1d8a4b1529f5
Subproject commit bb99a55c2dbad4cd1207f6dbd3c1380801eec751

View file

@ -107,7 +107,8 @@ pref('zen.view.compact.toolbar-flash-popup.duration', 800);
pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000);
pref('zen.view.compact.color-toolbar', true);
pref('zen.view.compact.color-sidebar', true);
pref('zen.view.use-deprecated-urlbar', false);
pref('zen.urlbar.behavior', 'float'); // default, floating-on-type, float
#ifdef XP_MACOSX
// Disable for macos in the meantime until @HarryHeres finds a solution for hight DPI screens
@ -130,9 +131,7 @@ pref('zen.view.sidebar-expanded', true);
pref('zen.view.sidebar-collapsed.hide-mute-button', true);
pref('zen.view.experimental-force-window-controls-left', false);
#ifndef XP_MACOSX
pref('zen.view.hide-window-controls', true);
#endif
pref('zen.tabs.dim-pending', true);
pref('zen.tabs.newtab-on-middle-click', true);
@ -294,3 +293,5 @@ pref('browser.download.autohideButton', false);
#ifdef XP_MACOSX
pref('widget.macos.titlebar-blend-mode.behind-window', true);
#endif
pref("browser.urlbar.maxRichResults", 5);

View file

@ -378,6 +378,11 @@ var gZenVerticalTabsManager = {
}
}
// Case: single toolbar, not compact mode, not right side and macos styled buttons
if (doNotChangeWindowButtons && isSingleToolbar && !isCompactMode && !isRightSide && !this.isWindowsStyledButtons) {
topButtons.prepend(windowButtons);
}
if (doNotChangeWindowButtons) {
if (isRightSide && !isSidebarExpanded) {
navBar.appendChild(windowButtons);

View file

@ -25,6 +25,21 @@
}
}
@keyframes zen-new-tab-appear-vertical {
0% {
opacity: 0;
transform: translateY(-25px);
}
60% {
opacity: 0.8 ;
transform: translateY(4px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zen-main-app-wrapper-animation {
from {
opacity: 1;

View file

@ -53,6 +53,10 @@
}
}
:root:not([zen-single-toolbar='true']) #zen-appcontent-wrapper {
z-index: 2;
}
#zen-main-app-wrapper {
background: transparent;
overflow: hidden;

View file

@ -2,6 +2,14 @@
@media (-moz-bool-pref: 'zen.view.compact') {
:root:not([customizing]):not([inDOMFullscreen='true']) {
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
@media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
#zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
@ -19,15 +27,6 @@
display: none !important;
}
#zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
max-height: 0 !important;
min-height: 0 !important;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
#navigator-toolbox {
--zen-toolbox-max-width: 54px !important;
--zen-compact-float: calc(var(--zen-element-separation) - 1px);
@ -147,7 +146,7 @@
border-bottom-right-radius: var(--zen-border-radius);
border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
transition: all 0.1s ease-in-out;
transition: all 0.15s ease;
width: 100%;
opacity: 0;
background: var(--zen-dialog-background);
@ -157,6 +156,11 @@
position: relative !important;
}
& #urlbar {
transform: translateY(-50%);
transition: transform 0.1s ease-in-out;
}
:root[zen-window-buttons-reversed='true'] & {
padding-left: 0 !important;
padding-right: var(--zen-toolbox-padding) !important;
@ -181,6 +185,10 @@
border-top-width: 1px;
top: -1px;
& #urlbar {
transform: translateY(0);
}
}
}
}

View file

@ -42,6 +42,12 @@
}
}
}
#vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
.tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
}
}
:root[zen-window-buttons-reversed='true'] .titlebar-buttonbox-container {
@ -218,7 +224,6 @@
}
& .tabbrowser-tab {
animation: none;
transition: scale 0.1s ease-in-out;
&[fadein='true']:not([zen-essential='true']) {
#tabbrowser-tabs[zen-workspace-animation='previous'] & {
@ -366,7 +371,7 @@
padding-right: 0;
:root[zen-single-toolbar='true'] & {
margin-left: var(--zen-toolbox-padding);
margin-left: calc(var(--zen-toolbox-padding) / 2);
width: calc(100% - var(--zen-toolbox-padding));
& #urlbar:not([breakout-extend='true']) .urlbar-input-container {
padding-left: 4px;

View file

@ -337,47 +337,112 @@ button.popup-notification-dropmarker {
}
}
@media not (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') {
#urlbar[open] {
z-index: 1000;
min-width: 45vw;
max-width: 45vw;
top: 0 !important;
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
font-size: 1.1em;
#urlbar[open] {
--urlbar-container-height: 55px !important;
--urlbar-margin-inline: 10px !important;
font-size: 1.1em;
& #urlbar-background {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: var(--zen-branding-bg) !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
outline-offset: -1px !important;
}
& #identity-box {
margin-right: var(--urlbar-margin-inline);
}
:root[zen-right-side='true'] & {
right: 0;
}
position: absolute;
top: calc(var(--zen-toolbar-height) * 2) !important;
left: 28vw;
#urlbar-container:has(&) {
border-radius: 10px;
background: var(--toolbarbutton-hover-background);
}
& #urlbar-background {
/* We cant have a transparent background with a backdrop-filter because on normal websites,
the backdrop woudn't work, we would need to apply a clip-path to the site and that's not recommended
due to performance issues */
background-color: var(--zen-branding-bg) !important;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
outline: 1px solid light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
outline-offset: -1px !important;
}
}
@media (-moz-bool-pref: 'zen.view.use-deprecated-urlbar') {
#urlbar[open] {
top: 0 !important;
#urlbar[open][zen-floating-urlbar='true'] {
z-index: 1000;
min-width: 45vw;
max-width: 45vw;
top: 0 !important;
& #identity-box {
margin-right: var(--urlbar-margin-inline);
}
:root[zen-right-side='true'] & {
right: 0;
}
position: absolute;
top: calc(var(--zen-toolbar-height) * 2) !important;
left: 28vw;
#urlbar-container:has(&) {
border-radius: 10px;
background: var(--toolbarbutton-hover-background);
}
}
/* Code ~~stolen~~ taken inspiration from https://github.com/greeeen-dev/zen-arc-cmd-bar
*
* MIT License
*
* Copyright (c) 2024 green.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
**/
.urlbarView-title, .urlbarView-title-separator, .urlbarView-action, .urlbarView-url {
margin-top: auto !important;
margin-bottom: auto !important;
}
.urlbarView-title {
font-size: 14px !important;
font-weight: 500 !important;
}
.urlbarView-url, .urlbarView-title-separator::before {
font-size: 14px !important;
font-weight: 500 !important;
color: #aaa !important;
}
.urlbarView-favicon {
margin-left: 0 !important;
margin-right: 12px !important;
padding: 6px !important;
border-radius: 6px !important;
}
.urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) .urlbarView-action {
margin-left: auto !important;
margin-right: 0 !important;
}
.urlbarView-row {
.urlbarView-favicon {
transition: background-color 0.05s;
}
&:hover {
background-color: var(--zen-colors-primary) !important;
.urlbarView-favicon {
background-color: color-mix(in srgb, var(--zen-branding-bg-reverse) 20%, transparent 80%) !important;
}
.urlbarView-url, .urlbarView-title-separator::before {
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
}
}
}

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.