diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js
index 5e8e2210ebff..c176006ec2b1 100644
--- a/lighthouse-core/report/html/renderer/category-renderer.js
+++ b/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, failed: Array, notApplicable: Array}} AuditsByState */
class CategoryRenderer {
/**
@@ -220,13 +221,15 @@ class CategoryRenderer {
/**
* @param {Array} 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} 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, failed: Array, notApplicable: Array}>} */
+ /** @type {Object} */
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} */ ([]);
const passedElements = /** @type {Array} */ ([]);
const notApplicableElements = /** @type {Array} */ ([]);
@@ -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);
}
diff --git a/lighthouse-core/report/html/renderer/performance-category-renderer.js b/lighthouse-core/report/html/renderer/performance-category-renderer.js
index 873c0b765c58..ec082313dce7 100644
--- a/lighthouse-core/report/html/renderer/performance-category-renderer.js
+++ b/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;
}
diff --git a/lighthouse-core/test/report/html/renderer/category-renderer-test.js b/lighthouse-core/test/report/html/renderer/category-renderer-test.js
index 77e890be0125..9053252d519f 100644
--- a/lighthouse-core/test/report/html/renderer/category-renderer-test.js
+++ b/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);