From 88e890999b4f7b3b2b9d6a0bfee81464982d656d Mon Sep 17 00:00:00 2001 From: Peter Hedenskog Date: Tue, 15 Dec 2020 22:42:32 +0100 Subject: [PATCH] Add handy links on all tabs (#3213) --- lib/plugins/crux/pug/index.pug | 16 +++++-- .../html/templates/url/coach/index.pug | 15 +++++++ .../html/templates/url/coach/pageInfo.pug | 2 +- .../html/templates/url/coach/technology.pug | 2 +- lib/plugins/html/templates/url/cpu/index.pug | 26 +++++++++++- .../html/templates/url/filmstrip/index.pug | 6 ++- .../html/templates/url/metrics/index.pug | 42 ++++++++++++++++++- .../html/templates/url/metrics/lcp.pug | 4 +- .../html/templates/url/pagexray/after.pug | 1 + .../html/templates/url/pagexray/console.pug | 1 + .../html/templates/url/pagexray/index.pug | 25 ++++++++++- .../html/templates/url/pagexray/largest.pug | 1 + .../html/templates/url/screenshots/index.pug | 14 +++++-- .../html/templates/url/summary/downloads.pug | 3 +- .../html/templates/url/summary/index.pug | 24 +++++++++++ .../html/templates/url/summary/summaryBox.pug | 1 + .../html/templates/url/summary/tcpdump.pug | 1 + .../templates/url/thirdparty/firstParty.pug | 2 +- .../html/templates/url/thirdparty/index.pug | 25 ++++++++--- .../url/thirdparty/thirdPartyCookies.pug | 1 + .../html/templates/url/video/index.pug | 7 ++++ .../html/templates/url/waterfall/index.pug | 28 ++++++++----- 22 files changed, 213 insertions(+), 34 deletions(-) diff --git a/lib/plugins/crux/pug/index.pug b/lib/plugins/crux/pug/index.pug index 6743d6fe1..7101572fb 100644 --- a/lib/plugins/crux/pug/index.pug +++ b/lib/plugins/crux/pug/index.pug @@ -10,14 +10,21 @@ mixin numberCell(title, number) mixin sizeCell(title, size) td.number(data-title=title, data-value= size)= h.size.format(size) -a -h2 CrUx -p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome. - - const crux = pageInfo.data.crux.pageSummary; - const metrics = {first_contentful_paint:'First Contentful Paint (FCP)', largest_contentful_paint: 'Largest Contentful Paint (LCP)', first_input_delay:'First Input Delay (FID)', cumulative_layout_shift: 'Cumulative Layout Shift'}; - const experiences = ['loadingExperience','originLoadingExperience']; +small + ||  + each experience in experiences + each formFactor in Object.keys(crux[experience]) + a(href='#' + experience + '-' + formFactor) #{experience} #{formFactor} | + |  |  + +a#crux +h2 CrUx +p.small Chrome User Experience Report (CrUx) is powered by real user measurement across the public web, aggregated from users who have opted-in to syncing their browsing history, have not set up a Sync passphrase, and have usage statistic reporting enabled and is using Chrome. + each experience in experiences if experience === 'loadingExperience' && crux[experience] p Over the last 30 days, this is the field data for this page for Chrome users. @@ -28,6 +35,7 @@ each experience in experiences if crux[experience] each formFactor in Object.keys(crux[experience]) if (crux[experience][formFactor] && crux[experience][formFactor].data) + a(id=experience + '-' + formFactor) h3 Form Factor #{formFactor} table thead diff --git a/lib/plugins/html/templates/url/coach/index.pug b/lib/plugins/html/templates/url/coach/index.pug index 077338ec6..25ba5b957 100644 --- a/lib/plugins/html/templates/url/coach/index.pug +++ b/lib/plugins/html/templates/url/coach/index.pug @@ -40,6 +40,21 @@ mixin adviceInfo(name, id, perfectScore, node) - const advice = pageInfo.data.coach.run ? pageInfo.data.coach.run.advice : pageInfo.data.coach.pageSummary.advice; +small + if advice + || + a(href='#coach-perf') Performance advice + |  |  + a(href='#coach-bestpractice') Best practice advice + |  |  + a(href='#coach-privacy') Privacy advice + |  |  + a(href='#page-info') Page info + |  |  + if advice.info.technology && advice.info.technology.length > 0 ||  (advice.info.thirdparty && Object.keys(advice.info.thirdparty.toolsByCategory).length > 0) + a(href='#technology') Technologies + |  |  + h2 Coach p.small a(href='https://github.com/sitespeedio/coach') The coach diff --git a/lib/plugins/html/templates/url/coach/pageInfo.pug b/lib/plugins/html/templates/url/coach/pageInfo.pug index 7c42348da..6ac4a2d57 100644 --- a/lib/plugins/html/templates/url/coach/pageInfo.pug +++ b/lib/plugins/html/templates/url/coach/pageInfo.pug @@ -1,4 +1,4 @@ -a#info +a#page-info h2 Page info .row .one-half.column diff --git a/lib/plugins/html/templates/url/coach/technology.pug b/lib/plugins/html/templates/url/coach/technology.pug index 5c458c638..7e0ad9858 100644 --- a/lib/plugins/html/templates/url/coach/technology.pug +++ b/lib/plugins/html/templates/url/coach/technology.pug @@ -1,4 +1,4 @@ -a#info +a#technology h2 Technologies used to build the page. p Data collected using a(href='https://github.com/AliasIO/wappalyzer') Wappalyzer. diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug index 8f85c7c37..0626b6cba 100644 --- a/lib/plugins/html/templates/url/cpu/index.pug +++ b/lib/plugins/html/templates/url/cpu/index.pug @@ -1,5 +1,24 @@ - const browsertime = medianRun ? (pageInfo.data.browsertime ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1]: undefined) : pageInfo.data.browsertime.run -a + +small + || + if browsertime && browsertime.cpu && browsertime.cpu.longTasks + a(href='#long-tasks') CPU Long Tasks + |  |  + if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined + a(href='#first-input-delay') First Input Delay + |  |  + if browsertime && browsertime.cpu && browsertime.cpu.categories + a(href='#cpu-time-spent') CPU Time Spent + |  |  + if browsertime && browsertime.cpu && browsertime.cpu.urls && browsertime.cpu.urls.length > 0 + a(href='#cpu-time-spent-per-request') CPU Time Spent Per Request + |  |  + if pageInfo.data.thirdparty + a(href='#cpu-time-per-tool') CPU Time Per Tool/Domain + |  |  + +a#cpu h2 CPU if browsertime && browsertime.cpu && browsertime.cpu.events @@ -17,6 +36,7 @@ if options.browsertime && options.browsertime.firefox && options.browsertime.fir a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download trace if browsertime && browsertime.cpu && browsertime.cpu.longTasks + a#long-tasks h3 Long Tasks p Collected using the Long Task API. A long task is a task that take 50 milliseconds or more. if browsertime.cpu.longTasks.tasks > 0 @@ -75,6 +95,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.longTasks p No long tasks on the page! if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined + a#first-input-delay h3 First Input Delay table tr @@ -93,6 +114,7 @@ if browsertime && browsertime.timings && browsertime.timings.firstInput !== unde td #{h.time.ms(browsertime.timings.firstInput.processingEnd)} if browsertime && browsertime.cpu && browsertime.cpu.categories + a#cpu-time-spent h3 CPU time spent p Calculated using Tracium. @@ -120,6 +142,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.categories td #{event.value.toFixed(0)} if browsertime && browsertime.cpu && browsertime.cpu.urls && browsertime.cpu.urls.length > 0 + a#cpu-time-spent-per-request h3 Time spent per request table tr @@ -135,6 +158,7 @@ if browsertime && browsertime.cpu && browsertime.cpu.categories - const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run if thirdparty && thirdparty.cpuPerTool && Object.keys(thirdparty.cpuPerTool).length > 0 + a#cpu-time-per-tool h3 CPU time spent table tr diff --git a/lib/plugins/html/templates/url/filmstrip/index.pug b/lib/plugins/html/templates/url/filmstrip/index.pug index ba8a42a9e..a35547c9f 100644 --- a/lib/plugins/html/templates/url/filmstrip/index.pug +++ b/lib/plugins/html/templates/url/filmstrip/index.pug @@ -7,7 +7,11 @@ mixin frame(filmstrip, iteration) span.videoframetext !{timing.name ? timing.name : timing.metric} b  #{h.time.ms(timing.duration || timing.value)} -a +small + || + a(href='#filmstrip') Filmstrip + |  |  +a#filmstrip h2 Filmstrip - const videoIndex = medianRun ? medianRun.runIndex : iteration; diff --git a/lib/plugins/html/templates/url/metrics/index.pug b/lib/plugins/html/templates/url/metrics/index.pug index b2b561032..2da12a3a3 100644 --- a/lib/plugins/html/templates/url/metrics/index.pug +++ b/lib/plugins/html/templates/url/metrics/index.pug @@ -1,8 +1,46 @@ - const browsertime = medianRun ? pageInfo.data.browsertime.pageSummary.browserScripts[medianRun.runIndex - 1] : pageInfo.data.browsertime.run -if browsertime +if browsertime - const timings = browsertime.timings; - const visualMetrics = browsertime.visualMetrics; + small + | | + a(href='#browsermetrics') Browser metrics + |  |  + if (options.browsertime.visualMetrics) + a(href='#visualmetrics') Visual Metrics + |  |  + if timings.largestContentfulPaint + a(href='#largestContentfulPaint') Largest Contentful Paint + |  |  + if browsertime.pageinfo && browsertime.pageinfo.layoutShift !== undefined + a(href='#layoutShift') Cumulative Layout Shift + |  |  + if browsertime.timings.elementTimings && Object.keys(browsertime.timings.elementTimings).length > 0 + a(href='#elementTimings') Element Timings + |  |  + if browsertime.custom + a(href='#custom-scripts') Custom scripts + |  |  + if browsertime.extras && Object.keys(browsertime.extras).length > 0 + a(href='#extra-metrics') Extra metrics + |  |  + if options.browsertime.visualElements + a(href='#visual-elements') Visual Elements + |  |  + if options.browsertime.visualElements + a(href='#visual-elements') Visual Elements + |  |  + if browsertime.timings.firstInput !== undefined + a(href='#firstInput') First Input Delay + |  |  + if browsertime.cdp && browsertime.cdp.performance + a(href='#cdp-performance') Metrics from CDP + |  |  + if timings.serverTimings && timings.serverTimings.length > 0 + a(href='#server-timings') Server timings + |  |  + - baseHelpURL = rootPath + 'help.html#'; - const defaultVisualMetrics = ['SpeedIndex','FirstVisualChange','LastVisualChange','VisualProgress', 'PerceptualSpeedIndexProgress', 'ContentfulSpeedIndexProgress', 'videoRecordingStart', 'PerceptualSpeedIndex', 'ContentfulSpeedIndex', 'LastMeaningfulPaint', 'LargestImage', 'Heading' ,'VisualReadiness','VisualComplete85', 'VisualComplete95','VisualComplete99']; @@ -202,7 +240,7 @@ if browsertime else p There are no custom configured scripts. - a#extras-metrics + a#extra-metrics h3 Extra metrics collected using scripting if browsertime.extras && Object.keys(browsertime.extras).length > 0 table diff --git a/lib/plugins/html/templates/url/metrics/lcp.pug b/lib/plugins/html/templates/url/metrics/lcp.pug index 9451e2087..6ddb3c88b 100644 --- a/lib/plugins/html/templates/url/metrics/lcp.pug +++ b/lib/plugins/html/templates/url/metrics/lcp.pug @@ -21,7 +21,9 @@ if timings.largestContentfulPaint td #{timings.largestContentfulPaint.id} if timings.largestContentfulPaint.url !== '' td - a(href=timings.largestContentfulPaint.url) #{timings.largestContentfulPaint.url} + a(href=timings.largestContentfulPaint.url) + img.screenshot(src=timings.largestContentfulPaint.url, alt='LCP', style='width:200px') + | #{timings.largestContentfulPaint.url} if timings.largestContentfulPaint.tagName td #{timings.largestContentfulPaint.tagName} td #{h.time.ms(timings.largestContentfulPaint.renderTime)} diff --git a/lib/plugins/html/templates/url/pagexray/after.pug b/lib/plugins/html/templates/url/pagexray/after.pug index b7840755d..a387e1afb 100644 --- a/lib/plugins/html/templates/url/pagexray/after.pug +++ b/lib/plugins/html/templates/url/pagexray/after.pug @@ -1,4 +1,5 @@ if pagexray.afterOnLoad.requests > 0 + a#requests-after-onload h3 Requests loaded after onLoad event table(data-sortable, id='contentSizeAfterOnload') +rowHeading(['Content', 'Transfer Size', 'Requests']) diff --git a/lib/plugins/html/templates/url/pagexray/console.pug b/lib/plugins/html/templates/url/pagexray/console.pug index abcdf17c3..5db93380e 100644 --- a/lib/plugins/html/templates/url/pagexray/console.pug +++ b/lib/plugins/html/templates/url/pagexray/console.pug @@ -1,5 +1,6 @@ h3 Console log if pageInfo.data.browsertime.console.length > 0 + a#console-log p The page logs the following messages to the console. .responsive table diff --git a/lib/plugins/html/templates/url/pagexray/index.pug b/lib/plugins/html/templates/url/pagexray/index.pug index 9c905b908..8501358ca 100644 --- a/lib/plugins/html/templates/url/pagexray/index.pug +++ b/lib/plugins/html/templates/url/pagexray/index.pug @@ -1,8 +1,29 @@ include ../../_tableMixins +- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary; + +small + || + a(href='#pagexray-summary') Summary | + |  |  + a(href='#largest-assets') Largest responses | + |  |  + a(href='#requests-and-sizes-per-content-type') Requests and sizes per content type | + |  |  + a(href='#sizes-per-domain') Size and requests per domain | + |  |  + a(href='#expires-and-last-modified-stats') Expires and last modified statistics | + |  |  + if pageInfo.data.browsertime && pageInfo.data.browsertime.console + a(href='#console-log') Console log | + |  |  + if pagexray.afterOnLoad.requests > 0 + a(href='#requests-after-onload') Requests loaded after onLoad event | + |  |  + +h3 a h2 PageXray -- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary; p.small How the page is built. a#pagexray-summary .row @@ -49,7 +70,7 @@ include ./perContentType.pug include ./perDomain.pug a#expires-and-last-modified-stats -h3 Expires, last modified and cookies stats +h3 Expires and last modified statistics - expire = pagexray.expireStats - lastModified = pagexray.lastModifiedStats .responsive diff --git a/lib/plugins/html/templates/url/pagexray/largest.pug b/lib/plugins/html/templates/url/pagexray/largest.pug index 762ad3ae7..c885559bd 100644 --- a/lib/plugins/html/templates/url/pagexray/largest.pug +++ b/lib/plugins/html/templates/url/pagexray/largest.pug @@ -3,6 +3,7 @@ include ../../_tableMixins - pagexray.assets.sort(function(a, b){return b.transferSize-a.transferSize}) +a#largest-assets h3 Largest assets on the page (by transfer size) .responsive table(data-sortable, id='largestAssetsOnThePage') diff --git a/lib/plugins/html/templates/url/screenshots/index.pug b/lib/plugins/html/templates/url/screenshots/index.pug index d328d2639..a6b00b8a6 100644 --- a/lib/plugins/html/templates/url/screenshots/index.pug +++ b/lib/plugins/html/templates/url/screenshots/index.pug @@ -1,11 +1,17 @@ -a -h2 Screenshots - if pageInfo.data.browsertime.run && pageInfo.data.browsertime.run.screenshots - each screenshot in pageInfo.data.browsertime.run.screenshots + small + ||  + each screenshot in pageInfo.data.browsertime.run.screenshots + - filename = screenshot.substring(screenshot.lastIndexOf('/') + 1, screenshot.length) + a(href='#' + filename) #{filename} + |  |  + a + h2 Screenshots + each screenshot in pageInfo.data.browsertime.run.screenshots - filename = screenshot.substring(screenshot.lastIndexOf('/') + 1, screenshot.length) - screenshotName = rootPath + screenshot - style = options.mobile || options.android || (options.safari && options.safari.ios) ? 'max-width: 50%' : 'max-width: 100%' + a(id=filename) a(href=screenshotName) img.screenshot(src=screenshotName, alt=filename, style=style) p #{filename} diff --git a/lib/plugins/html/templates/url/summary/downloads.pug b/lib/plugins/html/templates/url/summary/downloads.pug index 63dc6d4e1..a158834c6 100644 --- a/lib/plugins/html/templates/url/summary/downloads.pug +++ b/lib/plugins/html/templates/url/summary/downloads.pug @@ -1,3 +1,4 @@ +a#downloads if options.html.logDownloadLink a.button.button-download(href=rootPath + 'logs/sitespeed.io.log', download) Download run log if options.browsertime.video @@ -6,7 +7,7 @@ if options.browsertime.video if options.browsertime.chrome && options.browsertime.chrome.timeline - const tracePath = 'data/trace-' + (runNumber? runNumber : 1) + '.json.gz' a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download timeline -if d.browsertime && d.browsertime.har +if d.browsertime && d.browsertime.har - const harEnding = options.gzipHAR ? '.har.gz' : '.har' - const harName = 'data/browsertime' + harEnding - const harDownloadName = downloadName + harEnding diff --git a/lib/plugins/html/templates/url/summary/index.pug b/lib/plugins/html/templates/url/summary/index.pug index d713d505d..2be8c1d80 100644 --- a/lib/plugins/html/templates/url/summary/index.pug +++ b/lib/plugins/html/templates/url/summary/index.pug @@ -36,6 +36,29 @@ block content #tabSections section#summary-panel + small + | | + a(href='#summary') Summary | + |  |  + if h.get(pageInfo.data, 'browsertime.pageSummary.statistics') + a#browsertime-timing-statistics + if options.browsertime.tcpdump + a(href='#tcpdump') Download TCP dump + |  |  + if options.html.logDownloadLink + a(href='#downloads') Download log + |  |  + if options.browsertime.video + a(href='#downloads') Download Video + |  |  + if options.browsertime.chrome && options.browsertime.chrome.timeline + a(href='#downloads') Download Timeline Log + |  |  + if d.browsertime && d.browsertime.har + a(href='#downloads') Download HAR + |  |  + + a#summary h2 Summary .row .one-half.column @@ -173,6 +196,7 @@ block content img.screenshot(src='data/screenshots/wpt-1-firstView.png', alt='Screenshot of run 1') include ./summaryBox.pug + #downloads .downloads include ./downloads.pug include ./tcpdump.pug diff --git a/lib/plugins/html/templates/url/summary/summaryBox.pug b/lib/plugins/html/templates/url/summary/summaryBox.pug index b9c0277f1..f0adda61d 100644 --- a/lib/plugins/html/templates/url/summary/summaryBox.pug +++ b/lib/plugins/html/templates/url/summary/summaryBox.pug @@ -45,6 +45,7 @@ mixin getRow(name, object, path, runPath, metric, f) - btStatistics = h.get(pageInfo.data, 'browsertime.pageSummary.statistics') if btStatistics + a#browsertime-timing-statistics h2 Timings Summary - timingMetrics = ['firstPaint', 'loadEventEnd'] .responsive diff --git a/lib/plugins/html/templates/url/summary/tcpdump.pug b/lib/plugins/html/templates/url/summary/tcpdump.pug index b2c0db099..62ddd341d 100644 --- a/lib/plugins/html/templates/url/summary/tcpdump.pug +++ b/lib/plugins/html/templates/url/summary/tcpdump.pug @@ -1,4 +1,5 @@ if options.browsertime.tcpdump + a#tcpdump - const tcpDumpPath = 'data/' + (runNumber? runNumber : 1) + '.pcap' a.button.button-download(href=tcpDumpPath, download) Download tcpdump if process.env.SSLKEYLOGFILE diff --git a/lib/plugins/html/templates/url/thirdparty/firstParty.pug b/lib/plugins/html/templates/url/thirdparty/firstParty.pug index b1d69320a..0d990701d 100644 --- a/lib/plugins/html/templates/url/thirdparty/firstParty.pug +++ b/lib/plugins/html/templates/url/thirdparty/firstParty.pug @@ -1,4 +1,4 @@ -a#first-party +a#first-vs-third h3 First party requests and sizes per content type p Calculated using #{pagexray.firstPartyRegEx} (use code --firstParty diff --git a/lib/plugins/html/templates/url/thirdparty/index.pug b/lib/plugins/html/templates/url/thirdparty/index.pug index e3bdabe81..f4337be15 100644 --- a/lib/plugins/html/templates/url/thirdparty/index.pug +++ b/lib/plugins/html/templates/url/thirdparty/index.pug @@ -1,14 +1,30 @@ include ../../_tableMixins -a +- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary; +- const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run; + +small + || + if thirdparty.category && Object.keys(thirdparty.category).length > 0 + a(href='#third-party-categories') Categories | + |  |  + if thirdparty.assets && Object.keys(thirdparty.assets).length > 0 + a(href='#third-party-tools') Tools | + |  |  + if pagexray.cookieNamesThirdParties.length > 0 + a(href='#third-party-cookies') Cookies | + |  |  + if pagexray.firstParty.requests + a(href='#first-vs-third') First vs third + |  |  +a#third-party +a#third-party-categories h2 Third party p Third party requests categorised by a(href='https://github.com/patrickhulce/third-party-web') Third party web | . -- const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run; - if thirdparty.category && Object.keys(thirdparty.category).length > 0 .row .one-half.column @@ -29,6 +45,7 @@ if thirdparty.category && Object.keys(thirdparty.category).length > 0 +numberCell('Tools', metric.tools ? metric.tools.median :Object.keys(thirdparty.toolsByCategory[category]).length) if thirdparty.assets && Object.keys(thirdparty.assets).length > 0 + a#third-party-tools h3 Third party requests and tools button.hidden-small.button.button--primary(onclick='toggleRow(this);') Show/hide third party URLs table @@ -68,8 +85,6 @@ if thirdparty.possibileMissedThirdPartyDomains && thirdparty.possibileMissedThi tr td #{domain} -- const pagexray = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary; - include ./thirdPartyCookies.pug if pagexray.firstParty.requests diff --git a/lib/plugins/html/templates/url/thirdparty/thirdPartyCookies.pug b/lib/plugins/html/templates/url/thirdparty/thirdPartyCookies.pug index 3fd5321ac..39fb9919f 100644 --- a/lib/plugins/html/templates/url/thirdparty/thirdPartyCookies.pug +++ b/lib/plugins/html/templates/url/thirdparty/thirdPartyCookies.pug @@ -2,6 +2,7 @@ include ../../_tableMixins if pagexray.cookieNamesThirdParties.length > 0 + a#third-party-cookies h3 Third party cookies .responsive diff --git a/lib/plugins/html/templates/url/video/index.pug b/lib/plugins/html/templates/url/video/index.pug index 82e3a2a6a..8861bacde 100644 --- a/lib/plugins/html/templates/url/video/index.pug +++ b/lib/plugins/html/templates/url/video/index.pug @@ -1,6 +1,12 @@ - const videoIndex = medianRun ? medianRun.runIndex : iteration; - const width = options.mobile ? 'max-width: 400px;' : h.get(options, 'browsertime.chrome.android.package') ? 'max-width: 400px;' : 'width: 100%' +small + || + a(href='#video') Video + |  |  + a(href='#download-video') Download + |  |  a#video h3 Video .videoWrapper(style=width) @@ -10,5 +16,6 @@ h3 Video script(src= assetsPath + 'js/video.novtt.min.js') +a#download-video - const videoPath = 'data/video/' + (iteration ? iteration : medianRun.runIndex ) +'.mp4' a.button.button-download(href=videoPath, download=downloadName + '-video.mp4') Download video diff --git a/lib/plugins/html/templates/url/waterfall/index.pug b/lib/plugins/html/templates/url/waterfall/index.pug index 148158960..cd300de46 100644 --- a/lib/plugins/html/templates/url/waterfall/index.pug +++ b/lib/plugins/html/templates/url/waterfall/index.pug @@ -1,15 +1,12 @@ +small + || + a(href='#waterfall') Waterfall | + |  |  + a(href='#download-HAR') Download HAR + |  |  + a#waterfall h3 Waterfall -.downloads - - const harEnding = options.gzipHAR ? '.har.gz' : '.har' - - const harName = 'data/browsertime' + harEnding - - const harDownloadName = downloadName + harEnding - - a.button.button-download(href=harName, download=harDownloadName) Download HAR - if (options.html && options.html.compareURL && options.resultBaseURL) - - const compareURL = options.html.compareURL + '?compare=1&har1=' + context.resultUrls.absoluteSummaryPagePath(daurl) + harName - a.button.button-download(href=compareURL) Compare - //- on the summary page, display which run that was chosen for the HAR if medianRun p.small Run  @@ -28,3 +25,14 @@ if options.html.fetchHARFiles include ./fetchHAR.pug else include ./includeHARinHTML.pug + +a#download-HAR +.downloads + - const harEnding = options.gzipHAR ? '.har.gz' : '.har' + - const harName = 'data/browsertime' + harEnding + - const harDownloadName = downloadName + harEnding + + a.button.button-download(href=harName, download=harDownloadName) Download HAR + if (options.html && options.html.compareURL && options.resultBaseURL) + - const compareURL = options.html.compareURL + '?compare=1&har1=' + context.resultUrls.absoluteSummaryPagePath(daurl) + harName + a.button.button-download(href=compareURL) Compare