Bug 1949714 - Add title to add engine from HTML form dialog. r=Standard8,desktop-theme-reviewers,emilio

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

browser/components/search/content/addEngine.css

@@ -24,3 +24,10 @@ hbox {
   direction: ltr;
   text-align: match-parent;
 }
+
+.dialogRow {
+  --grid-padding: 16px;
+  margin-block: 0 var(--grid-padding);
+  display: flex;
+  flex-direction: column;
+}

browser/components/search/content/addEngine.js

@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* globals AdjustableTitle */
+
 let gAddEngineDialog = {
   _form: null,
   _name: null,
@@ -35,10 +37,19 @@ let gAddEngineDialog = {
       this._name.value = uri.host;
       this.onFormInput();
 
-      document.getElementById("engineUrlLabel").remove();
-      document.getElementById("engineUrl").remove();
-      document.getElementById("suggestUrlLabel").remove();
-      document.getElementById("suggestUrl").remove();
+      document.getElementById("engineUrlRow").remove();
+      document.getElementById("suggestUrlRow").remove();
+      let title = { raw: document.title };
+      document.documentElement.setAttribute(
+        "headertitle",
+        JSON.stringify(title)
+      );
+      document.documentElement.style.setProperty(
+        "--icon-url",
+        'url("chrome://browser/skin/preferences/category-search.svg")'
+      );
+    } else {
+      AdjustableTitle.hide();
     }
 
     this._name.addEventListener("input", this.onNameInput.bind(this));

browser/components/search/content/addEngine.xhtml

@@ -10,9 +10,12 @@
   xmlns:html="http://www.w3.org/1999/xhtml"
   data-l10n-id="add-engine-window"
   data-l10n-attrs="title, style"
+  headerparent="add-engine-dialog"
+  neediconheader="true"
   persist="width height"
 >
   <dialog
+    id="add-engine-dialog"
     buttons="accept,cancel"
     buttondisabledaccept="true"
     data-l10n-id="add-engine-dialog"
@@ -30,60 +33,69 @@
     </linkset>
 
     <script src="chrome://browser/content/search/addEngine.js" />
+    <script src="chrome://global/content/adjustableTitle.js" />
 
     <separator class="thin" />
 
     <html:form id="addEngineForm">
-      <html:span
-        id="engineNameExists"
-        hidden="hidden"
-        data-l10n-id="engine-name-exists"
-      />
-      <html:label
-        id="engineNameLabel"
-        for="engineName"
-        data-l10n-id="add-engine-name"
-      />
-      <hbox>
-        <html:input id="engineName" type="text" required="required" />
-      </hbox>
-
-      <html:label
-        id="engineUrlLabel"
-        for="engineUrl"
-        data-l10n-id="add-engine-url"
-      />
-      <hbox>
-        <html:input
-          id="engineUrl"
-          type="url"
-          required="required"
-          pattern="https?:.*%s.*"
+      <html:div class="dialogRow">
+        <html:span
+          id="engineNameExists"
+          hidden="hidden"
+          data-l10n-id="engine-name-exists"
         />
-      </hbox>
+        <html:label
+          id="engineNameLabel"
+          for="engineName"
+          data-l10n-id="add-engine-name"
+        />
+        <hbox>
+          <html:input id="engineName" type="text" required="required" />
+        </hbox>
+      </html:div>
 
-      <html:label
-        id="suggestUrlLabel"
-        for="suggestUrl"
-        data-l10n-id="add-engine-suggest-url"
-      />
-      <hbox>
-        <html:input id="suggestUrl" type="url" pattern="https?:.*%s.*" />
-      </hbox>
+      <html:div class="dialogRow" id="engineUrlRow">
+        <html:label
+          id="engineUrlLabel"
+          for="engineUrl"
+          data-l10n-id="add-engine-url"
+        />
+        <hbox>
+          <html:input
+            id="engineUrl"
+            type="url"
+            required="required"
+            pattern="https?:.*%s.*"
+          />
+        </hbox>
+      </html:div>
 
-      <html:span
-        id="engineAliasExists"
-        hidden="hidden"
-        data-l10n-id="engine-keyword-exists"
-      />
-      <html:label
-        id="engineAliasLabel"
-        for="engineAlias"
-        data-l10n-id="add-engine-keyword"
-      />
-      <hbox>
-        <html:input id="engineAlias" type="text" />
-      </hbox>
+      <html:div class="dialogRow" id="suggestUrlRow">
+        <html:label
+          id="suggestUrlLabel"
+          for="suggestUrl"
+          data-l10n-id="add-engine-suggest-url"
+        />
+        <hbox>
+          <html:input id="suggestUrl" type="url" pattern="https?:.*%s.*" />
+        </hbox>
+      </html:div>
+
+      <html:div class="dialogRow">
+        <html:span
+          id="engineAliasExists"
+          hidden="hidden"
+          data-l10n-id="engine-keyword-exists"
+        />
+        <html:label
+          id="engineAliasLabel"
+          for="engineAlias"
+          data-l10n-id="add-engine-keyword"
+        />
+        <hbox>
+          <html:input id="engineAlias" type="text" />
+        </hbox>
+      </html:div>
     </html:form>
   </dialog>
 </window>

browser/components/search/test/browser/browser_addSearchEngineFromForm.js

@@ -85,6 +85,11 @@ async function addEngine(browser, selector, name, alias) {
   let [dialogWin] = await dialogLoaded;
   await window.gDialogBox.dialog._dialogReady;
   info("Dialog opened.");
+  Assert.equal(
+    dialogWin.document.getElementById("titleContainer").style.display,
+    "",
+    "Adjustable title is displayed."
+  );
 
   fillTextField("engineName", name, dialogWin);
   fillTextField("engineAlias", alias, dialogWin);

toolkit/components/prompts/content/adjustableTitle.js

@@ -182,6 +182,10 @@ const AdjustableTitle = {
       attributeFilter: ["headertitle"],
     });
   },
+
+  hide() {
+    this._containerEl.style.display = "none";
+  },
 };
 
 document.addEventListener(