Bug 1555737 - Adds certificate-tab component. r=johannh
authordleblanccyr <danielleleb12@gmail.com>
Fri, 21 Jun 2019 18:09:13 +0000
changeset 542792 d049f46f6e92a895be55bbe0139863327d106fcd
parent 542791 599dd1e23fc53c2e8303d847f011d764c3ae2a4f
child 542793 ec36c52abdd5068d6297d10d40e60e00ef82e7f0
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
bugs1555737
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 1555737 - Adds certificate-tab component. r=johannh Differential Revision: https://phabricator.services.mozilla.com/D33174
toolkit/components/certviewer/content/certviewer.html
toolkit/components/certviewer/content/components/certificate-tab.css
toolkit/components/certviewer/content/components/certificate-tab.js
toolkit/components/certviewer/jar.mn
--- a/toolkit/components/certviewer/content/certviewer.html
+++ b/toolkit/components/certviewer/content/certviewer.html
@@ -7,16 +7,17 @@
 <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/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>
     <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> 
@@ -32,11 +33,15 @@
       <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>
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/certificate-tab.css
@@ -0,0 +1,22 @@
+/* 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/. */
+ 
+:host {
+  padding: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  flex: 1 1 auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+:host(.selected) {
+  color: #0996f8;
+  border-bottom: 2px solid #0996f8;
+  text-overflow: unset;
+  overflow: visible;
+}
+
+:host(:hover) {
+  background-color: rgba(0, 0, 0, 0.06);
+}
new file mode 100644
--- /dev/null
+++ b/toolkit/components/certviewer/content/components/certificate-tab.js
@@ -0,0 +1,33 @@
+/* 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 updateSelectedItem */
+
+class CertificateTab extends HTMLElement {
+  constructor(id) {
+    super();
+    this.id = id;
+  }
+
+  connectedCallback() {
+    let template = document.getElementById("certificate-tab-template");
+
+    this.attachShadow({mode: "open"})
+        .appendChild(template.content.cloneNode(true));
+
+    this.render();
+    this.addEventListener("click", (e) => this.setSelectedTab(e));
+  }
+
+  render() {
+    let tab = this.shadowRoot.querySelector(".tab");
+    tab.textContent = "tab" + this.id;
+  }
+
+  setSelectedTab(e) {
+    updateSelectedItem(this.id);
+  }
+}
+
+customElements.define("certificate-tab", CertificateTab);
--- a/toolkit/components/certviewer/jar.mn
+++ b/toolkit/components/certviewer/jar.mn
@@ -1,14 +1,16 @@
 # 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/components/dummy-info.js                (content/components/dummy-info.js)
+  content/global/certviewer/certviewer.js                           (content/certviewer.js)
+  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/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