Bug 1356532: Part 2 - Avoid layout flushes during adjustSiteIconStart(). r?florian
MozReview-Commit-ID: 3DiWGUYGDoU
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -2370,34 +2370,44 @@ extends="chrome://global/content/binding
the window. Pass undefined to reset the icon's position to
whatever is specified in CSS.
@return True if the icon's position changed, false if not. -->
<method name="adjustSiteIconStart">
<parameter name="newStart"/>
<body>
<![CDATA[
if (typeof(newStart) != "number") {
- this._typeIcon.style.removeProperty("margin-inline-start");
+ requestAnimationFrame(() => {
+ this._typeIcon.style.removeProperty("margin-inline-start");
+ });
return true;
}
+
let utils = window.QueryInterface(Ci.nsIInterfaceRequestor)
.getInterface(Ci.nsIDOMWindowUtils);
let rect = utils.getBoundsWithoutFlushing(this._siteIcon);
let dir = this.getAttribute("dir");
let delta = dir == "rtl" ? rect.right - newStart
: newStart - rect.left;
- let px = this._typeIcon.style.marginInlineStart;
- if (!px) {
- // Allow margin-inline-start not to be specified in CSS initially.
- let style = window.getComputedStyle(this._typeIcon);
- px = dir == "rtl" ? style.marginRight : style.marginLeft;
- }
- let typeIconStart = Number(px.substr(0, px.length - 2));
- this._typeIcon.style.marginInlineStart = (typeIconStart + delta) + "px";
+ (async () => {
+ let px = this._typeIcon.style.marginInlineStart;
+ if (!px) {
+ // Allow margin-inline-start not to be specified in CSS initially.
+ await PromiseUtils.layoutFlushed(document, "layout", () => {
+ let style = window.getComputedStyle(this._typeIcon);
+ px = dir == "rtl" ? style.marginRight : style.marginLeft;
+ });
+ }
+ let typeIconStart = Number(px.substr(0, px.length - 2));
+
+ requestAnimationFrame(() => {
+ this._typeIcon.style.marginInlineStart = (typeIconStart + delta) + "px";
+ });
+ })();
return delta > 0;
]]>
</body>
</method>
<!-- This method truncates the displayed strings as necessary. -->
<method name="_handleOverflow">
<body><