2021-05-07 11:39:01 +02:00
|
|
|
diff --git a/browser/components/urlbar/UrlbarInput.jsm b/browser/components/urlbar/UrlbarInput.jsm
|
2021-06-02 19:56:19 +02:00
|
|
|
index 4c42071..12323dd 100644
|
2021-05-07 11:39:01 +02:00
|
|
|
--- a/browser/components/urlbar/UrlbarInput.jsm
|
|
|
|
+++ b/browser/components/urlbar/UrlbarInput.jsm
|
2021-06-02 19:56:19 +02:00
|
|
|
@@ -1712,13 +1712,13 @@ class UrlbarInput {
|
2021-05-07 11:39:01 +02:00
|
|
|
|
|
|
|
// 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")) {
|
|
|
|
- this.window.promiseDocumentFlushed(() => {
|
|
|
|
- this.window.requestAnimationFrame(() => {
|
|
|
|
- this.setAttribute("breakout-extend-animate", "true");
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- }
|
2021-06-02 19:56:19 +02:00
|
|
|
+// if (!this.hasAttribute("breakout-extend-animate")) {
|
|
|
|
+// this.window.promiseDocumentFlushed(() => {
|
|
|
|
+// this.window.requestAnimationFrame(() => {
|
|
|
|
+// this.setAttribute("breakout-extend-animate", "true");
|
|
|
|
+// });
|
|
|
|
+// });
|
|
|
|
+// }
|
2021-05-07 11:39:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
endLayoutExtend() {
|
|
|
|
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
|
2021-06-02 19:56:19 +02:00
|
|
|
index e80aaf6..6ec0961 100644
|
2021-05-07 11:39:01 +02:00
|
|
|
--- a/browser/themes/shared/urlbar-searchbar.inc.css
|
|
|
|
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
|
|
|
|
@@ -5,7 +5,7 @@
|
|
|
|
%endif
|
|
|
|
|
|
|
|
%define fieldHoverBorderColor hsla(240,5%,5%,.35)
|
|
|
|
-%define urlbarMarginInline 5px
|
|
|
|
+%define urlbarMarginInline 0px
|
|
|
|
%define urlbarSearchButtonWidth calc(16px + 2 * var(--urlbar-icon-padding))
|
|
|
|
|
|
|
|
:root {
|
2021-06-02 19:56:19 +02:00
|
|
|
@@ -279,40 +279,40 @@
|
2021-05-07 11:39:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#urlbar[breakout][breakout-extend] {
|
|
|
|
- top: -@urlbarBreakoutExtend@;
|
|
|
|
- left: calc(-@urlbarMarginInline@ - @urlbarBreakoutExtend@);
|
|
|
|
- width: calc(100% + 2 * @urlbarMarginInline@ + 2 * @urlbarBreakoutExtend@);
|
2021-06-02 19:56:19 +02:00
|
|
|
+ top: 0;
|
2021-05-07 11:39:01 +02:00
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
}
|
|
|
|
|
2021-06-02 19:56:19 +02:00
|
|
|
@media (-moz-proton) {
|
|
|
|
#urlbar[breakout][breakout-extend] {
|
|
|
|
top: 0;
|
|
|
|
- left: -@urlbarMarginInline@;
|
|
|
|
- width: calc(100% + 2 * @urlbarMarginInline@);
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
}
|
|
|
|
} /*** END proton ***/
|
2021-05-07 11:39:01 +02:00
|
|
|
|
2021-06-02 19:56:19 +02:00
|
|
|
@media not (-moz-proton) {
|
2021-05-07 11:39:01 +02:00
|
|
|
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
|
|
|
- box-shadow: 0 3px 8px 0 rgba(0,0,0,.15)
|
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
|
|
|
}
|
|
|
|
|
|
|
|
#urlbar[breakout][breakout-extend][open] > #urlbar-background {
|
2021-06-02 19:56:19 +02:00
|
|
|
- box-shadow: 0 5px 18px rgba(0,0,0,.2);
|
|
|
|
+ box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
|
|
|
}
|
2021-05-07 11:39:01 +02:00
|
|
|
} /*** END !proton ***/
|
|
|
|
|
|
|
|
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
|
|
|
- height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutExtend@);
|
|
|
|
- padding-block: calc(@urlbarBreakoutExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
|
|
|
|
- padding-inline: calc(@urlbarMarginInline@ + @urlbarBreakoutExtend@);
|
2021-06-02 19:56:19 +02:00
|
|
|
+ height: var(--urlbar-toolbar-height);
|
|
|
|
+ padding-block: 0;
|
|
|
|
+ padding-inline: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (-moz-proton) {
|
|
|
|
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
|
|
|
|
height: var(--urlbar-toolbar-height);
|
|
|
|
- padding-block: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2 + var(--urlbar-container-padding));
|
|
|
|
- padding-inline: calc(@urlbarMarginInline@ + var(--urlbar-container-padding));
|
2021-05-07 11:39:01 +02:00
|
|
|
+ padding-block: 0;
|
|
|
|
+ padding-inline: 0;
|
|
|
|
}
|
2021-06-02 19:56:19 +02:00
|
|
|
} /*** END proton ***/
|
2021-05-07 11:39:01 +02:00
|
|
|
|
2021-06-02 19:56:19 +02:00
|
|
|
@@ -331,7 +331,7 @@
|
2021-05-07 11:39:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
|
|
|
- animation-name: urlbar-grow;
|
|
|
|
+ animation-name: none;
|
|
|
|
animation-duration: 0s;
|
|
|
|
animation-timing-function: var(--animation-easing-function);
|
|
|
|
}
|
|
|
|
diff --git a/browser/themes/shared/urlbarView.inc.css b/browser/themes/shared/urlbarView.inc.css
|
2021-06-02 19:56:19 +02:00
|
|
|
index d2bb269..0d47466 100644
|
2021-05-07 11:39:01 +02:00
|
|
|
--- a/browser/themes/shared/urlbarView.inc.css
|
|
|
|
+++ b/browser/themes/shared/urlbarView.inc.css
|
2021-06-02 19:56:19 +02:00
|
|
|
@@ -73,16 +73,16 @@
|
2021-05-07 11:39:01 +02:00
|
|
|
display: block;
|
|
|
|
text-shadow: none;
|
|
|
|
overflow: clip;
|
|
|
|
- margin-inline: calc(5px + var(--urlbar-container-padding));
|
|
|
|
- width: calc(100% - 2 * (5px + var(--urlbar-container-padding)));
|
|
|
|
+ margin-inline: 0;
|
2021-06-02 19:56:19 +02:00
|
|
|
+ width: 100%
|
2021-05-07 11:39:01 +02:00
|
|
|
/* Match urlbar-background's border. */
|
|
|
|
border-inline: 1px solid transparent;
|
|
|
|
}
|
2021-06-02 19:56:19 +02:00
|
|
|
|
|
|
|
@media not (-moz-proton) {
|
|
|
|
.urlbarView {
|
|
|
|
- margin-inline: calc(4px + var(--identity-box-margin-inline));
|
|
|
|
- width: calc(100% - 2 * (4px + var(--identity-box-margin-inline)));
|
|
|
|
+ margin-inline: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
}
|
|
|
|
/* If the view is open, offset the toolbar overlap so the view's top border
|
|
|
|
aligns with the toolbar. */
|
|
|
|
@@ -112,7 +112,7 @@
|
|
|
|
.urlbarView-row {
|
2021-05-07 11:39:01 +02:00
|
|
|
fill: currentColor;
|
2021-06-02 19:56:19 +02:00
|
|
|
fill-opacity: var(--urlbar-icon-fill-opacity);
|
2021-05-07 11:39:01 +02:00
|
|
|
- padding-block: 3px;
|
|
|
|
+ padding-block: 0;
|
|
|
|
}
|
|
|
|
|
2021-06-02 19:56:19 +02:00
|
|
|
@media not (-moz-proton) {
|
|
|
|
@@ -127,7 +127,7 @@
|
|
|
|
}
|
|
|
|
|
|
|
|
:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
|
|
|
|
- min-height: 32px;
|
|
|
|
+ min-height: 0;
|
|
|
|
}
|
|
|
|
} /*** END proton ***/
|
|
|
|
|
|
|
|
@@ -295,6 +295,7 @@
|
2021-05-07 11:39:01 +02:00
|
|
|
object-fit: contain;
|
|
|
|
flex-shrink: 0;
|
|
|
|
-moz-context-properties: fill, fill-opacity;
|
|
|
|
+ margin-inline-start: 20px;
|
|
|
|
}
|
|
|
|
|
2021-06-02 19:56:19 +02:00
|
|
|
@media not (-moz-proton) {
|
|
|
|
@@ -328,10 +329,10 @@
|
2021-05-07 11:39:01 +02:00
|
|
|
|
|
|
|
.urlbarView-type-icon {
|
|
|
|
position: absolute;
|
|
|
|
- width: 12px;
|
|
|
|
- height: 12px;
|
|
|
|
- margin-bottom: -4px;
|
|
|
|
- margin-inline-start: 8px;
|
|
|
|
+ width: 16px;
|
|
|
|
+ height: 16px;
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ margin-inline-start: 0;
|
|
|
|
align-self: end;
|
|
|
|
background-repeat: no-repeat;
|
2021-06-02 19:56:19 +02:00
|
|
|
background-size: contain;
|