Bug 1561533 - Increase quantumbar input size on focus and visually integrate the view. r=harry

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

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

accessible/tests/browser/general/browser_test_urlbar.js

@@ -23,7 +23,7 @@ add_task(async function testAutocompleteRichResult() {
 
   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)
   );

browser/base/content/browser.xhtml

@@ -981,12 +981,12 @@
                              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;"/>
@@ -1055,6 +1055,22 @@
                   </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>

browser/components/urlbar/UrlbarInput.jsm

@@ -54,33 +54,12 @@ class UrlbarInput {
     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 ||
@@ -228,7 +207,7 @@ class UrlbarInput {
     }
     this.dropmarker.removeEventListener("mousedown", this);
 
-    this.view.panel.remove();
+    this.endLayoutBreakout(true);
 
     // When uninit is called due to exiting the browser's customize mode,
     // this.inputField.controllers is not the original list of controllers, and
@@ -852,6 +831,65 @@ class UrlbarInput {
     );
   }
 
+  startLayoutBreakout() {
+    if (
+      this._layoutBreakoutPlaceholder ||
+      !this.megabar ||
+      !(
+        (this.focused && !this.textbox.classList.contains("hidden-focus")) ||
+        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(force) {
+    if (
+      !force &&
+      (this.isOpen ||
+        (this.focused && !this.textbox.classList.contains("hidden-focus")))
+    ) {
+      return;
+    }
+    if (this._layoutBreakoutPlaceholder) {
+      this._layoutBreakoutPlaceholder.remove();
+      this._layoutBreakoutPlaceholder = null;
+    }
+  }
+
   // Private methods below.
 
   _setOpenViewOnFocus() {
@@ -1461,6 +1499,8 @@ class UrlbarInput {
     });
 
     this.removeAttribute("focused");
+    this.endLayoutBreakout();
+
     this.formatValue();
     this._resetSearchState();
 
@@ -1509,6 +1549,8 @@ class UrlbarInput {
 
   _on_focus(event) {
     this.setAttribute("focused", "true");
+    this.startLayoutBreakout();
+
     this._updateUrlTooltip();
     this.formatValue();
 

browser/components/urlbar/UrlbarView.jsm

@@ -40,7 +40,7 @@ class UrlbarView {
     }
 
     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);
@@ -281,6 +281,9 @@ class UrlbarView {
     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);
@@ -411,10 +414,6 @@ class UrlbarView {
 
   // Private methods below.
 
-  _getBoundsWithoutFlushing(element) {
-    return this.window.windowUtils.getBoundsWithoutFlushing(element);
-  }
-
   _createElement(name) {
     return this.document.createElementNS("http://www.w3.org/1999/xhtml", name);
   }
@@ -427,19 +426,17 @@ class UrlbarView {
 
     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
@@ -475,7 +472,7 @@ class UrlbarView {
         } 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;
@@ -486,22 +483,22 @@ class UrlbarView {
         this.panel.style.removeProperty("--item-padding-start");
         this.panel.style.removeProperty("--item-padding-end");
       }
+
+      // 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.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);
-
     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);

browser/themes/linux/browser.css

@@ -315,7 +315,7 @@ notification[value="translation"] menulist > .menulist-dropmarker {
   border-top: 1px solid ThreeDShadow;
 }
 
-#urlbar-results {
+.urlbarView {
   font-size: 1.05em;
 }
 

browser/themes/osx/browser.css

@@ -318,7 +318,7 @@
   border-top: 1px solid #C7C7C7;
 }
 
-#urlbar-results {
+.urlbarView {
   font-size: 14px;
 }
 

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

@@ -26,21 +26,17 @@
   --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);
 }
 
@@ -86,12 +82,11 @@
   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;
 }
@@ -174,7 +169,7 @@
 }
 
 .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);
 }
 
@@ -230,8 +225,8 @@
 .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. */
@@ -256,30 +251,30 @@
 }
 
 /* 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;

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

@@ -6,6 +6,7 @@
 
 %define fieldBorderColor hsla(240,5%,5%,.25)
 %define fieldHoverBorderColor hsla(240,5%,5%,.35)
+%define urlbarBreakoutExtend 4px
 
 :root {
   --toolbar-field-focus-border-color: Highlight;
@@ -24,15 +25,19 @@
   --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;
@@ -79,6 +84,22 @@
   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.megabar[open="true"] {
+  padding-bottom: 0 !important;
+}
+
 #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));
@@ -94,8 +115,6 @@
 :root[uidensity=compact] #urlbar,
 :root[uidensity=compact] #searchbar {
   min-height: 26px;
-  margin-top: 3px;
-  margin-bottom: 3px;
 }
 
 :root[uidensity=touch] #urlbar,
@@ -103,9 +122,9 @@
   min-height: 32px;
 }
 
-:root[chromehidden~="toolbar"] #urlbar {
+:root[chromehidden~="toolbar"] #urlbar-container {
   /* Remove excess space between the address bar and the menu button in popups. */
-  margin-inline-end: 0;
+  padding-inline-end: 0;
 }
 
 :root[customizing] .urlbar-input-box {

browser/themes/windows/browser.css

@@ -609,7 +609,7 @@ menuitem.bookmark-item {
 %include ../shared/autocomplete.inc.css
 %include ../shared/urlbar-autocomplete.inc.css
 
-#urlbar-results {
+.urlbarView {
   font-size: 1.15em;
 }