diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 3968b8e2fea9..0365fff9edf5 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -716,6 +716,7 @@
autocompletesearchparam="enable-actions"
autocompletepopup="PopupAutoCompleteRichResult"
completeselectedindex="true"
+ shrinkdelay="250"
tabscrolling="true"
showcommentcolumn="true"
showimagecolumn="true"
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index a0acbe02f630..104c8e7262ae 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -963,6 +963,10 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
color: GrayText;
}
+#PopupAutoCompleteRichResult > richlistbox {
+ transition: height 100ms;
+}
+
#search-container {
min-width: calc(54px + 11ch);
}
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index 8547a470f5c4..337c6b6650a6 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1827,6 +1827,10 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
color: GrayText;
}
+#PopupAutoCompleteRichResult > richlistbox {
+ transition: height 100ms;
+}
+
#PopupAutoCompleteRichResult {
margin-top: 2px;
}
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index cc0bf584f98a..79a254dd542f 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -1403,6 +1403,10 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
color: GrayText;
}
+#PopupAutoCompleteRichResult > richlistbox {
+ transition: height 100ms;
+}
+
#search-container {
min-width: calc(54px + 11ch);
}
diff --git a/toolkit/content/widgets/autocomplete.xml b/toolkit/content/widgets/autocomplete.xml
index 50eb252368db..20c4e2246213 100644
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -148,6 +148,10 @@
+
+ parseInt(this.getAttribute("shrinkdelay")) || 0
+
+
let utils = {};
Components.utils.import("resource://gre/modules/PrivateBrowsingUtils.jsm", utils);
@@ -1005,6 +1009,7 @@ extends="chrome://global/content/bindings/popup.xml#popup">
0
0
+ false
@@ -1073,23 +1078,30 @@ extends="chrome://global/content/bindings/popup.xml#popup">
this.adjustHeight(), 0);
+ } else {
+ this._collapseUnusedItems();
}
- // make sure to collapse any existing richlistitems
- // that aren't going to be used
- var existingItemsCount = this.richlistbox.childNodes.length;
- for (var i = this._matchCount; i < existingItemsCount; i++)
- this.richlistbox.childNodes[i].collapsed = true;
-
this._currentIndex = 0;
+ if (this._appendResultTimeout) {
+ clearTimeout(this._appendResultTimeout);
+ }
this._appendCurrentResult();
]]>
@@ -1113,6 +1125,17 @@ extends="chrome://global/content/bindings/popup.xml#popup">
+
+
+
+
+
+
if (!this._rowHeight) {
let firstRowRect = rows[0].getBoundingClientRect();
this._rowHeight = firstRowRect.height;
+ this._rlbAnimated = !!window.getComputedStyle(this.richlistbox).transitionProperty;
+
+ // Set a fixed max-height to avoid flicker when growing the panel.
+ this.richlistbox.style.maxHeight = (this._rowHeight * this.maxRows) + "px";
}
// Calculate the height to have the first row to last row shown
height = this._rowHeight * numRows;
}
- // Only update the height if we have a non-zero height and if it
- // changed (the richlistbox is collapsed if there are no results)
- if (height && height != this.richlistbox.height)
- this.richlistbox.height = height;
+ let currentHeight = this.richlistbox.getBoundingClientRect().height;
+ if (height > currentHeight) {
+ // Grow immediately.
+ this.richlistbox.style.height = height + "px";
+ } else {
+ // Delay shrinking to avoid flicker.
+ this._shrinkTimeout = setTimeout(() => {
+ this.richlistbox.style.height = height + "px";
+ if (this._rlbAnimated) {
+ let onTransitionEnd = () => {
+ this.removeEventListener("transitionend", onTransitionEnd, true);
+ this._collapseUnusedItems();
+ };
+ this.addEventListener("transitionend", onTransitionEnd, true);
+ } else {
+ this._collapseUnusedItems();
+ }
+ }, this.mInput.shrinkDelay);
+ }
]]>
@@ -1227,7 +1269,7 @@ extends="chrome://global/content/bindings/popup.xml#popup">
if (this._currentIndex < matchCount) {
// yield after each batch of items so that typing the url bar is
// responsive
- setTimeout(function (self) { self._appendCurrentResult(); }, 0, this);
+ this._appendResultTimeout = setTimeout(() => this._appendCurrentResult(), 0);
}
]]>