| author | dleblanccyr <danielleleb12@gmail.com> |
| Fri, 21 Jun 2019 18:11:34 +0000 | |
| changeset 479967 | ec36c52abdd5068d6297d10d40e60e00ef82e7f0 |
| parent 479966 | d049f46f6e92a895be55bbe0139863327d106fcd |
| child 479968 | 77e67d4d9dcf31c9d3c02b1284ebcca4c6e579aa |
| push id | 88396 |
| push user | dluca@mozilla.com |
| push date | Mon, 24 Jun 2019 18:52:37 +0000 |
| treeherder | autoland@ec36c52abdd5 [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | johannh |
| bugs | 1555739 |
| milestone | 69.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
|
--- 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