1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
diff --git a/browser/components/urlbar/UrlbarInput.jsm b/browser/components/urlbar/UrlbarInput.jsm
index 18d73db..7911576 100644
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -1172,13 +1172,13 @@ class UrlbarInput {
// 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");
- });
- });
- }
+ // if (!this.hasAttribute("breakout-extend-animate")) {
+ // this.window.promiseDocumentFlushed(() => {
+ // this.window.requestAnimationFrame(() => {
+ // this.setAttribute("breakout-extend-animate", "true");
+ // });
+ // });
+ // }
}
endLayoutExtend() {
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
index 0b1f693..7de64a1 100644
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -6,7 +6,7 @@
%define fieldBorderColor hsla(240,5%,5%,.25)
%define fieldHoverBorderColor hsla(240,5%,5%,.35)
-%define urlbarMarginInline 5px
+%define urlbarMarginInline 0px
%define urlbarSearchButtonWidth calc(16px + 2 * @identityBoxPaddingInline@)
:root {
@@ -197,13 +197,13 @@
}
#urlbar[breakout][breakout-extend] {
- top: -@urlbarBreakoutExtend@;
- left: calc(-@urlbarMarginInline@ - @urlbarBreakoutExtend@);
- width: calc(100% + 2 * @urlbarMarginInline@ + 2 * @urlbarBreakoutExtend@);
+ top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
+ left: 0;
+ width: 100%;
}
#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 {
@@ -211,9 +211,9 @@
}
#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@);
+ height: var(--urlbar-height);
+ padding-block: 0;
+ padding-inline: 0;
}
#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {
@@ -231,7 +231,7 @@
}
#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
index 6b8cac0..54648c6 100644
--- a/browser/themes/shared/urlbarView.inc.css
+++ b/browser/themes/shared/urlbarView.inc.css
@@ -48,8 +48,8 @@
display: block;
text-shadow: none;
overflow: clip;
- margin-inline: @urlbarViewMarginInline@;
- width: calc(100% - 2 * @urlbarViewMarginInline@);
+ margin-inline: 0;
+ width: 100%;
/* Match urlbar-background's border. */
border-inline: 1px solid transparent;
@@ -72,7 +72,7 @@
.urlbarView-row {
fill: currentColor;
fill-opacity: .6;
- padding-block: 3px;
+ padding-block: 0;
}
.urlbarView-row-inner {
@@ -179,6 +179,7 @@
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill, fill-opacity;
+ margin-inline-start: 20px;
}
@media (min-resolution: 2dppx) {
@@ -204,10 +205,10 @@
.urlbarView-type-icon {
position: absolute;
- min-width: 12px;
- height: 12px;
- margin-bottom: -4px;
- margin-inline-start: 8px;
+ min-width: 16px;
+ height: 16px;
+ margin-bottom: 0;
+ margin-inline-start: 0;
background-repeat: no-repeat;
background-size: contain;
-moz-context-properties: fill, stroke;
|
