Bug 1571710 - Adds link to download certificate. r=fluent-reviewers,flod

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

--HG--
extra : moz-landing-system : lando

toolkit/components/certviewer/content/certviewer.ftl

@@ -60,6 +60,14 @@ certificate-viewer-timestamp = Timestamp
 certificate-viewer-value = Value
 certificate-viewer-version = Version
 
+## Variables
+##   $domain (String) - The common name from the certificate being displayed.
+
+certificate-viewer-download-pem = PEM (cert)
+  .download = { $domain }.pem
+certificate-viewer-download-pem-chain = PEM (chain)
+  .download = { $domain }-chain.pem
+
 ## Error codes
 
 certificate-viewer-warning-section-title = Warning

toolkit/components/certviewer/content/components/info-item.css

@@ -49,3 +49,7 @@ label:dir(rtl) {
   border-bottom: 2px solid var(--yellow-50);
   top: -2px;
 }
+
+.download-link-chain {
+  margin: 0 5px;
+}

toolkit/components/certviewer/content/components/info-item.js

@@ -40,6 +40,57 @@ export class InfoItem extends HTMLElement {
     if (this.item.label === "Modulus") {
       info.classList.add("long-hex");
     }
+
+    if (labelText === "download") {
+      this.setDownloadLinkInformation(info);
+    }
+  }
+
+  setDownloadLinkInformation(info) {
+    let link = document.createElement("a");
+    link.setAttribute("href", "data:," + this.item.info);
+    link.classList.add("download-link");
+
+    let url = new URL(document.URL);
+    let certArray = url.searchParams.getAll("cert");
+    let encodedCertArray = [];
+    for (let i = 0; i < certArray.length; i++) {
+      encodedCertArray.push(
+        encodeURI(
+          `-----BEGIN CERTIFICATE-----\r\n${
+            certArray[i]
+          }\r\n-----END CERTIFICATE-----\r\n`
+        )
+      );
+    }
+    encodedCertArray = encodedCertArray.join("");
+
+    let chainLink = document.createElement("a");
+    chainLink.setAttribute("href", "data:," + encodedCertArray);
+    chainLink.classList.add("download-link");
+    chainLink.classList.add("download-link-chain");
+
+    info.textContent = "";
+    info.appendChild(link);
+    info.appendChild(chainLink);
+
+    let commonName = document
+      .querySelector("certificate-section")
+      .shadowRoot.getElementById("subject-name")
+      .shadowRoot.querySelector(".common-name")
+      .shadowRoot.querySelector(".info");
+
+    document.l10n.setAttributes(link, "certificate-viewer-download-pem", {
+      domain: commonName.textContent,
+    });
+
+    document.l10n.setAttributes(
+      chainLink,
+      "certificate-viewer-download-pem-chain",
+      {
+        domain: commonName.textContent,
+      }
+    );
   }
 }