Bug 1572189 - Adds padding between sub-sections. r=johannh

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

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

toolkit/components/certviewer/content/certviewer.css

@@ -5,4 +5,4 @@
 body {
   max-width: 1024px;
   margin: 0 auto;
-}
+}

toolkit/components/certviewer/content/components/certificate-section.js

@@ -53,6 +53,20 @@ class CertificateSection extends HTMLElement {
       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

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

@@ -29,6 +29,12 @@ export class InfoGroup extends HTMLElement {
       this.item.sectionTitle.replace(/\s+/g, "-").toLowerCase()
     );
 
+    // 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]));
     }

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

@@ -28,6 +28,12 @@ label:dir(rtl) {
   white-space: nowrap;
 }
 
+:host(.value) *,
+:host(.method) *,
+:host(.padding) * {
+  padding-bottom: 10px;
+}
+
 :host(.warning) * {
   border: 2px solid var(--yellow-50);
 }

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

@@ -33,6 +33,8 @@ export class InfoItem extends HTMLElement {
 
     this.classList.add(labelText);
 
+    this.classList.add(labelText);
+
     let info = this.shadowRoot.querySelector(".info");
     info.textContent = this.item.info;