lighthouse 9.5.0-dev.20220607 → 9.6.2

package/report/renderer/category-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {import('./report-renderer.js').ReportRenderer} ReportRenderer */
@@ -72,9 +73,9 @@ export class CategoryRenderer {
     }
 
     const titleEl = this.dom.find('.lh-audit__title', auditEl);
-    titleEl.append(this.dom.convertMarkdownCodeSnippets(audit.result.title));
+    titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.title));
     const descEl = this.dom.find('.lh-audit__description', auditEl);
-    descEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     for (const relevantMetric of audit.relevantMetrics || []) {
       const adornEl = this.dom.createChildOf(descEl, 'span', 'lh-audit__adorn');
@@ -84,16 +85,19 @@ export class CategoryRenderer {
 
     if (audit.stackPacks) {
       audit.stackPacks.forEach(pack => {
-        const packElmImg = this.dom.createElement('img', 'lh-audit__stackpack__img');
+        const packElm = this.dom.createElement('div');
+        packElm.classList.add('lh-audit__stackpack');
+
+        const packElmImg = this.dom.createElement('img');
+        packElmImg.classList.add('lh-audit__stackpack__img');
         packElmImg.src = pack.iconDataURL;
         packElmImg.alt = pack.title;
+        packElm.appendChild(packElmImg);
 
-        const snippets = this.dom.convertMarkdownLinkSnippets(pack.description);
-        const packElm = this.dom.createElement('div', 'lh-audit__stackpack');
-        packElm.append(packElmImg, snippets);
+        packElm.appendChild(this.dom.convertMarkdownLinkSnippets(pack.description));
 
         this.dom.find('.lh-audit__stackpacks', auditEl)
-          .append(packElm);
+          .appendChild(packElm);
       });
     }
 
@@ -102,12 +106,12 @@ export class CategoryRenderer {
       const elem = this.detailsRenderer.render(audit.result.details);
       if (elem) {
         elem.classList.add('lh-details');
-        header.append(elem);
+        header.appendChild(elem);
       }
     }
 
     // Add chevron SVG to the end of the summary
-    this.dom.find('.lh-chevron-container', auditEl).append(this._createChevron());
+    this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron());
     this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
 
     if (audit.result.scoreDisplayMode === 'error') {
@@ -129,7 +133,7 @@ export class CategoryRenderer {
     const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
     this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
     if (warnings.length === 1) {
-      warningsEl.append(this.dom.createTextNode(warnings.join('')));
+      warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
     } else {
       const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
       for (const warning of warnings) {
@@ -204,11 +208,11 @@ export class CategoryRenderer {
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
     const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
-    gaugeContainerEl.append(gaugeEl);
+    gaugeContainerEl.appendChild(gaugeEl);
 
     if (category.description) {
       const descEl = this.dom.convertMarkdownLinkSnippets(category.description);
-      this.dom.find('.lh-category-header__description', component).append(descEl);
+      this.dom.find('.lh-category-header__description', component).appendChild(descEl);
     }
 
     return component;
@@ -227,13 +231,13 @@ export class CategoryRenderer {
 
     this.dom.createChildOf(auditGroupHeader, 'span', 'lh-audit-group__title')
       .textContent = group.title;
-    groupEl.append(auditGroupHeader);
+    groupEl.appendChild(auditGroupHeader);
 
     let footerEl = null;
     if (group.description) {
       footerEl = this.dom.convertMarkdownLinkSnippets(group.description);
       footerEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
-      groupEl.append(footerEl);
+      groupEl.appendChild(footerEl);
     }
 
     return [groupEl, footerEl];
@@ -297,7 +301,7 @@ export class CategoryRenderer {
   renderUnexpandableClump(auditRefs, groupDefinitions) {
     const clumpElement = this.dom.createElement('div');
     const elements = this._renderGroupedAudits(auditRefs, groupDefinitions);
-    elements.forEach(elem => clumpElement.append(elem));
+    elements.forEach(elem => clumpElement.appendChild(elem));
     return clumpElement;
   }
 
@@ -331,7 +335,7 @@ export class CategoryRenderer {
     if (description) {
       const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
       descriptionEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
-      el.append(descriptionEl);
+      el.appendChild(descriptionEl);
     }
 
     this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
@@ -423,7 +427,7 @@ export class CategoryRenderer {
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
     text.textContent = `${numPassed}/${numPassableAudits}`;
-    content.append(text);
+    content.appendChild(text);
 
     let rating = Util.calculateRating(fraction);
 
@@ -527,7 +531,7 @@ export class CategoryRenderer {
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.append(this.renderCategoryHeader(category, groupDefinitions, options));
+    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
@@ -560,13 +564,13 @@ export class CategoryRenderer {
       if (clumpId === 'failed') {
         const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
         clumpElem.classList.add(`lh-clump--failed`);
-        element.append(clumpElem);
+        element.appendChild(clumpElem);
         continue;
       }
 
       const description = clumpId === 'manual' ? category.manualDescription : undefined;
       const clumpElem = this.renderClump(clumpId, {auditRefs, description});
-      element.append(clumpElem);
+      element.appendChild(clumpElem);
     }
 
     return element;