Clean up temporary logging iframe in automation_helper

For some sites they overload console commands, so we
create an iframe to log element info for debugging.

We need to make sure to remove that iframe afterwards, or
we build up a collection of them that might affect elements
on the page, particularly on lower resolutions.

Bug: 984664
Change-Id: I2f81cd8e563c4ca275f561efe94bb03027ee0d8f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1884815
Auto-Submit: Ian Struiksma <ianstruiksma@google.com>
Commit-Queue: Caleb Rouleau <crouleau@chromium.org>
Reviewed-by: Caleb Rouleau <crouleau@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711370}

chrome/test/data/web_page_replay_go_helper_scripts/automation_helper.js

@@ -25,63 +25,67 @@ const automation_helper = (function() {
           this.DomElementReadyState.visible |
           this.DomElementReadyState.enabled |
           this.DomElementReadyState.on_top) {
-
+    let isReady = true;
     // Some sites override the console function locally,
     // this ensures our function can write to log
     var frame = document.createElement('iframe');
-    document.body.appendChild(frame);
-    console = frame.contentWindow.console;
+    try {
+      document.body.appendChild(frame);
+      console = frame.contentWindow.console;
 
-    const element = getElementFunction();
-    let isReady = true;
-    let logDataArr = [];
-    logDataArr.push('[Element (' + xpath + ')]');
-    if (element) {
-      logDataArr.push('[FOUND]');
-      let target = element;
-      if (state_flags & this.DomElementReadyState.visible) {
-        // In some custom select drop downs, like the ones on Amazon.com and
-        // Zappos.com, the drop down options are hosted inside a span element
-        // that is the immediate sibling, rather than the descendant, of the
-        // select dropdown.
-        // In these cases, check if the span is visible instead.
-        if (element.offsetParent === null &&
-            element instanceof HTMLSelectElement &&
-            element.nextElementSibling instanceof HTMLSpanElement) {
-          logDataArr.push("[Moved to nextElementSibling]");
-          target = element.nextElementSibling;
+      const element = getElementFunction();
+      let logDataArr = [];
+      logDataArr.push('[Element (' + xpath + ')]');
+      if (element) {
+        logDataArr.push('[FOUND]');
+        let target = element;
+        if (state_flags & this.DomElementReadyState.visible) {
+          // In some custom select drop downs, like the ones on Amazon.com and
+          // Zappos.com, the drop down options are hosted inside a span element
+          // that is the immediate sibling, rather than the descendant, of the
+          // select dropdown.
+          // In these cases, check if the span is visible instead.
+          if (element.offsetParent === null &&
+              element instanceof HTMLSelectElement &&
+              element.nextElementSibling instanceof HTMLSpanElement) {
+            logDataArr.push("[Moved to nextElementSibling]");
+            target = element.nextElementSibling;
+          }
+          const isVisible = (target.offsetParent !== null) &&
+            (target.offsetWidth > 0) && (target.offsetHeight > 0);
+          logDataArr.push('[isVisible:' + isVisible + ']');
+          isReady = isReady && isVisible;
         }
-        const isVisible = (target.offsetParent !== null) &&
-          (target.offsetWidth > 0) && (target.offsetHeight > 0);
-        logDataArr.push('[isVisible:' + isVisible + ']');
-        isReady = isReady && isVisible;
-      }
-      if (state_flags & this.DomElementReadyState.on_top) {
-        // The document.elementFromPoint function only acts on an element
-        // inside the viewport. Actively scroll the element into view first.
-        element.scrollIntoView({block:"center", inline:"center"});
-        const rect = target.getBoundingClientRect();
-        // Check that the element is not concealed behind another element.
-        const topElement = document.elementFromPoint(
-            // As coordinates, use the center of the element, minus the
-            // window offset in case the element is outside the view.
-            rect.left + rect.width / 2, rect.top + rect.height / 2);
-        const isOnTop = target.contains(topElement) ||
-                      target.isSameNode(topElement);
-        isReady = isReady && isOnTop;
-        logDataArr.push('[OnTop:' + isOnTop + ':' + topElement.localName + ']');
-      }
-      if (state_flags & this.DomElementReadyState.enabled) {
-        const isEnabled = !element.disabled;
-        logDataArr.push('[Enabled:' + isEnabled + ']');
-        isReady = isReady && isEnabled;
+        if (state_flags & this.DomElementReadyState.on_top) {
+          // The document.elementFromPoint function only acts on an element
+          // inside the viewport. Actively scroll the element into view first.
+          element.scrollIntoView({block:"center", inline:"center"});
+          const rect = target.getBoundingClientRect();
+          // Check that the element is not concealed behind another element.
+          const topElement = document.elementFromPoint(
+              // As coordinates, use the center of the element, minus the
+              // window offset in case the element is outside the view.
+              rect.left + rect.width / 2, rect.top + rect.height / 2);
+          const isTop = target.contains(topElement) ||
+                        target.isSameNode(topElement);
+          isReady = isReady && isTop;
+          logDataArr.push('[OnTop:' + isTop + ':' + topElement.localName + ']');
+        }
+        if (state_flags & this.DomElementReadyState.enabled) {
+          const isEnabled = !element.disabled;
+          logDataArr.push('[Enabled:' + isEnabled + ']');
+          isReady = isReady && isEnabled;
+        }
+      } else {
+        isReady = false;
+        logDataArr.push('[NOT FOUND]');
       }
-    } else {
-      isReady = false;
-      logDataArr.push('[NOT FOUND]');
+      logDataArr.push('[FinalReady:' + isReady + ']');
+      console.log(logDataArr.join(""));
+    } finally {
+      // Remove our temporary console iframe
+      frame.remove();
     }
-    logDataArr.push('[FinalReady:' + isReady + ']');
-    console.log(logDataArr.join(""));
     return isReady;
   };