From 931eafed755806449ab674a8fcf6222d98a1a724 Mon Sep 17 00:00:00 2001 From: Paul Irish Date: Fri, 11 Jan 2019 10:58:08 -0800 Subject: [PATCH] report: celebrate your all 100's with fireworks (#5455) --- .../report/html/renderer/report-renderer.js | 9 ++ .../html/renderer/report-ui-features.js | 10 ++- lighthouse-core/report/html/templates.html | 90 ++++++++++++++++++- .../html/renderer/report-renderer-test.js | 19 ++++ 4 files changed, 122 insertions(+), 6 deletions(-) diff --git a/lighthouse-core/report/html/renderer/report-renderer.js b/lighthouse-core/report/html/renderer/report-renderer.js index 8b9559fa4814..72f1711fd526 100644 --- a/lighthouse-core/report/html/renderer/report-renderer.js +++ b/lighthouse-core/report/html/renderer/report-renderer.js @@ -206,6 +206,15 @@ class ReportRenderer { categories.appendChild(renderer.render(category, report.categoryGroups)); } + // Fireworks + const scoresAll100 = report.reportCategories.every(cat => cat.score === 1); + if (scoresAll100) { + headerContainer.classList.add('score100'); + this._dom.find('.lh-header', headerContainer).addEventListener('click', _ => { + headerContainer.classList.toggle('fireworks-paused'); + }); + } + if (scoreHeader) { const defaultGauges = []; const customGauges = []; diff --git a/lighthouse-core/report/html/renderer/report-ui-features.js b/lighthouse-core/report/html/renderer/report-ui-features.js index 16b1fd3f83db..bfc1b627c526 100644 --- a/lighthouse-core/report/html/renderer/report-ui-features.js +++ b/lighthouse-core/report/html/renderer/report-ui-features.js @@ -241,10 +241,12 @@ class ReportUIFeatures { scoreShadow.style.transform = `scaleY(${1 - scrollPct * 0.2})`; // Fade & move the scorescale - const scoreScalePositionDelta = 32; - const scoreScale = this._dom.find('.lh-scorescale', scoresContainer); - scoreScale.style.opacity = `${1 - scrollPct}`; - scoreScale.style.transform = `translateY(${scrollPct * -scoreScalePositionDelta}px)`; + try { + const scoreScalePositionDelta = 32; + const scoreScale = this._dom.find('.lh-scorescale', scoresContainer); + scoreScale.style.opacity = `${1 - scrollPct}`; + scoreScale.style.transform = `translateY(${scrollPct * -scoreScalePositionDelta}px)`; + } catch (e) {} // Move the toolbar & export this.toolbar.style.transform = `translateY(${heightDiff * scrollPct}px)`; diff --git a/lighthouse-core/report/html/templates.html b/lighthouse-core/report/html/templates.html index b7ac009867f5..1f90384b387d 100644 --- a/lighthouse-core/report/html/templates.html +++ b/lighthouse-core/report/html/templates.html @@ -177,6 +177,7 @@ top: 0; width: 100%; will-change: transform; + contain: strict; } .lh-lighthouse { position: absolute; @@ -366,8 +367,91 @@ 77.0001% { transform: translateX(195px); } 100% { transform: translateX(0px); } } */ + + .score100 .lh-header-bg { + background-color: hsl(234, 64%, 19%); + } + .score100 .lh-metadata, .score100 .lh-toolbar__metadata, .score100 .lh-product-info { + color: #fff; + } + .score100 .lh-config { + color: #eee; + } + + /* CSS Fireworks. Originally by Eddie Lin + https://codepen.io/paulirish/pen/yEVMbP + */ + .pyro { + display: none; + } + .score100 .pyro { + display: block; + } + .score100 .lh-lighthouse stop:first-child { + stop-color: hsla(200, 12%, 95%, 0); + } + .score100 .lh-lighthouse stop:last-child { + stop-color: hsla(65, 81%, 76%, 1); + } + + .pyro > .before, .pyro > .after { + position: absolute; + width: 5px; + height: 5px; + border-radius: 2.5px; + box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff; + animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; + animation-delay: 1s, 1s, 1s; + } + + .pyro > .after { + animation-delay: 2.25s, 2.25s, 2.25s; + animation-duration: 1.25s, 1.25s, 6.25s; + } + .fireworks-paused .pyro > div { + animation-play-state: paused; + } + + @keyframes bang { + to { + box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47; + } + } + @keyframes gravity { + to { + transform: translateY(80px); + opacity: 0; + } + } + @keyframes position { + 0%, 19.9% { + margin-top: 4%; + margin-left: 47%; + } + 20%, 39.9% { + margin-top: 7%; + margin-left: 30%; + } + 40%, 59.9% { + margin-top: 6%; + margin-left: 70%; + } + 60%, 79.9% { + margin-top: 3%; + margin-left: 20%; + } + 80%, 99.9% { + margin-top: 3%; + margin-left: 80%; + } + } -
+
+
+
+
+
+
@@ -384,12 +468,14 @@ + - + + diff --git a/lighthouse-core/test/report/html/renderer/report-renderer-test.js b/lighthouse-core/test/report/html/renderer/report-renderer-test.js index 2609dbc44038..478d8dd8104e 100644 --- a/lighthouse-core/test/report/html/renderer/report-renderer-test.js +++ b/lighthouse-core/test/report/html/renderer/report-renderer-test.js @@ -81,6 +81,8 @@ describe('ReportRenderer', () => { assert.ok(output.querySelector('.lh-report'), 'has report body'); assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length, sampleResults.reportCategories.length * 2, 'renders category gauges'); + // no fireworks + assert.ok(output.querySelector('.score100') === null, 'has no fireworks treatment'); }); it('renders additional reports by replacing the existing one', () => { @@ -180,6 +182,23 @@ describe('ReportRenderer', () => { assert.equal(renderer._templateContext, otherDocument); }); + it('should render an all 100 report with fireworks', () => { + const container = renderer._dom._document.body; + + sampleResults.reportCategories.forEach(element => { + element.score = 1; + }); + + const output = renderer.renderReport(sampleResults, container); + // standard checks + assert.ok(output.querySelector('.lh-header-sticky'), 'has a header'); + assert.ok(output.querySelector('.lh-report'), 'has report body'); + assert.equal(output.querySelectorAll('.lh-gauge__wrapper, .lh-gauge--pwa__wrapper').length, + sampleResults.reportCategories.length * 2, 'renders category gauges'); + // fireworks! + assert.ok(output.querySelector('.score100'), 'has fireworks treatment'); + }); + it('renders `not_applicable` audits as `notApplicable`', () => { const clonedSampleResult = JSON.parse(JSON.stringify(sampleResultsOrig));