Bug 1572189 - Adds padding between sub-sections. r=johannh
authordleblanccyr <danielleleb12@gmail.com>
Tue, 13 Aug 2019 19:33:59 +0000
changeset 488221 abe2c2a4e6f66154d3d5a4ce68cb94cfa1d0f32d
parent 488220 ae02140f6e0583da72e938e9fee243327ea34353
child 488222 225c129a3f3e318b3ae1c550342193407be0376a
push id113904
push userncsoregi@mozilla.com
push dateThu, 15 Aug 2019 19:41:00 +0000
treeherdermozilla-inbound@b283a7ef186c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1572189
milestone70.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 1572189 - Adds padding between sub-sections. r=johannh Differential Revision: https://phabricator.services.mozilla.com/D41095
toolkit/components/certviewer/content/certviewer.css
toolkit/components/certviewer/content/components/certificate-section.js
toolkit/components/certviewer/content/components/info-group.js
toolkit/components/certviewer/content/components/info-item.css
toolkit/components/certviewer/content/components/info-item.js
--- a/toolkit/components/certviewer/content/certviewer.css
+++ b/toolkit/components/certviewer/content/certviewer.css
@@ -1,8 +1,8 @@
 /* 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/. */
  
 body {
   max-width: 1024px;
   margin: 0 auto;
-}
\ No newline at end of file
+}
--- a/toolkit/components/certviewer/content/components/certificate-section.js
+++ b/toolkit/components/certviewer/content/components/certificate-section.js
@@ -42,16 +42,30 @@ class CertificateSection extends HTMLEle
       certificateTabs.appendChild(new ErrorSection());
       return;
     }
     for (let i = 0; i < this.certs.length; i++) {
       this.createInfoGroupsContainers(this.certs[i].certItems, i);
       this.createTabSection(this.certs[i].tabName, i, certificateTabs);
     }
     this.setAccessibilityEventListeners();
+    this.addClassForPadding();
+  }
+
+  // Adds class selector for items that need padding,
+  // as nth-child/parent-based selectors aren't supported
+  // due to the encapsulation of custom-element CSS.
+  addClassForPadding() {
+    let items = this.shadowRoot
+      .querySelector(".embedded-scts")
+      .shadowRoot.querySelectorAll(".version");
+
+    for (let i = 0; i < items.length; i++) {
+      items[i].classList.add("padding");
+    }
   }
 
   /* Information on setAccessibilityEventListeners() can be found
    * at https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role */
   setAccessibilityEventListeners() {
     const tabs = this.shadowRoot.querySelectorAll('[role="tab"]');
     const tabList = this.shadowRoot.querySelector('[role="tablist"]');
 
--- a/toolkit/components/certviewer/content/components/info-group.js
+++ b/toolkit/components/certviewer/content/components/info-group.js
@@ -17,15 +17,21 @@ export class InfoGroup extends HTMLEleme
     );
     this.render();
   }
 
   render() {
     let title = this.shadowRoot.querySelector(".info-group-title");
     title.textContent = this.item.sectionTitle;
 
+    // Adds a class with the section title's name, to make
+    // it easier to find when highlighting errors.
+    this.classList.add(
+      this.item.sectionTitle.replace(/\s+/g, "-").toLowerCase()
+    );
+
     for (let i = 0; i < this.item.sectionItems.length; i++) {
       this.shadowRoot.append(new InfoItem(this.item.sectionItems[i]));
     }
   }
 }
 
 customElements.define("info-group", InfoGroup);
--- a/toolkit/components/certviewer/content/components/info-item.css
+++ b/toolkit/components/certviewer/content/components/info-item.css
@@ -21,8 +21,14 @@ label:dir(rtl) {
 
 .long-hex {
   max-width: 100%;
   overflow: hidden;
   word-break: break-all;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+:host(.value) *,
+:host(.method) *,
+:host(.padding) * {
+  padding-bottom: 10px;
+}
--- a/toolkit/components/certviewer/content/components/info-item.js
+++ b/toolkit/components/certviewer/content/components/info-item.js
@@ -26,16 +26,18 @@ export class InfoItem extends HTMLElemen
     let labelText = this.item.label
       .replace(/\s+/g, "-")
       .replace(/\./g, "")
       .replace(/\//g, "")
       .replace(/--/g, "-")
       .toLowerCase();
     label.setAttribute("data-l10n-id", "certificate-viewer-" + labelText);
 
+    this.classList.add(labelText);
+
     let info = this.shadowRoot.querySelector(".info");
     info.textContent = this.item.info;
 
     // TODO: Use Fluent-friendly condition.
     if (this.item.label === "Modulus") {
       info.classList.add("long-hex");
     }
   }