Bug 1555739 - Adds certificate-section component. r=johannh
authordleblanccyr <danielleleb12@gmail.com>
Fri, 21 Jun 2019 18:11:34 +0000
changeset 542793 ec36c52abdd5068d6297d10d40e60e00ef82e7f0
parent 542792 d049f46f6e92a895be55bbe0139863327d106fcd
child 542794 77e67d4d9dcf31c9d3c02b1284ebcca4c6e579aa
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1555739
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1555739 - Adds certificate-section component. r=johannh Differential Revision: https://phabricator.services.mozilla.com/D33176
toolkit/components/certviewer/content/certviewer.html
toolkit/components/certviewer/content/certviewer.js
toolkit/components/certviewer/content/components/certificate-section.css
toolkit/components/certviewer/content/components/certificate-section.js
toolkit/components/certviewer/content/components/dummy-info.js
toolkit/components/certviewer/jar.mn
--- a/toolkit/components/certviewer/content/certviewer.html
+++ b/toolkit/components/certviewer/content/certviewer.html
@@ -3,45 +3,57 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!DOCTYPE html>
 
 <html>
   <head>
     <meta name="viewport" content="width=device-width" />
     <meta http-equiv="Content-Security-Policy" content="default-src chrome:" />
+    <script defer="defer" src="chrome://global/content/certviewer/certviewer.js"></script>
     <script defer="defer" src="chrome://global/content/certviewer/components/info-item.js"></script>
     <script defer="defer" src="chrome://global/content/certviewer/components/info-group.js"></script>
     <script defer="defer" src="chrome://global/content/certviewer/components/dummy-info.js"></script>
     <script defer="defer" src="chrome://global/content/certviewer/components/handshake-section.js"></script>
     <script defer="defer" src="chrome://global/content/certviewer/components/certificate-tab.js"></script>
+    <script defer="defer" src="chrome://global/content/certviewer/components/certificate-section.js"></script>
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     <link rel="stylesheet" href="chrome://global/content/certviewer/certviewer.css">
     <title>about:certificate</title>
   </head>
   <body>
     <h1>Certificate Viewer</h1>
 
     <handshake-section></handshake-section> 
+
+    <certificate-section></certificate-section> 
     
     <template id="handshake-section-template" class="section">
       <link rel="stylesheet" href="chrome://global/content/certviewer/components/handshake-section.css">
       <h1 class="title"></h1>
     </template>
 
+    <template id="certificate-section-template" class="section">
+      <link rel="stylesheet" href="chrome://global/content/certviewer/components/certificate-section.css">
+      <h1 class="title"></h1>
+      <div class="certificate-tabs"></div>
+      <div class="info-groups"></div>
+    </template>
+
+
     <template id="info-item-template">
       <link rel="stylesheet" href="chrome://global/content/certviewer/components/info-item.css">
       <label></label>
       <span class="info"></span>
     </template>
 
     <template id="info-group-template">
       <link rel="stylesheet" href="chrome://global/content/certviewer/components/info-group.css">
       <span class="info-group-title"></span>
       <span class="info-group-title-hr"></span>
     </template>
-    
+
     <template id="certificate-tab-template">
       <link rel="stylesheet" href="chrome://global/content/certviewer/components/certificate-tab.css">
       <span class="tab"></span>
     </template>
   </body>
 </html>
--- a/toolkit/components/certviewer/content/certviewer.js
+++ b/toolkit/components/certviewer/content/certviewer.js
@@ -1,11 +1,28 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 /* eslint-env mozilla/frame-script */
 
 "use strict";
 
+let gElements = {};
+
 document.addEventListener("DOMContentLoaded", (e) => {
   RPMSendAsyncMessage("getCertificate");
+  gElements.certificateSection = document.querySelector("certificate-section");
 });
+
+const updateSelectedItem = (() => {
+  let state;
+  return selectedItem => {
+    if (selectedItem) {
+      if (state !== selectedItem) {
+        state = selectedItem;
+        gElements.certificateSection.updateCertificateSource(selectedItem);
+        gElements.certificateSection.updateSelectedTab(selectedItem);
+      }
+    }
+    return state;
+  };
+})();
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/certificate-section.css
@@ -0,0 +1,20 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+h1 {
+  text-align: center;
+}
+
+.certificate-tabs {
+  display: flex;
+  text-align: center;
+}
+
+.info-groups {
+  display: none;
+}
+
+.info-groups.selected {
+  display: contents;
+}
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/certificate-section.js
@@ -0,0 +1,67 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 certArray, CertificateTab, InfoGroup */
+
+class CertificateSection extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    let template = document.getElementById("certificate-section-template");
+    let templateHtml = template.content.cloneNode(true);
+
+    this.attachShadow({mode: "open"})
+        .appendChild(templateHtml);
+
+    this.infoGroupsContainers = [];
+    this.createInfoGroupsContainers();
+    this.render();
+  }
+
+  render() {
+    let certificateTabs = this.shadowRoot.querySelector(".certificate-tabs");
+    let title = this.shadowRoot.querySelector(".title");
+    title.textContent = "Certificate";
+    this.infoGroupContainer = this.shadowRoot.querySelector(".info-groups");
+    for (let i = 0; i < certArray.length; i++) {
+      let tab = certificateTabs.appendChild(new CertificateTab(i));
+      if (i === 0) {
+        tab.classList.add("selected");
+      }
+    }
+
+    this.infoGroupsContainers[0].classList.add("selected");
+  }
+
+  createInfoGroupsContainers() {
+    for (let i = 0; i < certArray.length; i++) {
+      this.infoGroupsContainers[i] = document.createElement("div");
+      this.infoGroupsContainers[i].classList.add("info-groups");
+      this.shadowRoot.appendChild(this.infoGroupsContainers[i]);
+      let arrayItem = certArray[i];
+      for (let j = 0; j < arrayItem.length; j++) {
+        this.infoGroupsContainers[i].appendChild(new InfoGroup(arrayItem[j]));
+      }
+    }
+  }
+
+  updateSelectedTab(index) {
+    let tabs = this.shadowRoot.querySelectorAll("certificate-tab");
+
+    for (let i = 0; i < tabs.length; i++) {
+      tabs[i].classList.remove("selected");
+    }
+    tabs[index].classList.add("selected");
+  }
+
+  updateCertificateSource(index) {
+    for (let i = 0; i < this.infoGroupsContainers.length; i++) {
+      this.infoGroupsContainers[i].classList.remove("selected");
+    }
+    this.infoGroupsContainers[index].classList.add("selected");
+  }
+}
+customElements.define("certificate-section", CertificateSection);
--- a/toolkit/components/certviewer/content/components/dummy-info.js
+++ b/toolkit/components/certviewer/content/components/dummy-info.js
@@ -17,94 +17,183 @@ const handshakeArray = [
   },
   {
     label: "Signature Scheme",
     info: "RSA-PKCS1-SHA512",
   },
 ];
 
 const certArray = [
-  {
-    sectionTitle: "Subject Name",
-    sectionItems: [
-      {
-        label: "Common Name",
-        info: "developer.mozilla.org",
-      },
-    ],
-  },
-  {
-    sectionTitle: "Issuer Name",
-    sectionItems: [
-      {
-        label: "Country",
-        info: "US",
-      },
-      {
-        label: "Organization",
-        info: "Amazon",
-      },
-      {
-        label: "Organizational Unit",
-        info: "Server CA 1B",
-      },
-      {
-        label: "Common Name",
-        info: "Amazon",
-      },
-    ],
-  },
-  {
-    sectionTitle: "Validity",
-    sectionItems: [
+  [
+    {
+      sectionTitle: "Subject Name",
+      sectionItems: [
+        {
+          label: "Common Name",
+          info: "developer.mozilla.org",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Issuer Name",
+      sectionItems: [
+        {
+          label: "Country",
+          info: "US",
+        },
+        {
+          label: "Organization",
+          info: "Amazon",
+        },
+        {
+          label: "Organizational Unit",
+          info: "Server CA 1B",
+        },
+        {
+          label: "Common Name",
+          info: "Amazon",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Validity",
+      sectionItems: [
         {
           label: "Not Before",
           info: "5/14/2019, 9:00:00 PM (Atlantic Daylight Time)",
         },
         {
           label: "Not After",
           info: "6/15/2020, 9:00:00 AM (Atlantic Daylight Time)",
         },
       ],
-  },
-  {
-    sectionTitle: "Subject Alt Names",
-    sectionItems: [
-      {
-        label: "DNS Name",
-        info: "developer.mozilla.org",
-      },
-      {
-        label: "DNS Name",
-        info: "beta.developer.mozilla.org",
-      },
-      {
-        label: "DNS Name",
-        info: "developer-prod.mdn.mozit.cloud",
-      },
-      {
-        label: "DNS Name",
-        info: "wiki.developer.mozilla.org",
-      },
-    ],
-  },
-  {
-    sectionTitle: "Public Key Info",
-    sectionItems: [
-      {
-        label: "Algorithm",
-        info: "RSA",
-      },
-      {
-        label: "Key Size",
-        info: "2048 bits",
-      },
-      {
-        label: "Exponent",
-        info: "65537",
-      },
-      {
-        label: "Modulus",
-        info: "8B:FF:8A:9E:9E:2B:11:68:78:02:95:57:B6:84:F7:F3:32:46:BE:06:41:29:5B:AF:13:D7:93:28:4A:FC:8D:33:C9:07:BC:C5:CE:45:F5:60:42:A3:65:07:19:69:B8:67:97:9C:DB:B3:A7:67:D6:7A:57:BA:82:4E:63:83:33:B9:64:A1:56:1C:8A:EF:9F:7B:74:08:3F:D0:9B:E5:39:80:1C:C3:5D:4D:1B:4F:4A:23:BE:B5:BC:DD:18:5E:1D:CE:27:C8:7B:F7:5E:E6:9C:C3:E7:69:50:45:D1:BE:01:71:A3:61:19:6D:7F:B6:6E:4B:C0:E5:11:B0:0D:01:D3:5C:66:B1:1D:61:7D:BB:43:E4:40:63:D8:C5:82:18:6B:28:24:15:39:6A:82:4F:60:3F:66:6E:23:86:2A:84:E1:34:70:AE:06:2D:92:A7:84:80:AD:6F:6F:24:52:FA:7B:E8:C2:CD:E2:55:2E:AE:27:07:04:D4:B6:F1:EC:80:2D:D1:B2:E1:74:BE:ED:D4:04:8C:D8:06:44:CC:F9:6C:4E:64:68:35:38:48:59:F7:45:49:BF:34:EE:DD:55:C6:1A:EB:61:1F:4A:FA:30:3F:73:8B:36:A8:90:6E:CB:2E:58:8F:9C:78:0A:AE:4E:45:A0:30:61:5A:6A:F8:A3:32:92:E3",
-      },
-    ],
-  },
+    },
+    {
+      sectionTitle: "Subject Alt Names",
+      sectionItems: [
+        {
+          label: "DNS Name",
+          info: "developer.mozilla.org",
+        },
+        {
+          label: "DNS Name",
+          info: "beta.developer.mozilla.org",
+        },
+        {
+          label: "DNS Name",
+          info: "developer-prod.mdn.mozit.cloud",
+        },
+        {
+          label: "DNS Name",
+          info: "wiki.developer.mozilla.org",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Public Key Info",
+      sectionItems: [
+        {
+          label: "Algorithm",
+          info: "RSA",
+        },
+        {
+          label: "Key Size",
+          info: "2048 bits",
+        },
+        {
+          label: "Exponent",
+          info: "65537",
+        },
+        {
+          label: "Modulus",
+          info: "8B:FF:8A:9E:9E:2B:11:68:78:02:95:57:B6:84:F7:F3:32:46:BE:06:41:29:5B:AF:13:D7:93:28:4A:FC:8D:33:C9:07:BC:C5:CE:45:F5:60:42:A3:65:07:19:69:B8:67:97:9C:DB:B3:A7:67:D6:7A:57:BA:82:4E:63:83:33:B9:64:A1:56:1C:8A:EF:9F:7B:74:08:3F:D0:9B:E5:39:80:1C:C3:5D:4D:1B:4F:4A:23:BE:B5:BC:DD:18:5E:1D:CE:27:C8:7B:F7:5E:E6:9C:C3:E7:69:50:45:D1:BE:01:71:A3:61:19:6D:7F:B6:6E:4B:C0:E5:11:B0:0D:01:D3:5C:66:B1:1D:61:7D:BB:43:E4:40:63:D8:C5:82:18:6B:28:24:15:39:6A:82:4F:60:3F:66:6E:23:86:2A:84:E1:34:70:AE:06:2D:92:A7:84:80:AD:6F:6F:24:52:FA:7B:E8:C2:CD:E2:55:2E:AE:27:07:04:D4:B6:F1:EC:80:2D:D1:B2:E1:74:BE:ED:D4:04:8C:D8:06:44:CC:F9:6C:4E:64:68:35:38:48:59:F7:45:49:BF:34:EE:DD:55:C6:1A:EB:61:1F:4A:FA:30:3F:73:8B:36:A8:90:6E:CB:2E:58:8F:9C:78:0A:AE:4E:45:A0:30:61:5A:6A:F8:A3:32:92:E3",
+        },
+      ],
+    },
+  ],
+  [
+    {
+      sectionTitle: "Subject Name",
+      sectionItems: [
+        {
+          label: "Common Name",
+          info: "developer.mozilla.org 2",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Issuer Name",
+      sectionItems: [
+        {
+          label: "Country",
+          info: "US 2",
+        },
+        {
+          label: "Organization",
+          info: "Amazon",
+        },
+        {
+          label: "Organizational Unit",
+          info: "Server CA 1B",
+        },
+        {
+          label: "Common Name",
+          info: "Amazon",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Validity",
+      sectionItems: [
+        {
+          label: "Not Before",
+          info: "5/14/2019, 9:00:00 PM (Atlantic Daylight Time) 2",
+        },
+        {
+          label: "Not After",
+          info: "6/15/2020, 9:00:00 AM (Atlantic Daylight Time)",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Subject Alt Names",
+      sectionItems: [
+        {
+          label: "DNS Name",
+          info: "developer.mozilla.org 2",
+        },
+        {
+          label: "DNS Name",
+          info: "beta.developer.mozilla.org",
+        },
+        {
+          label: "DNS Name",
+          info: "developer-prod.mdn.mozit.cloud",
+        },
+        {
+          label: "DNS Name",
+          info: "wiki.developer.mozilla.org",
+        },
+      ],
+    },
+    {
+      sectionTitle: "Public Key Info",
+      sectionItems: [
+        {
+          label: "Algorithm",
+          info: "RSA 2",
+        },
+        {
+          label: "Key Size",
+          info: "2048 bits",
+        },
+        {
+          label: "Exponent",
+          info: "65537",
+        },
+        {
+          label: "Modulus",
+          info: "8B:FF:8A:9E:9E:2B:11:68:78:02:95:57:B6:84:F7:F3:32:46:BE:06:41:29:5B:AF:13:D7:93:28:4A:FC:8D:33:C9:07:BC:C5:CE:45:F5:60:42:A3:65:07:19:69:B8:67:97:9C:DB:B3:A7:67:D6:7A:57:BA:82:4E:63:83:33:B9:64:A1:56:1C:8A:EF:9F:7B:74:08:3F:D0:9B:E5:39:80:1C:C3:5D:4D:1B:4F:4A:23:BE:B5:BC:DD:18:5E:1D:CE:27:C8:7B:F7:5E:E6:9C:C3:E7:69:50:45:D1:BE:01:71:A3:61:19:6D:7F:B6:6E:4B:C0:E5:11:B0:0D:01:D3:5C:66:B1:1D:61:7D:BB:43:E4:40:63:D8:C5:82:18:6B:28:24:15:39:6A:82:4F:60:3F:66:6E:23:86:2A:84:E1:34:70:AE:06:2D:92:A7:84:80:AD:6F:6F:24:52:FA:7B:E8:C2:CD:E2:55:2E:AE:27:07:04:D4:B6:F1:EC:80:2D:D1:B2:E1:74:BE:ED:D4:04:8C:D8:06:44:CC:F9:6C:4E:64:68:35:38:48:59:F7:45:49:BF:34:EE:DD:55:C6:1A:EB:61:1F:4A:FA:30:3F:73:8B:36:A8:90:6E:CB:2E:58:8F:9C:78:0A:AE:4E:45:A0:30:61:5A:6A:F8:A3:32:92:E3",
+        },
+      ],
+    },
+  ],
 ];
--- a/toolkit/components/certviewer/jar.mn
+++ b/toolkit/components/certviewer/jar.mn
@@ -1,16 +1,19 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # 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/.
 
 toolkit.jar:
   content/global/certviewer/certviewer.html                         (content/certviewer.html)
   content/global/certviewer/certviewer.css                          (content/certviewer.css)
   content/global/certviewer/certviewer.js                           (content/certviewer.js)
+  content/global/certviewer/components/certificate-section.js       (content/components/certificate-section.js)
+  content/global/certviewer/components/certificate-section.css      (content/components/certificate-section.css)
   content/global/certviewer/components/certificate-tab.js           (content/components/certificate-tab.js)
   content/global/certviewer/components/certificate-tab.css          (content/components/certificate-tab.css)
+  content/global/certviewer/components/dummy-info.js                (content/components/dummy-info.js)
   content/global/certviewer/components/info-group.js                (content/components/info-group.js)
   content/global/certviewer/components/info-group.css               (content/components/info-group.css)
   content/global/certviewer/components/info-item.js                 (content/components/info-item.js)
   content/global/certviewer/components/info-item.css                (content/components/info-item.css)
   content/global/certviewer/components/handshake-section.js         (content/components/handshake-section.js)
   content/global/certviewer/components/handshake-section.css        (content/components/handshake-section.css)
\ No newline at end of file