report: Expand by default passed audit groups containing warnings (#5327

)

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

@@ -22,6 +22,7 @@
 /** @typedef {import('./report-renderer.js')} ReportRenderer */
 /** @typedef {import('./details-renderer.js')} DetailsRenderer */
 /** @typedef {import('./util.js')} Util */
+/** @typedef {{passed: Array<LH.ReportResult.AuditRef>, failed: Array<LH.ReportResult.AuditRef>, notApplicable: Array<LH.ReportResult.AuditRef>}} AuditsByState */
 
 class CategoryRenderer {
   /**
@@ -220,13 +221,15 @@ class CategoryRenderer {
 
   /**
    * @param {Array<Element>} elements
+   * @param {boolean} expandByDefault
    * @return {Element}
    */
-  renderPassedAuditsSection(elements) {
+  renderPassedAuditsSection(elements, expandByDefault) {
     const passedElem = this.renderAuditGroup({
       title: Util.UIStrings.passedAuditsGroupTitle,
     }, {expandable: true, itemCount: this._getTotalAuditsLength(elements)});
     passedElem.classList.add('lh-passed-audits');
+    if (expandByDefault) passedElem.setAttribute('open', '');
     elements.forEach(elem => passedElem.appendChild(elem));
     return passedElem;
   }
@@ -260,6 +263,14 @@ class CategoryRenderer {
     return auditGroupElem;
   }
 
+  /**
+   * @param {Array<LH.ReportResult.AuditRef>} audits
+   * @return {boolean}
+   */
+  _auditsHaveWarnings(audits) {
+    return audits.some(group => Boolean(group.result.warnings && group.result.warnings.length));
+  }
+
   /**
    * @param {ParentNode} context
    */
@@ -316,8 +327,10 @@ class CategoryRenderer {
     const manualAudits = auditRefs.filter(audit => audit.result.scoreDisplayMode === 'manual');
     const nonManualAudits = auditRefs.filter(audit => !manualAudits.includes(audit));
 
-    /** @type {Object<string, {passed: Array<LH.ReportResult.AuditRef>, failed: Array<LH.ReportResult.AuditRef>, notApplicable: Array<LH.ReportResult.AuditRef>}>} */
+    /** @type {Object<string, AuditsByState>} */
     const auditsGroupedByGroup = {};
+
+    /** @type {AuditsByState} */
     const auditsUngrouped = {passed: [], failed: [], notApplicable: []};
 
     nonManualAudits.forEach(auditRef => {
@@ -345,6 +358,8 @@ class CategoryRenderer {
       }
     });
 
+    let expandPassedAudits = this._auditsHaveWarnings(auditsUngrouped.passed);
+
     const failedElements = /** @type {Array<Element>} */ ([]);
     const passedElements = /** @type {Array<Element>} */ ([]);
     const notApplicableElements = /** @type {Array<Element>} */ ([]);
@@ -372,6 +387,7 @@ class CategoryRenderer {
         groups.passed.forEach((item, i) => auditGroupElem.appendChild(this.renderAudit(item, i)));
         auditGroupElem.classList.add('lh-audit-group--unadorned');
         passedElements.push(auditGroupElem);
+        if (!expandPassedAudits) expandPassedAudits = this._auditsHaveWarnings(groups.passed);
       }
 
       if (groups.notApplicable.length) {
@@ -394,7 +410,7 @@ class CategoryRenderer {
     }
 
     if (passedElements.length) {
-      const passedElem = this.renderPassedAuditsSection(passedElements);
+      const passedElem = this.renderPassedAuditsSection(passedElements, expandPassedAudits);
       element.appendChild(passedElem);
     }
 

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

@@ -209,14 +209,15 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     }
 
     // Passed audits
-    const passedElements = category.auditRefs
+    const passedAudits = category.auditRefs
         .filter(audit => (audit.group === 'load-opportunities' || audit.group === 'diagnostics') &&
-            Util.showAsPassed(audit.result))
-        .map((audit, i) => this.renderAudit(audit, i));
+            Util.showAsPassed(audit.result));
+    const passedElements = passedAudits.map((audit, i) => this.renderAudit(audit, i));
 
     if (!passedElements.length) return element;
 
-    const passedElem = this.renderPassedAuditsSection(passedElements);
+    const expandPassedAudits = this._auditsHaveWarnings(passedAudits);
+    const passedElem = this.renderPassedAuditsSection(passedElements, expandPassedAudits);
     element.appendChild(passedElem);
     return element;
   }

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

@@ -112,6 +112,38 @@ describe('CategoryRenderer', () => {
     assert.ok(warningEl.textContent.includes(auditResult.warnings[1]), '2nd warning provided');
   });
 
+  it('expands passed audit group when warnings exist', () => {
+    const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
+    const prevAuditRefs = category.auditRefs;
+    const auditWithWarning = prevAuditRefs[0];
+    auditWithWarning.result = Object.assign({}, category.auditRefs[0].result,
+      {warnings: ['Some warning']});
+    category.auditRefs = [auditWithWarning];
+
+    const auditDOM = renderer.render(category);
+    const passedAuditGroupEl = auditDOM.querySelector('details.lh-passed-audits');
+    const isExpanded = passedAuditGroupEl.hasAttribute('open');
+    assert.ok(isExpanded, 'Passed audit group with warning should be expanded by default');
+
+    category.auditRefs = prevAuditRefs;
+  });
+
+  it('does not expand passed audit group when no warnings exist', () => {
+    const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
+    const prevAuditRefs = category.auditRefs;
+    const auditWithNoWarning = prevAuditRefs[0];
+    auditWithNoWarning.result = Object.assign({}, category.auditRefs[0].result,
+      {warnings: []});
+    category.auditRefs = [auditWithNoWarning];
+
+    const auditDOM = renderer.render(category);
+    const passedAuditGroupEl = auditDOM.querySelector('details.lh-passed-audits');
+    const isExpanded = passedAuditGroupEl.hasAttribute('open');
+    assert.ok(!isExpanded, 'Passed audit group with no warning should not be expanded by default');
+
+    category.auditRefs = prevAuditRefs;
+  });
+
   it('renders a category', () => {
     const category = sampleResults.reportCategories.find(c => c.id === 'pwa');
     const categoryDOM = renderer.render(category, sampleResults.categoryGroups);