From bc4e785ba8c77ad52cfd50251fe047d4923ba80b Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Wed, 17 Jan 2018 23:19:35 +0100 Subject: [PATCH 01/12] Split category-renderer into three files --- .../accessibility-category-renderer.js | 89 ++++++ .../report/v2/renderer/category-renderer.js | 268 +----------------- .../renderer/performance-category-renderer.js | 195 +++++++++++++ .../report/v2/renderer/report-renderer.js | 28 +- lighthouse-core/report/v2/report-generator.js | 2 + .../report/v2/report-template.html | 4 +- 6 files changed, 309 insertions(+), 277 deletions(-) create mode 100644 lighthouse-core/report/v2/renderer/accessibility-category-renderer.js create mode 100644 lighthouse-core/report/v2/renderer/performance-category-renderer.js diff --git a/lighthouse-core/report/v2/renderer/accessibility-category-renderer.js b/lighthouse-core/report/v2/renderer/accessibility-category-renderer.js new file mode 100644 index 000000000000..364442ba875f --- /dev/null +++ b/lighthouse-core/report/v2/renderer/accessibility-category-renderer.js @@ -0,0 +1,89 @@ +/** + * @license Copyright 2018 Google Inc. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +/* globals self */ + +class AccessibilityCategoryRenderer extends CategoryRenderer { + + /** + * @param {!ReportRenderer.CategoryJSON} category + * @param {!Object} groupDefinitions + * @return {!Element} + */ + render(category, groupDefinitions) { + const element = this._dom.createElement('div', 'lh-category'); + this._createPermalinkSpan(element, category.id); + element.appendChild(this._renderCategoryScore(category)); + + const manualAudits = category.audits.filter(audit => audit.result.manual); + const nonManualAudits = category.audits.filter(audit => !manualAudits.includes(audit)); + const auditsGroupedByGroup = /** @type {!Object, + failed: !Array, + notApplicable: !Array}>} */ ({}); + nonManualAudits.forEach(audit => { + const groupId = audit.group; + const groups = auditsGroupedByGroup[groupId] || {passed: [], failed: [], notApplicable: []}; + + if (audit.result.notApplicable) { + groups.notApplicable.push(audit); + } else if (audit.score === 100) { + groups.passed.push(audit); + } else { + groups.failed.push(audit); + } + + auditsGroupedByGroup[groupId] = groups; + }); + + const passedElements = /** @type {!Array} */ ([]); + const notApplicableElements = /** @type {!Array} */ ([]); + Object.keys(auditsGroupedByGroup).forEach(groupId => { + const group = groupDefinitions[groupId]; + const groups = auditsGroupedByGroup[groupId]; + if (groups.failed.length) { + const auditGroupElem = this._renderAuditGroup(group, {expandable: false}); + groups.failed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + auditGroupElem.open = true; + element.appendChild(auditGroupElem); + } + + if (groups.passed.length) { + const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); + groups.passed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + passedElements.push(auditGroupElem); + } + + if (groups.notApplicable.length) { + const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); + groups.notApplicable.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + notApplicableElements.push(auditGroupElem); + } + }); + + if (passedElements.length) { + const passedElem = this._renderPassedAuditsSection(passedElements); + element.appendChild(passedElem); + } + + if (notApplicableElements.length) { + const notApplicableElem = this._renderNotApplicableAuditsSection(notApplicableElements); + element.appendChild(notApplicableElem); + } + + // Render manual audits after passing. + this._renderManualAudits(manualAudits, groupDefinitions, element); + + return element; + } +} + +if (typeof module !== 'undefined' && module.exports) { + module.exports = AccessibilityCategoryRenderer; +} else { + self.AccessibilityCategoryRenderer = AccessibilityCategoryRenderer; +} diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js index dff47f1caf74..71e99f7dd025 100644 --- a/lighthouse-core/report/v2/renderer/category-renderer.js +++ b/lighthouse-core/report/v2/renderer/category-renderer.js @@ -108,96 +108,6 @@ class CategoryRenderer { return element; } - /** - * @param {!ReportRenderer.AuditJSON} audit - * @param {number} scale - * @return {!Element} - */ - _renderTimelineMetricAudit(audit, scale) { - const tmpl = this._dom.cloneTemplate('#tmpl-lh-timeline-metric', this._templateContext); - const element = this._dom.find('.lh-timeline-metric', tmpl); - element.classList.add(`lh-timeline-metric--${Util.calculateRating(audit.score)}`); - - const titleEl = this._dom.find('.lh-timeline-metric__title', tmpl); - titleEl.textContent = audit.result.description; - - const valueEl = this._dom.find('.lh-timeline-metric__value', tmpl); - valueEl.textContent = audit.result.displayValue; - - const descriptionEl = this._dom.find('.lh-timeline-metric__description', tmpl); - descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); - - if (typeof audit.result.rawValue !== 'number') { - const debugStrEl = this._dom.createChildOf(element, 'div', 'lh-debug'); - debugStrEl.textContent = audit.result.debugString || 'Report error: no metric information'; - return element; - } - - const sparklineBarEl = this._dom.find('.lh-sparkline__bar', tmpl); - sparklineBarEl.style.width = `${audit.result.rawValue / scale * 100}%`; - - return element; - } - - /** - * @param {!ReportRenderer.AuditJSON} audit - * @param {number} scale - * @return {!Element} - */ - _renderPerfHintAudit(audit, scale) { - const extendedInfo = /** @type {!CategoryRenderer.PerfHintExtendedInfo} - */ (audit.result.extendedInfo); - const tooltipAttrs = {title: audit.result.displayValue}; - - const element = this._dom.createElement('details', [ - 'lh-perf-hint', - `lh-perf-hint--${Util.calculateRating(audit.score)}`, - 'lh-expandable-details', - ].join(' ')); - - const summary = this._dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' + - 'lh-expandable-details__summary'); - const titleEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__title'); - titleEl.textContent = audit.result.description; - - this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'}); - - if (!extendedInfo || typeof audit.result.rawValue !== 'number') { - const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); - debugStrEl.textContent = audit.result.debugString || 'Report error: no extended information'; - return element; - } - - const sparklineContainerEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline', - tooltipAttrs); - const sparklineEl = this._dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline'); - const sparklineBarEl = this._dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar'); - sparklineBarEl.style.width = audit.result.rawValue / scale * 100 + '%'; - - const statsEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs); - const statsMsEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat'); - statsMsEl.textContent = Util.formatMilliseconds(audit.result.rawValue); - - if (extendedInfo.value.wastedKb) { - const statsKbEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat'); - statsKbEl.textContent = Util.formatNumber(extendedInfo.value.wastedKb) + ' KB'; - } - - const descriptionEl = this._dom.createChildOf(element, 'div', 'lh-perf-hint__description'); - descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); - - if (audit.result.debugString) { - const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); - debugStrEl.textContent = audit.result.debugString; - } - - if (audit.result.details) { - element.appendChild(this._detailsRenderer.render(audit.result.details)); - } - - return element; - } - /** * Renders the group container for a group of audits. Individual audit elements can be added * directly to the returned element. @@ -335,28 +245,12 @@ class CategoryRenderer { return tmpl; } - /** - * @param {!ReportRenderer.CategoryJSON} category - * @param {!Object} groups - * @return {!Element} - */ - render(category, groups) { - switch (category.id) { - case 'performance': - return this._renderPerformanceCategory(category, groups); - case 'accessibility': - return this._renderAccessibilityCategory(category, groups); - default: - return this._renderDefaultCategory(category, groups); - } - } - /** * @param {!ReportRenderer.CategoryJSON} category * @param {!Object} groupDefinitions * @return {!Element} */ - _renderDefaultCategory(category, groupDefinitions) { + render(category, groupDefinitions) { const element = this._dom.createElement('div', 'lh-category'); this._createPermalinkSpan(element, category.id); element.appendChild(this._renderCategoryScore(category)); @@ -388,155 +282,6 @@ class CategoryRenderer { return element; } - /** - * @param {!ReportRenderer.CategoryJSON} category - * @param {!Object} groups - * @return {!Element} - */ - _renderPerformanceCategory(category, groups) { - const element = this._dom.createElement('div', 'lh-category'); - this._createPermalinkSpan(element, category.id); - element.appendChild(this._renderCategoryScore(category)); - - const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric'); - const metricAuditsEl = this._renderAuditGroup(groups['perf-metric'], {expandable: false}); - const timelineContainerEl = this._dom.createChildOf(metricAuditsEl, 'div', - 'lh-timeline-container'); - const timelineEl = this._dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline'); - - let perfTimelineScale = 0; - metricAudits.forEach(audit => { - if (typeof audit.result.rawValue === 'number' && audit.result.rawValue) { - perfTimelineScale = Math.max(perfTimelineScale, audit.result.rawValue); - } - }); - - const thumbnailAudit = category.audits.find(audit => audit.id === 'screenshot-thumbnails'); - const thumbnailResult = thumbnailAudit && thumbnailAudit.result; - if (thumbnailResult && thumbnailResult.details) { - const thumbnailDetails = /** @type {!DetailsRenderer.FilmstripDetails} */ - (thumbnailResult.details); - perfTimelineScale = Math.max(perfTimelineScale, thumbnailDetails.scale); - const filmstripEl = this._detailsRenderer.render(thumbnailDetails); - timelineEl.appendChild(filmstripEl); - } - - metricAudits.forEach(item => { - if (item.id === 'speed-index-metric' || item.id === 'estimated-input-latency') { - return metricAuditsEl.appendChild(this._renderAudit(item)); - } - - timelineEl.appendChild(this._renderTimelineMetricAudit(item, perfTimelineScale)); - }); - - metricAuditsEl.open = true; - element.appendChild(metricAuditsEl); - - const hintAudits = category.audits - .filter(audit => audit.group === 'perf-hint' && audit.score < 100) - .sort((auditA, auditB) => auditB.result.rawValue - auditA.result.rawValue); - if (hintAudits.length) { - const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue)); - const scale = Math.ceil(maxWaste / 1000) * 1000; - const hintAuditsEl = this._renderAuditGroup(groups['perf-hint'], {expandable: false}); - hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale))); - hintAuditsEl.open = true; - element.appendChild(hintAuditsEl); - } - - const infoAudits = category.audits - .filter(audit => audit.group === 'perf-info' && audit.score < 100); - if (infoAudits.length) { - const infoAuditsEl = this._renderAuditGroup(groups['perf-info'], {expandable: false}); - infoAudits.forEach(item => infoAuditsEl.appendChild(this._renderAudit(item))); - infoAuditsEl.open = true; - element.appendChild(infoAuditsEl); - } - - const passedElements = category.audits - .filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') && - audit.score === 100) - .map(audit => this._renderAudit(audit)); - - if (!passedElements.length) return element; - - const passedElem = this._renderPassedAuditsSection(passedElements); - element.appendChild(passedElem); - return element; - } - - /** - * @param {!ReportRenderer.CategoryJSON} category - * @param {!Object} groupDefinitions - * @return {!Element} - */ - _renderAccessibilityCategory(category, groupDefinitions) { - const element = this._dom.createElement('div', 'lh-category'); - this._createPermalinkSpan(element, category.id); - element.appendChild(this._renderCategoryScore(category)); - - const manualAudits = category.audits.filter(audit => audit.result.manual); - const nonManualAudits = category.audits.filter(audit => !manualAudits.includes(audit)); - const auditsGroupedByGroup = /** @type {!Object, - failed: !Array, - notApplicable: !Array}>} */ ({}); - nonManualAudits.forEach(audit => { - const groupId = audit.group; - const groups = auditsGroupedByGroup[groupId] || {passed: [], failed: [], notApplicable: []}; - - if (audit.result.notApplicable) { - groups.notApplicable.push(audit); - } else if (audit.score === 100) { - groups.passed.push(audit); - } else { - groups.failed.push(audit); - } - - auditsGroupedByGroup[groupId] = groups; - }); - - const passedElements = /** @type {!Array} */ ([]); - const notApplicableElements = /** @type {!Array} */ ([]); - Object.keys(auditsGroupedByGroup).forEach(groupId => { - const group = groupDefinitions[groupId]; - const groups = auditsGroupedByGroup[groupId]; - if (groups.failed.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: false}); - groups.failed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); - auditGroupElem.open = true; - element.appendChild(auditGroupElem); - } - - if (groups.passed.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); - groups.passed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); - passedElements.push(auditGroupElem); - } - - if (groups.notApplicable.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); - groups.notApplicable.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); - notApplicableElements.push(auditGroupElem); - } - }); - - if (passedElements.length) { - const passedElem = this._renderPassedAuditsSection(passedElements); - element.appendChild(passedElem); - } - - if (notApplicableElements.length) { - const notApplicableElem = this._renderNotApplicableAuditsSection(notApplicableElements); - element.appendChild(notApplicableElem); - } - - // Render manual audits after passing. - this._renderManualAudits(manualAudits, groupDefinitions, element); - - return element; - } - /** * Create a non-semantic span used for hash navigation of categories * @param {!Element} element @@ -553,14 +298,3 @@ if (typeof module !== 'undefined' && module.exports) { } else { self.CategoryRenderer = CategoryRenderer; } - - -/** - * @typedef {{ - * value: { - * wastedMs: (number|undefined), - * wastedKb: (number|undefined), - * } - * }} - */ -CategoryRenderer.PerfHintExtendedInfo; // eslint-disable-line no-unused-expressions diff --git a/lighthouse-core/report/v2/renderer/performance-category-renderer.js b/lighthouse-core/report/v2/renderer/performance-category-renderer.js new file mode 100644 index 000000000000..55b862ef41c5 --- /dev/null +++ b/lighthouse-core/report/v2/renderer/performance-category-renderer.js @@ -0,0 +1,195 @@ +/** + * @license Copyright 2018 Google Inc. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +/* globals self, Util */ + +class PerformanceCategoryRenderer extends CategoryRenderer { + + /** + * @param {!ReportRenderer.AuditJSON} audit + * @param {number} scale + * @return {!Element} + */ + _renderTimelineMetricAudit(audit, scale) { + const tmpl = this._dom.cloneTemplate('#tmpl-lh-timeline-metric', this._templateContext); + const element = this._dom.find('.lh-timeline-metric', tmpl); + element.classList.add(`lh-timeline-metric--${Util.calculateRating(audit.score)}`); + + const titleEl = this._dom.find('.lh-timeline-metric__title', tmpl); + titleEl.textContent = audit.result.description; + + const valueEl = this._dom.find('.lh-timeline-metric__value', tmpl); + valueEl.textContent = audit.result.displayValue; + + const descriptionEl = this._dom.find('.lh-timeline-metric__description', tmpl); + descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); + + if (typeof audit.result.rawValue !== 'number') { + const debugStrEl = this._dom.createChildOf(element, 'div', 'lh-debug'); + debugStrEl.textContent = audit.result.debugString || 'Report error: no metric information'; + return element; + } + + const sparklineBarEl = this._dom.find('.lh-sparkline__bar', tmpl); + sparklineBarEl.style.width = `${audit.result.rawValue / scale * 100}%`; + + return element; + } + + /** + * @param {!ReportRenderer.AuditJSON} audit + * @param {number} scale + * @return {!Element} + */ + _renderPerfHintAudit(audit, scale) { + const extendedInfo = /** @type {!CategoryRenderer.PerfHintExtendedInfo} + */ (audit.result.extendedInfo); + const tooltipAttrs = {title: audit.result.displayValue}; + + const element = this._dom.createElement('details', [ + 'lh-perf-hint', + `lh-perf-hint--${Util.calculateRating(audit.score)}`, + 'lh-expandable-details', + ].join(' ')); + + const summary = this._dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' + + 'lh-expandable-details__summary'); + const titleEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__title'); + titleEl.textContent = audit.result.description; + + this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'}); + + if (!extendedInfo || typeof audit.result.rawValue !== 'number') { + const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); + debugStrEl.textContent = audit.result.debugString || 'Report error: no extended information'; + return element; + } + + const sparklineContainerEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline', + tooltipAttrs); + const sparklineEl = this._dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline'); + const sparklineBarEl = this._dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar'); + sparklineBarEl.style.width = audit.result.rawValue / scale * 100 + '%'; + + const statsEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs); + const statsMsEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat'); + statsMsEl.textContent = Util.formatMilliseconds(audit.result.rawValue); + + if (extendedInfo.value.wastedKb) { + const statsKbEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat'); + statsKbEl.textContent = Util.formatNumber(extendedInfo.value.wastedKb) + ' KB'; + } + + const descriptionEl = this._dom.createChildOf(element, 'div', 'lh-perf-hint__description'); + descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); + + if (audit.result.debugString) { + const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); + debugStrEl.textContent = audit.result.debugString; + } + + if (audit.result.details) { + element.appendChild(this._detailsRenderer.render(audit.result.details)); + } + + return element; + } + + /** + * @param {!ReportRenderer.CategoryJSON} category + * @param {!Object} groups + * @return {!Element} + */ + render(category, groups) { + const element = this._dom.createElement('div', 'lh-category'); + this._createPermalinkSpan(element, category.id); + element.appendChild(this._renderCategoryScore(category)); + + const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric'); + const metricAuditsEl = this._renderAuditGroup(groups['perf-metric'], {expandable: false}); + const timelineContainerEl = this._dom.createChildOf(metricAuditsEl, 'div', + 'lh-timeline-container'); + const timelineEl = this._dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline'); + + let perfTimelineScale = 0; + metricAudits.forEach(audit => { + if (typeof audit.result.rawValue === 'number' && audit.result.rawValue) { + perfTimelineScale = Math.max(perfTimelineScale, audit.result.rawValue); + } + }); + + const thumbnailAudit = category.audits.find(audit => audit.id === 'screenshot-thumbnails'); + const thumbnailResult = thumbnailAudit && thumbnailAudit.result; + if (thumbnailResult && thumbnailResult.details) { + const thumbnailDetails = /** @type {!DetailsRenderer.FilmstripDetails} */ + (thumbnailResult.details); + perfTimelineScale = Math.max(perfTimelineScale, thumbnailDetails.scale); + const filmstripEl = this._detailsRenderer.render(thumbnailDetails); + timelineEl.appendChild(filmstripEl); + } + + metricAudits.forEach(item => { + if (item.id === 'speed-index-metric' || item.id === 'estimated-input-latency') { + return metricAuditsEl.appendChild(this._renderAudit(item)); + } + + timelineEl.appendChild(this._renderTimelineMetricAudit(item, perfTimelineScale)); + }); + + metricAuditsEl.open = true; + element.appendChild(metricAuditsEl); + + const hintAudits = category.audits + .filter(audit => audit.group === 'perf-hint' && audit.score < 100) + .sort((auditA, auditB) => auditB.result.rawValue - auditA.result.rawValue); + if (hintAudits.length) { + const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue)); + const scale = Math.ceil(maxWaste / 1000) * 1000; + const hintAuditsEl = this._renderAuditGroup(groups['perf-hint'], {expandable: false}); + hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale))); + hintAuditsEl.open = true; + element.appendChild(hintAuditsEl); + } + + const infoAudits = category.audits + .filter(audit => audit.group === 'perf-info' && audit.score < 100); + if (infoAudits.length) { + const infoAuditsEl = this._renderAuditGroup(groups['perf-info'], {expandable: false}); + infoAudits.forEach(item => infoAuditsEl.appendChild(this._renderAudit(item))); + infoAuditsEl.open = true; + element.appendChild(infoAuditsEl); + } + + const passedElements = category.audits + .filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') && + audit.score === 100) + .map(audit => this._renderAudit(audit)); + + if (!passedElements.length) return element; + + const passedElem = this._renderPassedAuditsSection(passedElements); + element.appendChild(passedElem); + return element; + } +} + +if (typeof module !== 'undefined' && module.exports) { + module.exports = PerformanceCategoryRenderer; +} else { + self.PerformanceCategoryRenderer = PerformanceCategoryRenderer; +} + + +/** + * @typedef {{ + * value: { + * wastedMs: (number|undefined), + * wastedKb: (number|undefined), + * } + * }} + */ +PerformanceCategoryRenderer.PerfHintExtendedInfo; // eslint-disable-line no-unused-expressions diff --git a/lighthouse-core/report/v2/renderer/report-renderer.js b/lighthouse-core/report/v2/renderer/report-renderer.js index 4d5e4e13f781..f8efef1f9594 100644 --- a/lighthouse-core/report/v2/renderer/report-renderer.js +++ b/lighthouse-core/report/v2/renderer/report-renderer.js @@ -17,13 +17,10 @@ class ReportRenderer { /** * @param {!DOM} dom - * @param {!CategoryRenderer} categoryRenderer */ - constructor(dom, categoryRenderer) { + constructor(dom) { /** @private {!DOM} */ this._dom = dom; - /** @private {!CategoryRenderer} */ - this._categoryRenderer = categoryRenderer; /** @private {!Document|!Element} */ this._templateContext = this._dom.document(); } @@ -46,7 +43,6 @@ class ReportRenderer { */ setTemplateContext(context) { this._templateContext = context; - this._categoryRenderer.setTemplateContext(context); } /** @@ -152,12 +148,30 @@ class ReportRenderer { scoreHeader = reportSection.appendChild(this._dom.createElement('div', 'lh-scores-header')); } + const detailsRenderer = new DetailsRenderer(this._dom); + const categoryRenderer = new CategoryRenderer(this._dom, detailsRenderer); + categoryRenderer.setTemplateContext(this._templateContext); + const perfCategoryRenderer = new PerformanceCategoryRenderer(this._dom, detailsRenderer); + perfCategoryRenderer.setTemplateContext(this._templateContext); + const a11yCategoryRenderer = new AccessibilityCategoryRenderer(this._dom, detailsRenderer); + a11yCategoryRenderer.setTemplateContext(this._templateContext); + const categories = reportSection.appendChild(this._dom.createElement('div', 'lh-categories')); for (const category of report.reportCategories) { if (scoreHeader) { - scoreHeader.appendChild(this._categoryRenderer.renderScoreGauge(category)); + scoreHeader.appendChild(categoryRenderer.renderScoreGauge(category)); } - categories.appendChild(this._categoryRenderer.render(category, report.reportGroups)); + + let renderer = categoryRenderer; + + switch (category.id) { + case 'performance': + renderer = perfCategoryRenderer; break; + case 'accessibility': + renderer = a11yCategoryRenderer; break; + } + + categories.appendChild(renderer.render(category, report.reportGroups)); } reportSection.appendChild(this._renderReportFooter(report)); diff --git a/lighthouse-core/report/v2/report-generator.js b/lighthouse-core/report/v2/report-generator.js index b16e5839a66f..d75fc4210508 100644 --- a/lighthouse-core/report/v2/report-generator.js +++ b/lighthouse-core/report/v2/report-generator.js @@ -17,6 +17,8 @@ const REPORT_JAVASCRIPT = [ fs.readFileSync(__dirname + '/renderer/logger.js', 'utf8'), fs.readFileSync(__dirname + '/renderer/report-ui-features.js', 'utf8'), fs.readFileSync(__dirname + '/renderer/category-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/renderer/performance-category-renderer.js', 'utf8'), + fs.readFileSync(__dirname + '/renderer/accessibility-category-renderer.js', 'utf8'), fs.readFileSync(__dirname + '/renderer/report-renderer.js', 'utf8'), ].join(';\n'); const REPORT_CSS = fs.readFileSync(__dirname + '/report-styles.css', 'utf8'); diff --git a/lighthouse-core/report/v2/report-template.html b/lighthouse-core/report/v2/report-template.html index 89cc88148615..bb2eb23d795a 100644 --- a/lighthouse-core/report/v2/report-template.html +++ b/lighthouse-core/report/v2/report-template.html @@ -25,9 +25,7 @@ pre$`post %%LIGHTHOUSE_JSON%% */ -/* globals self, Util */ +/* globals self, Util, DetailsRenderer, CategoryRenderer, PerformanceCategoryRenderer */ class ReportRenderer { /** From ef0e92361d8b31f7adb626677d792df3dbf6d6b5 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Thu, 25 Jan 2018 01:31:15 +0100 Subject: [PATCH 07/12] Fix tests. --- .../renderer/performance-category-renderer.js | 2 +- .../v2/renderer/category-renderer-test.js | 105 +------------ .../performance-category-renderer-test.js | 145 ++++++++++++++++++ .../v2/renderer/report-renderer-test.js | 12 ++ 4 files changed, 161 insertions(+), 103 deletions(-) create mode 100644 lighthouse-core/test/report/v2/renderer/performance-category-renderer-test.js diff --git a/lighthouse-core/report/v2/renderer/performance-category-renderer.js b/lighthouse-core/report/v2/renderer/performance-category-renderer.js index 34b0d9701ea2..9c69300e019b 100644 --- a/lighthouse-core/report/v2/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/v2/renderer/performance-category-renderer.js @@ -45,7 +45,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { * @return {!Element} */ _renderPerfHintAudit(audit, scale) { - const extendedInfo = /** @type {!CategoryRenderer.PerfHintExtendedInfo} + const extendedInfo = /** @type {!PerformanceCategoryRenderer.PerfHintExtendedInfo} */ (audit.result.extendedInfo); const tooltipAttrs = {title: audit.result.displayValue}; diff --git a/lighthouse-core/test/report/v2/renderer/category-renderer-test.js b/lighthouse-core/test/report/v2/renderer/category-renderer-test.js index cade016e65b3..28d9f001f58c 100644 --- a/lighthouse-core/test/report/v2/renderer/category-renderer-test.js +++ b/lighthouse-core/test/report/v2/renderer/category-renderer-test.js @@ -138,106 +138,7 @@ describe('CategoryRenderer', () => { assert.ok(!categoryDOM2.querySelector('.lh-audit-group--notapplicable')); }); - describe('performance category', () => { - const category = sampleResults.reportCategories.find(cat => cat.id === 'performance'); - - it('renders the category header', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - const score = categoryDOM.querySelector('.lh-score'); - const value = categoryDOM.querySelector('.lh-score > .lh-score__value'); - const title = score.querySelector('.lh-score__title'); - - assert.deepEqual(score, score.firstElementChild, 'first child is a score'); - assert.ok(value.classList.contains('lh-score__value--numeric'), - 'category score is numeric'); - assert.equal(value.textContent, Math.round(category.score), 'category score is rounded'); - assert.equal(title.textContent, category.name, 'title is set'); - }); - - it('renders the sections', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group'); - assert.equal(sections.length, 4); - }); - - it('renders the metrics', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - const metricsSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[0]; - - const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric'); - const timelineElements = metricsSection.querySelectorAll('.lh-timeline-metric'); - const nontimelineElements = metricsSection.querySelectorAll('.lh-audit'); - assert.equal(timelineElements.length + nontimelineElements.length, metricAudits.length); - }); - - it('renders the failing performance hints', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - - const hintAudits = category.audits.filter(audit => audit.group === 'perf-hint' && - audit.score !== 100); - const hintElements = categoryDOM.querySelectorAll('.lh-perf-hint'); - assert.equal(hintElements.length, hintAudits.length); - - const hintElement = hintElements[0]; - const hintSparklineElement = hintElement.querySelector('.lh-perf-hint__sparkline'); - assert.ok(hintElement.querySelector('.lh-perf-hint__title'), 'did not render title'); - assert.ok(hintSparklineElement, 'did not render sparkline'); - assert.ok(hintElement.querySelector('.lh-perf-hint__stats'), 'did not render stats'); - assert.ok(hintSparklineElement.title, 'did not render tooltip'); - }); - - it('renders the performance hints with a debug string', () => { - const auditWithDebug = { - score: 0, - group: 'perf-hint', - result: {rawValue: 100, debugString: 'Yikes!', description: 'Bug'}, - }; - - const fakeAudits = category.audits.concat(auditWithDebug); - const fakeCategory = Object.assign({}, category, {audits: fakeAudits}); - const categoryDOM = renderer.render(fakeCategory, sampleResults.reportGroups); - - const debugEl = categoryDOM.querySelector('.lh-perf-hint .lh-debug'); - assert.ok(debugEl, 'did not render debug'); - }); - - it('renders the performance hints with no extended info', () => { - const buggyAudit = { - score: 0, - group: 'perf-hint', - result: {debugString: 'Yikes!', description: 'Bug'}, - }; - - const fakeAudits = category.audits.concat(buggyAudit); - const fakeCategory = Object.assign({}, category, {audits: fakeAudits}); - const categoryDOM = renderer.render(fakeCategory, sampleResults.reportGroups); - - const debugEl = categoryDOM.querySelector('.lh-perf-hint .lh-debug'); - assert.ok(debugEl, 'did not render debug'); - }); - - it('renders the failing diagnostics', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - const diagnosticSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[2]; - - const diagnosticAudits = category.audits.filter(audit => audit.group === 'perf-info' && - audit.score !== 100); - const diagnosticElements = diagnosticSection.querySelectorAll('.lh-audit'); - assert.equal(diagnosticElements.length, diagnosticAudits.length); - }); - - it('renders the passed audits', () => { - const categoryDOM = renderer.render(category, sampleResults.reportGroups); - const passedSection = categoryDOM.querySelector('.lh-category > .lh-passed-audits'); - - const passedAudits = category.audits.filter(audit => audit.group !== 'perf-metric' && - audit.score === 100); - const passedElements = passedSection.querySelectorAll('.lh-audit'); - assert.equal(passedElements.length, passedAudits.length); - }); - }); - - describe('accessibility category', () => { + describe('category with groups', () => { const category = sampleResults.reportCategories.find(cat => cat.id === 'accessibility'); it('renders the category header', () => { @@ -255,7 +156,8 @@ describe('CategoryRenderer', () => { assert.ok(description.querySelector('a'), 'description contains converted markdown links'); }); - it('renders the failed audits grouped by group', () => { + // TODO waiting for decision regarding this header + xit('renders the failed audits grouped by group', () => { const categoryDOM = renderer.render(category, sampleResults.reportGroups); const failedAudits = category.audits.filter(audit => { return audit.score !== 100 && !audit.result.notApplicable; @@ -283,7 +185,6 @@ describe('CategoryRenderer', () => { }); }); - describe('grouping passed/failed/manual', () => { it('separates audits in the DOM', () => { const category = sampleResults.reportCategories[0]; diff --git a/lighthouse-core/test/report/v2/renderer/performance-category-renderer-test.js b/lighthouse-core/test/report/v2/renderer/performance-category-renderer-test.js new file mode 100644 index 000000000000..63ce6254b05f --- /dev/null +++ b/lighthouse-core/test/report/v2/renderer/performance-category-renderer-test.js @@ -0,0 +1,145 @@ +/** + * @license Copyright 2017 Google Inc. All Rights Reserved. + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. + */ +'use strict'; + +/* eslint-env mocha, browser */ + +const assert = require('assert'); +const fs = require('fs'); +const jsdom = require('jsdom'); +const Util = require('../../../../report/v2/renderer/util.js'); +const URL = require('../../../../lib/url-shim'); +const DOM = require('../../../../report/v2/renderer/dom.js'); +const DetailsRenderer = require('../../../../report/v2/renderer/details-renderer.js'); +const CriticalRequestChainRenderer = require( + '../../../../report/v2/renderer/crc-details-renderer.js'); +const CategoryRenderer = require('../../../../report/v2/renderer/category-renderer.js'); +const sampleResults = require('../../../results/sample_v2.json'); + +const TEMPLATE_FILE = fs.readFileSync(__dirname + '/../../../../report/v2/templates.html', 'utf8'); + +describe('CategoryRenderer', () => { + let renderer; + + before(() => { + global.URL = URL; + global.Util = Util; + global.CriticalRequestChainRenderer = CriticalRequestChainRenderer; + global.CategoryRenderer = CategoryRenderer; + + const PerformanceCategoryRenderer = + require('../../../../report/v2/renderer/performance-category-renderer.js'); + + const document = jsdom.jsdom(TEMPLATE_FILE); + const dom = new DOM(document); + const detailsRenderer = new DetailsRenderer(dom); + renderer = new PerformanceCategoryRenderer(dom, detailsRenderer); + }); + + after(() => { + global.URL = undefined; + global.Util = undefined; + global.CriticalRequestChainRenderer = undefined; + global.CategoryRenderer = undefined; + }); + + const category = sampleResults.reportCategories.find(cat => cat.id === 'performance'); + + it('renders the category header', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + const score = categoryDOM.querySelector('.lh-score'); + const value = categoryDOM.querySelector('.lh-score > .lh-score__value'); + const title = score.querySelector('.lh-score__title'); + + assert.deepEqual(score, score.firstElementChild, 'first child is a score'); + assert.ok(value.classList.contains('lh-score__value--numeric'), + 'category score is numeric'); + assert.equal(value.textContent, Math.round(category.score), 'category score is rounded'); + assert.equal(title.textContent, category.name, 'title is set'); + }); + + it('renders the sections', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + const sections = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group'); + assert.equal(sections.length, 4); + }); + + it('renders the metrics', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + const metricsSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[0]; + + const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric'); + const timelineElements = metricsSection.querySelectorAll('.lh-timeline-metric'); + const nontimelineElements = metricsSection.querySelectorAll('.lh-audit'); + assert.equal(timelineElements.length + nontimelineElements.length, metricAudits.length); + }); + + it('renders the failing performance hints', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + + const hintAudits = category.audits.filter(audit => audit.group === 'perf-hint' && + audit.score !== 100); + const hintElements = categoryDOM.querySelectorAll('.lh-perf-hint'); + assert.equal(hintElements.length, hintAudits.length); + + const hintElement = hintElements[0]; + const hintSparklineElement = hintElement.querySelector('.lh-perf-hint__sparkline'); + assert.ok(hintElement.querySelector('.lh-perf-hint__title'), 'did not render title'); + assert.ok(hintSparklineElement, 'did not render sparkline'); + assert.ok(hintElement.querySelector('.lh-perf-hint__stats'), 'did not render stats'); + assert.ok(hintSparklineElement.title, 'did not render tooltip'); + }); + + it('renders the performance hints with a debug string', () => { + const auditWithDebug = { + score: 0, + group: 'perf-hint', + result: {rawValue: 100, debugString: 'Yikes!', description: 'Bug'}, + }; + + const fakeAudits = category.audits.concat(auditWithDebug); + const fakeCategory = Object.assign({}, category, {audits: fakeAudits}); + const categoryDOM = renderer.render(fakeCategory, sampleResults.reportGroups); + + const debugEl = categoryDOM.querySelector('.lh-perf-hint .lh-debug'); + assert.ok(debugEl, 'did not render debug'); + }); + + it('renders the performance hints with no extended info', () => { + const buggyAudit = { + score: 0, + group: 'perf-hint', + result: {debugString: 'Yikes!', description: 'Bug'}, + }; + + const fakeAudits = category.audits.concat(buggyAudit); + const fakeCategory = Object.assign({}, category, {audits: fakeAudits}); + const categoryDOM = renderer.render(fakeCategory, sampleResults.reportGroups); + + const debugEl = categoryDOM.querySelector('.lh-perf-hint .lh-debug'); + assert.ok(debugEl, 'did not render debug'); + }); + + it('renders the failing diagnostics', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + const diagnosticSection = categoryDOM.querySelectorAll('.lh-category > .lh-audit-group')[2]; + + const diagnosticAudits = category.audits.filter(audit => audit.group === 'perf-info' && + audit.score !== 100); + const diagnosticElements = diagnosticSection.querySelectorAll('.lh-audit'); + assert.equal(diagnosticElements.length, diagnosticAudits.length); + }); + + it('renders the passed audits', () => { + const categoryDOM = renderer.render(category, sampleResults.reportGroups); + const passedSection = categoryDOM.querySelector('.lh-category > .lh-passed-audits'); + + const passedAudits = category.audits.filter(audit => audit.group !== 'perf-metric' && + audit.score === 100); + const passedElements = passedSection.querySelectorAll('.lh-audit'); + assert.equal(passedElements.length, passedAudits.length); + }); +}); diff --git a/lighthouse-core/test/report/v2/renderer/report-renderer-test.js b/lighthouse-core/test/report/v2/renderer/report-renderer-test.js index d2f54b8eda25..bb9beaa903ec 100644 --- a/lighthouse-core/test/report/v2/renderer/report-renderer-test.js +++ b/lighthouse-core/test/report/v2/renderer/report-renderer-test.js @@ -16,6 +16,8 @@ const DOM = require('../../../../report/v2/renderer/dom.js'); const DetailsRenderer = require('../../../../report/v2/renderer/details-renderer.js'); const ReportUIFeatures = require('../../../../report/v2/renderer/report-ui-features.js'); const CategoryRenderer = require('../../../../report/v2/renderer/category-renderer.js'); +// lazy loaded because it depends on CategoryRenderer to be available globally +let PerformanceCategoryRenderer = null; const CriticalRequestChainRenderer = require( '../../../../report/v2/renderer/crc-details-renderer.js'); const ReportRenderer = require('../../../../report/v2/renderer/report-renderer.js'); @@ -32,6 +34,13 @@ describe('ReportRenderer V2', () => { global.Util = Util; global.ReportUIFeatures = ReportUIFeatures; global.CriticalRequestChainRenderer = CriticalRequestChainRenderer; + global.DetailsRenderer = DetailsRenderer; + global.CategoryRenderer = CategoryRenderer; + if (!PerformanceCategoryRenderer) { + PerformanceCategoryRenderer = + require('../../../../report/v2/renderer/performance-category-renderer.js'); + } + global.PerformanceCategoryRenderer = PerformanceCategoryRenderer; // Stub out matchMedia for Node. global.matchMedia = function() { @@ -56,6 +65,9 @@ describe('ReportRenderer V2', () => { global.ReportUIFeatures = undefined; global.matchMedia = undefined; global.CriticalRequestChainRenderer = undefined; + global.DetailsRenderer = undefined; + global.CategoryRenderer = undefined; + global.PerformanceCategoryRenderer = undefined; }); describe('renderReport', () => { From 82483eb322b96b1297a3756253affcac32330d06 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Thu, 25 Jan 2018 13:34:41 +0100 Subject: [PATCH 08/12] Make closure compiler happy --- .../report/v2/renderer/category-renderer.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js index 40aa17ed6608..9de658f26530 100644 --- a/lighthouse-core/report/v2/renderer/category-renderer.js +++ b/lighthouse-core/report/v2/renderer/category-renderer.js @@ -13,11 +13,11 @@ class CategoryRenderer { * @param {!DetailsRenderer} detailsRenderer */ constructor(dom, detailsRenderer) { - /** @private {!DOM} */ + /** @protected {!DOM} */ this._dom = dom; - /** @private {!DetailsRenderer} */ + /** @protected {!DetailsRenderer} */ this._detailsRenderer = detailsRenderer; - /** @private {!Document|!Element} */ + /** @protected {!Document|!Element} */ this._templateContext = this._dom.document(); this._detailsRenderer.setTemplateContext(this._templateContext); @@ -293,13 +293,14 @@ class CategoryRenderer { const passedElements = /** @type {!Array} */ ([]); const notApplicableElements = /** @type {!Array} */ ([]); - auditsUngrouped.failed - .forEach(audit => failedElements.push(this._renderAudit(audit))); - auditsUngrouped.passed - .forEach(audit => passedElements.push(this._renderAudit(audit))); - auditsUngrouped.notApplicable - .forEach(audit => notApplicableElements.push(this._renderAudit(audit))); + auditsUngrouped.failed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => + failedElements.push(this._renderAudit(audit))); + auditsUngrouped.passed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => + passedElements.push(this._renderAudit(audit))); + auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => + notApplicableElements.push(this._renderAudit(audit))); + /** @type {number} */ let failedAuditsCount = failedElements.length; Object.keys(auditsGroupedByGroup).forEach(groupId => { From 9be3b4c50328fb02b79360bb8c0e00c062602c63 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Wed, 7 Feb 2018 11:28:10 +0100 Subject: [PATCH 09/12] Extract _renderFailedAuditsSection and add header only for non-grouped audits --- .../report/v2/renderer/category-renderer.js | 29 ++++++++++++------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js index 9de658f26530..bf870e049026 100644 --- a/lighthouse-core/report/v2/renderer/category-renderer.js +++ b/lighthouse-core/report/v2/renderer/category-renderer.js @@ -155,6 +155,15 @@ class CategoryRenderer { } } + _renderFailedAuditsSection(elements) { + const failedElem = this._renderAuditGroup({ + title: `${this._getTotalAuditsLength(elements)} Failed Audits`, + }, {expandable: false}); + failedElem.classList.add('lh-failed-audits'); + elements.forEach(elem => failedElem.appendChild(elem)); + return failedElem; + } + /** * @param {!Array} elements * @return {!Element} @@ -300,20 +309,19 @@ class CategoryRenderer { auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => notApplicableElements.push(this._renderAudit(audit))); - /** @type {number} */ - let failedAuditsCount = failedElements.length; + let hasFailedGroups = false; Object.keys(auditsGroupedByGroup).forEach(groupId => { const group = groupDefinitions[groupId]; const groups = auditsGroupedByGroup[groupId]; - failedAuditsCount += groups.failed.length; - if (groups.failed.length) { const auditGroupElem = this._renderAuditGroup(group, {expandable: false}); groups.failed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); auditGroupElem.open = true; failedElements.push(auditGroupElem); + + hasFailedGroups = true; } if (groups.passed.length) { @@ -330,12 +338,13 @@ class CategoryRenderer { }); if (failedElements.length) { - const nonPassedElem = this._renderAuditGroup({ - title: `${failedAuditsCount} Failed Audits`, - }, {expandable: false}); - nonPassedElem.classList.add('lh-failed-audits'); - failedElements.forEach(element => nonPassedElem.appendChild(element)); - element.appendChild(nonPassedElem); + // if failed audits are grouped skip the 'X Failed Audits' header + if (hasFailedGroups) { + failedElements.forEach(elem => element.appendChild(elem)); + } else { + const failedElem = this._renderFailedAuditsSection(failedElements); + element.appendChild(failedElem); + } } if (passedElements.length) { From 12c8c264c3a54fc69a638049296bde15d7d0b3ed Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Wed, 7 Feb 2018 11:42:12 +0100 Subject: [PATCH 10/12] Add missing jsdoc --- lighthouse-core/report/v2/renderer/category-renderer.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js index bf870e049026..3e2bc4532b51 100644 --- a/lighthouse-core/report/v2/renderer/category-renderer.js +++ b/lighthouse-core/report/v2/renderer/category-renderer.js @@ -155,6 +155,10 @@ class CategoryRenderer { } } + /** + * @param {!Array} elements + * @return {!Element} + */ _renderFailedAuditsSection(elements) { const failedElem = this._renderAuditGroup({ title: `${this._getTotalAuditsLength(elements)} Failed Audits`, From 9f25df89d3e21e0c23aff6397566763662e9e7c2 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Wed, 7 Feb 2018 14:33:22 +0100 Subject: [PATCH 11/12] Update lighthouse viewer --- lighthouse-viewer/app/src/lighthouse-report-viewer.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/lighthouse-viewer/app/src/lighthouse-report-viewer.js b/lighthouse-viewer/app/src/lighthouse-report-viewer.js index fa05da295762..e1436d21b992 100644 --- a/lighthouse-viewer/app/src/lighthouse-report-viewer.js +++ b/lighthouse-viewer/app/src/lighthouse-report-viewer.js @@ -5,7 +5,7 @@ */ 'use strict'; -/* global DOM, CategoryRenderer, DetailsRenderer, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, logger */ +/* global DOM, ViewerUIFeatures, ReportRenderer, DragAndDrop, GithubApi, logger */ /** * Class that manages viewing Lighthouse reports. @@ -114,9 +114,7 @@ class LighthouseReportViewer { this._validateReportJson(json); const dom = new DOM(document); - const detailsRenderer = new DetailsRenderer(dom); - const categoryRenderer = new CategoryRenderer(dom, detailsRenderer); - const renderer = new ReportRenderer(dom, categoryRenderer); + const renderer = new ReportRenderer(dom); const container = document.querySelector('main'); try { From 7b93325099dbd6c80aa705658997c5f5d1676d88 Mon Sep 17 00:00:00 2001 From: Konrad Dzwinel Date: Wed, 7 Feb 2018 14:34:34 +0100 Subject: [PATCH 12/12] compile-devtools fixes --- .../report/v2/renderer/category-renderer.js | 116 +++++++++--------- .../renderer/performance-category-renderer.js | 77 ++++++------ .../scripts/compile-against-devtools.sh | 4 +- .../v2/renderer/category-renderer-test.js | 12 +- 4 files changed, 103 insertions(+), 106 deletions(-) diff --git a/lighthouse-core/report/v2/renderer/category-renderer.js b/lighthouse-core/report/v2/renderer/category-renderer.js index 3e2bc4532b51..7dde283fe563 100644 --- a/lighthouse-core/report/v2/renderer/category-renderer.js +++ b/lighthouse-core/report/v2/renderer/category-renderer.js @@ -14,13 +14,13 @@ class CategoryRenderer { */ constructor(dom, detailsRenderer) { /** @protected {!DOM} */ - this._dom = dom; + this.dom = dom; /** @protected {!DetailsRenderer} */ - this._detailsRenderer = detailsRenderer; + this.detailsRenderer = detailsRenderer; /** @protected {!Document|!Element} */ - this._templateContext = this._dom.document(); + this.templateContext = this.dom.document(); - this._detailsRenderer.setTemplateContext(this._templateContext); + this.detailsRenderer.setTemplateContext(this.templateContext); } /** @@ -28,7 +28,7 @@ class CategoryRenderer { * @return {!Element} */ _renderAuditScore(audit) { - const tmpl = this._dom.cloneTemplate('#tmpl-lh-audit-score', this._templateContext); + const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit-score', this.templateContext); const scoringMode = audit.result.scoringMode; const description = audit.result.helpText; @@ -39,17 +39,17 @@ class CategoryRenderer { } if (audit.result.debugString) { - const debugStrEl = tmpl.appendChild(this._dom.createElement('div', 'lh-debug')); + const debugStrEl = tmpl.appendChild(this.dom.createElement('div', 'lh-debug')); debugStrEl.textContent = audit.result.debugString; } // Append audit details to header section so the entire audit is within a
. - const header = /** @type {!HTMLDetailsElement} */ (this._dom.find('.lh-score__header', tmpl)); + const header = /** @type {!HTMLDetailsElement} */ (this.dom.find('.lh-score__header', tmpl)); if (audit.result.details) { - header.appendChild(this._detailsRenderer.render(audit.result.details)); + header.appendChild(this.detailsRenderer.render(audit.result.details)); } - const scoreEl = this._dom.find('.lh-score', tmpl); + const scoreEl = this.dom.find('.lh-score', tmpl); if (audit.result.informative) { scoreEl.classList.add('lh-score--informative'); } @@ -70,15 +70,15 @@ class CategoryRenderer { */ _populateScore(element, score, scoringMode, title, description) { // Fill in the blanks. - const valueEl = this._dom.find('.lh-score__value', element); + const valueEl = this.dom.find('.lh-score__value', element); valueEl.textContent = Util.formatNumber(score); valueEl.classList.add(`lh-score__value--${Util.calculateRating(score)}`, `lh-score__value--${scoringMode}`); - this._dom.find('.lh-score__title', element).appendChild( - this._dom.convertMarkdownCodeSnippets(title)); - this._dom.find('.lh-score__description', element) - .appendChild(this._dom.convertMarkdownLinkSnippets(description)); + this.dom.find('.lh-score__title', element).appendChild( + this.dom.convertMarkdownCodeSnippets(title)); + this.dom.find('.lh-score__description', element) + .appendChild(this.dom.convertMarkdownLinkSnippets(description)); return /** @type {!Element} **/ (element); } @@ -87,11 +87,11 @@ class CategoryRenderer { * @param {!ReportRenderer.CategoryJSON} category * @return {!Element} */ - _renderCategoryScore(category) { - const tmpl = this._dom.cloneTemplate('#tmpl-lh-category-score', this._templateContext); + renderCategoryScore(category) { + const tmpl = this.dom.cloneTemplate('#tmpl-lh-category-score', this.templateContext); const score = Math.round(category.score); - const gaugeContainerEl = this._dom.find('.lh-score__gauge', tmpl); + const gaugeContainerEl = this.dom.find('.lh-score__gauge', tmpl); const gaugeEl = this.renderScoreGauge(category); gaugeContainerEl.appendChild(gaugeEl); @@ -102,8 +102,8 @@ class CategoryRenderer { * @param {!ReportRenderer.AuditJSON} audit * @return {!Element} */ - _renderAudit(audit) { - const element = this._dom.createElement('div', 'lh-audit'); + renderAudit(audit) { + const element = this.dom.createElement('div', 'lh-audit'); element.appendChild(this._renderAuditScore(audit)); return element; } @@ -115,19 +115,19 @@ class CategoryRenderer { * @param {{expandable: boolean}} opts * @return {!Element} */ - _renderAuditGroup(group, opts) { + renderAuditGroup(group, opts) { const expandable = opts.expandable; - const element = this._dom.createElement(expandable ? 'details' : 'div', 'lh-audit-group'); - const summmaryEl = this._dom.createChildOf(element, 'summary', 'lh-audit-group__summary'); - const headerEl = this._dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header'); - this._dom.createChildOf(summmaryEl, 'div', + const element = this.dom.createElement(expandable ? 'details' : 'div', 'lh-audit-group'); + const summmaryEl = this.dom.createChildOf(element, 'summary', 'lh-audit-group__summary'); + const headerEl = this.dom.createChildOf(summmaryEl, 'div', 'lh-audit-group__header'); + this.dom.createChildOf(summmaryEl, 'div', `lh-toggle-arrow ${expandable ? '' : ' lh-toggle-arrow-unexpandable'}`, { title: 'See audits', }); if (group.description) { - const auditGroupDescription = this._dom.createElement('div', 'lh-audit-group__description'); - auditGroupDescription.appendChild(this._dom.convertMarkdownLinkSnippets(group.description)); + const auditGroupDescription = this.dom.createElement('div', 'lh-audit-group__description'); + auditGroupDescription.appendChild(this.dom.convertMarkdownLinkSnippets(group.description)); element.appendChild(auditGroupDescription); } headerEl.textContent = group.title; @@ -143,7 +143,7 @@ class CategoryRenderer { */ _getTotalAuditsLength(elements) { // Create a scratch element to append sections to so we can reuse querySelectorAll(). - const scratch = this._dom.createElement('div'); + const scratch = this.dom.createElement('div'); elements.forEach(function(element) { scratch.appendChild(element); }); @@ -160,7 +160,7 @@ class CategoryRenderer { * @return {!Element} */ _renderFailedAuditsSection(elements) { - const failedElem = this._renderAuditGroup({ + const failedElem = this.renderAuditGroup({ title: `${this._getTotalAuditsLength(elements)} Failed Audits`, }, {expandable: false}); failedElem.classList.add('lh-failed-audits'); @@ -172,8 +172,8 @@ class CategoryRenderer { * @param {!Array} elements * @return {!Element} */ - _renderPassedAuditsSection(elements) { - const passedElem = this._renderAuditGroup({ + renderPassedAuditsSection(elements) { + const passedElem = this.renderAuditGroup({ title: `${this._getTotalAuditsLength(elements)} Passed Audits`, }, {expandable: true}); passedElem.classList.add('lh-passed-audits'); @@ -186,7 +186,7 @@ class CategoryRenderer { * @return {!Element} */ _renderNotApplicableAuditsSection(elements) { - const notApplicableElem = this._renderAuditGroup({ + const notApplicableElem = this.renderAuditGroup({ title: `${this._getTotalAuditsLength(elements)} Not Applicable Audits`, }, {expandable: true}); notApplicableElem.classList.add('lh-audit-group--notapplicable'); @@ -210,11 +210,11 @@ class CategoryRenderer { Object.keys(auditsGroupedByGroup).forEach(groupId => { const group = groupDefinitions[groupId]; - const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); + const auditGroupElem = this.renderAuditGroup(group, {expandable: true}); auditGroupElem.classList.add('lh-audit-group--manual'); auditsGroupedByGroup[groupId].forEach(audit => { - auditGroupElem.appendChild(this._renderAudit(audit)); + auditGroupElem.appendChild(this.renderAudit(audit)); }); element.appendChild(auditGroupElem); @@ -225,8 +225,8 @@ class CategoryRenderer { * @param {!Document|!Element} context */ setTemplateContext(context) { - this._templateContext = context; - this._detailsRenderer.setTemplateContext(context); + this.templateContext = context; + this.detailsRenderer.setTemplateContext(context); } /** @@ -234,26 +234,26 @@ class CategoryRenderer { * @return {!DocumentFragment} */ renderScoreGauge(category) { - const tmpl = this._dom.cloneTemplate('#tmpl-lh-gauge', this._templateContext); - this._dom.find('.lh-gauge__wrapper', tmpl).href = `#${category.id}`; - this._dom.find('.lh-gauge__label', tmpl).textContent = category.name; + const tmpl = this.dom.cloneTemplate('#tmpl-lh-gauge', this.templateContext); + this.dom.find('.lh-gauge__wrapper', tmpl).href = `#${category.id}`; + this.dom.find('.lh-gauge__label', tmpl).textContent = category.name; const score = Math.round(category.score); const fillRotation = Math.floor((score / 100) * 180); - const gauge = this._dom.find('.lh-gauge', tmpl); + const gauge = this.dom.find('.lh-gauge', tmpl); gauge.setAttribute('data-progress', score); // .dataset not supported in jsdom. gauge.classList.add(`lh-gauge--${Util.calculateRating(score)}`); - this._dom.findAll('.lh-gauge__fill', gauge).forEach(el => { + this.dom.findAll('.lh-gauge__fill', gauge).forEach(el => { el.style.transform = `rotate(${fillRotation}deg)`; }); - this._dom.find('.lh-gauge__mask--full', gauge).style.transform = + this.dom.find('.lh-gauge__mask--full', gauge).style.transform = `rotate(${fillRotation}deg)`; - this._dom.find('.lh-gauge__fill--fix', gauge).style.transform = + this.dom.find('.lh-gauge__fill--fix', gauge).style.transform = `rotate(${fillRotation * 2}deg)`; - this._dom.find('.lh-gauge__percentage', gauge).textContent = score; + this.dom.find('.lh-gauge__percentage', gauge).textContent = score; return tmpl; } @@ -264,9 +264,9 @@ class CategoryRenderer { * @return {!Element} */ render(category, groupDefinitions) { - const element = this._dom.createElement('div', 'lh-category'); - this._createPermalinkSpan(element, category.id); - element.appendChild(this._renderCategoryScore(category)); + const element = this.dom.createElement('div', 'lh-category'); + this.createPermalinkSpan(element, category.id); + element.appendChild(this.renderCategoryScore(category)); const manualAudits = category.audits.filter(audit => audit.result.manual); const nonManualAudits = category.audits.filter(audit => !manualAudits.includes(audit)); @@ -307,11 +307,11 @@ class CategoryRenderer { const notApplicableElements = /** @type {!Array} */ ([]); auditsUngrouped.failed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => - failedElements.push(this._renderAudit(audit))); + failedElements.push(this.renderAudit(audit))); auditsUngrouped.passed.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => - passedElements.push(this._renderAudit(audit))); + passedElements.push(this.renderAudit(audit))); auditsUngrouped.notApplicable.forEach((/** @type {!ReportRenderer.AuditJSON} */ audit) => - notApplicableElements.push(this._renderAudit(audit))); + notApplicableElements.push(this.renderAudit(audit))); let hasFailedGroups = false; @@ -320,8 +320,8 @@ class CategoryRenderer { const groups = auditsGroupedByGroup[groupId]; if (groups.failed.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: false}); - groups.failed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + const auditGroupElem = this.renderAuditGroup(group, {expandable: false}); + groups.failed.forEach(item => auditGroupElem.appendChild(this.renderAudit(item))); auditGroupElem.open = true; failedElements.push(auditGroupElem); @@ -329,14 +329,14 @@ class CategoryRenderer { } if (groups.passed.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); - groups.passed.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + const auditGroupElem = this.renderAuditGroup(group, {expandable: true}); + groups.passed.forEach(item => auditGroupElem.appendChild(this.renderAudit(item))); passedElements.push(auditGroupElem); } if (groups.notApplicable.length) { - const auditGroupElem = this._renderAuditGroup(group, {expandable: true}); - groups.notApplicable.forEach(item => auditGroupElem.appendChild(this._renderAudit(item))); + const auditGroupElem = this.renderAuditGroup(group, {expandable: true}); + groups.notApplicable.forEach(item => auditGroupElem.appendChild(this.renderAudit(item))); notApplicableElements.push(auditGroupElem); } }); @@ -352,7 +352,7 @@ class CategoryRenderer { } if (passedElements.length) { - const passedElem = this._renderPassedAuditsSection(passedElements); + const passedElem = this.renderPassedAuditsSection(passedElements); element.appendChild(passedElem); } @@ -372,8 +372,8 @@ class CategoryRenderer { * @param {!Element} element * @param {string} id */ - _createPermalinkSpan(element, id) { - const permalinkEl = this._dom.createChildOf(element, 'span', 'lh-permalink'); + createPermalinkSpan(element, id) { + const permalinkEl = this.dom.createChildOf(element, 'span', 'lh-permalink'); permalinkEl.id = id; } } diff --git a/lighthouse-core/report/v2/renderer/performance-category-renderer.js b/lighthouse-core/report/v2/renderer/performance-category-renderer.js index 9c69300e019b..bba7006060ad 100644 --- a/lighthouse-core/report/v2/renderer/performance-category-renderer.js +++ b/lighthouse-core/report/v2/renderer/performance-category-renderer.js @@ -14,26 +14,26 @@ class PerformanceCategoryRenderer extends CategoryRenderer { * @return {!Element} */ _renderTimelineMetricAudit(audit, scale) { - const tmpl = this._dom.cloneTemplate('#tmpl-lh-timeline-metric', this._templateContext); - const element = this._dom.find('.lh-timeline-metric', tmpl); + const tmpl = this.dom.cloneTemplate('#tmpl-lh-timeline-metric', this.templateContext); + const element = this.dom.find('.lh-timeline-metric', tmpl); element.classList.add(`lh-timeline-metric--${Util.calculateRating(audit.score)}`); - const titleEl = this._dom.find('.lh-timeline-metric__title', tmpl); + const titleEl = this.dom.find('.lh-timeline-metric__title', tmpl); titleEl.textContent = audit.result.description; - const valueEl = this._dom.find('.lh-timeline-metric__value', tmpl); + const valueEl = this.dom.find('.lh-timeline-metric__value', tmpl); valueEl.textContent = audit.result.displayValue; - const descriptionEl = this._dom.find('.lh-timeline-metric__description', tmpl); - descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); + const descriptionEl = this.dom.find('.lh-timeline-metric__description', tmpl); + descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText)); if (typeof audit.result.rawValue !== 'number') { - const debugStrEl = this._dom.createChildOf(element, 'div', 'lh-debug'); + const debugStrEl = this.dom.createChildOf(element, 'div', 'lh-debug'); debugStrEl.textContent = audit.result.debugString || 'Report error: no metric information'; return element; } - const sparklineBarEl = this._dom.find('.lh-sparkline__bar', tmpl); + const sparklineBarEl = this.dom.find('.lh-sparkline__bar', tmpl); sparklineBarEl.style.width = `${audit.result.rawValue / scale * 100}%`; return element; @@ -49,70 +49,68 @@ class PerformanceCategoryRenderer extends CategoryRenderer { */ (audit.result.extendedInfo); const tooltipAttrs = {title: audit.result.displayValue}; - const element = this._dom.createElement('details', [ + const element = this.dom.createElement('details', [ 'lh-perf-hint', `lh-perf-hint--${Util.calculateRating(audit.score)}`, 'lh-expandable-details', ].join(' ')); - const summary = this._dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' + + const summary = this.dom.createChildOf(element, 'summary', 'lh-perf-hint__summary ' + 'lh-expandable-details__summary'); - const titleEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__title'); + const titleEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__title'); titleEl.textContent = audit.result.description; - this._dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'}); + this.dom.createChildOf(summary, 'div', 'lh-toggle-arrow', {title: 'See resources'}); if (!extendedInfo || typeof audit.result.rawValue !== 'number') { - const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); + const debugStrEl = this.dom.createChildOf(summary, 'div', 'lh-debug'); debugStrEl.textContent = audit.result.debugString || 'Report error: no extended information'; return element; } - const sparklineContainerEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline', + const sparklineContainerEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__sparkline', tooltipAttrs); - const sparklineEl = this._dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline'); - const sparklineBarEl = this._dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar'); + const sparklineEl = this.dom.createChildOf(sparklineContainerEl, 'div', 'lh-sparkline'); + const sparklineBarEl = this.dom.createChildOf(sparklineEl, 'div', 'lh-sparkline__bar'); sparklineBarEl.style.width = audit.result.rawValue / scale * 100 + '%'; - const statsEl = this._dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs); - const statsMsEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat'); + const statsEl = this.dom.createChildOf(summary, 'div', 'lh-perf-hint__stats', tooltipAttrs); + const statsMsEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__primary-stat'); statsMsEl.textContent = Util.formatMilliseconds(audit.result.rawValue); if (extendedInfo.value.wastedKb) { - const statsKbEl = this._dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat'); + const statsKbEl = this.dom.createChildOf(statsEl, 'div', 'lh-perf-hint__secondary-stat'); statsKbEl.textContent = Util.formatNumber(extendedInfo.value.wastedKb) + ' KB'; } - const descriptionEl = this._dom.createChildOf(element, 'div', 'lh-perf-hint__description'); - descriptionEl.appendChild(this._dom.convertMarkdownLinkSnippets(audit.result.helpText)); + const descriptionEl = this.dom.createChildOf(element, 'div', 'lh-perf-hint__description'); + descriptionEl.appendChild(this.dom.convertMarkdownLinkSnippets(audit.result.helpText)); if (audit.result.debugString) { - const debugStrEl = this._dom.createChildOf(summary, 'div', 'lh-debug'); + const debugStrEl = this.dom.createChildOf(summary, 'div', 'lh-debug'); debugStrEl.textContent = audit.result.debugString; } if (audit.result.details) { - element.appendChild(this._detailsRenderer.render(audit.result.details)); + element.appendChild(this.detailsRenderer.render(audit.result.details)); } return element; } /** - * @param {!ReportRenderer.CategoryJSON} category - * @param {!Object} groups - * @return {!Element} + * @override */ render(category, groups) { - const element = this._dom.createElement('div', 'lh-category'); - this._createPermalinkSpan(element, category.id); - element.appendChild(this._renderCategoryScore(category)); + const element = this.dom.createElement('div', 'lh-category'); + this.createPermalinkSpan(element, category.id); + element.appendChild(this.renderCategoryScore(category)); const metricAudits = category.audits.filter(audit => audit.group === 'perf-metric'); - const metricAuditsEl = this._renderAuditGroup(groups['perf-metric'], {expandable: false}); - const timelineContainerEl = this._dom.createChildOf(metricAuditsEl, 'div', + const metricAuditsEl = this.renderAuditGroup(groups['perf-metric'], {expandable: false}); + const timelineContainerEl = this.dom.createChildOf(metricAuditsEl, 'div', 'lh-timeline-container'); - const timelineEl = this._dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline'); + const timelineEl = this.dom.createChildOf(timelineContainerEl, 'div', 'lh-timeline'); let perfTimelineScale = 0; metricAudits.forEach(audit => { @@ -127,13 +125,13 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const thumbnailDetails = /** @type {!DetailsRenderer.FilmstripDetails} */ (thumbnailResult.details); perfTimelineScale = Math.max(perfTimelineScale, thumbnailDetails.scale); - const filmstripEl = this._detailsRenderer.render(thumbnailDetails); + const filmstripEl = this.detailsRenderer.render(thumbnailDetails); timelineEl.appendChild(filmstripEl); } metricAudits.forEach(item => { if (item.id === 'speed-index-metric' || item.id === 'estimated-input-latency') { - return metricAuditsEl.appendChild(this._renderAudit(item)); + return metricAuditsEl.appendChild(this.renderAudit(item)); } timelineEl.appendChild(this._renderTimelineMetricAudit(item, perfTimelineScale)); @@ -148,7 +146,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer { if (hintAudits.length) { const maxWaste = Math.max(...hintAudits.map(audit => audit.result.rawValue)); const scale = Math.ceil(maxWaste / 1000) * 1000; - const hintAuditsEl = this._renderAuditGroup(groups['perf-hint'], {expandable: false}); + const hintAuditsEl = this.renderAuditGroup(groups['perf-hint'], {expandable: false}); hintAudits.forEach(item => hintAuditsEl.appendChild(this._renderPerfHintAudit(item, scale))); hintAuditsEl.open = true; element.appendChild(hintAuditsEl); @@ -157,8 +155,8 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const infoAudits = category.audits .filter(audit => audit.group === 'perf-info' && audit.score < 100); if (infoAudits.length) { - const infoAuditsEl = this._renderAuditGroup(groups['perf-info'], {expandable: false}); - infoAudits.forEach(item => infoAuditsEl.appendChild(this._renderAudit(item))); + const infoAuditsEl = this.renderAuditGroup(groups['perf-info'], {expandable: false}); + infoAudits.forEach(item => infoAuditsEl.appendChild(this.renderAudit(item))); infoAuditsEl.open = true; element.appendChild(infoAuditsEl); } @@ -166,11 +164,11 @@ class PerformanceCategoryRenderer extends CategoryRenderer { const passedElements = category.audits .filter(audit => (audit.group === 'perf-hint' || audit.group === 'perf-info') && audit.score === 100) - .map(audit => this._renderAudit(audit)); + .map(audit => this.renderAudit(audit)); if (!passedElements.length) return element; - const passedElem = this._renderPassedAuditsSection(passedElements); + const passedElem = this.renderPassedAuditsSection(passedElements); element.appendChild(passedElem); return element; } @@ -182,7 +180,6 @@ if (typeof module !== 'undefined' && module.exports) { self.PerformanceCategoryRenderer = PerformanceCategoryRenderer; } - /** * @typedef {{ * value: { diff --git a/lighthouse-core/scripts/compile-against-devtools.sh b/lighthouse-core/scripts/compile-against-devtools.sh index 2d05c425d176..6fa2a33677e0 100644 --- a/lighthouse-core/scripts/compile-against-devtools.sh +++ b/lighthouse-core/scripts/compile-against-devtools.sh @@ -8,14 +8,14 @@ # usage -# yarn compdevtools +# yarn compile-devtools # This the text here will override the renderer/ files in in the scripts[] array: # https://github.com/ChromeDevTools/devtools-frontend/blob/master/front_end/audits2/module.json#L20 # (Currently this doesnt include logger or report-features) -files_to_include="\"lighthouse\/renderer\/util.js\", \"lighthouse\/renderer\/dom.js\", \"lighthouse\/renderer\/category-renderer.js\", \"lighthouse\/renderer\/crc-details-renderer.js\", \"lighthouse\/renderer\/details-renderer.js\", \"lighthouse\/renderer\/report-renderer.js\"," +files_to_include="\"lighthouse\/renderer\/util.js\", \"lighthouse\/renderer\/dom.js\", \"lighthouse\/renderer\/category-renderer.js\", \"lighthouse\/renderer\/performance-category-renderer.js\", \"lighthouse\/renderer\/crc-details-renderer.js\", \"lighthouse\/renderer\/details-renderer.js\", \"lighthouse\/renderer\/report-renderer.js\"," # ----------------------------- diff --git a/lighthouse-core/test/report/v2/renderer/category-renderer-test.js b/lighthouse-core/test/report/v2/renderer/category-renderer-test.js index 28d9f001f58c..afc4b134fdf9 100644 --- a/lighthouse-core/test/report/v2/renderer/category-renderer-test.js +++ b/lighthouse-core/test/report/v2/renderer/category-renderer-test.js @@ -43,7 +43,7 @@ describe('CategoryRenderer', () => { it('renders an audit', () => { const audit = sampleResults.reportCategories[0].audits[0]; - const auditDOM = renderer._renderAudit(audit); + const auditDOM = renderer.renderAudit(audit); const title = auditDOM.querySelector('.lh-score__title'); const description = auditDOM.querySelector('.lh-score__description'); @@ -57,20 +57,20 @@ describe('CategoryRenderer', () => { }); it('renders an audit debug str when appropriate', () => { - const audit1 = renderer._renderAudit({ + const audit1 = renderer.renderAudit({ scoringMode: 'binary', score: 0, result: {helpText: 'help text', debugString: 'Debug string', description: 'Audit title'}, }); assert.ok(audit1.querySelector('.lh-debug')); - const audit2 = renderer._renderAudit({ + const audit2 = renderer.renderAudit({ scoringMode: 'binary', score: 0, result: {helpText: 'help text', description: 'Audit title'}, }); assert.ok(!audit2.querySelector('.lh-debug')); }); it('renders an informative audit', () => { - const auditDOM = renderer._renderAudit({ + const auditDOM = renderer.renderAudit({ id: 'informative', score: 0, result: {description: 'It informs', helpText: 'help text', informative: true}, }); @@ -213,10 +213,10 @@ describe('CategoryRenderer', () => { }); it('can set a custom templateContext', () => { - assert.equal(renderer._templateContext, renderer._dom.document()); + assert.equal(renderer.templateContext, renderer.dom.document()); const otherDocument = jsdom.jsdom(TEMPLATE_FILE); renderer.setTemplateContext(otherDocument); - assert.equal(renderer._templateContext, otherDocument); + assert.equal(renderer.templateContext, otherDocument); }); });