Bug 1573473 - Creates global function to make strings kebab-case. r=johannh

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

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

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

@@ -5,6 +5,7 @@
 import { updateSelectedItem } from "../certviewer.js";
 import { InfoGroup } from "./info-group.js";
 import { ErrorSection } from "./error-section.js";
+import { normalizeToKebabCase } from "../utils.js";
 
 class CertificateSection extends HTMLElement {
   constructor(certs, error) {
@@ -125,7 +126,7 @@ class CertificateSection extends HTMLElement {
   createTabSection(tabName, i, certificateTabs) {
     let tab = document.createElement("button");
     tab.textContent = tabName;
-    tab.setAttribute("id", "tab" + i);
+    tab.setAttribute("id", normalizeToKebabCase(tabName));
     tab.setAttribute("aria-controls", "panel" + i);
     tab.setAttribute("idnumber", i);
     tab.setAttribute("role", "tab");

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

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { InfoItem } from "./info-item.js";
+import { normalizeToKebabCase } from "../utils.js";
 
 export class InfoGroup extends HTMLElement {
   constructor(item) {
@@ -24,9 +25,7 @@ export class InfoGroup extends HTMLElement {
 
     // Adds a class with the section title's name, to make
     // it easier to find when highlighting errors.
-    this.classList.add(
+    this.classList.add(normalizeToKebabCase(this.item.sectionTitle));
-      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.js

@@ -2,6 +2,8 @@
  * 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/. */
 
+import { normalizeToKebabCase } from "../utils.js";
+
 export class InfoItem extends HTMLElement {
   constructor(item) {
     super();
@@ -23,12 +25,7 @@ export class InfoItem extends HTMLElement {
 
   render() {
     let label = this.shadowRoot.querySelector("label");
-    let labelText = this.item.label
+    let labelText = normalizeToKebabCase(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);

toolkit/components/certviewer/content/utils.js

@@ -57,3 +57,14 @@ export const hashify = hash => {
 export const pemToDER = pem => {
   return stringToArrayBuffer(window.atob(pem));
 };
+
+export const normalizeToKebabCase = string => {
+  let kebabString = string
+    .replace(/\s+/g, "-")
+    .replace(/\./g, "")
+    .replace(/\//g, "")
+    .replace(/--/g, "-")
+    .toLowerCase();
+
+  return kebabString;
+};