diff --git a/lib/plugins/html/templates/url/cpu/index.pug b/lib/plugins/html/templates/url/cpu/index.pug
index aaa43703ce..f18cdddbe7 100644
--- a/lib/plugins/html/templates/url/cpu/index.pug
+++ b/lib/plugins/html/templates/url/cpu/index.pug
@@ -4,53 +4,52 @@
if cpu
small
- ||
if cpu.longTasks
- a(href='#long-tasks') CPU Long Tasks
- | |
+ a(href='#long-tasks') CPU Long Tasks
+ | |
if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined
- a(href='#first-input-delay') First Input Delay
- | |
+ a(href='#first-input-delay') First Input Delay
+ | |
if cpu.categories
- a(href='#cpu-time-spent') CPU Time Spent
- | |
+ a(href='#cpu-time-spent') CPU Time Spent
+ | |
if cpu.urls && cpu.urls.length > 0
- a(href='#cpu-time-spent-per-request') CPU Time Spent Per Request
- | |
+ 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(href='#cpu-time-per-tool') CPU Time Per Tool/Domain
+ | |
- a#cpu
- h2 CPU
+a#cpu
+h2 CPU
- if cpu.events && !options.browsertime.enableProfileRun
- p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome.
- .downloads
- 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 trace log
+if cpu && cpu.events && !options.browsertime.enableProfileRun
+ p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome.
+ .downloads
+ 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 trace log
- if options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler && options.browser === 'firefox' && !options.browsertime.enableProfileRun
+if options.browsertime && options.browsertime.firefox && options.browsertime.firefox.geckoProfiler && options.browser === 'firefox' && !options.browsertime.enableProfileRun
+ p Download the Firefox Geckoprofiler trace and drag and drop it into
+ a(href='https://profiler.firefox.com') https://profiler.firefox.com
+ .downloads
+ - const tracePath = 'data/geckoProfile-' + (runNumber? runNumber : 1) + '.json.gz'
+ a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download trace
+
+if options.browsertime && options.browsertime.enableProfileRun
+ if options.browser === 'firefox'
p Download the Firefox Geckoprofiler trace and drag and drop it into
a(href='https://profiler.firefox.com') https://profiler.firefox.com
.downloads
- - const tracePath = 'data/geckoProfile-' + (runNumber? runNumber : 1) + '.json.gz'
- a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download trace
-
- if options.browsertime && options.browsertime.enableProfileRun
- if options.browser === 'firefox'
- p Download the Firefox Geckoprofiler trace and drag and drop it into
- a(href='https://profiler.firefox.com') https://profiler.firefox.com
- .downloads
- - const tracePath = 'data/geckoProfile-1-extra.json.gz'
- a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download extra run trace log
- else if options.browser === 'chrome'
- p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome.
- - const tracePath = 'data/trace-1-extra-run.json.gz'
- a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download extra run trace log
+ - const tracePath = 'data/geckoProfile-1-extra.json.gz'
+ a.button.button-download(href=tracePath, download=downloadName + '-geckoProfile.json.gz') Download extra run trace log
+ else if options.browser === 'chrome'
+ p Download the Chrome trace log and drag and drop it into Developer Tools / Performance in Chrome.
+ - const tracePath = 'data/trace-1-extra-run.json.gz'
+ a.button.button-download(href=tracePath, download=downloadName + '-timeline.json.gz') Download extra run trace log
- if cpu.longTasks
+if cpu && 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.
@@ -109,81 +108,79 @@ if cpu
td #{task.attribution[0].containerId}
td #{task.attribution[0].containerName}
td.url.assetsurl #{task.attribution[0].containerSrc}
- td #{task.attribution[0].containerType}
- else
- p No long tasks on the page!
+ td #{task.attribution[0].containerType}
- if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined
- a#first-input-delay
- h3 First Input Delay
- table
- tr
- th Name
- th Delay
- th Duration
- th Start Time
- th Processing Start
- th Processing End
- tr
- td #{browsertime.timings.firstInput.name}
- td #{h.time.ms(browsertime.timings.firstInput.delay)}
- td #{h.time.ms(browsertime.timings.firstInput.duration)}
- td #{h.time.ms(browsertime.timings.firstInput.startTime)}
- td #{h.time.ms(browsertime.timings.firstInput.processingStart)}
- td #{h.time.ms(browsertime.timings.firstInput.processingEnd)}
+if browsertime && browsertime.timings && browsertime.timings.firstInput !== undefined
+ a#first-input-delay
+ h3 First Input Delay
+ table
+ tr
+ th Name
+ th Delay
+ th Duration
+ th Start Time
+ th Processing Start
+ th Processing End
+ tr
+ td #{browsertime.timings.firstInput.name}
+ td #{h.time.ms(browsertime.timings.firstInput.delay)}
+ td #{h.time.ms(browsertime.timings.firstInput.duration)}
+ td #{h.time.ms(browsertime.timings.firstInput.startTime)}
+ td #{h.time.ms(browsertime.timings.firstInput.processingStart)}
+ td #{h.time.ms(browsertime.timings.firstInput.processingEnd)}
- if cpu.categories
- a#cpu-time-spent
- h3 CPU time spent
- p Calculated using Tracium.
+if cpu && cpu.categories
+ a#cpu-time-spent
+ h3 CPU time spent
+ p Calculated using Tracium.
- .row
- .one-half.column
- if cpu.categories
- table
+ .row
+ .one-half.column
+ if cpu.categories
+ table
+ tr
+ th(colspan='2') Categories (ms)
+ each value, name in cpu.categories
tr
- th(colspan='2') Categories (ms)
- each value, name in cpu.categories
- tr
- td #{name}
- td #{value.toFixed(0)}
- .one-half.column
- if cpu.events
- table
+ td #{name}
+ td #{value.toFixed(0)}
+ .one-half.column
+ if cpu.events
+ table
+ tr
+ th(colspan='2') Events (ms)
+ - const cpuEvents = []
+ - for (let key of Object.keys(cpu.events)) {cpuEvents.push({name: key, value: cpu.events[key] })}
+ - cpuEvents.sort((a,b)=>{return b.value - a.value})
+ each event in cpuEvents
tr
- th(colspan='2') Events (ms)
- - const cpuEvents = []
- - for (let key of Object.keys(cpu.events)) {cpuEvents.push({name: key, value: cpu.events[key] })}
- - cpuEvents.sort((a,b)=>{return b.value - a.value})
- each event in cpuEvents
- tr
- td #{event.name}
- td #{event.value.toFixed(0)}
+ td #{event.name}
+ td #{event.value.toFixed(0)}
- if cpu.urls && cpu.urls.length > 0
- a#cpu-time-spent-per-request
- h3 Time spent per request
- table
+ if cpu.urls && cpu.urls.length > 0
+ a#cpu-time-spent-per-request
+ h3 Time spent per request
+ table
+ tr
+ th URL
+ th CPU time (ms)
+ each data in cpu.urls
tr
- th URL
- th CPU time (ms)
- each data in cpu.urls
- tr
- td.url.assetsurl
- a(href=data.url)= data.url
- td #{data.value.toFixed(0)}
+ td.url.assetsurl
+ a(href=data.url)= data.url
+ td #{data.value.toFixed(0)}
- if pageInfo.data.thirdparty
- - const thirdparty = medianRun ? pageInfo.data.thirdparty.pageSummary.runs[medianRun.runIndex - 1] : pageInfo.data.thirdparty.run
+ if pageInfo.data.thirdparty
+ - 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
- th Tool/domain
- th Time (ms)
- each tool in Object.keys(thirdparty.cpuPerTool)
- tr
- td #{tool}
- td.number #{thirdparty.cpuPerTool[tool].toFixed(1)}
+ if thirdparty && thirdparty.cpuPerTool && Object.keys(thirdparty.cpuPerTool).length > 0
+ a#cpu-time-per-tool
+ h3 CPU time spent
+ table
+ tr
+ th Tool/domain
+ th Time (ms)
+ each tool in Object.keys(thirdparty.cpuPerTool)
+ tr
+ td #{tool}
+ td.number #{thirdparty.cpuPerTool[tool].toFixed(1)}