246 lines
7.3 KiB
Diff
246 lines
7.3 KiB
Diff
|
diff --git a/browser/components/urlbar/UrlbarInput.jsm b/browser/components/urlbar/UrlbarInput.jsm
|
||
|
--- a/browser/components/urlbar/UrlbarInput.jsm
|
||
|
+++ b/browser/components/urlbar/UrlbarInput.jsm
|
||
|
@@ -1699,23 +1699,23 @@ class UrlbarInput {
|
||
|
this.removeAttribute("breakout-extend-disabled");
|
||
|
}
|
||
|
|
||
|
this._toolbar.setAttribute("urlbar-exceeds-toolbar-bounds", "true");
|
||
|
this.setAttribute("breakout-extend", "true");
|
||
|
|
||
|
// 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() {
|
||
|
// If reduce motion is enabled, we want to collapse the Urlbar here so the
|
||
|
// user sees only sees two states: not expanded, and expanded with the view
|
||
|
// open.
|
||
|
if (!this.hasAttribute("breakout-extend") || this.view.isOpen) {
|
||
|
return;
|
||
|
diff --git a/browser/themes/shared/urlbar-searchbar.inc.css b/browser/themes/shared/urlbar-searchbar.inc.css
|
||
|
--- a/browser/themes/shared/urlbar-searchbar.inc.css
|
||
|
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
|
||
|
@@ -1,16 +1,16 @@
|
||
|
%if 0
|
||
|
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||
|
%endif
|
||
|
|
||
|
%define fieldHoverBorderColor hsla(240,5%,5%,.35)
|
||
|
-%define urlbarMarginInline 5px
|
||
|
+%define urlbarMarginInline 0px
|
||
|
%define urlbarSearchButtonWidth calc(16px + 2 * var(--urlbar-icon-padding))
|
||
|
|
||
|
:root {
|
||
|
--toolbar-field-border-color: hsla(240,5%,5%,.25);
|
||
|
}
|
||
|
|
||
|
@media not (-moz-proton) {
|
||
|
:root {
|
||
|
@@ -268,50 +268,50 @@
|
||
|
#urlbar[breakout][breakout-extend-disabled][open] {
|
||
|
/* The z-index needs to be big enough to trump other positioned UI pieces
|
||
|
that we want to overlay. 3 is used in the tab bar. */
|
||
|
z-index: 3;
|
||
|
height: auto;
|
||
|
}
|
||
|
|
||
|
#urlbar[breakout][breakout-extend] {
|
||
|
- top: -@urlbarBreakoutExtend@;
|
||
|
- left: calc(-@urlbarMarginInline@ - @urlbarBreakoutExtend@);
|
||
|
- width: calc(100% + 2 * @urlbarMarginInline@ + 2 * @urlbarBreakoutExtend@);
|
||
|
+ top: 0;
|
||
|
+ left: 0;
|
||
|
+ width: 100%;
|
||
|
}
|
||
|
|
||
|
@media (-moz-proton) {
|
||
|
#urlbar[breakout][breakout-extend] {
|
||
|
top: 0;
|
||
|
- left: -@urlbarMarginInline@;
|
||
|
- width: calc(100% + 2 * @urlbarMarginInline@);
|
||
|
+ left: 0;
|
||
|
+ width: 100%;
|
||
|
}
|
||
|
} /*** END proton ***/
|
||
|
|
||
|
@media not (-moz-proton) {
|
||
|
#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 {
|
||
|
- box-shadow: 0 5px 18px rgba(0,0,0,.2);
|
||
|
+ box-shadow: 0 1px 4px rgba(0,0,0,.05);
|
||
|
}
|
||
|
} /*** 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@);
|
||
|
+ 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));
|
||
|
+ padding-block: 0;
|
||
|
+ padding-inline: 0;
|
||
|
}
|
||
|
} /*** END proton ***/
|
||
|
|
||
|
#urlbar.searchButton[breakout][breakout-extend] > #urlbar-input-container > #urlbar-search-button {
|
||
|
fill: currentColor;
|
||
|
fill-opacity: .6;
|
||
|
}
|
||
|
|
||
|
@@ -320,17 +320,17 @@
|
||
|
transform: scaleX(.99) scaleY(.95);
|
||
|
}
|
||
|
100% {
|
||
|
transform: scale(1.0);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
#urlbar[breakout][breakout-extend] > #urlbar-background {
|
||
|
- animation-name: urlbar-grow;
|
||
|
+ animation-name: none;
|
||
|
animation-duration: 0s;
|
||
|
animation-timing-function: var(--animation-easing-function);
|
||
|
}
|
||
|
|
||
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
|
||
|
animation-duration: 150ms;
|
||
|
}
|
||
|
diff --git a/browser/themes/shared/urlbarView.inc.css b/browser/themes/shared/urlbarView.inc.css
|
||
|
--- a/browser/themes/shared/urlbarView.inc.css
|
||
|
+++ b/browser/themes/shared/urlbarView.inc.css
|
||
|
@@ -82,26 +82,26 @@
|
||
|
|
||
|
.urlbarView {
|
||
|
/* Don't handle window drag events in case we are overlapping a toolbar */
|
||
|
-moz-window-dragging: no-drag;
|
||
|
|
||
|
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;
|
||
|
+ width: 100%
|
||
|
/* Match urlbar-background's border. */
|
||
|
border-inline: 1px solid transparent;
|
||
|
}
|
||
|
|
||
|
@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. */
|
||
|
#urlbar[open] > .urlbarView {
|
||
|
margin-block-start: -@urlbarBreakoutExtend@;
|
||
|
}
|
||
|
} /*** END !proton ***/
|
||
|
|
||
|
@@ -123,27 +123,27 @@
|
||
|
padding-block: 0;
|
||
|
}
|
||
|
|
||
|
.urlbarView-row {
|
||
|
display: flex;
|
||
|
flex-wrap: nowrap;
|
||
|
fill: currentColor;
|
||
|
fill-opacity: .6;
|
||
|
- padding-block: 3px;
|
||
|
+ padding-block: 0px;
|
||
|
}
|
||
|
|
||
|
:root[uidensity=compact] .urlbarView-row {
|
||
|
padding-block: 2px;
|
||
|
}
|
||
|
|
||
|
@media (-moz-proton) {
|
||
|
:root:not([uidensity=compact]) .urlbarView-row:not([type=tip], [type=dynamic]) {
|
||
|
- min-height: 32px;
|
||
|
- padding-block: 4px;
|
||
|
+ min-height: 0px; /* todo: check this */
|
||
|
+ padding-block: 0px;
|
||
|
}
|
||
|
} /*** END proton ***/
|
||
|
|
||
|
.urlbarView-row-inner {
|
||
|
display: flex;
|
||
|
flex-wrap: nowrap;
|
||
|
flex-grow: 1;
|
||
|
flex-shrink: 1;
|
||
|
@@ -288,16 +288,17 @@
|
||
|
width: @urlbarViewFaviconWidth@;
|
||
|
height: @urlbarViewFaviconWidth@;
|
||
|
margin-inline-end: calc(@urlbarViewIconMarginEnd@);
|
||
|
background-repeat: no-repeat;
|
||
|
background-size: contain;
|
||
|
object-fit: contain;
|
||
|
flex-shrink: 0;
|
||
|
-moz-context-properties: fill, fill-opacity;
|
||
|
+ margin-inline-start: 20px;
|
||
|
}
|
||
|
|
||
|
@media not (-moz-proton) {
|
||
|
.urlbarView-favicon {
|
||
|
/* 2px is from identity-block.inc.css */
|
||
|
margin-inline-end: calc(var(--urlbar-icon-padding) / 2 + var(--identity-box-margin-inline) + 2px);
|
||
|
}
|
||
|
} /*** END !proton ***/
|
||
|
@@ -321,20 +322,20 @@
|
||
|
color: var(--urlbar-popup-url-color);
|
||
|
-moz-context-properties: fill;
|
||
|
}
|
||
|
|
||
|
/* Type icon */
|
||
|
|
||
|
.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;
|
||
|
background-size: contain;
|
||
|
-moz-context-properties: fill, stroke;
|
||
|
}
|
||
|
|
||
|
/* Favicon badges have this priority: pinned > bookmark. */
|
||
|
|