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 41093: add 'learn more' beside bridge emoji

browser/components/torpreferences/content/connectionPane.js

@@ -125,6 +125,7 @@ const gConnectionPane = (function() {
       cardTemplate: "#torPreferences-bridgeCard-template",
       card: ".torPreferences-bridgeCard",
       cardId: ".torPreferences-bridgeCard-id",
+      cardHeadingManualLink: ".torPreferences-bridgeCard-manualLink",
       cardHeadingAddr: ".torPreferences-bridgeCard-headingAddr",
       cardConnectedLabel: ".torPreferences-bridgeCard-connectedLabel",
       cardOptions: ".torPreferences-bridgeCard-options",
@@ -458,6 +459,19 @@ const gConnectionPane = (function() {
           learnMore.setAttribute("useoriginprincipal", "true");
         }
       }
+      {
+        const manualLink = bridgeTemplate.querySelector(
+          selectors.bridges.cardHeadingManualLink
+        );
+        manualLink.setAttribute("value", TorStrings.settings.whatAreThese);
+        manualLink.setAttribute(
+          "href",
+          TorStrings.settings.learnMoreBridgesCardURL
+        );
+        if (TorStrings.settings.learnMoreBridgesCardURL.startsWith("about:")) {
+          manualLink.setAttribute("useoriginprincipal", "true");
+        }
+      }
       bridgeTemplate.querySelector(
         selectors.bridges.cardConnectedLabel
       ).textContent = TorStrings.settings.statusTorConnected;

browser/components/torpreferences/content/connectionPane.xhtml

@@ -106,6 +106,7 @@
   <vbox id="torPreferences-bridgeCard-template" class="torPreferences-bridgeCard">
     <hbox class="torPreferences-bridgeCard-heading">
       <html:div class="torPreferences-bridgeCard-id"/>
+      <label class="torPreferences-bridgeCard-manualLink learnMore text-link stop-click" is="text-link"/>
       <html:div class="torPreferences-bridgeCard-headingAddr"/>
       <html:div class="torPreferences-bridgeCard-buttons">
         <html:span class="torPreferences-bridgeCard-connectedBadge">

browser/components/torpreferences/content/torPreferences.css

@@ -260,6 +260,18 @@ html:dir(rtl) input[type="checkbox"].toggle-button::before {
   background: var(--in-content-box-background-odd);
 }
 
+.torPreferences-bridgeCard-manualLink {
+  display: none;
+}
+
+.expanded .torPreferences-bridgeCard-manualLink {
+  display: inline;
+  flex: 1;
+  margin: 0 8px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .torPreferences-bridgeCard-headingAddr {
   /* flex extends the element when needed, but without setting a width (any) the
   overflow + ellipses does not work. */