Bug 959143 - Fix height of autocomplete popup and transition it in. r=jimm

browser/metro/base/content/bindings/urlbar.xml

@@ -500,11 +500,11 @@
   </binding>
 
   <binding id="urlbar-autocomplete">
-    <content class="meta-section-container">
-      <xul:vbox class="meta-section" anonid="results-container" flex="1">
+    <content class="meta-section-container" pack="end">
+      <xul:vbox class="meta-section" anonid="results-container" flex="2">
         <xul:label class="meta-section-title"
                    value="&autocompleteResultsHeader.label;"/>
-        <richgrid anonid="results" rows="3" flex="1" minSlots="1"
+        <richgrid anonid="results" rows="3" minSlots="8"
                   seltype="single" nocontext="true" deferlayout="true"/>
       </xul:vbox>
 
@@ -600,6 +600,17 @@
             this.clearSelection();
             this.invalidate();
 
+            let viewstate = this.getAttribute("viewstate");
+            switch (viewstate) {
+              case "portrait":
+              case "snapped":
+                this._results.setAttribute("vertical", true);
+                break;
+              default:
+                this._results.removeAttribute("vertical");
+                break;
+            }
+
             this._results.arrangeItemsNow();
             this._searches.arrangeItemsNow();
 
@@ -658,8 +669,8 @@
             if (!this.popupOpen)
               return;
 
-            this.updateResults();
             this.updateSearchEngineHeader();
+            this.updateResults();
           ]]>
         </body>
       </method>
@@ -676,22 +687,27 @@
               return;
 
             let haveNoResults = (this.matchCount == 0);
-            this._resultsContainer.hidden = haveNoResults;
 
             if (haveNoResults) {
               this._results.clearAll();
+              this.setAttribute("nomatch", true);
+              this._resultsContainer.removeAttribute("flex");
               return;
             }
 
+            this.removeAttribute("nomatch");
+            this._resultsContainer.setAttribute("flex", 1);
+
             let controller = this.input.controller;
             let lastMatch = this.matchCount - 1;
             let iterCount = Math.max(this._results.itemCount, this.matchCount);
 
             // Swap out existing items for new search hit results
             for (let i = 0; i < iterCount; i++) {
+              let item = this._results._slotAt(i);
               if (i > lastMatch) {
-                let lastItem = this._results.itemCount - 1;
-                this._results.removeItemAt(lastItem, true);
+                item.removeAttribute("value");
+                item.removeAttribute("autocomplete");
                 continue;
               }
 
@@ -699,15 +715,9 @@
               let label = controller.getCommentAt(i) || value;
               let iconURI = controller.getImageAt(i);
 
-              let item = this._results.getItemAtIndex(i);
-              if (item == null) {
-                item = this._results.appendItem(label, value, true);
-                item.setAttribute("autocomplete", "true");
-              } else {
-                item.setAttribute("label", label);
-                item.setAttribute("value", value);
-              }
-
+              item.setAttribute("autocomplete", true);
+              item.setAttribute("label", label);
+              item.setAttribute("value", value);
               item.setAttribute("iconURI", iconURI);
             }
 

browser/metro/base/content/browser.xul

@@ -227,7 +227,7 @@ Desktop browser's sync prefs.
 
       <vbox id="toolbar-overlay" flex="1">
         <!-- Autocomplete -->
-        <scrollbox flex="1">
+        <scrollbox flex="1" id="urlbar-autocomplete-scroll" observes="bcast_urlbarState">
           <hbox id="urlbar-autocomplete" observes="bcast_windowState"/>
         </scrollbox>
 

browser/metro/base/tests/mochitest/browser_selection_urlbar.js

@@ -102,6 +102,11 @@ gTests.push({
     edit.select();
 
     let editCoords = logicalCoordsForElement(edit);
+
+    // wait for popup animation to complete, it interferes with edit selection testing
+    let autocompletePopup = document.getElementById("urlbar-autocomplete-scroll");
+    yield waitForEvent(autocompletePopup, "transitionend");
+
     SelectionHelperUI.attachEditSession(ChromeSelectionHandler, editCoords.x, editCoords.y);
     ok(SelectionHelperUI.isSelectionUIVisible, "selection enabled");
 

browser/metro/base/tests/mochitest/browser_urlbar.js

@@ -325,15 +325,16 @@ gTests.push({
     let opened = yield waitForCondition(() => gEdit.popup.popupOpen);
     yield waitForCondition(() => gEdit.popup._results.itemCount > 0);
 
-    ok(!gEdit.popup._resultsContainer.hidden, "'Your results' are visible");
+    ok(!gEdit.popup.hasAttribute("nomatch"), "'Popup doesnt have nomatch attribute when there are results");
+    ok(gEdit.popup._resultsContainer.getBoundingClientRect().width, "'Your results' are visible");
     ok(gEdit.popup._results.itemCount > 0, "'Your results' are populated");
 
     // Append a string to make sure it doesn't match anything in 'your results'
     EventUtils.sendString("zzzzzzzzzzzzzzzzzz", window);
 
-    yield waitForCondition(() => gEdit.popup._resultsContainer.hidden);
+    yield waitForCondition(() => gEdit.popup.hasAttribute("nomatch"));
 
-    ok(gEdit.popup._resultsContainer.hidden, "'Your results' are hidden");
+    is(gEdit.popup._resultsContainer.getBoundingClientRect().width, 0, "'Your results' are hidden");
     ok(gEdit.popup._results.itemCount === 0, "'Your results' are empty");
 
     EventUtils.synthesizeKey("VK_DOWN", {}, window);

browser/metro/theme/platform.css

@@ -728,6 +728,45 @@ tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
   transition-property: none;
 }
 
+/* Autocomplete ----------------------------------------------------------------- */
+
+#urlbar-autocomplete-scroll:not([autocomplete]) {
+  transform: translateY(calc(3 * @grid_row_height@ + 64px));
+  visibility: collapse;
+}
+
+#urlbar-autocomplete-scroll[autocomplete] {
+  height: calc(3 * @grid_row_height@ + 64px);
+  max-height: calc(3 * @grid_row_height@ + 64px);
+  transform: translateY(0);
+  transition-timing-function: @metro_animation_easing@;
+  transition-property: transform;
+  transition-duration: @metro_animation_duration@;
+  transition-delay: 0s;
+  visibility: visible;
+}
+
+#urlbar-autocomplete-scroll:not([autocomplete]) > .meta-section-container > .meta-section {
+  opacity: 0;
+}
+
+#urlbar-autocomplete > .meta-section {
+  opacity: 1;
+  transition-property: opacity;
+  transition-timing-function: @metro_animation_easing@;
+  transition-duration: @metro_animation_duration@;
+  transition-delay: 0s;
+  visibility: visible;
+}
+
+#urlbar-autocomplete[nomatch] > .meta-section[anonid="results-container"] {
+  opacity: 0;
+  visibility: collapse;
+}
+
+#urlbar-autocomplete richgriditem:not([value]) {
+  visibility: collapse;
+}
 
 /* App bars ----------------------------------------------------------------- */