report: New audit clump for audits with warnings (#5327)

lighthouse-core/lib/i18n/en-US.json

@@ -1079,6 +1079,10 @@
     "message": "Values are estimated and may vary.",
     "description": "Disclaimer shown to users below the metric values (First Contentful Paint, Time to Interactive, etc) to warn them that the numbers they see will likely change slightly the next time they run Lighthouse."
   },
+  "lighthouse-core/report/html/renderer/util.js | warningAuditsGroupTitle": {
+    "message": "Audits with warnings",
+    "description": "Section heading shown above a list of audits that contain warnings."
+  },
   "lighthouse-core/report/html/renderer/util.js | warningHeader": {
     "message": "Warnings: ",
     "description": "This label is shown above a bulleted list of warnings. It is shown directly below an audit that produced warnings. Warnings describe situations the user should be aware of, as Lighthouse was unable to complete all the work required on this audit. For example, The 'Unable to decode image (biglogo.jpg)' warning may show up below an image encoding audit."

lighthouse-core/report/html/renderer/category-renderer.js

@@ -22,7 +22,7 @@
 /** @typedef {import('./report-renderer.js')} ReportRenderer */
 /** @typedef {import('./details-renderer.js')} DetailsRenderer */
 /** @typedef {import('./util.js')} Util */
-/** @typedef {'failed'|'manual'|'passed'|'notApplicable'} TopLevelClumpId */
+/** @typedef {'failed'|'warning'|'manual'|'passed'|'notApplicable'} TopLevelClumpId */
 
 class CategoryRenderer {
   /**
@@ -45,6 +45,7 @@ class CategoryRenderer {
    */
   get _clumpTitles() {
     return {
+      warning: Util.UIStrings.warningAuditsGroupTitle,
       manual: Util.UIStrings.manualAuditsGroupTitle,
       passed: Util.UIStrings.passedAuditsGroupTitle,
       notApplicable: Util.UIStrings.notApplicableAuditsGroupTitle,
@@ -264,6 +265,10 @@ class CategoryRenderer {
     const clumpTmpl = this.dom.cloneTemplate('#tmpl-lh-clump', this.templateContext);
     const clumpElement = this.dom.find('.lh-clump', clumpTmpl);
 
+    if (clumpId === 'warning') {
+      clumpElement.setAttribute('open', '');
+    }
+
     const summaryInnerEl = this.dom.find('.lh-audit-group__summary', clumpElement);
     const chevronEl = summaryInnerEl.appendChild(this._createChevron());
     chevronEl.title = Util.UIStrings.auditGroupExpandTooltip;
@@ -333,6 +338,14 @@ class CategoryRenderer {
     return tmpl;
   }
 
+  /**
+   * @param {LH.ReportResult.AuditRef} audit
+   * @return {boolean}
+   */
+  _auditHasWarning(audit) {
+    return Boolean(audit.result.warnings && audit.result.warnings.length);
+  }
+
   /**
    * Returns the id of the top-level clump to put this audit in.
    * @param {LH.ReportResult.AuditRef} auditRef
@@ -344,7 +357,9 @@ class CategoryRenderer {
       return scoreDisplayMode;
     }
 
-    if (Util.showAsPassed(auditRef.result)) {
+    if (this._auditHasWarning(auditRef)) {
+      return 'warning';
+    } else if (Util.showAsPassed(auditRef.result)) {
       return 'passed';
     } else {
       return 'failed';
@@ -382,6 +397,7 @@ class CategoryRenderer {
     /** @type {Map<TopLevelClumpId, Array<LH.ReportResult.AuditRef>>} */
     const clumps = new Map();
     clumps.set('failed', []);
+    clumps.set('warning', []);
     clumps.set('manual', []);
     clumps.set('passed', []);
     clumps.set('notApplicable', []);

lighthouse-core/report/html/renderer/util.js

@@ -477,6 +477,8 @@ Util.UIStrings = {
   warningHeader: 'Warnings: ',
   /** The tooltip text on an expandable chevron icon. Clicking the icon expands a section to reveal a list of audit results that was hidden by default. */
   auditGroupExpandTooltip: 'Show audits',
+  /** Section heading shown above a list of audits that contain warnings. */
+  warningAuditsGroupTitle: 'Audits with warnings',
   /** Section heading shown above a list of audits that are passing. 'Passed' here refers to a passing grade. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list. */
   passedAuditsGroupTitle: 'Passed audits',
   /** Section heading shown above a list of audits that do not apply to the page. For example, if an audit is 'Are images optimized?', but the page has no images on it, the audit will be marked as not applicable. This is neither passing or failing. This section is collapsed by default, as the user should be focusing on the failed audits instead. Users can click this heading to reveal the list. */

lighthouse-core/report/html/report-styles.css

@@ -596,6 +596,10 @@
   vertical-align: middle;
 }
 
+.lh-clump--warning > summary .lh-audit-group__header::before {
+  content: '';
+  background-image: var(--search-icon-url);
+}
 .lh-clump--manual > summary .lh-audit-group__header::before {
   content: '';
   background-image: var(--search-icon-url);

lighthouse-core/test/report/html/renderer/category-renderer-test.js

@@ -129,6 +129,17 @@ describe('CategoryRenderer', () => {
     assert.ok(warningEl.textContent.includes(auditResult.warnings[1]), '2nd warning provided');
   });
 
+  it('expands warning audit group', () => {
+    const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
+    const categoryClone = JSON.parse(JSON.stringify(category));
+    categoryClone.auditRefs[0].result.warnings = ['Some warning'];
+
+    const auditDOM = renderer.render(categoryClone, sampleResults.categoryGroups);
+    const warningClumpEl = auditDOM.querySelector('.lh-clump--warning');
+    const isExpanded = warningClumpEl.hasAttribute('open');
+    assert.ok(isExpanded, 'Warning audit group should be expanded by default');
+  });
+
   it('renders a category', () => {
     const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);
@@ -314,16 +325,18 @@ describe('CategoryRenderer', () => {
     });
   });
 
-  describe('clumping passed/failed/manual', () => {
+  describe('clumping passed/failed/warning/manual', () => {
     it('separates audits in the DOM', () => {
       const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
       const elem = renderer.render(category, sampleResults.categoryGroups);
       const passedAudits = elem.querySelectorAll('.lh-clump--passed .lh-audit');
       const failedAudits = elem.querySelectorAll('.lh-clump--failed .lh-audit');
+      const warningAudits = elem.querySelectorAll('.lh-clump--warning .lh-audit');
       const manualAudits = elem.querySelectorAll('.lh-clump--manual .lh-audit');
 
       assert.equal(passedAudits.length, 4);
       assert.equal(failedAudits.length, 8);
+      assert.equal(warningAudits.length, 0);
       assert.equal(manualAudits.length, 3);
     });
 

lighthouse-core/test/results/sample_v2.json

@@ -4343,6 +4343,7 @@
       "scorescaleLabel": "Score scale:",
       "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:",
       "varianceDisclaimer": "Values are estimated and may vary.",
+      "warningAuditsGroupTitle": "Audits with warnings",
       "warningHeader": "Warnings: "
     },
     "icuMessagePaths": {

proto/lighthouse-result.proto

@@ -331,6 +331,9 @@ message I18n {
 
     // The title of the lab data performance category
     string lab_data_title = 16;
+
+    // The heading that is shown above a list of audits that have warnings
+    string warning_audits_group_title = 17;
   }
 
   // The message holding all formatted strings

proto/sample_v2_round_trip.json

@@ -3286,6 +3286,7 @@
             "scorescaleLabel": "Score scale:", 
             "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:", 
             "varianceDisclaimer": "Values are estimated and may vary.", 
+            "warningAuditsGroupTitle": "Audits with warnings", 
             "warningHeader": "Warnings: "
         }
     },