mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-08 09:29:58 +02:00
chore: Made an URL revamp! Fixed lots of things in different layouts and made it's UI a bit cleaner, b=(no-bug), c=common
This commit is contained in:
parent
c5515fc3ae
commit
a35ef0e735
4 changed files with 40 additions and 18 deletions
|
@ -387,7 +387,7 @@ pref('zen.widget.linux.transparency', false);
|
||||||
#endif
|
#endif
|
||||||
|
|
||||||
// Urlbar and autocomplete
|
// Urlbar and autocomplete
|
||||||
pref("browser.urlbar.maxRichResults", 6);
|
pref("browser.urlbar.maxRichResults", 8);
|
||||||
pref("browser.urlbar.trimHttps", true);
|
pref("browser.urlbar.trimHttps", true);
|
||||||
pref("browser.search.separatePrivateDefault.ui.enabled", true);
|
pref("browser.search.separatePrivateDefault.ui.enabled", true);
|
||||||
pref("browser.urlbar.update2.engineAliasRefresh", true);
|
pref("browser.urlbar.update2.engineAliasRefresh", true);
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
|
diff --git a/browser/components/urlbar/UrlbarInput.sys.mjs b/browser/components/urlbar/UrlbarInput.sys.mjs
|
||||||
index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a864dd8854611d78e3ace9db301cf7c4f1357a32 100644
|
index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..2de9f51784a92442da84ead54312e879c1da127b 100644
|
||||||
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
|
--- a/browser/components/urlbar/UrlbarInput.sys.mjs
|
||||||
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
|
+++ b/browser/components/urlbar/UrlbarInput.sys.mjs
|
||||||
@@ -68,6 +68,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
|
@@ -68,6 +68,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
|
||||||
|
@ -108,6 +108,15 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a864dd8854611d78e3ace9db301cf7c4
|
||||||
this.removeAttribute("breakout-extend");
|
this.removeAttribute("breakout-extend");
|
||||||
this.#updateTextboxPosition();
|
this.#updateTextboxPosition();
|
||||||
}
|
}
|
||||||
|
@@ -2485,7 +2529,7 @@ export class UrlbarInput {
|
||||||
|
|
||||||
|
this.textbox.parentNode.style.setProperty(
|
||||||
|
"--urlbar-container-height",
|
||||||
|
- px(getBoundsWithoutFlushing(this.textbox.parentNode).height)
|
||||||
|
+ px(getBoundsWithoutFlushing(this.textbox.parentNode).height + 8)
|
||||||
|
);
|
||||||
|
this.textbox.style.setProperty(
|
||||||
|
"--urlbar-height",
|
||||||
@@ -2998,7 +3042,7 @@ export class UrlbarInput {
|
@@ -2998,7 +3042,7 @@ export class UrlbarInput {
|
||||||
*/
|
*/
|
||||||
_trimValue(val) {
|
_trimValue(val) {
|
||||||
|
@ -158,7 +167,7 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a864dd8854611d78e3ace9db301cf7c4
|
||||||
}
|
}
|
||||||
|
|
||||||
_on_click(event) {
|
_on_click(event) {
|
||||||
+ if (lazy.ZEN_URLBAR_BEHAVIOR === 'float' && event.target == this.inputField) {
|
+ if (event.target == this.inputField) {
|
||||||
+ event.zenOriginalTarget = this.textbox;
|
+ event.zenOriginalTarget = this.textbox;
|
||||||
+ this._on_mousedown(event);
|
+ this._on_mousedown(event);
|
||||||
+ }
|
+ }
|
||||||
|
@ -183,7 +192,7 @@ index 4b69136aa31bfef3a1d3b57ad0c75fe07fa26be0..a864dd8854611d78e3ace9db301cf7c4
|
||||||
+ switch (event.zenOriginalTarget || event.currentTarget) {
|
+ switch (event.zenOriginalTarget || event.currentTarget) {
|
||||||
case this.textbox: {
|
case this.textbox: {
|
||||||
this._mousedownOnUrlbarDescendant = true;
|
this._mousedownOnUrlbarDescendant = true;
|
||||||
+ if (event.type != "click" && lazy.ZEN_URLBAR_BEHAVIOR === 'float') {
|
+ if (event.type != "click") {
|
||||||
+ return true;
|
+ return true;
|
||||||
+ }
|
+ }
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
|
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
|
||||||
index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1aea42252 100644
|
index e237ee9edea85c1d2ef22f988df6b22755e343e6..b06fc06686a7a969e924ad0df662dec937b3c70d 100644
|
||||||
--- a/browser/themes/shared/urlbar-searchbar.css
|
--- a/browser/themes/shared/urlbar-searchbar.css
|
||||||
+++ b/browser/themes/shared/urlbar-searchbar.css
|
+++ b/browser/themes/shared/urlbar-searchbar.css
|
||||||
@@ -5,7 +5,7 @@
|
@@ -5,7 +5,7 @@
|
||||||
|
@ -7,11 +7,11 @@ index 574f83af7fa49ddcdff6711ca8b1d3bed1a35e0c..c2e8cb8b37438176db07a47e1e975ae1
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
- --urlbar-container-padding: 1px;
|
- --urlbar-container-padding: 1px;
|
||||||
+ --urlbar-container-padding: 4px;
|
+ --urlbar-container-padding: 2px;
|
||||||
--urlbar-margin-inline: 5px;
|
--urlbar-margin-inline: 5px;
|
||||||
--urlbar-padding-block: 4px;
|
--urlbar-padding-block: 4px;
|
||||||
}
|
}
|
||||||
@@ -291,7 +291,9 @@
|
@@ -292,7 +292,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#urlbar[breakout][breakout-extend] {
|
#urlbar[breakout][breakout-extend] {
|
||||||
|
|
|
@ -9,19 +9,30 @@
|
||||||
padding-block: 0 !important;
|
padding-block: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root[zen-single-toolbar='true'] {
|
||||||
|
--urlbar-container-padding: 4px;
|
||||||
|
& #urlbar:not([breakout-extend='true']) {
|
||||||
|
padding: 1px;
|
||||||
|
--toolbarbutton-border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#urlbar {
|
#urlbar {
|
||||||
--toolbarbutton-border-radius: 8px;
|
|
||||||
--urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
|
--urlbarView-separator-color: light-dark(hsl(0, 0%, 90%), hsl(0, 0%, 20%));
|
||||||
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
|
--urlbarView-hover-background: var(--toolbarbutton-hover-background);
|
||||||
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
|
--urlbarView-highlight-background: var(--toolbarbutton-hover-background);
|
||||||
border-radius: var(--toolbarbutton-border-radius);
|
border-radius: calc(var(--toolbarbutton-border-radius) - 2px);
|
||||||
padding: 1px;
|
--urlbarView-results-padding: 10px !important;
|
||||||
|
|
||||||
:root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
|
:root:not([zen-single-toolbar='true']) &[zen-floating-urlbar='true'] {
|
||||||
--urlbar-container-padding: 2px !important;
|
--urlbar-container-padding: 2px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root:not([zen-single-toolbar='true']) #urlbar:not([zen-floating-urlbar='true']) {
|
||||||
|
--urlbarView-results-padding: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.urlbar-input::placeholder {
|
.urlbar-input::placeholder {
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
@ -84,8 +95,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#urlbar:not([breakout-extend='true']) #identity-box {
|
:root[zen-single-toolbar='true'] #urlbar:not([breakout-extend='true']) #identity-box {
|
||||||
margin-inline-end: 0 !important;
|
margin-inline-end: 0 !important;
|
||||||
|
&.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
||||||
|
border-radius: 10px !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.urlbar-page-action,
|
.urlbar-page-action,
|
||||||
|
@ -177,7 +191,7 @@
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
#urlbar:not(:hover) & {
|
#urlbar:not(:hover) & {
|
||||||
transition: 0;
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -325,11 +339,6 @@ button.popup-notification-dropmarker {
|
||||||
border-radius: var(--urlbar-icon-border-radius) !important;
|
border-radius: var(--urlbar-icon-border-radius) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Extensions or similar */
|
|
||||||
#urlbar:not([breakout-extend='true']) #identity-box.chromeUI:not([pageproxystate='invalid']) #identity-icon-box {
|
|
||||||
border-radius: 10px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Notification Stack */
|
/* Notification Stack */
|
||||||
|
|
||||||
.notificationbox-stack {
|
.notificationbox-stack {
|
||||||
|
@ -407,7 +416,7 @@ button.popup-notification-dropmarker {
|
||||||
|
|
||||||
#urlbar[open] {
|
#urlbar[open] {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
--urlbar-margin-inline: 5px !important;
|
--urlbar-margin-inline: 5px;
|
||||||
|
|
||||||
& #identity-box {
|
& #identity-box {
|
||||||
margin-right: var(--urlbar-margin-inline);
|
margin-right: var(--urlbar-margin-inline);
|
||||||
|
@ -538,4 +547,8 @@ button.popup-notification-dropmarker {
|
||||||
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
|
color: color-mix(in srgb, var(--zen-colors-primary) 30%, lightgray) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&[selected] {
|
||||||
|
background-color: color-mix(in srgb, var(--zen-primary-color) 50%, transparent 50%) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue