Bug 1709050 - Suppress the focus ring in the upgrade dialog and some about: pages when they first load. r=Mardak,Gijs

Using autofocus="true" or programmatically calling .focus() when there is no pre-existing focused
element causes the :focus-visible to match.

This patch avoids using autofocus="true" on some of our about: pages, and uses
Element.focus({ preventFocusRing: true }) to avoid that when these pages and dialog
first load. Note that this doesn't prevent the focus ring from _ever_ appear, it just
stops it from appearing on first load.

Differential Revision: https://phabricator.services.mozilla.com/D115062

browser/base/content/certerror/aboutNetError.js

@@ -1273,9 +1273,18 @@ function addAutofocus(selector, position = "afterbegin") {
   if (window.top == window) {
     var button = document.querySelector(selector);
     var parent = button.parentNode;
-    button.remove();
-    button.setAttribute("autofocus", "true");
     parent.insertAdjacentElement(position, button);
+    // It's possible addAutofocus was called via the DOMContentLoaded event
+    // handler and that the button has no frame. Things without a frame cannot
+    // be focused. We use a requestAnimationFrame to queue up the focus to occur
+    // once the button has its frame. We also use a setTimeout(0) to try to queue
+    // the focus at the beginning of the next frame to reduce the chances of causing
+    // a sync layout flush.
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        button.focus({ preventFocusRing: true });
+      }, 0);
+    });
   }
 }
 

browser/base/content/upgradeDialog.js

@@ -233,7 +233,7 @@ function onLoad(ready) {
     await document.l10n.ready;
     requestAnimationFrame(() => {
       // Ensure the primary button is focused on each screen.
-      primary.focus();
+      primary.focus({ preventFocusRing: true });
 
       // Save first screen height, so later screens can flex and anchor content.
       if (current === 0) {

browser/components/sessionstore/content/aboutSessionRestore.js

@@ -81,7 +81,7 @@ window.onload = function() {
 
   initTreeView();
 
-  errorTryAgainButton.focus();
+  errorTryAgainButton.focus({ preventFocusRing: true });
 };
 
 function isTreeViewVisible() {

toolkit/components/aboutconfig/content/aboutconfig.html

@@ -38,7 +38,7 @@
       </div>
 
       <div class="button-container">
-        <button autofocus id="warningButton"
+        <button id="warningButton" class="primary"
                 data-l10n-id="about-config-intro-warning-button"></button>
       </div>
     </div>

toolkit/components/aboutconfig/content/aboutconfig.js

@@ -438,6 +438,7 @@ if (!Preferences.get("browser.aboutConfig.showWarning")) {
   document.addEventListener("DOMContentLoaded", function() {
     let warningButton = document.getElementById("warningButton");
     warningButton.addEventListener("click", onWarningButtonClick);
+    warningButton.focus({ preventFocusRing: true });
   });
 }