Bug 1353426 - Use MozAfterPaint to update the styling of the popup each time there is a repaint while it is open.
This solution is probably the least-performant approach but does fix displaying the immediate values during a transition. However there are cases where it causes flickering and jumping around of the selected item, evidenced by applying this patch and using attachment 8854292.
MozReview-Commit-ID: 4jyMc3XYzlB
--- a/toolkit/modules/SelectContentHelper.jsm
+++ b/toolkit/modules/SelectContentHelper.jsm
@@ -57,16 +57,17 @@ this.SelectContentHelper.prototype = {
init() {
this.global.addMessageListener("Forms:SelectDropDownItem", this);
this.global.addMessageListener("Forms:DismissedDropDown", this);
this.global.addMessageListener("Forms:MouseOver", this);
this.global.addMessageListener("Forms:MouseOut", this);
this.global.addMessageListener("Forms:MouseUp", this);
this.global.addEventListener("pagehide", this, { mozSystemGroup: true });
this.global.addEventListener("mozhidedropdown", this, { mozSystemGroup: true });
+ this.global.addEventListener("MozAfterPaint", this, { mozSystemGroup: true });
this.element.addEventListener("blur", this, { mozSystemGroup: true });
this.element.addEventListener("transitionend", this, { mozSystemGroup: true });
let MutationObserver = this.element.ownerGlobal.MutationObserver;
this.mut = new MutationObserver(mutations => {
// Something changed the <select> while it was open, so
// we'll poke a DeferredTask to update the parent sometime
// in the very near future.
this._updateTimer.arm();
@@ -78,16 +79,17 @@ this.SelectContentHelper.prototype = {
this.element.openInParentProcess = false;
this.global.removeMessageListener("Forms:SelectDropDownItem", this);
this.global.removeMessageListener("Forms:DismissedDropDown", this);
this.global.removeMessageListener("Forms:MouseOver", this);
this.global.removeMessageListener("Forms:MouseOut", this);
this.global.removeMessageListener("Forms:MouseUp", this);
this.global.removeEventListener("pagehide", this, { mozSystemGroup: true });
this.global.removeEventListener("mozhidedropdown", this, { mozSystemGroup: true });
+ this.global.removeEventListener("MozAfterPaint", this, { mozSystemGroup: true });
this.element.removeEventListener("blur", this, { mozSystemGroup: true });
this.element.removeEventListener("transitionend", this, { mozSystemGroup: true });
this.element = null;
this.global = null;
this.mut.disconnect();
this._updateTimer.disarm();
this._updateTimer = null;
gOpen = false;
@@ -278,16 +280,17 @@ this.SelectContentHelper.prototype = {
break;
case "blur":
case "mozhidedropdown":
if (this.element === event.target) {
this.global.sendAsyncMessage("Forms:HideDropDown", {});
this.uninit();
}
break;
+ case "MozAfterPaint":
case "transitionend":
this._update();
break;
}
}
}