[HaTS] Close window after survey answer is posted

Since HaTS library uses async google iframeIO call to post the survey
answer through a form to the server. The form's target is an iframe in
the same doc. If we close the window too quick, the request might not go
through yet. So, in this CL, we wait until the iframe is loaded, which
means the form is already posted, to close the window.

BUG=1018063

Change-Id: Ifcc3120addecf540a6a45430bba3ea545d65d078
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880694
Commit-Queue: Wei Li <weili@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710236}

chrome/browser/resources/hats/hats.html

@@ -20,7 +20,8 @@
     <script>
       /**
        * Close the window when the survey is submitted or when the survey
-       * has already been submitted in the past.
+       * has already been submitted in the past. It is called through HaTS
+       * javascript library's accessGrantedCallback function.
        * @param {boolean} isFirstRun Will be true when the user just earned
        *    access to the content and false if the user had already had access
        *    previously.
@@ -30,14 +31,42 @@
           return;
         }
 
-        window.close();
+        // HaTS 1 library will post the answer through a form to an iframe.
+        // Once the iframe is loaded, it will be disposed. We can not listen to
+        // the iframe's load event since the previous listener will dispose the
+        // iframe so our listener will not be notified. Instead, we listen to
+        // the iframe's disposal to make sure the iframe is already loaded,
+        // which means the answer has been posted to the server.
+        // TODO(weili): Once this issue is fixed in HaTS library
+        // (https://b.corp.google.com/issues/143494318), remove the following
+        // work around.
+        const element = document.querySelector(`iframe[id^='closure_frame']`);
+        if (element === null) {
+          // No iframe found.
+          window.close();
+        }
+
+        const observer = new MutationObserver(function(mutations) {
+          mutations.forEach(function(mutation) {
+            for (let i = 0; i < mutation.removedNodes.length; i++) {
+              if (element === mutation.removedNodes[i]) {
+                window.close();
+              }
+            }
+          })
+        });
+
+        // Watch for the iframe disposal event.
+        observer.observe(element.parentNode, {childList: true});
       }
 
       /**
        * Called after the survey HTML is injected into the page.
+       * It is called through HaTS javascript library's afterShowCallback
+       * function.
        */
       function onSurveyShown() {
-        /* Don't show logo on the survey */
+        // Don't show logo on the survey.
         const elements = document.getElementsByClassName('t402-prompt-logo');
         for (const element of elements)
           element.style.display = 'none';