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 41811: Use tor colors for connect buttons in bridge dialogs.

browser/components/torpreferences/content/builtinBridgeDialog.js

@@ -70,6 +70,13 @@ const gBuiltinBridgeDialog = {
       this._result.accepted = true;
     });
 
+    // Add styling for tor-button to the dialog shadow root.
+    const styleLink = document.createElement("link");
+    styleLink.rel = "stylesheet";
+    styleLink.href =
+      "chrome://browser/content/torpreferences/torPreferences.css";
+    dialog.shadowRoot.append(styleLink);
+
     this._acceptButton = dialog.getButton("accept");
 
     Services.obs.addObserver(this, TorConnectTopics.StateChange);
@@ -95,6 +102,7 @@ const gBuiltinBridgeDialog = {
       "data-l10n-id",
       connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
     );
+    this._acceptButton.classList.toggle("tor-button", connect);
   },
 
   observe(subject, topic) {

browser/components/torpreferences/content/connectionPane.xhtml

@@ -133,7 +133,7 @@
       </menulist>
       <button
         id="torPreferences-bridges-buttonChooseBridgeForMe"
-        class="primary"
+        class="primary tor-button"
       />
     </hbox>
     <html:moz-toggle

browser/components/torpreferences/content/provideBridgeDialog.js

@@ -85,7 +85,7 @@ const gProvideBridgeDialog = {
     this._acceptButton = this._dialog.getButton("accept");
 
     // Inject our stylesheet into the shadow root so that the accept button can
-    // take the spoof-button-disabled styling.
+    // take the spoof-button-disabled styling and tor-button styling.
     const styleLink = document.createElement("link");
     styleLink.rel = "stylesheet";
     styleLink.href =
@@ -183,22 +183,21 @@ const gProvideBridgeDialog = {
    * Callback for whenever the accept button may need to change.
    */
   onAcceptStateChange() {
+    let connect = false;
     if (this._page === "entry") {
-      document.l10n.setAttributes(
-        this._acceptButton,
+      this._acceptButton.setAttribute(
+        "data-l10n-id",
         "user-provide-bridge-dialog-next-button"
       );
-      this._result.connect = false;
     } else {
-      this._acceptButton.removeAttribute("data-l10n-id");
-      const connect = TorConnect.canBeginBootstrap;
-      this._result.connect = connect;
-
+      connect = TorConnect.canBeginBootstrap;
       this._acceptButton.setAttribute(
         "data-l10n-id",
         connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-accept"
       );
     }
+    this._result.connect = connect;
+    this._acceptButton.classList.toggle("tor-button", connect);
   },
 
   /**

browser/components/torpreferences/content/requestBridgeDialog.js

@@ -33,6 +33,13 @@ const gRequestBridgeDialog = {
       "torPreferences-requestBridge-dialog"
     );
 
+    // Add styling for tor-button to the dialog shadow root.
+    const styleLink = document.createElement("link");
+    styleLink.rel = "stylesheet";
+    styleLink.href =
+      "chrome://browser/content/torpreferences/torPreferences.css";
+    this._dialog.shadowRoot.append(styleLink);
+
     // user may have opened a Request Bridge dialog in another tab, so update the
     // CAPTCHA image or close out the dialog if we have a bridge list
     this._dialog.addEventListener("focusin", () => {
@@ -101,6 +108,7 @@ const gRequestBridgeDialog = {
       "data-l10n-id",
       connect ? "bridge-dialog-button-connect" : "bridge-dialog-button-submit"
     );
+    this._submitButton.classList.toggle("tor-button", connect);
   },
 
   observe(subject, topic) {