From 3c9542daf60d8c330d25f9ab969b0acbc83ee73a Mon Sep 17 00:00:00 2001
From: pbz <pbz@mozilla.com>
Date: Wed, 7 Oct 2020 18:36:32 +0000
Subject: [PATCH] Bug 1667781 - Refactored addEngine dialog to use dialog
 element. r=Gijs,fluent-reviewers,preferences-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D92270
---
 .../preferences/dialogs/addEngine.js          | 16 ++++++++-------
 .../preferences/dialogs/addEngine.xhtml       | 18 +++++++----------
 .../components/preferences/search.inc.xhtml   |  3 +--
 .../en-US/browser/preferences/addEngine.ftl   | 10 +++-------
 .../bug_1667781_preferences_dialogs.py        | 20 +++++++++++++++++++
 5 files changed, 40 insertions(+), 27 deletions(-)
 create mode 100644 python/l10n/fluent_migrations/bug_1667781_preferences_dialogs.py

diff --git a/browser/components/preferences/dialogs/addEngine.js b/browser/components/preferences/dialogs/addEngine.js
index 8c9b4790fb3f..86dadba2b15b 100644
--- a/browser/components/preferences/dialogs/addEngine.js
+++ b/browser/components/preferences/dialogs/addEngine.js
@@ -4,8 +4,7 @@
 
 /* import-globals-from ../main.js */
 
-var gAddEngineDialog = {
-  _addButton: null,
+let gAddEngineDialog = {
   _form: null,
   _name: null,
   _alias: null,
@@ -15,15 +14,16 @@ var gAddEngineDialog = {
   },
 
   async init() {
-    this._addButton = document.getElementById("addButton");
+    this._dialog = document.querySelector("dialog");
     this._form = document.getElementById("addEngineForm");
     this._name = document.getElementById("engineName");
     this._alias = document.getElementById("engineAlias");
 
-    this._addButton.addEventListener("command", this.onAddEngine.bind(this));
     this._name.addEventListener("input", this.onNameInput.bind(this));
     this._alias.addEventListener("input", this.onAliasInput.bind(this));
     this._form.addEventListener("input", this.onFormInput.bind(this));
+
+    document.addEventListener("dialogaccept", this.onAddEngine.bind(this));
   },
 
   async onAddEngine(event) {
@@ -35,7 +35,6 @@ var gAddEngineDialog = {
       url,
       this._alias.value
     );
-    window.close();
   },
 
   async onNameInput() {
@@ -59,8 +58,11 @@ var gAddEngineDialog = {
     this._alias.setCustomValidity(validity);
   },
 
-  async onFormInput(event) {
-    this._addButton.setAttribute("disabled", !this._form.checkValidity());
+  async onFormInput() {
+    this._dialog.setAttribute(
+      "buttondisabledaccept",
+      !this._form.checkValidity()
+    );
   },
 };
 
diff --git a/browser/components/preferences/dialogs/addEngine.xhtml b/browser/components/preferences/dialogs/addEngine.xhtml
index 478b404c4604..242ce08e58bf 100644
--- a/browser/components/preferences/dialogs/addEngine.xhtml
+++ b/browser/components/preferences/dialogs/addEngine.xhtml
@@ -13,6 +13,12 @@
         data-l10n-attrs="title, style"
         persist="screenX screenY width height" screenX="24" screenY="24">
 
+  <dialog
+    buttons="accept,cancel"
+    buttondisabledaccept="true"
+    data-l10n-id="add-engine-dialog"
+    data-l10n-attrs="buttonlabelaccept, buttonaccesskeyaccept">
+
   <linkset>
     <html:link rel="localization" href="browser/preferences/addEngine.ftl"/>
   </linkset>
@@ -41,15 +47,5 @@
       <html:input id="engineAlias" type="text" />
     </hbox>
   </html:form>
-
-  <separator class="thin"/>
-
-  <hbox pack="end">
-    <button oncommand="window.close();"
-            data-l10n-id="add-engine-cancel" />
-    <button id="addButton"
-            disabled="true"
-            data-l10n-id="add-engine-ok" />
-  </hbox>
-
+  </dialog>
 </window>
diff --git a/browser/components/preferences/search.inc.xhtml b/browser/components/preferences/search.inc.xhtml
index cfc73ab6a37b..0f3fe4e03487 100644
--- a/browser/components/preferences/search.inc.xhtml
+++ b/browser/components/preferences/search.inc.xhtml
@@ -115,8 +115,7 @@
                     add-engine-name,
                     add-engine-alias,
                     add-engine-url,
-                    add-engine-cancel.label,
-                    add-engine-ok.label,
+                    add-engine-dialog.buttonlabelaccept,
                   "
                   />
         </hbox>
diff --git a/browser/locales/en-US/browser/preferences/addEngine.ftl b/browser/locales/en-US/browser/preferences/addEngine.ftl
index ed3a46a1150a..c16f7f7db255 100644
--- a/browser/locales/en-US/browser/preferences/addEngine.ftl
+++ b/browser/locales/en-US/browser/preferences/addEngine.ftl
@@ -14,13 +14,9 @@ add-engine-alias = Alias
 
 add-engine-url = Engine URL, use %s in place of the search term
 
-add-engine-cancel =
-    .label = Cancel
-    .accesskey = C
-
-add-engine-ok =
-    .label = Add Engine
-    .accesskey = A
+add-engine-dialog=
+    .buttonlabelaccept = Add Engine
+    .buttonaccesskeyaccept = A
 
 engine-name-exists = An engine with that name already exists
 engine-alias-exists = An engine with that alias already exists
diff --git a/python/l10n/fluent_migrations/bug_1667781_preferences_dialogs.py b/python/l10n/fluent_migrations/bug_1667781_preferences_dialogs.py
new file mode 100644
index 000000000000..8bee14c4d27a
--- /dev/null
+++ b/python/l10n/fluent_migrations/bug_1667781_preferences_dialogs.py
@@ -0,0 +1,20 @@
+# coding=utf8
+
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+from __future__ import absolute_import
+from fluent.migrate.helpers import transforms_from
+
+
+def migrate(ctx):
+    """Bug 1667781 - Refactor preferences dialogs to use dialog element, part {index}."""
+
+    ctx.add_transforms(
+        "browser/browser/preferences/addEngine.ftl",
+        "browser/browser/preferences/addEngine.ftl",
+        transforms_from("""
+add-engine-dialog =
+  .buttonlabelaccept = { COPY_PATTERN(from_path, "add-engine-ok.label") }
+  .buttonaccesskeyaccept = { COPY_PATTERN(from_path, "add-engine-ok.accesskey") }
+""", from_path="browser/browser/preferences/addEngine.ftl"))