From 76c0ba19c813e66e6c59f39d59091449c52b934d Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 25 Apr 2018 15:00:19 -0700 Subject: [PATCH 1/3] driveby nodeTimings --- .../gather/computed/metrics/lantern-consistently-interactive.js | 2 +- .../gather/computed/metrics/lantern-first-cpu-idle.js | 2 +- lighthouse-core/gather/computed/metrics/lantern-speed-index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js b/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js index 4687734c5d9c..86a96135a1b0 100644 --- a/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js +++ b/lighthouse-core/gather/computed/metrics/lantern-consistently-interactive.js @@ -94,7 +94,7 @@ class ConsistentlyInteractive extends MetricArtifact { } /** - * @param {Map} nodeTimings + * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings * @return {number} */ static getLastLongTaskEndTime(nodeTimings, duration = 50) { diff --git a/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js b/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js index b7aea76615af..b594b48bcb64 100644 --- a/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js +++ b/lighthouse-core/gather/computed/metrics/lantern-first-cpu-idle.js @@ -35,7 +35,7 @@ class LanternFirstCPUIdle extends LanternConsistentlyInteractive { /** * - * @param {Map} nodeTimings + * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings * @param {number} fmpTimeInMs */ static getFirstCPUIdleWindowStart(nodeTimings, fmpTimeInMs, longTaskLength = 50) { diff --git a/lighthouse-core/gather/computed/metrics/lantern-speed-index.js b/lighthouse-core/gather/computed/metrics/lantern-speed-index.js index 472688050317..cb718b7ffe27 100644 --- a/lighthouse-core/gather/computed/metrics/lantern-speed-index.js +++ b/lighthouse-core/gather/computed/metrics/lantern-speed-index.js @@ -84,7 +84,7 @@ class SpeedIndex extends MetricArtifact { * different methods. Read more in the evaluation doc. * * @see https://docs.google.com/document/d/1qJWXwxoyVLVadezIp_Tgdk867G3tDNkkVRvUJSH3K1E/edit# - * @param {Map} nodeTimings + * @param {LH.Gatherer.Simulation.Result['nodeTimings']} nodeTimings * @param {number} fcpTimeInMs * @return {number} */ From 3efe214f4d7001d4e0cc2997ba7d1fc50442c430 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Wed, 25 Apr 2018 19:01:01 -0700 Subject: [PATCH 2/3] reasonable DOM for audits --- .../report/html/renderer/category-renderer.js | 32 +++------ lighthouse-core/report/html/report-styles.css | 67 ++++++------------- .../report/html/report-template.html | 4 +- lighthouse-core/report/html/templates.html | 60 ++++++++--------- .../html/renderer/category-renderer-test.js | 30 ++++----- .../test/report/html/renderer/dom-test.js | 6 +- .../performance-category-renderer-test.js | 6 +- lighthouse-extension/test/extension-test.js | 2 +- 8 files changed, 84 insertions(+), 123 deletions(-) diff --git a/lighthouse-core/report/html/renderer/category-renderer.js b/lighthouse-core/report/html/renderer/category-renderer.js index f9b11945af4e..cbd43ed83eab 100644 --- a/lighthouse-core/report/html/renderer/category-renderer.js +++ b/lighthouse-core/report/html/renderer/category-renderer.js @@ -27,8 +27,9 @@ class CategoryRenderer { * @param {!ReportRenderer.AuditJSON} audit * @return {!Element} */ - _renderAuditScore(audit) { - const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit-score', this.templateContext); + renderAudit(audit) { + const tmpl = this.dom.cloneTemplate('#tmpl-lh-audit', this.templateContext); + const auditEl = this.dom.find('.lh-audit', tmpl); const scoreDisplayMode = audit.result.scoreDisplayMode; const description = audit.result.helpText; @@ -39,25 +40,24 @@ class CategoryRenderer { } if (audit.result.debugString) { - const debugStrEl = tmpl.appendChild(this.dom.createElement('div', 'lh-debug')); + const debugStrEl = auditEl.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-audit__header', auditEl)); if (audit.result.details && audit.result.details.type) { header.appendChild(this.detailsRenderer.render(audit.result.details)); } - const scoreEl = this.dom.find('.lh-score', tmpl); if (audit.result.informative) { - scoreEl.classList.add('lh-score--informative'); + auditEl.classList.add('lh-audit--informative'); } if (audit.result.manual) { - scoreEl.classList.add('lh-score--manual'); + auditEl.classList.add('lh-audit--manual'); } - return this._populateScore(tmpl, audit.result.score, scoreDisplayMode, title, description); + return this._populateScore(auditEl, audit.result.score, scoreDisplayMode, title, description); } /** @@ -76,9 +76,9 @@ class CategoryRenderer { valueEl.classList.add(`lh-score__value--${Util.calculateRating(score)}`, `lh-score__value--${scoreDisplayMode}`); - this.dom.find('.lh-score__title', element).appendChild( + this.dom.find('.lh-audit__title, .lh-category-header__title', element).appendChild( this.dom.convertMarkdownCodeSnippets(title)); - this.dom.find('.lh-score__description', element) + this.dom.find('.lh-audit__description, .lh-category-header__description', element) .appendChild(this.dom.convertMarkdownLinkSnippets(description)); return /** @type {!Element} **/ (element); @@ -89,7 +89,7 @@ class CategoryRenderer { * @return {!Element} */ renderCategoryScore(category) { - const tmpl = this.dom.cloneTemplate('#tmpl-lh-category-score', this.templateContext); + const tmpl = this.dom.cloneTemplate('#tmpl-lh-category-header', this.templateContext); const gaugeContainerEl = this.dom.find('.lh-score__gauge', tmpl); const gaugeEl = this.renderScoreGauge(category); @@ -99,16 +99,6 @@ class CategoryRenderer { return this._populateScore(tmpl, score, 'numeric', name, description); } - /** - * @param {!ReportRenderer.AuditJSON} audit - * @return {!Element} - */ - renderAudit(audit) { - const element = this.dom.createElement('div', 'lh-audit'); - element.appendChild(this._renderAuditScore(audit)); - return element; - } - /** * Renders the group container for a group of audits. Individual audit elements can be added * directly to the returned element. diff --git a/lighthouse-core/report/html/report-styles.css b/lighthouse-core/report/html/report-styles.css index 465c6ab2d171..b00f2491ff1b 100644 --- a/lighthouse-core/report/html/report-styles.css +++ b/lighthouse-core/report/html/report-styles.css @@ -181,13 +181,8 @@ summary { /* Score */ -.lh-score { - display: flex; - align-items: flex-start; -} - .lh-score__value { - flex: none; + float: right; margin-left: var(--lh-score-margin); width: calc(var(--lh-audit-score-width) - var(--lh-score-margin)); position: relative; @@ -206,19 +201,19 @@ summary { width: 16px; } -.lh-score--informative .lh-score__value { +.lh-audit--informative .lh-score__value { color: var(--informative-color); border-radius: 50%; top: 3px; } -.lh-score--informative .lh-score__value::after { +.lh-audit--informative .lh-score__value::after { display: none; background: url('data:image/svg+xml;utf8,info') no-repeat 50% 50%; background-size: var(--lh-score-icon-background-size); } -.lh-score--manual .lh-score__value::after { +.lh-audit--manual .lh-score__value::after { background: url('data:image/svg+xml;utf8,manual') no-repeat 50% 50%; background-size: 18px; background-color: var(--medium-75-gray); @@ -267,23 +262,13 @@ summary { background: var(--fail-icon-url) no-repeat center center / 12px 12px; } -.lh-score__description { +.lh-audit__description, .lh-category-header__description { font-size: var(--body-font-size); color: var(--secondary-text-color); line-height: var(--body-line-height); } -.lh-score__snippet { - align-items: center; - justify-content: space-between; - /*outline: none;*/ -} - -.lh-score__snippet::-moz-list-bullet { - display: none; -} - -.lh-score__title { +.lh-audit__title { flex: 1; } @@ -307,11 +292,6 @@ summary { /* Expandable Details (Audit Groups, Audits) */ -.lh-score__header { - order: -1; - flex: 1; -} - .lh-expandable-details { padding-left: var(--expandable-indent); } @@ -333,7 +313,7 @@ summary { display: none; } -.lh-score__snippet .lh-toggle-arrow { +.lh-audit__header .lh-toggle-arrow { margin-top: calc((var(--body-line-height) - 12px) / 2); } @@ -606,16 +586,13 @@ summary { margin-bottom: var(--lh-audit-vpadding); padding-top: var(--lh-audit-vpadding); border-top: 1px solid var(--report-secondary-border-color); + font-size: var(--body-font-size); } .lh-audit:last-of-type { border-bottom: none; } -.lh-audit > .lh-score { - font-size: var(--body-font-size); -} - .lh-audit .lh-debug { margin-left: var(--expandable-indent); margin-right: var(--lh-audit-score-width); @@ -774,6 +751,8 @@ summary { } .lh-category { + --circle-size: calc(2.5 * var(--header-font-size)); + padding: var(--section-padding); border-top: 1px solid var(--report-border-color); } @@ -792,32 +771,27 @@ summary { border: none; } -.lh-category > .lh-score { +.lh-category-header { font-size: var(--header-font-size); - padding-bottom: var(--lh-section-vpadding); + min-height: var(--circle-size); + margin-bottom: var(--lh-section-vpadding); } -.lh-category > .lh-score .lh-score__value, -.lh-category > .lh-score .lh-score__gauge .lh-gauge__label { +.lh-category-header .lh-score__value, +.lh-category-header .lh-score__gauge .lh-gauge__label { display: none; } -.lh-category .lh-score__gauge { - margin-left: var(--section-indent); - flex-basis: var(--circle-size); - flex-shrink: 0; -} -.lh-category .lh-score__gauge .lh-gauge { - --circle-size: calc(2.5 * var(--header-font-size)); +.lh-category-header .lh-score__gauge { + float: right; } -/* Category snippet shouldnt have pointer cursor. */ -.lh-category > .lh-score .lh-score__snippet { - cursor: initial; +.lh-category .lh-score__gauge { + margin-left: var(--section-indent); } -.lh-category > .lh-score .lh-score__title { +.lh-category-header .lh-audit__title { font-size: var(--header-font-size); line-height: var(--header-line-height); } @@ -998,5 +972,4 @@ summary.lh-passed-audits-summary { 100% { opacity: 1; filter: drop-shadow(1px 0px 1px #aaa) drop-shadow(0px 2px 4px hsla(206, 6%, 25%, 0.15)); } } - /*# sourceURL=report.styles.css */ diff --git a/lighthouse-core/report/html/report-template.html b/lighthouse-core/report/html/report-template.html index bb2eb23d795a..5146d910640b 100644 --- a/lighthouse-core/report/html/report-template.html +++ b/lighthouse-core/report/html/report-template.html @@ -20,7 +20,9 @@
- +