Bug 1825243 - drop unnecessary translateFragment calls from cert viewer code, r=pbz

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

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

@@ -14,13 +14,15 @@ class CertificateSection extends HTMLElement {
   }
 
   connectedCallback() {
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
+    document.l10n.connectRoot(this.shadowRoot);
+
     let template = document.getElementById("certificate-section-template");
     let templateHtml = template.content.cloneNode(true);
-
-    this.attachShadow({ mode: "open" }).appendChild(templateHtml);
-
-    document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+    this.shadowRoot.appendChild(templateHtml);
 
     this.certificateTabsSection = new CertificateTabsSection();
     this.shadowRoot.appendChild(this.certificateTabsSection.tabsElement);

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

@@ -14,12 +14,14 @@ export class InfoGroup extends HTMLElement {
   }
 
   connectedCallback() {
-    let infoGroupTemplate = document.getElementById("info-group-template");
-    this.attachShadow({ mode: "open" }).appendChild(
-      infoGroupTemplate.content.cloneNode(true)
-    );
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+
+    let infoGroupTemplate = document.getElementById("info-group-template");
+    this.shadowRoot.appendChild(infoGroupTemplate.content.cloneNode(true));
     this.render();
   }
 

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

@@ -11,14 +11,14 @@ export class InfoItem extends HTMLElement {
   }
 
   connectedCallback() {
-    let infoItemTemplate = document.getElementById("info-item-template");
-
-    this.attachShadow({ mode: "open" }).appendChild(
-      infoItemTemplate.content.cloneNode(true)
-    );
-
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
-    document.l10n.translateFragment(this.shadowRoot);
+
+    let infoItemTemplate = document.getElementById("info-item-template");
+    this.shadowRoot.appendChild(infoItemTemplate.content.cloneNode(true));
 
     this.render();
   }

toolkit/components/certviewer/content/components/list-item.mjs

@@ -11,15 +11,15 @@ export class ListItem extends HTMLElement {
   }
 
   connectedCallback() {
-    let ListItemTemplate = document.getElementById("list-item-template");
-
-    this.attachShadow({ mode: "open" }).appendChild(
-      ListItemTemplate.content.cloneNode(true)
-    );
-
-    document.l10n.translateFragment(this.shadowRoot);
+    // Attach and connect before adding the template, or fluent
+    // won't translate the template copy we insert into the
+    // shadowroot.
+    this.attachShadow({ mode: "open" });
     document.l10n.connectRoot(this.shadowRoot);
 
+    let ListItemTemplate = document.getElementById("list-item-template");
+    this.shadowRoot.appendChild(ListItemTemplate.content.cloneNode(true));
+
     this.render();
   }