Bug 1586232 - Animate the megabar with transforms only r=mak

Differential Revision: https://phabricator.services.mozilla.com/D48164

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -591,7 +591,8 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
  *
  * Attribute is controlled by browser.js:/gRemoteControl.
  */
-:root[remotecontrol] #urlbar {
+:root[remotecontrol] #urlbar:not(.megabar),
+:root[remotecontrol] #urlbar.megabar > #urlbar-background {
   background: repeating-linear-gradient(
     -45deg,
     transparent,

browser/base/content/browser.xhtml

@@ -861,6 +861,7 @@
                 defaultPlaceholder="&urlbar.placeholder2;"
                 focused="true"
                 pageproxystate="invalid">
+            <hbox id="urlbar-background"/>
             <hbox id="urlbar-input-container"
                   flex="1"
                   pageproxystate="invalid">

browser/themes/linux/browser.css

@@ -180,8 +180,10 @@ menuitem.bookmark-item {
 
 %include ../shared/urlbar-searchbar.inc.css
 
-#urlbar:not(:-moz-lwtheme):not([focused="true"]),
-#urlbar:not(:-moz-lwtheme).hidden-focus,
+#urlbar:not(.megabar):not(:-moz-lwtheme):not([focused="true"]),
+#urlbar:not(.megabar):not(:-moz-lwtheme).hidden-focus,
+#urlbar.megabar:not(:-moz-lwtheme):not([focused="true"]) > #urlbar-background,
+#urlbar.megabar:not(:-moz-lwtheme).hidden-focus > #urlbar-background,
 #searchbar:not(:-moz-lwtheme):not(:focus-within) {
   border-color: ThreeDShadow;
 }

browser/themes/osx/browser.css

@@ -260,13 +260,14 @@
 }
 
 /* Focus ring. */
-#urlbar:not(.hidden-focus)[focused="true"],
+#urlbar:not(.megabar):not(.hidden-focus)[focused="true"],
+#urlbar.megabar:not(.hidden-focus)[focused="true"] > #urlbar-background,
 #searchbar:focus-within {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
-#urlbar[breakout][breakout-extend]:not(.hidden-focus)[focused="true"] {
+#urlbar[breakout][breakout-extend]:not(.hidden-focus)[focused="true"] > #urlbar-background {
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color),
               0 4px 16px rgba(0, 0, 0, 0.1);

browser/themes/shared/urlbar-autocomplete.inc.css

@@ -8,7 +8,7 @@
 %define urlbarViewPadding 4px
 %define urlbarViewIconMarginEnd 8px
 %define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)
-%define urlbarViewInlineStartPadding (@urlbarBreakoutHorizontalExtend@ - 16px /* type icon width */ - @urlbarViewIconMarginEnd@ - 2px /* border */)
+%define urlbarViewInlineStartPadding (@urlbarBreakoutHorizontalExtend@ - 16px /* type icon width */ - @urlbarViewIconMarginEnd@ - 1px /* border */)
 %define urlbarViewHorizontalMargin 6px
 
 :root {

browser/themes/shared/urlbar-searchbar.inc.css

@@ -34,28 +34,39 @@
 
 #urlbar,
 #searchbar {
-  background-color: -moz-Field;
+  min-height: 30px;
+  text-shadow: none;
   color: -moz-FieldText;
+}
+
+#urlbar:not(.megabar),
+#urlbar.megabar > #urlbar-background,
+#searchbar {
+  background-color: -moz-Field;
   background-clip: padding-box;
   border: 1px solid @fieldBorderColor@;
   border-radius: var(--toolbarbutton-border-radius);
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
-  min-height: 30px;
-  overflow: -moz-hidden-unscrollable;
-  text-shadow: none;
 }
 
+#urlbar-input-container,
+#searchbar {
+  border-radius: var(--toolbarbutton-border-radius);
+  overflow: -moz-hidden-unscrollable;
+}
+
+#urlbar-input,
+#urlbar-scheme,
 .searchbar-textbox {
-  -moz-appearance: none;
   -moz-box-flex: 1;
-  background: none;
+  background-color: transparent;
   color: inherit;
   border: none;
-  font: inherit;
-  margin: 0 !important; /* override autocomplete.css */
+  margin: 0;
 }
 
-#urlbar:hover:not([open]),
+#urlbar:not(.megabar):hover:not([open]),
+#urlbar.megabar:hover:not([breakout-extend]) > #urlbar-background,
 #searchbar:hover {
   border-color: @fieldHoverBorderColor@;
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
@@ -63,32 +74,84 @@
 
 #urlbar:-moz-lwtheme,
 #navigator-toolbox #searchbar:-moz-lwtheme {
-  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
   color: var(--lwt-toolbar-field-color, black);
 }
 
-#urlbar:not([focused="true"]):-moz-lwtheme,
+#urlbar:not(.megabar):-moz-lwtheme,
+#urlbar.megabar:-moz-lwtheme > #urlbar-background,
+#navigator-toolbox #searchbar:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
+}
+
+#urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme,
+#urlbar.megabar:not([focused="true"]):-moz-lwtheme > #urlbar-background,
 #urlbar.hidden-focus:-moz-lwtheme,
 #navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
 }
 
-#urlbar:not([focused="true"]):-moz-lwtheme:hover,
+#urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme:hover,
+#urlbar.megabar:not([focused="true"]):-moz-lwtheme:hover > #urlbar-background,
 #urlbar.hidden-focus:-moz-lwtheme:hover,
 #navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme:hover {
   border-color: var(--lwt-toolbar-field-border-color, @fieldHoverBorderColor@);
 }
 
-#urlbar:-moz-lwtheme:hover,
+#urlbar:not(.megabar):-moz-lwtheme:hover,
+#urlbar.megabar:-moz-lwtheme:hover > #urlbar-background,
 #navigator-toolbox #searchbar:-moz-lwtheme:hover {
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
-#urlbar:not(.hidden-focus)[focused="true"],
+#urlbar:not(.megabar):not(.hidden-focus)[focused="true"],
+#urlbar.megabar:not(.hidden-focus)[focused="true"] > #urlbar-background,
 #searchbar:focus-within {
   border-color: var(--toolbar-field-focus-border-color);
 }
 
+#urlbar:not(.hidden-focus):-moz-lwtheme[focused="true"],
+#navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
+  color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
+}
+
+#urlbar:not(.megabar):not(.hidden-focus):-moz-lwtheme[focused="true"],
+#urlbar.megabar:not(.hidden-focus):-moz-lwtheme[focused="true"] > #urlbar-background,
+#navigator-toolbox #searchbar:focus-within:-moz-lwtheme {
+  background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
+}
+
+:root[lwt-selection] #urlbar-input:-moz-lwtheme::selection,
+:root[lwt-selection] .searchbar-textbox:-moz-lwtheme::selection {
+  background-color: var(--lwt-toolbar-field-highlight, Highlight);
+  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+}
+
+/**
+ * The urlbar background is a separate element so we can animate it
+ * independently from the content. It's positioned absolutely and stretched to
+ * the bounds of the urlbar.
+ */
+
+#urlbar.megabar,
+#urlbar.megabar > #urlbar-input-container,
+#urlbar.megabar > .urlbarView {
+  position: relative;
+}
+
+#urlbar.megabar > #urlbar-background {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#urlbar.megabar > #urlbar-input-container {
+  border: 1px solid transparent;
+}
+
 #urlbar-container[breakout] {
   position: relative;
   min-height: var(--urlbar-container-height);
@@ -101,26 +164,11 @@
   height: var(--urlbar-height);
   top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
   left: 0;
-  transition-property: left, width;
 }
 
 #urlbar[breakout] > #urlbar-input-container {
   width: 100%;
   height: 100%;
-  transition-property: width, padding-inline;
-}
-
-#urlbar[breakout][breakout-extend-animate],
-#urlbar[breakout][breakout-extend-animate] > #urlbar-input-container {
-  transition-duration: 150ms;
-  transition-timing-function: var(--animation-easing-function);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #urlbar[breakout][breakout-extend-animate],
-  #urlbar[breakout][breakout-extend-animate] > #urlbar-input-container {
-    transition-duration: 0s;
-  }
 }
 
 #urlbar[breakout][breakout-extend],
@@ -135,25 +183,39 @@
   top: -@urlbarBreakoutVerticalExtend@;
   left: -@urlbarBreakoutHorizontalExtend@;
   width: calc(100% + 2 * @urlbarBreakoutHorizontalExtend@);
+}
+
+#urlbar[breakout][breakout-extend] > #urlbar-background {
   box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
 }
 
 #urlbar[breakout][breakout-extend] > #urlbar-input-container {
-  height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@ - 2px /* urlbar border */);
+  height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@);
   padding-block: calc(@urlbarBreakoutVerticalExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
   padding-inline: @urlbarBreakoutHorizontalExtend@;
 }
 
-#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));
+@keyframes urlbar-grow {
+  0% {
+    transform: scale(.9);
+  }
+  100% {
+    transform: scale(1.0);
+  }
 }
 
-:root[lwt-selection] #urlbar-input:-moz-lwtheme::selection,
-:root[lwt-selection] .searchbar-textbox:-moz-lwtheme::selection {
-  background-color: var(--lwt-toolbar-field-highlight, Highlight);
-  color: var(--lwt-toolbar-field-highlight-text, HighlightText);
+#urlbar[breakout][breakout-extend] > #urlbar-background,
+#urlbar[breakout][breakout-extend] > .urlbarView {
+  animation-name: urlbar-grow;
+  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,
+  #urlbar[breakout][breakout-extend][breakout-extend-animate] > .urlbarView {
+    animation-duration: 150ms;
+  }
 }
 
 :root[uidensity=compact] #urlbar,
@@ -175,16 +237,6 @@
   visibility: hidden;
 }
 
-#urlbar-input,
-#urlbar-scheme {
-  -moz-box-flex: 1;
-  background-color: transparent;
-  color: inherit;
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
 #urlbar-container {
   -moz-box-align: center;
 }

browser/themes/windows/browser.css

@@ -553,8 +553,10 @@ menuitem.bookmark-item {
 }
 
 @media (-moz-windows-default-theme: 0) {
-  #urlbar:not(:-moz-lwtheme):not([focused="true"]),
-  #urlbar:not(:-moz-lwtheme).hidden-focus,
+  #urlbar:not(.megabar):not(:-moz-lwtheme):not([focused="true"]),
+  #urlbar:not(.megabar):not(:-moz-lwtheme).hidden-focus,
+  #urlbar.megabar:not(:-moz-lwtheme):not([focused="true"]) > #urlbar-background,
+  #urlbar.megabar:not(:-moz-lwtheme).hidden-focus > #urlbar-background,
   #searchbar:not(:-moz-lwtheme):not(:focus-within) {
     border-color: ThreeDShadow;
   }

toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js

@@ -49,9 +49,10 @@ add_task(async function test_support_toolbar_field_properties() {
     root.setAttribute("remotecontrol", "true");
   });
 
-  let toolbox = document.querySelector("#navigator-toolbox");
   let fields = [
-    toolbox.querySelector("#urlbar"),
+    gURLBar.megabar
+      ? document.querySelector("#urlbar-background")
+      : gURLBar.textbox,
     BrowserSearch.searchBar,
   ].filter(field => {
     let bounds = field.getBoundingClientRect();
@@ -90,8 +91,7 @@ add_task(async function test_support_toolbar_field_brighttext() {
   registerCleanupFunction(() => {
     root.setAttribute("remotecontrol", "true");
   });
-  let toolbox = document.querySelector("#navigator-toolbox");
-  let urlbar = toolbox.querySelector("#urlbar");
+  let urlbar = gURLBar.textbox;
 
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {

toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js

@@ -32,8 +32,10 @@ add_task(async function test_toolbar_field_hover() {
   });
   info("Checking toolbar field's focus color");
 
-  let urlBar = document.getElementById("urlbar");
-  urlBar.setAttribute("focused", "true");
+  let urlBar = gURLBar.megabar
+    ? document.querySelector("#urlbar-background")
+    : gURLBar.textbox;
+  gURLBar.textbox.setAttribute("focused", "true");
   Assert.equal(
     window.getComputedStyle(urlBar).backgroundColor,
     `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
@@ -47,7 +49,7 @@ add_task(async function test_toolbar_field_hover() {
   );
   testBorderColor(urlBar, TOOLBAR_FOCUS_BORDER);
 
-  urlBar.removeAttribute("focused");
+  gURLBar.textbox.removeAttribute("focused");
 
   Assert.equal(
     window.getComputedStyle(urlBar).backgroundColor,