Bug 1545394 - Keep stale rows in the view while receiving new results. r=mak

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

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

browser/components/urlbar/UrlbarView.jsm

@@ -108,9 +108,7 @@ class UrlbarView {
     if (!this.isOpen || !this._selected) {
       return null;
     }
-
-    let resultIndex = this._selected.getAttribute("resultIndex");
-    return this._queryContext.results[resultIndex];
+    return this._selected.result;
   }
 
   /**
@@ -193,33 +191,22 @@ class UrlbarView {
 
   // UrlbarController listener methods.
   onQueryStarted(queryContext) {
-    this._rows.style.minHeight = this._getBoundsWithoutFlushing(this._rows).height + "px";
+    this._startRemoveStaleRowsTimer();
   }
 
   onQueryCancelled(queryContext) {
-    // Nothing.
+    this._cancelRemoveStaleRowsTimer();
   }
 
   onQueryFinished(queryContext) {
-    this._rows.style.minHeight = "";
+    this._cancelRemoveStaleRowsTimer();
+    this._removeStaleRows();
   }
 
   onQueryResults(queryContext) {
     this._queryContext = queryContext;
 
-    while (this._rows.children.length > queryContext.results.length) {
-      this._rows.lastElementChild.remove();
-    }
-    let resultIndex = 0;
-    for (let row of this._rows.children) {
-      this._updateRow(row, resultIndex);
-      resultIndex++;
-    }
-    for (; resultIndex < queryContext.results.length; resultIndex++) {
-      let row = this._createRow();
-      this._updateRow(row, resultIndex);
-      this._rows.appendChild(row);
-    }
+    this._updateResults(queryContext);
 
     let isFirstPreselectedResult = false;
     if (queryContext.lastResultCount == 0) {
@@ -392,6 +379,24 @@ class UrlbarView {
     this.panel.openPopup(this.input.textbox, "after_start");
   }
 
+  _updateResults(queryContext) {
+    let results = queryContext.results;
+    let i = 0;
+    for (let row of this._rows.children) {
+      if (i < results.length) {
+        this._updateRow(row, results[i]);
+      } else {
+        row.setAttribute("stale", "true");
+      }
+      i++;
+    }
+    for (; i < results.length; i++) {
+      let row = this._createRow();
+      this._updateRow(row, results[i]);
+      this._rows.appendChild(row);
+    }
+  }
+
   _createRow() {
     let item = this._createElement("div");
     item.className = "urlbarView-row";
@@ -438,8 +443,10 @@ class UrlbarView {
     return item;
   }
 
-  _updateRow(item, resultIndex) {
-    let result = this._queryContext.results[resultIndex];
+  _updateRow(item, result) {
+    let resultIndex = this._queryContext.results.indexOf(result);
+    item.result = result;
+    item.removeAttribute("stale");
     item.id = "urlbarView-row-" + resultIndex;
     item.setAttribute("resultIndex", resultIndex);
 
@@ -520,6 +527,31 @@ class UrlbarView {
     item._elements.get("action").textContent = action;
   }
 
+  _removeStaleRows() {
+    let row = this._rows.lastElementChild;
+    while (row) {
+      let next = row.previousElementSibling;
+      if (row.hasAttribute("stale")) {
+        row.remove();
+      }
+      row = next;
+    }
+  }
+  
+  _startRemoveStaleRowsTimer() {
+    this._removeStaleRowsTimer = this.window.setTimeout(() => {
+      this._removeStaleRowsTimer = null;
+      this._removeStaleRows();
+    }, 200);
+  }
+
+  _cancelRemoveStaleRowsTimer() {
+    if (this._removeStaleRowsTimer) {
+      this.window.clearTimeout(this._removeStaleRowsTimer);
+      this._removeStaleRowsTimer = null;
+    }
+  }
+
   _selectItem(item, {
     updateInput = true,
     setAccessibleFocus = true,
@@ -536,12 +568,7 @@ class UrlbarView {
     this._selected = item;
 
     if (updateInput) {
-      let result = null;
-      if (item) {
-        let resultIndex = item.getAttribute("resultIndex");
-        result = this._queryContext.results[resultIndex];
-      }
-      this.input.setValueFromResult(result);
+      this.input.setValueFromResult(item && item.result);
     }
   }