Bug 1575645 - Fix Megabar vertical centering. r=harry
authorDão Gottwald <dao@mozilla.com>
Thu, 29 Aug 2019 07:44:34 +0000
changeset 490547 a4b85cf9eb0be6bf519af3e3c2054853415c5ed2
parent 490546 dac2c9556da51433909640df23f531603da1fafa
child 490548 2ed7ceca1578e6f2846537254fc29df107815f62
push id93923
push userdgottwald@mozilla.com
push dateThu, 29 Aug 2019 07:45:19 +0000
treeherderautoland@a4b85cf9eb0b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry
bugs1575645
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1575645 - Fix Megabar vertical centering. r=harry Differential Revision: https://phabricator.services.mozilla.com/D42945
browser/components/urlbar/UrlbarInput.jsm
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -861,16 +861,17 @@ class UrlbarInput {
     if (inputRect.width == 0) {
       this.window.requestAnimationFrame(() => {
         this.startLayoutBreakout();
       });
       return;
     }
 
     this.textbox.style.setProperty("--urlbar-width", px(inputRect.width));
+    this.textbox.style.setProperty("--urlbar-height", px(inputRect.height));
 
     let toolbarHeight = getBoundsWithoutFlushing(
       this.textbox.closest("toolbar")
     ).height;
     this.textbox.style.setProperty(
       "--urlbar-toolbar-height",
       px(toolbarHeight)
     );
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -87,28 +87,24 @@
 
 #urlbar[breakout] {
   position: absolute;
   z-index: 2;
   top: 0;
   margin-top: -@urlbarBreakoutVerticalExtend@;
   margin-inline-start: -@urlbarBreakoutHorizontalExtend@;
   width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutHorizontalExtend@);
-  min-height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@);
-  padding: calc(3px + @urlbarBreakoutVerticalExtend@) 0;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
-#urlbar[breakout][open="true"] {
-  padding-bottom: 0;
-}
-
 #urlbar[breakout] > #urlbar-input-container {
+  height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@ - 2px /* urlbar border */);
+  width: 100%;
+  padding-block: calc(@urlbarBreakoutVerticalExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
   padding-inline: @urlbarBreakoutHorizontalExtend@;
-  width: 100%;
 }
 
 #urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
 #navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
 }