Bug 1579311 - Adjust the order of the buttons in the confirmation dialog based on OS and focus the confirmation button by default. r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -52,8 +52,8 @@
             <p class="message" id="message"></p>
           </div>
           <div class="buttons">
-            <button class="confirm-button danger-button" tabindex="2"></button>
-            <button class="cancel-button" tabindex="1" data-l10n-id="confirmation-dialog-cancel-button"></button>
+            <button class="confirm-button danger-button"></button>
+            <button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button>
           </div>
         </div>
       </div>

browser/components/aboutlogins/content/components/confirmation-dialog.css

@@ -67,6 +67,14 @@ button.dismiss-button {
   padding: 16px 32px;
 }
 
+.buttons {
+  display: flex;
+}
+
+.buttons.macosx > .confirm-button {
+  order: 1;
+}
+
 .buttons > button {
   min-width: 140px;
 }

browser/components/aboutlogins/content/components/confirmation-dialog.js

@@ -17,17 +17,26 @@ export default class ConfirmationDialog extends HTMLElement {
     document.l10n.connectRoot(shadowRoot);
     shadowRoot.appendChild(template.content.cloneNode(true));
 
+    this._buttons = this.shadowRoot.querySelector(".buttons");
     this._cancelButton = this.shadowRoot.querySelector(".cancel-button");
     this._confirmButton = this.shadowRoot.querySelector(".confirm-button");
     this._dismissButton = this.shadowRoot.querySelector(".dismiss-button");
     this._message = this.shadowRoot.querySelector(".message");
     this._overlay = this.shadowRoot.querySelector(".overlay");
     this._title = this.shadowRoot.querySelector(".title");
+
+    this._buttons.classList.toggle("macosx", navigator.platform == "MacIntel");
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "keydown":
+        if (event.repeat) {
+          // Prevent repeat keypresses from accidentally confirming the
+          // dialog since the confirmation button is focused by default.
+          event.preventDefault();
+          return;
+        }
         if (event.key === "Escape" && !event.defaultPrevented) {
           this.onCancel();
         }
@@ -90,9 +99,10 @@ export default class ConfirmationDialog extends HTMLElement {
     this._overlay.addEventListener("click", this);
     window.addEventListener("keydown", this);
 
-    // For accessibility, focus the least destructive action button when the
-    // dialog loads.
-    this._cancelButton.focus();
+    // For speed-of-use, focus the confirm button when the
+    // dialog loads. Showing the dialog itself provides enough
+    // of a buffer for accidental deletions.
+    this._confirmButton.focus();
 
     this._promise = new Promise((resolve, reject) => {
       this._resolve = resolve;