Backed out changeset 8cdc2f617b0d (bug 1586232) fpr faiures at browser_searchbar_openpopup.js on a CLOSED TREE.
authorGurzau Raul <rgurzau@mozilla.com>
Sat, 05 Oct 2019 00:25:59 +0300
changeset 496415 4ed02097c793f824e312416ed5ef8ddb626fc3fa
parent 496414 001dbd51813e6ea457a59db74ee46c783f131648
child 496425 02bc638506eca7607515df60dd72b9621e92f476
push id97226
push userrgurzau@mozilla.com
push dateFri, 04 Oct 2019 21:30:05 +0000
treeherderautoland@4ed02097c793 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1586232
milestone71.0a1
backs out8cdc2f617b0da7d3a52b98ebcddc250f75fccb48
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
Backed out changeset 8cdc2f617b0d (bug 1586232) fpr faiures at browser_searchbar_openpopup.js on a CLOSED TREE.
browser/base/content/browser.css
browser/base/content/browser.xhtml
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/urlbar-autocomplete.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/browser.css
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -586,18 +586,17 @@ toolbar:not(#TabsToolbar) > #personal-bo
 
 /*
  * Display visual cue that browser is under remote control by Marionette.
  * This is to help users visually distinguish a user agent session that
  * is under remote control from those used for normal browsing sessions.
  *
  * Attribute is controlled by browser.js:/gRemoteControl.
  */
-:root[remotecontrol] #urlbar:not(.megabar),
-:root[remotecontrol] #urlbar.megabar > #urlbar-background {
+:root[remotecontrol] #urlbar {
   background: repeating-linear-gradient(
     -45deg,
     transparent,
     transparent 25px,
     rgba(255,255,255,.3) 25px,
     rgba(255,255,255,.3) 50px);
   background-color: rgba(255,170,68,.8);
   color: black;
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -856,17 +856,16 @@
         <toolbaritem id="urlbar-container" flex="400" persist="width"
                      removable="false"
                      class="chromeclass-location" overflows="false">
           <toolbartabstop/>
           <hbox id="urlbar" flex="1"
                 defaultPlaceholder="&urlbar.placeholder2;"
                 focused="true"
                 pageproxystate="invalid">
-            <hbox id="urlbar-background"/>
             <hbox id="urlbar-input-container"
                   flex="1"
                   pageproxystate="invalid">
               <!-- Use onclick instead of normal popup= syntax since the popup
                    code fires onmousedown, and hence eats our favicon drag events. -->
               <box id="tracking-protection-icon-container" align="center"
                    role="button"
                    onclick="gProtectionsHandler.handleProtectionsButtonEvent(event);"
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -175,20 +175,18 @@ menuitem.bookmark-item {
 #close-button:hover:active {
   background-color: #ff0039;
 }
 
 /* Location bar */
 
 %include ../shared/urlbar-searchbar.inc.css
 
-#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,
+#urlbar:not(:-moz-lwtheme):not([focused="true"]),
+#urlbar:not(:-moz-lwtheme).hidden-focus,
 #searchbar:not(:-moz-lwtheme):not(:focus-within) {
   border-color: ThreeDShadow;
 }
 
 /* identity box */
 
 %include ../shared/identity-block/identity-block.inc.css
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -255,24 +255,23 @@
 
 /* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
  * even in non-Latin scripts. */
 #urlbar-input {
   line-height: 1.745em;
 }
 
 /* Focus ring. */
-#urlbar:not(.megabar):not(.hidden-focus)[focused="true"],
-#urlbar.megabar:not(.hidden-focus)[focused="true"] > #urlbar-background,
+#urlbar:not(.hidden-focus)[focused="true"],
 #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-background {
+#urlbar[breakout][breakout-extend]:not(.hidden-focus)[focused="true"] {
   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);
 }
 
 %include ../shared/identity-block/identity-block.inc.css
 
 #pageAction-urlbar-shareURL,
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -3,17 +3,17 @@
  * 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
 
 %filter substitution
 %define urlbarViewPadding 4px
 %define urlbarViewIconMarginEnd 8px
 %define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)
-%define urlbarViewInlineStartPadding (@urlbarBreakoutHorizontalExtend@ - 16px /* type icon width */ - @urlbarViewIconMarginEnd@ - 1px /* border */)
+%define urlbarViewInlineStartPadding (@urlbarBreakoutHorizontalExtend@ - 16px /* type icon width */ - @urlbarViewIconMarginEnd@ - 2px /* border */)
 %define urlbarViewHorizontalMargin 6px
 
 :root {
   --autocomplete-popup-background: var(--arrowpanel-background);
   --autocomplete-popup-color: var(--arrowpanel-color);
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
 
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -29,198 +29,136 @@
 #urlbar-container,
 #search-container {
   padding-block: 3px;
   margin-inline: 5px;
 }
 
 #urlbar,
 #searchbar {
-  min-height: 30px;
-  text-shadow: none;
+  background-color: -moz-Field;
   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);
-}
-
-#urlbar-input-container,
-#searchbar {
-  border-radius: var(--toolbarbutton-border-radius);
+  min-height: 30px;
   overflow: -moz-hidden-unscrollable;
+  text-shadow: none;
 }
 
-#urlbar-input,
-#urlbar-scheme,
 .searchbar-textbox {
+  -moz-appearance: none;
   -moz-box-flex: 1;
-  background-color: transparent;
+  background: none;
   color: inherit;
   border: none;
-  margin: 0;
+  font: inherit;
+  margin: 0 !important; /* override autocomplete.css */
 }
 
-#urlbar:not(.megabar):hover:not([open]),
-#urlbar.megabar:hover:not([breakout-extend]) > #urlbar-background,
+#urlbar:hover:not([open]),
 #searchbar:hover {
   border-color: @fieldHoverBorderColor@;
   box-shadow: 0 1px 6px rgba(0,0,0,.1);
 }
 
 #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(.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:not([focused="true"]):-moz-lwtheme,
 #urlbar.hidden-focus:-moz-lwtheme,
 #navigator-toolbox #searchbar:not(:focus-within):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, @fieldBorderColor@);
 }
 
-#urlbar:not(.megabar):not([focused="true"]):-moz-lwtheme:hover,
-#urlbar.megabar:not([focused="true"]):-moz-lwtheme:hover > #urlbar-background,
+#urlbar:not([focused="true"]):-moz-lwtheme:hover,
 #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:not(.megabar):-moz-lwtheme:hover,
-#urlbar.megabar:-moz-lwtheme:hover > #urlbar-background,
+#urlbar:-moz-lwtheme:hover,
 #navigator-toolbox #searchbar:-moz-lwtheme:hover {
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
-#urlbar:not(.megabar):not(.hidden-focus)[focused="true"],
-#urlbar.megabar:not(.hidden-focus)[focused="true"] > #urlbar-background,
+#urlbar:not(.hidden-focus)[focused="true"],
 #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);
 }
 
 #urlbar[breakout] {
   display: block;
   position: absolute;
   width: 100%;
   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],
 #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: -@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@);
+  height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutVerticalExtend@ - 2px /* urlbar border */);
   padding-block: calc(@urlbarBreakoutVerticalExtend@ + (var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2);
   padding-inline: @urlbarBreakoutHorizontalExtend@;
 }
 
-@keyframes urlbar-grow {
-  0% {
-    transform: scale(.9);
-  }
-  100% {
-    transform: scale(1.0);
-  }
+#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));
 }
 
-#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[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);
 }
 
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] #searchbar {
   min-height: 26px;
 }
 
 :root[uidensity=touch] #urlbar,
@@ -232,16 +170,26 @@
   /* Remove excess space between the address bar and the menu button in popups. */
   padding-inline-end: 0;
 }
 
 :root[customizing] .urlbar-input-box {
   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;
 }
 
 #urlbar-search-splitter {
   /* The splitter width should equal the location and search bars' combined
      neighboring margin and border width. */
   min-width: 12px;
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -548,20 +548,18 @@ menuitem.bookmark-item {
 %include ../shared/urlbar-searchbar.inc.css
 
 #urlbar,
 #searchbar {
   font-size: 1.15em;
 }
 
 @media (-moz-windows-default-theme: 0) {
-  #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,
+  #urlbar:not(:-moz-lwtheme):not([focused="true"]),
+  #urlbar:not(:-moz-lwtheme).hidden-focus,
   #searchbar:not(:-moz-lwtheme):not(:focus-within) {
     border-color: ThreeDShadow;
   }
 }
 
 #pageAction-urlbar-shareURL,
 #pageAction-panel-shareURL {
   list-style-image: url("chrome://browser/skin/share.svg");
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields.js
@@ -44,20 +44,19 @@ add_task(async function test_support_too
 
   let root = document.documentElement;
   // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
   root.removeAttribute("remotecontrol");
   registerCleanupFunction(() => {
     root.setAttribute("remotecontrol", "true");
   });
 
+  let toolbox = document.querySelector("#navigator-toolbox");
   let fields = [
-    gURLBar.megabar
-      ? document.querySelector("#urlbar-background")
-      : gURLBar.textbox,
+    toolbox.querySelector("#urlbar"),
     BrowserSearch.searchBar,
   ].filter(field => {
     let bounds = field.getBoundingClientRect();
     return bounds.width > 0 && bounds.height > 0;
   });
 
   Assert.equal(fields.length, 2, "Should be testing two elements");
 
@@ -86,17 +85,18 @@ add_task(async function test_support_too
 
 add_task(async function test_support_toolbar_field_brighttext() {
   let root = document.documentElement;
   // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
   root.removeAttribute("remotecontrol");
   registerCleanupFunction(() => {
     root.setAttribute("remotecontrol", "true");
   });
-  let urlbar = gURLBar.textbox;
+  let toolbox = document.querySelector("#navigator-toolbox");
+  let urlbar = toolbox.querySelector("#urlbar");
 
   let extension = ExtensionTestUtils.loadExtension({
     manifest: {
       theme: {
         colors: {
           frame: ACCENT_COLOR,
           tab_background_text: TEXT_COLOR,
           toolbar_field: "#fff",
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_toolbar_fields_focus.js
@@ -27,34 +27,32 @@ add_task(async function test_toolbar_fie
 
   // Remove the `remotecontrol` attribute since it interferes with the urlbar styling.
   document.documentElement.removeAttribute("remotecontrol");
   registerCleanupFunction(() => {
     document.documentElement.setAttribute("remotecontrol", "true");
   });
   info("Checking toolbar field's focus color");
 
-  let urlBar = gURLBar.megabar
-    ? document.querySelector("#urlbar-background")
-    : gURLBar.textbox;
-  gURLBar.textbox.setAttribute("focused", "true");
+  let urlBar = document.getElementById("urlbar");
+  urlBar.setAttribute("focused", "true");
   Assert.equal(
     window.getComputedStyle(urlBar).backgroundColor,
     `rgb(${hexToRGB(TOOLBAR_FOCUS_BACKGROUND).join(", ")})`,
     "Background Color is changed"
   );
 
   Assert.equal(
     window.getComputedStyle(urlBar).color,
     `rgb(${hexToRGB(TOOLBAR_FOCUS_TEXT).join(", ")})`,
     "Text Color is changed"
   );
   testBorderColor(urlBar, TOOLBAR_FOCUS_BORDER);
 
-  gURLBar.textbox.removeAttribute("focused");
+  urlBar.removeAttribute("focused");
 
   Assert.equal(
     window.getComputedStyle(urlBar).backgroundColor,
     `rgb(${hexToRGB(TOOLBAR_FIELD_BACKGROUND).join(", ")})`,
     "Background Color is set back to initial"
   );
   Assert.equal(
     window.getComputedStyle(urlBar).color,