fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in...

fixup! Bug 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection

Bug 40552: Improve the description of the modal to provide a bridge
manually.

browser/components/torpreferences/content/provideBridgeDialog.jsm

@@ -17,7 +17,7 @@ class ProvideBridgeDialog {
 
   static get selectors() {
     return {
-      header: "#torPreferences-provideBridge-header",
+      description: "#torPreferences-provideBridge-description",
       textarea: "#torPreferences-provideBridge-textarea",
     };
   }
@@ -25,11 +25,25 @@ class ProvideBridgeDialog {
   _populateXUL(window, aDialog) {
     const selectors = ProvideBridgeDialog.selectors;
 
+    const openHelp = () => {
+      window.top.openTrustedLinkIn(
+        TorStrings.settings.learnMoreBridgesURL,
+        "tab"
+      );
+    };
+
     this._dialog = aDialog;
     const dialogWin = this._dialog.parentElement;
-    dialogWin.setAttribute("title", TorStrings.settings.provideBridgeTitle);
-    this._dialog.querySelector(selectors.header).textContent =
-      TorStrings.settings.provideBridgeHeader;
+    dialogWin.setAttribute("title", TorStrings.settings.provideBridgeTitleAdd);
+    const learnMore = window.document.createXULElement("label");
+    learnMore.className = "learnMore text-link";
+    learnMore.setAttribute("is", "text-link");
+    learnMore.setAttribute("value", TorStrings.settings.learnMore);
+    learnMore.addEventListener("click", openHelp);
+    const descr = this._dialog.querySelector(selectors.description);
+    descr.textContent = "";
+    const pieces = TorStrings.settings.provideBridgeDescription.split("%S");
+    descr.append(pieces[0], learnMore, pieces[1] || "");
     this._textarea = this._dialog.querySelector(selectors.textarea);
     this._textarea.setAttribute(
       "placeholder",
@@ -42,12 +56,7 @@ class ProvideBridgeDialog {
     this._dialog.addEventListener("dialogaccept", e => {
       this.onSubmit(this._textarea.value);
     });
-    this._dialog.addEventListener("dialoghelp", e => {
-      window.top.openTrustedLinkIn(
-        TorStrings.settings.learnMoreBridgesURL,
-        "tab"
-      );
-    });
+    this._dialog.addEventListener("dialoghelp", openHelp);
   }
 
   init(window, aDialog) {

browser/components/torpreferences/content/provideBridgeDialog.xhtml

@@ -8,7 +8,9 @@
         xmlns:html="http://www.w3.org/1999/xhtml">
 <dialog id="torPreferences-provideBridge-dialog"
         buttons="help,accept,cancel">
-  <html:h3 id="torPreferences-provideBridge-header">&#8203;</html:h3>
+  <description>
+    <html:div id="torPreferences-provideBridge-description">&#8203;<br/>&#8203;</html:div>
+  </description>
   <html:textarea id="torPreferences-provideBridge-textarea" multiline="true" rows="3"/>
   <script type="application/javascript"><![CDATA[
     "use strict";

browser/components/torpreferences/content/torPreferences.css

@@ -586,8 +586,8 @@ groupbox#torPreferences-bridges-group textarea {
 }
 
 /* Provide bridge dialog */
-#torPreferences-provideBridge-header {
-  margin-top: 8px;
+#torPreferences-provideBridge-textarea {
+  margin-top: 16px;
 }
 
 /* Connection settings dialog */