Bug 1353426 - Use MozAfterPaint to update the styling of the popup each time there is a repaint while it is open. draft
authorJared Wein <jwein@mozilla.com>
Tue, 04 Apr 2017 15:03:32 -0400
changeset 555745 95c4301e484f34be2a93cbcb72cd8a958bfbf8b8
parent 555313 9fe56a625e0ae35d69ae03e22598a37820864ed5
child 555748 7693ae33fef92d0323ed3901e67690fc55851e55
child 556580 506edd446dfd02ab49dc522ffdc86fae1638e6fa
push id52318
push userbmo:jaws@mozilla.com
push dateTue, 04 Apr 2017 19:03:54 +0000
bugs1353426, 8854292
milestone55.0a1
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
toolkit/modules/SelectContentHelper.jsm
--- 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;
     }
   }
 
 }