lighthouse 9.5.0-dev.20220514 → 9.5.0-dev.20220517

package/dist/report/bundle.esm.js

@@ -1586,7 +1586,7 @@ class DOM {
    */
   createChildOf(parentElem, elementName, className) {
     const element = this.createElement(elementName, className);
-    parentElem.appendChild(element);
+    parentElem.append(element);
     return element;
   }
 
@@ -1624,7 +1624,7 @@ class DOM {
     for (const segment of Util.splitMarkdownLink(text)) {
       if (!segment.isLink) {
         // Plain text segment.
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(this._document.createTextNode(segment.text));
         continue;
       }
 
@@ -1642,7 +1642,7 @@ class DOM {
       a.target = '_blank';
       a.textContent = segment.text;
       this.safelySetHref(a, url.href);
-      element.appendChild(a);
+      element.append(a);
     }
 
     return element;
@@ -1699,9 +1699,9 @@ class DOM {
       if (segment.isCode) {
         const pre = this.createElement('code');
         pre.textContent = segment.text;
-        element.appendChild(pre);
+        element.append(pre);
       } else {
-        element.appendChild(this._document.createTextNode(segment.text));
+        element.append(this._document.createTextNode(segment.text));
       }
     }
 
@@ -1784,7 +1784,7 @@ class DOM {
     const a = this.createElement('a');
     a.download = filename;
     this.safelySetBlobHref(a, blob);
-    this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
+    this._document.body.append(a); // Firefox requires anchor to be in the DOM.
     a.click();
 
     // cleanup.
@@ -1860,9 +1860,9 @@ class CategoryRenderer {
     }
 
     const titleEl = this.dom.find('.lh-audit__title', auditEl);
-    titleEl.appendChild(this.dom.convertMarkdownCodeSnippets(audit.result.title));
+    titleEl.append(this.dom.convertMarkdownCodeSnippets(audit.result.title));
     const descEl = this.dom.find('.lh-audit__description', auditEl);
-    descEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     for (const relevantMetric of audit.relevantMetrics || []) {
       const adornEl = this.dom.createChildOf(descEl, 'span', 'lh-audit__adorn');
@@ -1872,19 +1872,16 @@ class CategoryRenderer {
 
     if (audit.stackPacks) {
       audit.stackPacks.forEach(pack => {
-        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');
+        const packElmImg = this.dom.createElement('img', 'lh-audit__stackpack__img');
         packElmImg.src = pack.iconDataURL;
         packElmImg.alt = pack.title;
-        packElm.appendChild(packElmImg);
 
-        packElm.appendChild(this.dom.convertMarkdownLinkSnippets(pack.description));
+        const snippets = this.dom.convertMarkdownLinkSnippets(pack.description);
+        const packElm = this.dom.createElement('div', 'lh-audit__stackpack');
+        packElm.append(packElmImg, snippets);
 
         this.dom.find('.lh-audit__stackpacks', auditEl)
-          .appendChild(packElm);
+          .append(packElm);
       });
     }
 
@@ -1893,12 +1890,12 @@ class CategoryRenderer {
       const elem = this.detailsRenderer.render(audit.result.details);
       if (elem) {
         elem.classList.add('lh-details');
-        header.appendChild(elem);
+        header.append(elem);
       }
     }
 
     // Add chevron SVG to the end of the summary
-    this.dom.find('.lh-chevron-container', auditEl).appendChild(this._createChevron());
+    this.dom.find('.lh-chevron-container', auditEl).append(this._createChevron());
     this._setRatingClass(auditEl, audit.result.score, scoreDisplayMode);
 
     if (audit.result.scoreDisplayMode === 'error') {
@@ -1920,7 +1917,7 @@ class CategoryRenderer {
     const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
     this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
     if (warnings.length === 1) {
-      warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
+      warningsEl.append(this.dom.createTextNode(warnings.join('')));
     } else {
       const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
       for (const warning of warnings) {
@@ -1995,11 +1992,11 @@ class CategoryRenderer {
 
     const gaugeContainerEl = this.dom.find('.lh-score__gauge', component);
     const gaugeEl = this.renderCategoryScore(category, groupDefinitions, options);
-    gaugeContainerEl.appendChild(gaugeEl);
+    gaugeContainerEl.append(gaugeEl);
 
     if (category.description) {
       const descEl = this.dom.convertMarkdownLinkSnippets(category.description);
-      this.dom.find('.lh-category-header__description', component).appendChild(descEl);
+      this.dom.find('.lh-category-header__description', component).append(descEl);
     }
 
     return component;
@@ -2018,13 +2015,13 @@ class CategoryRenderer {
 
     this.dom.createChildOf(auditGroupHeader, 'span', 'lh-audit-group__title')
       .textContent = group.title;
-    groupEl.appendChild(auditGroupHeader);
+    groupEl.append(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.appendChild(footerEl);
+      groupEl.append(footerEl);
     }
 
     return [groupEl, footerEl];
@@ -2088,7 +2085,7 @@ class CategoryRenderer {
   renderUnexpandableClump(auditRefs, groupDefinitions) {
     const clumpElement = this.dom.createElement('div');
     const elements = this._renderGroupedAudits(auditRefs, groupDefinitions);
-    elements.forEach(elem => clumpElement.appendChild(elem));
+    elements.forEach(elem => clumpElement.append(elem));
     return clumpElement;
   }
 
@@ -2122,7 +2119,7 @@ class CategoryRenderer {
     if (description) {
       const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
       descriptionEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
-      el.appendChild(descriptionEl);
+      el.append(descriptionEl);
     }
 
     this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
@@ -2214,7 +2211,7 @@ class CategoryRenderer {
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
     text.textContent = `${numPassed}/${numPassableAudits}`;
-    content.appendChild(text);
+    content.append(text);
 
     let rating = Util.calculateRating(fraction);
 
@@ -2318,7 +2315,7 @@ class CategoryRenderer {
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
+    element.append(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>>} */
@@ -2351,13 +2348,13 @@ class CategoryRenderer {
       if (clumpId === 'failed') {
         const clumpElem = this.renderUnexpandableClump(auditRefs, groupDefinitions);
         clumpElem.classList.add(`lh-clump--failed`);
-        element.appendChild(clumpElem);
+        element.append(clumpElem);
         continue;
       }
 
       const description = clumpId === 'manual' ? category.manualDescription : undefined;
       const clumpElem = this.renderClump(clumpId, {auditRefs, description});
-      element.appendChild(clumpElem);
+      element.append(clumpElem);
     }
 
     return element;
@@ -2464,34 +2461,33 @@ class CriticalRequestChainRenderer {
 
     // Construct lines and add spacers for sub requests.
     segment.treeMarkers.forEach(separator => {
-      if (separator) {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-      } else {
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
-      }
+      const classSeparator = separator ?
+        'lh-tree-marker lh-vert' :
+        'lh-tree-marker';
+      treeMarkeEl.append(
+        dom.createElement('span', classSeparator),
+        dom.createElement('span', 'lh-tree-marker')
+      );
     });
 
-    if (segment.isLastChild) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-up-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert-right'));
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    }
-
-    if (segment.hasChildren) {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-horiz-down'));
-    } else {
-      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
-    }
+    const classLastChild = segment.isLastChild ?
+      'lh-tree-marker lh-up-right' :
+      'lh-tree-marker lh-vert-right';
+    const classHasChildren = segment.hasChildren ?
+      'lh-tree-marker lh-horiz-down' :
+      'lh-tree-marker lh-right';
+
+    treeMarkeEl.append(
+      dom.createElement('span', classLastChild),
+      dom.createElement('span', 'lh-tree-marker lh-right'),
+      dom.createElement('span', classHasChildren)
+    );
 
     // Fill in url, host, and request size information.
     const url = segment.node.request.url;
     const linkEl = detailsRenderer.renderTextURL(url);
     const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
-    treevalEl.appendChild(linkEl);
+    treevalEl.append(linkEl);
 
     if (!segment.hasChildren) {
       const {startTime, endTime, transferSize} = segment.node.request;
@@ -2500,8 +2496,7 @@ class CriticalRequestChainRenderer {
       const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
       span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
 
-      treevalEl.appendChild(span);
-      treevalEl.appendChild(span2);
+      treevalEl.append(span, span2);
     }
 
     return chainEl;
@@ -2517,7 +2512,7 @@ class CriticalRequestChainRenderer {
    * @param {DetailsRenderer} detailsRenderer
    */
   static buildTree(dom, tmpl, segment, elem, details, detailsRenderer) {
-    elem.appendChild(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
+    elem.append(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
     if (segment.node.children) {
       for (const key of Object.keys(segment.node.children)) {
         const childSegment = CRCRenderer.createSegment(segment.node.children, key,
@@ -2726,7 +2721,7 @@ class ElementScreenshotRenderer {
         overlay.remove();
         return;
       }
-      overlay.appendChild(screenshotElement);
+      overlay.append(screenshotElement);
       overlay.addEventListener('click', () => overlay.remove());
     });
   }
@@ -2931,12 +2926,12 @@ class DetailsRenderer {
     }
 
     const element = this._dom.createElement('div', 'lh-text__url');
-    element.appendChild(this._renderLink({text: displayedPath, url}));
+    element.append(this._renderLink({text: displayedPath, url}));
 
     if (displayedHost) {
       const hostElem = this._renderText(displayedHost);
       hostElem.classList.add('lh-text__url-host');
-      element.appendChild(hostElem);
+      element.append(hostElem);
     }
 
     if (title) {
@@ -3209,7 +3204,7 @@ class DetailsRenderer {
 
       if (valueElement) {
         const classes = `lh-table-column--${heading.valueType}`;
-        this._dom.createChildOf(rowElem, 'td', classes).appendChild(valueElement);
+        this._dom.createChildOf(rowElem, 'td', classes).append(valueElement);
       } else {
         // Empty cell is rendered for a column if:
         // - the pair is null
@@ -3264,7 +3259,7 @@ class DetailsRenderer {
       const classes = `lh-table-column--${valueType}`;
       const labelEl = this._dom.createElement('div', 'lh-text');
       labelEl.textContent = heading.label;
-      this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(labelEl);
+      this._dom.createChildOf(theadTrElem, 'th', classes).append(labelEl);
     }
 
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
@@ -3307,13 +3302,13 @@ class DetailsRenderer {
     if (item.nodeLabel) {
       const nodeLabelEl = this._dom.createElement('div');
       nodeLabelEl.textContent = item.nodeLabel;
-      element.appendChild(nodeLabelEl);
+      element.append(nodeLabelEl);
     }
     if (item.snippet) {
       const snippetEl = this._dom.createElement('div');
       snippetEl.classList.add('lh-node__snippet');
       snippetEl.textContent = item.snippet;
-      element.appendChild(snippetEl);
+      element.append(snippetEl);
     }
     if (item.selector) {
       element.title = item.selector;
@@ -3704,7 +3699,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     valueEl.textContent = audit.result.displayValue || '';
 
     const descriptionEl = this.dom.find('.lh-metric__description', tmpl);
-    descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.description));
+    descriptionEl.append(this.dom.convertMarkdownLinkSnippets(audit.result.description));
 
     if (audit.result.scoreDisplayMode === 'error') {
       descriptionEl.textContent = '';
@@ -3844,7 +3839,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     const strings = Util.i18n.strings;
     const element = this.dom.createElement('div', 'lh-category');
     element.id = category.id;
-    element.appendChild(this.renderCategoryHeader(category, groups, options));
+    element.append(this.renderCategoryHeader(category, groups, options));
 
     // Metrics.
     const metricAudits = category.auditRefs.filter(audit => audit.group === 'metrics');
@@ -3869,7 +3864,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       const metricsBoxesEl = this.dom.createElement('div', 'lh-metrics-container');
       metricsGroupEl.insertBefore(metricsBoxesEl, metricsFooterEl);
       metricAudits.forEach(item => {
-        metricsBoxesEl.appendChild(this._renderMetric(item));
+        metricsBoxesEl.append(this._renderMetric(item));
       });
 
       // Only add the disclaimer with the score calculator link if the category was rendered with a score gauge.
@@ -3877,7 +3872,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
         const descriptionEl = this.dom.find('.lh-category-header__description', element);
         const estValuesEl = this.dom.createChildOf(descriptionEl, 'div', 'lh-metrics__disclaimer');
         const disclaimerEl = this.dom.convertMarkdownLinkSnippets(strings.varianceDisclaimer);
-        estValuesEl.appendChild(disclaimerEl);
+        estValuesEl.append(disclaimerEl);
 
         // Add link to score calculator.
         const calculatorLink = this.dom.createChildOf(estValuesEl, 'a', 'lh-calclink');
@@ -3887,7 +3882,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       }
 
       metricsGroupEl.classList.add('lh-audit-group--metrics');
-      element.appendChild(metricsGroupEl);
+      element.append(metricsGroupEl);
     }
 
     // Filmstrip
@@ -3897,7 +3892,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     if (thumbnailResult?.details) {
       timelineEl.id = thumbnailResult.id;
       const filmstripEl = this.detailsRenderer.render(thumbnailResult.details);
-      filmstripEl && timelineEl.appendChild(filmstripEl);
+      filmstripEl && timelineEl.append(filmstripEl);
     }
 
     // Opportunities
@@ -3931,7 +3926,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       opportunityAudits.forEach(item =>
         groupEl.insertBefore(this._renderOpportunity(item, scale), footerEl));
       groupEl.classList.add('lh-audit-group--load-opportunities');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     // Diagnostics
@@ -3948,7 +3943,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups['diagnostics']);
       diagnosticAudits.forEach(item => groupEl.insertBefore(this.renderAudit(item), footerEl));
       groupEl.classList.add('lh-audit-group--diagnostics');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     // Passed audits
@@ -3962,7 +3957,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       groupDefinitions: groups,
     };
     const passedElem = this.renderClump('passed', clumpOpts);
-    element.appendChild(passedElem);
+    element.append(passedElem);
 
     // Budgets
     /** @type {Array<Element>} */
@@ -3982,7 +3977,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
       const [groupEl, footerEl] = this.renderAuditGroup(groups.budgets);
       budgetTableEls.forEach(table => groupEl.insertBefore(table, footerEl));
       groupEl.classList.add('lh-audit-group--budgets');
-      element.appendChild(groupEl);
+      element.append(groupEl);
     }
 
     return element;
@@ -4082,7 +4077,7 @@ class PwaCategoryRenderer extends CategoryRenderer {
   render(category, groupDefinitions = {}) {
     const categoryElem = this.dom.createElement('div', 'lh-category');
     categoryElem.id = category.id;
-    categoryElem.appendChild(this.renderCategoryHeader(category, groupDefinitions));
+    categoryElem.append(this.renderCategoryHeader(category, groupDefinitions));
 
     const auditRefs = category.auditRefs;
 
@@ -4090,13 +4085,13 @@ class PwaCategoryRenderer extends CategoryRenderer {
     // all put in a top-level clump that isn't expandable/collapsible.
     const regularAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode !== 'manual');
     const auditsElem = this._renderAudits(regularAuditRefs, groupDefinitions);
-    categoryElem.appendChild(auditsElem);
+    categoryElem.append(auditsElem);
 
     // Manual audits are still in a manual clump.
     const manualAuditRefs = auditRefs.filter(ref => ref.result.scoreDisplayMode === 'manual');
     const manualElem = this.renderClump('manual',
       {auditRefs: manualAuditRefs, description: category.manualDescription});
-    categoryElem.appendChild(manualElem);
+    categoryElem.append(manualElem);
 
     return categoryElem;
   }
@@ -4301,7 +4296,7 @@ class ReportRenderer {
     const report = Util.prepareReportResult(lhr);
 
     this._dom.rootEl.textContent = ''; // Remove previous report.
-    this._dom.rootEl.appendChild(this._renderReport(report));
+    this._dom.rootEl.append(this._renderReport(report));
 
     return this._dom.rootEl;
   }
@@ -4409,11 +4404,13 @@ class ReportRenderer {
     const message = this._dom.find('.lh-warnings__msg', container);
     message.textContent = Util.i18n.strings.toplevelWarningsMessage;
 
-    const warnings = this._dom.find('ul', container);
+    const warnings = [];
     for (const warningString of report.runWarnings) {
-      const warning = warnings.appendChild(this._dom.createElement('li'));
-      warning.appendChild(this._dom.convertMarkdownLinkSnippets(warningString));
+      const warning = this._dom.createElement('li');
+      warning.append(this._dom.convertMarkdownLinkSnippets(warningString));
+      warnings.push(warning);
     }
+    this._dom.find('ul', container).append(...warnings);
 
     return container;
   }
@@ -4506,11 +4503,11 @@ class ReportRenderer {
     };
 
     const headerContainer = this._dom.createElement('div');
-    headerContainer.appendChild(this._renderReportHeader());
+    headerContainer.append(this._renderReportHeader());
 
     const reportContainer = this._dom.createElement('div', 'lh-container');
     const reportSection = this._dom.createElement('div', 'lh-report');
-    reportSection.appendChild(this._renderReportWarnings(report));
+    reportSection.append(this._renderReportWarnings(report));
 
     let scoreHeader;
     const isSoloCategory = Object.keys(report.categories).length === 1;
@@ -4527,23 +4524,23 @@ class ReportRenderer {
       const scoresContainer = this._dom.find('.lh-scores-container', headerContainer);
       scoreHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      scoresContainer.appendChild(scoreHeader);
-      scoresContainer.appendChild(scoreScale);
+      scoresContainer.append(scoreHeader, scoreScale);
 
       const stickyHeader = this._dom.createElement('div', 'lh-sticky-header');
       stickyHeader.append(
         ...this._renderScoreGauges(report, categoryRenderer, specificCategoryRenderers));
-      reportContainer.appendChild(stickyHeader);
+      reportContainer.append(stickyHeader);
     }
 
-    const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories'));
+    const categories = this._dom.createElement('div', 'lh-categories');
+    reportSection.append(categories);
     const categoryOptions = {gatherMode: report.gatherMode};
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
       // .lh-category within has the max-width: var(--report-content-max-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
-      wrapper.appendChild(renderer.render(
+      wrapper.append(renderer.render(
         category,
         report.categoryGroups,
         categoryOptions
@@ -4558,13 +4555,12 @@ class ReportRenderer {
     }
 
     if (!this._opts.omitTopbar) {
-      reportFragment.appendChild(this._renderReportTopbar(report));
+      reportFragment.append(this._renderReportTopbar(report));
     }
 
-    reportFragment.appendChild(reportContainer);
-    reportContainer.appendChild(headerContainer);
-    reportContainer.appendChild(reportSection);
-    reportSection.appendChild(this._renderReportFooter(report));
+    reportFragment.append(reportContainer);
+    reportSection.append(this._renderReportFooter(report));
+    reportContainer.append(headerContainer, reportSection);
 
     if (fullPageScreenshot) {
       ElementScreenshotRenderer.installFullPageScreenshot(