From d024456be24b8692497a5f5c80902f2af4df0069 Mon Sep 17 00:00:00 2001
From: dleblanccyr <danielleleb12@gmail.com>
Date: Mon, 19 Aug 2019 19:44:34 +0000
Subject: [PATCH] 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
---
 .../content/components/certificate-section.js         |  3 ++-
 .../certviewer/content/components/info-group.js       |  5 ++---
 .../certviewer/content/components/info-item.js        |  9 +++------
 toolkit/components/certviewer/content/utils.js        | 11 +++++++++++
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/toolkit/components/certviewer/content/components/certificate-section.js b/toolkit/components/certviewer/content/components/certificate-section.js
index 7601ddd3cc8f..34a0d44dd0a2 100644
--- a/toolkit/components/certviewer/content/components/certificate-section.js
+++ b/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");
diff --git a/toolkit/components/certviewer/content/components/info-group.js b/toolkit/components/certviewer/content/components/info-group.js
index 6cdf528ee359..b5e99418d3fd 100644
--- a/toolkit/components/certviewer/content/components/info-group.js
+++ b/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.item.sectionTitle.replace(/\s+/g, "-").toLowerCase()
-    );
+    this.classList.add(normalizeToKebabCase(this.item.sectionTitle));
 
     for (let i = 0; i < this.item.sectionItems.length; i++) {
       this.shadowRoot.append(new InfoItem(this.item.sectionItems[i]));
diff --git a/toolkit/components/certviewer/content/components/info-item.js b/toolkit/components/certviewer/content/components/info-item.js
index 3f5e26bd0a18..356ad62f5b24 100644
--- a/toolkit/components/certviewer/content/components/info-item.js
+++ b/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
-      .replace(/\s+/g, "-")
-      .replace(/\./g, "")
-      .replace(/\//g, "")
-      .replace(/--/g, "-")
-      .toLowerCase();
+    let labelText = normalizeToKebabCase(this.item.label);
     label.setAttribute("data-l10n-id", "certificate-viewer-" + labelText);
 
     this.classList.add(labelText);
diff --git a/toolkit/components/certviewer/content/utils.js b/toolkit/components/certviewer/content/utils.js
index abb1e4283341..1e946c9d4751 100644
--- a/toolkit/components/certviewer/content/utils.js
+++ b/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;
+};