Bug 1561533 - WIP draft
authorpulselistener
Fri, 16 Aug 2019 13:31:09 +0000
changeset 2220750 3824ad674f67511454fc8e18328cbfb655c00f2e
parent 2219974 d887276421d30c773431c006b0607cd30f4d9259
child 2220751 6a405af8d95f3066c9c5d95aa1d9f1e993125b28
push id407001
push userreviewbot
push dateFri, 16 Aug 2019 13:31:48 +0000
treeherdertry@6a405af8d95f [default view] [failures only]
bugs1561533
milestone70.0a1
Bug 1561533 - WIP Differential Revision: https://phabricator.services.mozilla.com/D42149 Differential Diff: PHID-DIFF-cnczxl6pmuxklxhnxbl4
accessible/tests/browser/general/browser_test_urlbar.js
browser/base/content/browser.xhtml
browser/components/urlbar/UrlbarInput.jsm
browser/components/urlbar/UrlbarView.jsm
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
--- a/accessible/tests/browser/general/browser_test_urlbar.js
+++ b/accessible/tests/browser/general/browser_test_urlbar.js
@@ -18,17 +18,17 @@ add_task(async function testAutocomplete
   await UrlbarTestUtils.promiseAutocompleteResultPopup({
     window,
     waitForFocus,
     value: "a",
   });
 
   info("Waiting for accessibility to be created for the results list");
   let resultsView;
-  resultsView = gURLBar.view.panel.querySelector("#urlbarView-results");
+  resultsView = gURLBar.view.panel.querySelector(".urlbarView-results");
   await BrowserTestUtils.waitForCondition(() =>
     accService.getAccessibleFor(resultsView)
   );
 
   info("Confirming that the special case is handled in XULListboxAccessible");
   let accessible = accService.getAccessibleFor(resultsView);
   is(accessible.role, ROLE_COMBOBOX_LIST, "Right role");
 
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -972,22 +972,22 @@
               <box id="urlbar-display-box" align="center">
                 <label id="switchtab" class="urlbar-display urlbar-display-switchtab" value="&urlbar.switchToTab.label;"/>
                 <label id="extension" class="urlbar-display urlbar-display-extension" value="&urlbar.extension.label;"/>
               </box>
               <moz-input-box tooltip="aHTMLTooltip"
                              class="urlbar-input-box"
                              flex="1"
                              role="combobox"
-                             aria-owns="urlbarView-results">
+                             aria-owns="urlbar-results">
                 <html:input id="urlbar-scheme"
                             required="required"/>
                 <html:input id="urlbar-input"
                             anonid="input"
-                            aria-controls="urlbarView-results"
+                            aria-controls="urlbar-results"
                             aria-autocomplete="both"
                             inputmode="mozAwesomebar"
                             placeholder="&urlbar.placeholder2;"/>
               </moz-input-box>
               <image id="urlbar-go-button"
                      class="urlbar-icon"
                      onclick="gURLBar.handleCommand(event);"
                      tooltiptext="&goEndCap.tooltip;"/>
@@ -1046,16 +1046,32 @@
                          class="urlbar-icon"
                          role="button"/>
                   <hbox id="star-button-animatable-box">
                     <image id="star-button-animatable-image"
                            role="presentation"/>
                   </hbox>
                 </hbox>
               </hbox>
+              <vbox class="urlbarView"
+                    role="group"
+                    tooltip="aHTMLTooltip"
+                    hidden="true">
+                <html:div class="urlbarView-body-outer">
+                  <html:div class="urlbarView-body-inner">
+                    <html:div id="urlbar-results"
+                              class="urlbarView-results"
+                              role="listbox"/>
+                  </html:div>
+                </html:div>
+                <hbox class="search-one-offs"
+                      compact="true"
+                      includecurrentengine="true"
+                      disabletab="true"/>
+              </vbox>
             </hbox>
             <toolbartabstop/>
         </toolbaritem>
 
         <toolbarspring cui-areatype="toolbar" class="chromeclass-toolbar-additional"/>
 
         <!-- This is a placeholder for the Downloads Indicator.  It is visible
              during the customization of the toolbar, in the palette, and before
--- a/browser/components/urlbar/UrlbarInput.jsm
+++ b/browser/components/urlbar/UrlbarInput.jsm
@@ -49,43 +49,22 @@ class UrlbarInput {
    *   Intended for use in unit tests only.
    */
   constructor(options = {}) {
     this.textbox = options.textbox;
 
     this.window = this.textbox.ownerGlobal;
     this.document = this.window.document;
     this.window.addEventListener("unload", this);
-
-    // Create the panel to contain results.
-    // In the future this may be moved to the view, so it can customize
-    // the container element.
-    let MozXULElement = this.window.MozXULElement;
-    this.textbox.after(
-      MozXULElement.parseXULToFragment(`
-        <vbox id="urlbar-results"
-              role="group"
-              tooltip="aHTMLTooltip"
-              hidden="true">
-          <html:div class="urlbarView-body-outer">
-            <html:div class="urlbarView-body-inner">
-              <html:div id="urlbarView-results"
-                        role="listbox"/>
-            </html:div>
-          </html:div>
-          <hbox class="search-one-offs"
-                compact="true"
-                includecurrentengine="true"
-                disabletab="true"/>
-        </vbox>
-      `)
-    );
-    this.panel = this.document.getElementById("urlbar-results");
+    this.panel = this.textbox.querySelector(".urlbarView");
 
     this.megabar = UrlbarPrefs.get("megabar");
+    if (this.megabar) {
+      this.textbox.classList.add("megabar");
+    }
 
     this.controller =
       options.controller ||
       new UrlbarController({
         browserWindow: this.window,
         eventTelemetryCategory: options.eventTelemetryCategory,
       });
     this.controller.setInput(this);
@@ -847,16 +826,65 @@ class UrlbarInput {
       this.openViewOnFocus &&
       !["about:newtab", "about:home"].includes(
         this.window.gBrowser.currentURI.spec
       ) &&
       !this.isPrivate
     );
   }
 
+  startLayoutBreakout() {
+    if (
+      this._layoutBreakoutPlaceholder ||
+      !this.megabar ||
+      !(this.focused || this.view.isOpen)
+    ) {
+      return;
+    }
+
+    let getBoundsWithoutFlushing = element =>
+      this.window.windowUtils.getBoundsWithoutFlushing(element);
+    let px = number => number.toFixed(2) + "px";
+
+    let inputRect = getBoundsWithoutFlushing(this.textbox);
+    if (inputRect.width == 0) {
+      this.window.requestAnimationFrame(() => {
+        this.startLayoutBreakout();
+      });
+      return;
+    }
+
+    this.textbox.style.setProperty("--urlbar-width", px(inputRect.width));
+
+    let toolbarHeight = getBoundsWithoutFlushing(
+      this.textbox.closest("toolbar")
+    ).height;
+    this.textbox.style.setProperty(
+      "--urlbar-toolbar-height",
+      px(toolbarHeight)
+    );
+
+    this._layoutBreakoutPlaceholder = this.document.createXULElement(
+      this.textbox.nodeName
+    );
+    this._layoutBreakoutPlaceholder.setAttribute(
+      "flex",
+      this.textbox.getAttribute("flex")
+    );
+    this._layoutBreakoutPlaceholder.style.height = px(inputRect.height);
+    this.textbox.before(this._layoutBreakoutPlaceholder);
+  }
+
+  endLayoutBreakout() {
+    if (this._layoutBreakoutPlaceholder && !this.focused && !this.view.isOpen) {
+      this._layoutBreakoutPlaceholder.remove();
+      this._layoutBreakoutPlaceholder = null;
+    }
+  }
+
   // Private methods below.
 
   _setOpenViewOnFocus() {
     // FIXME: Not using UrlbarPrefs because its pref observer may run after
     // this call, so we'd get the previous openViewOnFocus value here. This
     // can be cleaned up after bug 1560013.
     this._openViewOnFocus = Services.prefs.getBoolPref(
       "browser.urlbar.openViewOnFocus"
@@ -1456,16 +1484,18 @@ class UrlbarInput {
     // the oneoff settings button, or from a contextual tip button.
     // For now we detect that case by discarding the event on command, but we
     // may want to figure out a more robust way to detect abandonment.
     this.controller.engagementEvent.record(event, {
       numChars: this._lastSearchString.length,
     });
 
     this.removeAttribute("focused");
+    this.endLayoutBreakout();
+
     this.formatValue();
     this._resetSearchState();
 
     // Clear selection unless we are switching application windows.
     if (this.document.activeElement != this.inputField) {
       this.selectionStart = this.selectionEnd = 0;
     }
 
@@ -1504,16 +1534,18 @@ class UrlbarInput {
 
     // If the user right clicks, we select all regardless of the value of
     // the browser.urlbar.clickSelectsAll pref.
     this._maybeSelectAll(/* ignoreClickSelectsAllPref */ event.button == 2);
   }
 
   _on_focus(event) {
     this.setAttribute("focused", "true");
+    this.startLayoutBreakout();
+
     this._updateUrlTooltip();
     this.formatValue();
 
     // Hide popup notifications, to reduce visual noise.
     if (this.getAttribute("pageproxystate") != "valid") {
       this.window.UpdatePopupNotificationsVisibility();
     }
   }
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -35,17 +35,17 @@ class UrlbarView {
     this.document = this.panel.ownerDocument;
     this.window = this.document.defaultView;
 
     if (this.input.megabar) {
       this.panel.classList.add("megabar");
     }
 
     this._mainContainer = this.panel.querySelector(".urlbarView-body-inner");
-    this._rows = this.panel.querySelector("#urlbarView-results");
+    this._rows = this.panel.querySelector(".urlbarView-results");
 
     this._rows.addEventListener("mousedown", this);
     this._rows.addEventListener("mouseup", this);
 
     // For the horizontal fade-out effect, set the overflow attribute on result
     // rows when they overflow.
     this._rows.addEventListener("overflow", this);
     this._rows.addEventListener("underflow", this);
@@ -276,16 +276,19 @@ class UrlbarView {
       return;
     }
 
     this.panel.setAttribute("hidden", "true");
     this.removeAccessibleFocus();
     this.input.inputField.setAttribute("aria-expanded", "false");
     this.input.dropmarker.removeAttribute("open");
 
+    this.input.removeAttribute("open");
+    this.input.endLayoutBreakout();
+
     this._rows.textContent = "";
 
     this.window.removeEventListener("resize", this);
 
     this.window.removeEventListener("mousedown", this);
     this.panel.removeEventListener("mousedown", this);
     this.input.textbox.removeEventListener("mousedown", this);
 
@@ -406,45 +409,39 @@ class UrlbarView {
    * @param {object} params
    */
   handleOneOffSearch(event, engine, where, params) {
     this.input.handleCommand(event, where, params);
   }
 
   // Private methods below.
 
-  _getBoundsWithoutFlushing(element) {
-    return this.window.windowUtils.getBoundsWithoutFlushing(element);
-  }
-
   _createElement(name) {
     return this.document.createElementNS("http://www.w3.org/1999/xhtml", name);
   }
 
   _openPanel() {
     if (this.isOpen) {
       return;
     }
     this.controller.userSelectionBehavior = "none";
 
     this.panel.removeAttribute("actionoverride");
 
-    let inputRect = this._getBoundsWithoutFlushing(this.input.textbox);
+    if (!this.input.megabar) {
+      let getBoundsWithoutFlushing = element =>
+        this.window.windowUtils.getBoundsWithoutFlushing(element);
+      let px = number => number.toFixed(2) + "px";
+      let inputRect = getBoundsWithoutFlushing(this.input.textbox);
 
-    let px = number => number.toFixed(2) + "px";
-    let width;
-    if (this.input.megabar) {
-      // Make the panel span the width of the textbox.
-      width = inputRect.width;
-    } else {
       // Make the panel span the width of the window.
-      let documentRect = this._getBoundsWithoutFlushing(
+      let documentRect = getBoundsWithoutFlushing(
         this.document.documentElement
       );
-      width = documentRect.right - documentRect.left;
+      let width = documentRect.right - documentRect.left;
 
       // Keep the popup items' site icons aligned with the input's identity
       // icon if it's not too far from the edge of the window.  We define
       // "too far" as "more than 30% of the window's width AND more than
       // 250px".
       let boundToCheck = this.window.RTL_UI ? "right" : "left";
       let startOffset = Math.abs(
         inputRect[boundToCheck] - documentRect[boundToCheck]
@@ -470,43 +467,43 @@ class UrlbarView {
         let alignIcon;
         if (this.input.getAttribute("pageproxystate") === "valid") {
           alignIcon = this.document.getElementById(
             "tracking-protection-icon-box"
           );
         } else {
           alignIcon = this.document.getElementById("identity-icon");
         }
-        let alignRect = this._getBoundsWithoutFlushing(alignIcon);
+        let alignRect = getBoundsWithoutFlushing(alignIcon);
         let start = this.window.RTL_UI
           ? documentRect.right - alignRect.right
           : alignRect.left;
 
         this.panel.style.setProperty("--item-padding-start", px(start));
         this.panel.style.setProperty("--item-padding-end", px(endOffset));
       } else {
         this.panel.style.removeProperty("--item-padding-start");
         this.panel.style.removeProperty("--item-padding-end");
       }
-    }
-
-    this.panel.style.width = px(width);
-    this._mainContainer.style.maxWidth = px(width);
 
-    // Align the panel with the input or the input's parent toolbar, depending
-    // on megabar status.
-    let alignmentRect = this.input.megabar
-      ? this._getBoundsWithoutFlushing(this.input.textbox)
-      : this._getBoundsWithoutFlushing(this.input.textbox.closest("toolbar"));
-    this.panel.style.top = px(alignmentRect.bottom);
+      // Align the panel with the parent toolbar.
+      this.panel.style.top = px(
+        getBoundsWithoutFlushing(this.input.textbox.closest("toolbar")).bottom
+      );
+
+      this._mainContainer.style.maxWidth = px(width);
+    }
 
     this.panel.removeAttribute("hidden");
     this.input.inputField.setAttribute("aria-expanded", "true");
     this.input.dropmarker.setAttribute("open", "true");
 
+    this.input.setAttribute("open", "true");
+    this.input.startLayoutBreakout();
+
     this.window.addEventListener("mousedown", this);
     this.panel.addEventListener("mousedown", this);
     this.input.textbox.addEventListener("mousedown", this);
 
     this.window.addEventListener("resize", this);
     this._windowOuterWidth = this.window.outerWidth;
 
     this.controller.notify(this.controller.NOTIFICATIONS.VIEW_OPEN);
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -310,17 +310,17 @@ notification[value="translation"] menuli
   --urlbar-popup-url-color: -moz-nativehyperlinktext;
   --urlbar-popup-action-color: -moz-nativehyperlinktext;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid ThreeDShadow;
 }
 
-#urlbar-results {
+.urlbarView {
   font-size: 1.05em;
 }
 
 /* Bookmarking panel */
 
 %include ../shared/places/editBookmarkPanel.inc.css
 
 /* Content area */
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -313,17 +313,17 @@
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid #C7C7C7;
 }
 
-#urlbar-results {
+.urlbarView {
   font-size: 14px;
 }
 
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
   margin-left: -26px;
   margin-right: -26px;
 }
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -21,31 +21,27 @@
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 :root[lwt-popup-brighttext] {
   --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
   --urlbar-popup-action-color: #30e60b;
 }
 
-#urlbar-results {
-  position: fixed;
-  z-index: 1;
-  background: var(--autocomplete-popup-background);
-  color: var(--autocomplete-popup-color);
+.urlbarView {
   text-shadow: none;
 }
 
-#urlbar-results.megabar {
-  margin-inline-start: 5px;
-}
-
-#urlbar-results:not(.megabar) {
+.urlbarView:not(.megabar) {
+  position: fixed;
+  z-index: 1;
   left: 0;
   right: 0;
+  background: var(--autocomplete-popup-background);
+  color: var(--autocomplete-popup-color);
   border-block: 1px solid var(--chrome-content-separator-color);
 }
 
 #urlbar-contextual-tip {
   font-size: 13px;
   align-items: center;
   display: flex;
 
@@ -81,22 +77,21 @@
 #urlbar-contextual-tip-button:-moz-focusring {
   box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
 }
 
 #urlbar-contextual-tip-link {
   text-align: end;
 }
 
-.urlbarView-body-inner {
-  box-sizing: border-box;
+.urlbarView.megabar .urlbarView-body-inner {
+  width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutExtend@ - 2px /* urlbar border */);
 }
 
-#urlbarView-results {
-  box-sizing: border-box;
+.urlbarView-results {
   padding: @urlbarViewPadding@;
   white-space: nowrap;
 }
 
 .urlbarView-row {
   border-radius: 2px;
   fill: currentColor;
   fill-opacity: .6;
@@ -169,17 +164,17 @@
   }
 }
 
 .urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-type-icon {
   background-image: url(chrome://browser/skin/bookmark.svg);
 }
 
 .urlbarView-row[type=remotetab] > .urlbarView-row-inner > .urlbarView-type-icon,
-#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-type-icon {
   background-image: url(chrome://browser/skin/tab.svg);
 }
 
 .urlbarView-title {
   overflow: hidden;
   white-space: nowrap;
   /* We prioritize the title over the url, so it can grow freely, but it should
      never crop the url completely */
@@ -225,18 +220,18 @@
   color: inherit;
 }
 
 .urlbarView-row[type=remotetab][selected] > .urlbarView-row-inner > .urlbarView-action,
 .urlbarView-row[type=remotetab]:hover > .urlbarView-row-inner > .urlbarView-action,
 .urlbarView-row[type=remotetab]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-url,
 .urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-action,
 .urlbarView-row[type=search]:not([selected]):not(:hover) > .urlbarView-row-inner > .urlbarView-title-separator,
-#urlbar-results[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
-#urlbar-results:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
+.urlbarView[actionoverride] .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-action,
+.urlbarView:not([actionoverride]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > .urlbarView-url {
   /* Use visibility:collapse instead of display:none since the latter can
      confuse the overflow state of title and url elements when their content
      changes while they're hidden. */
   visibility: collapse;
 }
 
 .urlbarView-tags {
   overflow: hidden;
@@ -251,40 +246,40 @@
 }
 
 .urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-tags > .urlbarView-tag {
   background-color: var(--autocomplete-popup-highlight-color);
   color: var(--autocomplete-popup-highlight-background);
 }
 
 /* Search one-offs. */
-#urlbar-results > .search-one-offs {
+#urlbar .search-one-offs {
   -moz-box-orient: horizontal;
   padding-top: 16px;
   padding-bottom: 16px;
 }
 
-#urlbar-results:not(.megabar) > .search-one-offs {
+#urlbar:not(.megabar) .search-one-offs {
   padding-inline-start: var(--item-padding-start, 5px);
   padding-inline-end: var(--item-padding-end, 5px);
 }
 
-#urlbar-results .search-panel-one-offs {
+#urlbar .search-panel-one-offs {
   padding-left: 12px;
   padding-right: 12px;
 }
 
-#urlbar-results .search-panel-header {
+#urlbar .search-panel-header {
   padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
-#urlbar-results .searchbar-engine-one-off-item {
+#urlbar .searchbar-engine-one-off-item {
   min-width: 32px;
   height: 32px;
   margin: 0 4px;
 }
 
 /* search bar popup */
 
 #PopupSearchAutoComplete {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -1,16 +1,17 @@
 %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 fieldBorderColor hsla(240,5%,5%,.25)
 %define fieldHoverBorderColor hsla(240,5%,5%,.35)
+%define urlbarBreakoutExtend 4px
 
 :root {
   --toolbar-field-focus-border-color: Highlight;
 
   /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
   --urlbar-icon-padding: 6px;
 }
 
@@ -19,25 +20,29 @@
   --urlbar-icon-padding: 4px;
 }
 
 :root[uidensity=touch] {
   /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
   --urlbar-icon-padding: 7px;
 }
 
+#urlbar-container,
+#search-container {
+  padding: 3px 5px;
+}
+
 #urlbar,
 #searchbar {
   background-color: -moz-Field;
   color: -moz-FieldText;
-  background-clip: content-box;
+  background-clip: padding-box;
   border: 1px solid @fieldBorderColor@;
   border-radius: var(--toolbarbutton-border-radius);
   box-shadow: 0 1px 4px rgba(0,0,0,.05);
-  margin: 3px 5px;
   min-height: 30px;
   overflow: -moz-hidden-unscrollable;
   text-shadow: none;
 }
 
 .searchbar-textbox {
   -moz-appearance: none;
   background: none;
@@ -74,33 +79,43 @@
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
 #urlbar:not(.hidden-focus)[focused="true"],
 #searchbar:focus-within {
   border-color: var(--toolbar-field-focus-border-color);
 }
 
+#urlbar.megabar:not(.hidden-focus)[focused="true"],
+#urlbar.megabar[open="true"] {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  margin-top: -@urlbarBreakoutExtend@;
+  margin-inline-start: -@urlbarBreakoutExtend@;
+  width: calc(var(--urlbar-width) + 2 * @urlbarBreakoutExtend@);
+  min-height: calc(var(--urlbar-toolbar-height) + 2 * @urlbarBreakoutExtend@);
+  padding: calc(3px + @urlbarBreakoutExtend@) 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));
 }
 
 :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;
-  margin-top: 3px;
-  margin-bottom: 3px;
 }
 
 :root[uidensity=touch] #urlbar,
 :root[uidensity=touch] #searchbar {
   min-height: 32px;
 }
 
 :root[chromehidden~="toolbar"] #urlbar {
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -604,17 +604,17 @@ menuitem.bookmark-item {
 
 %include ../shared/identity-block/identity-block.inc.css
 
 /* autocomplete */
 
 %include ../shared/autocomplete.inc.css
 %include ../shared/urlbar-autocomplete.inc.css
 
-#urlbar-results {
+.urlbarView {
   font-size: 1.15em;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid ThreeDShadow;
 }
 
 @media (-moz-windows-default-theme) {