Bug 643758 - WIP: Close form validation popups upon scrolling with e10s draft
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Mon, 30 Oct 2017 23:35:42 -0700
changeset 689170 cfdab94a625199d9d017532dd11ca4e516d50d0d
parent 688337 d3910b7628b8066d3f30d58b17b5824b05768854
child 738251 264a058a15611b340f5c1442c1a33d06432c0e55
push id86947
push usermozilla@noorenberghe.ca
push dateTue, 31 Oct 2017 06:36:08 +0000
bugs643758
milestone58.0a1
Bug 643758 - WIP: Close form validation popups upon scrolling with e10s MozReview-Commit-ID: K6SkyWstbkc
browser/modules/FormSubmitObserver.jsm
browser/modules/FormValidationHandler.jsm
--- a/browser/modules/FormSubmitObserver.jsm
+++ b/browser/modules/FormSubmitObserver.jsm
@@ -70,16 +70,19 @@ FormSubmitObserver.prototype =
       case "pageshow":
         if (this._isRootDocumentEvent(aEvent)) {
           this._hidePopup();
         }
         break;
       case "unload":
         this.uninit();
         break;
+      case "scroll":
+        this._hidePopup();
+        break;
       case "input":
         this._onInput(aEvent);
         break;
       case "blur":
         this._onBlur(aEvent);
         break;
     }
   },
@@ -126,16 +129,23 @@ FormSubmitObserver.prototype =
       }
       this._element = element;
 
       element.focus();
 
       // Watch for input changes which may change the validation message.
       element.addEventListener("input", this);
 
+      // TODO: The .focus call above may cause an async scroll so we should only add
+      // the below event listener after the element is actually focused.
+
+      // Watch for scroll changes to close the popup since it doesn't follow the
+      // field.
+      element.ownerDocument.addEventListener("scroll", this, true);
+
       // Watch for focus changes so we can disconnect our listeners and
       // hide the popup.
       element.addEventListener("blur", this);
 
       this._showPopup(element);
       break;
     }
   },
@@ -167,16 +177,17 @@ FormSubmitObserver.prototype =
   },
 
   /*
    * Blur event handler in which we disconnect from the form element and
    * hide the popup.
    */
   _onBlur(aEvent) {
     aEvent.originalTarget.removeEventListener("input", this);
+    aEvent.originalTarget.ownerDocument.removeEventListener("scroll", this, true);
     aEvent.originalTarget.removeEventListener("blur", this);
     this._element = null;
     this._hidePopup();
   },
 
   /*
    * Send the show popup message to chrome with appropriate position
    * information. Can be called repetitively to update the currently
--- a/browser/modules/FormValidationHandler.jsm
+++ b/browser/modules/FormValidationHandler.jsm
@@ -62,33 +62,31 @@ var FormValidationHandler =
     this._hidePopup();
   },
 
   handleEvent(aEvent) {
     switch (aEvent.type) {
       case "FullZoomChange":
       case "TextZoomChange":
       case "ZoomChangeUsingMouseWheel":
-      case "scroll":
         this._hidePopup();
         break;
       case "popuphiding":
         this._onPopupHiding(aEvent);
         break;
     }
   },
 
   /*
    * Internal
    */
 
   _onPopupHiding(aEvent) {
     aEvent.originalTarget.removeEventListener("popuphiding", this, true);
     let tabBrowser = aEvent.originalTarget.ownerDocument.getElementById("content");
-    tabBrowser.selectedBrowser.removeEventListener("scroll", this, true);
     tabBrowser.selectedBrowser.removeEventListener("FullZoomChange", this);
     tabBrowser.selectedBrowser.removeEventListener("TextZoomChange", this);
     tabBrowser.selectedBrowser.removeEventListener("ZoomChangeUsingMouseWheel", this);
 
     this._panel.hidden = true;
     this._panel = null;
     this._anchor.hidden = true;
     this._anchor = null;
@@ -121,18 +119,17 @@ var FormValidationHandler =
     this._anchor.height = aPanelData.contentRect.height;
     this._anchor.hidden = false;
 
     // Display the panel if it isn't already visible.
     if (!previouslyShown) {
       // Cleanup after the popup is hidden
       this._panel.addEventListener("popuphiding", this, true);
 
-      // Hide if the user scrolls the page
-      tabBrowser.selectedBrowser.addEventListener("scroll", this, true);
+      // Hide if the user zooms the page since the field location may change
       tabBrowser.selectedBrowser.addEventListener("FullZoomChange", this);
       tabBrowser.selectedBrowser.addEventListener("TextZoomChange", this);
       tabBrowser.selectedBrowser.addEventListener("ZoomChangeUsingMouseWheel", this);
 
       // Open the popup
       this._panel.openPopup(this._anchor, aPanelData.position, 0, 0, false);
     }
   },