Don't autofocus buttons when about:certerror is embedded in an iframe (bug 1336352). r=nhnt11

MozReview-Commit-ID: BT8oCmX9stf

--HG--
extra : rebase_source : 3f80e8751ba2a4b49379fae6f1f4016838dc0ca2

browser/base/content/aboutNetError.xhtml

@@ -99,6 +99,7 @@
           const event = new CustomEvent("AboutNetErrorResetPreferences", {bubbles:true});
           document.dispatchEvent(event);
         });
+        addAutofocus("prefResetButton", "beforeend");
       }
 
       function setupAdvancedButton() {
@@ -198,6 +199,7 @@
           initPageCertError();
           return;
         }
+        addAutofocus("errorTryAgain");
 
         document.body.className = "neterror";
 
@@ -317,6 +319,7 @@
           document.dispatchEvent(event);
         });
 
+        addAutofocus("openPortalLoginPageButton");
         setupAdvancedButton();
 
         addDomainErrorLinks();
@@ -335,6 +338,7 @@
           host.textContent = document.location.hostname;
         }
 
+        addAutofocus("returnButton");
         setupAdvancedButton();
 
         document.getElementById("learnMoreContainer").style.display = "block";
@@ -364,6 +368,22 @@
         addDomainErrorLinks();
       }
 
+      /* Only do autofocus if we're the toplevel frame; otherwise we
+         don't want to call attention to ourselves!  The key part is
+         that autofocus happens on insertion into the tree, so we
+         can remove the button, add @autofocus, and reinsert the
+         button.
+      */
+      function addAutofocus(buttonId, position = "afterbegin") {
+        if (window.top == window) {
+            var button = document.getElementById(buttonId);
+            var parent = button.parentNode;
+            button.remove();
+            button.setAttribute("autofocus", "true");
+            parent.insertAdjacentElement(position, button);
+        }
+      }
+
       /* Try to preserve the links contained in the error description, like
          the error code.
 
@@ -595,10 +615,10 @@
         </div>
 
         <div id="certErrorAndCaptivePortalButtonContainer" class="button-container">
-          <button id="returnButton" class="primary" autocomplete="off" autofocus="true">&returnToPreviousPage.label;</button>
-          <button id="openPortalLoginPageButton" class="primary" autocomplete="off" autofocus="true">&openPortalLoginPage.label2;</button>
+          <button id="returnButton" class="primary" autocomplete="off">&returnToPreviousPage.label;</button>
+          <button id="openPortalLoginPageButton" class="primary" autocomplete="off">&openPortalLoginPage.label2;</button>
           <div class="button-spacer"></div>
-          <button id="advancedButton" autocomplete="off" autofocus="true">&advanced.label;</button>
+          <button id="advancedButton" autocomplete="off">&advanced.label;</button>
         </div>
       </div>
 
@@ -606,21 +626,6 @@
         <button id="errorTryAgain" class="primary" autocomplete="off" onclick="retryThis(this);">&retry.label;</button>
       </div>
 
-      <script>
-        // Only do autofocus if we're the toplevel frame; otherwise we
-        // don't want to call attention to ourselves!  The key part is
-        // that autofocus happens on insertion into the tree, so we
-        // can remove the button, add @autofocus, and reinsert the
-        // button.
-        if (window.top == window) {
-            var button = document.getElementById("errorTryAgain");
-            var parent = button.parentNode;
-            button.remove();
-            button.setAttribute("autofocus", "true");
-            parent.appendChild(button);
-        }
-      </script>
-
       <!-- UI for option to report certificate errors to Mozilla. Removed on
            init for other error types .-->
       <div id="certificateErrorReporting">

browser/base/content/test/captivePortal/browser_captivePortal_certErrorUI.js

@@ -46,7 +46,9 @@ add_task(function* checkCaptivePortalCertErrorUI() {
        "Captive portal error page UI is visible.");
 
     info("Clicking the Open Login Page button.");
-    doc.getElementById("openPortalLoginPageButton").click();
+    let loginButton = doc.getElementById("openPortalLoginPageButton");
+    is(loginButton.getAttribute("autofocus"), "true", "openPortalLoginPageButton has autofocus");
+    loginButton.click();
   });
 
   let portalTab = yield portalTabPromise;

browser/base/content/test/general/browser_aboutCertError.js

@@ -39,6 +39,7 @@ add_task(function* checkReturnToAboutHome() {
   yield ContentTask.spawn(browser, null, function* () {
     let doc = content.document;
     let returnButton = doc.getElementById("returnButton");
+    is(returnButton.getAttribute("autofocus"), "true", "returnButton has autofocus");
     returnButton.click();
   });
   yield pageshowPromise;

browser/base/content/test/general/browser_aboutNetError.js

@@ -31,7 +31,10 @@ add_task(function* checkReturnToPreviousPage() {
 
   let pageshowPromise = promiseWaitForEvent(browser, "pageshow");
   yield ContentTask.spawn(browser, null, function* () {
-    content.document.getElementById("prefResetButton").click();
+    let doc = content.document;
+    let prefResetButton = doc.getElementById("prefResetButton");
+    Assert.equal(prefResetButton.getAttribute("autofocus"), "true", "prefResetButton has autofocus");
+    prefResetButton.click();
   });
   yield pageshowPromise;