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. */