diff --git a/lighthouse-core/test/results/sample_v2.json b/lighthouse-core/test/results/sample_v2.json index 6522ddc3cec3..6c8538e8f2bb 100644 --- a/lighthouse-core/test/results/sample_v2.json +++ b/lighthouse-core/test/results/sample_v2.json @@ -8729,6 +8729,8 @@ "throttlingProvided": "Provided by environment", "toplevelWarningsMessage": "There were issues affecting this run of Lighthouse:", "varianceDisclaimer": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics.", + "viewOriginalTraceLabel": "View Original Trace", + "viewTraceLabel": "View Trace", "viewTreemapLabel": "View Treemap", "warningAuditsGroupTitle": "Passed audits but with warnings", "warningHeader": "Warnings: " diff --git a/lighthouse-core/util-commonjs.js b/lighthouse-core/util-commonjs.js index 576bee47c6db..63382e7e4b6f 100644 --- a/lighthouse-core/util-commonjs.js +++ b/lighthouse-core/util-commonjs.js @@ -630,6 +630,10 @@ const UIStrings = { thirdPartyResourcesLabel: 'Show 3rd-party resources', /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */ viewTreemapLabel: 'View Treemap', + /** This label is for a button that will show the user a trace of the page. */ + viewTraceLabel: 'View Trace', + /** This label is for a button that will show the user a trace of the page. */ + viewOriginalTraceLabel: 'View Original Trace', /** Option in a dropdown menu that opens a small, summary report in a print dialog. */ dropdownPrintSummary: 'Print Summary', diff --git a/proto/lighthouse-result.proto b/proto/lighthouse-result.proto index ec94f25e51f7..b344610f5e2e 100644 --- a/proto/lighthouse-result.proto +++ b/proto/lighthouse-result.proto @@ -567,6 +567,12 @@ message I18n { // Label indicating that Lighthouse throttled the page using custom throttling settings. string runtime_custom = 57; + + // This label is for a button that will show the user a trace of the page. + string view_trace_label = 58; + + // This label is for a button that will show the user a trace of the page. + string view_original_trace_label = 59; } // The message holding all formatted strings used in the renderer. diff --git a/report/renderer/report-ui-features.js b/report/renderer/report-ui-features.js index 2076b0101807..55803fe58f75 100644 --- a/report/renderer/report-ui-features.js +++ b/report/renderer/report-ui-features.js @@ -112,6 +112,15 @@ export class ReportUIFeatures { }); } + if (this._opts.onViewTrace) { + this.addButton({ + text: lhr.configSettings.throttlingMethod === 'simulate' ? + Util.i18n.strings.viewOriginalTraceLabel : + Util.i18n.strings.viewTraceLabel, + onClick: () => this._opts.onViewTrace?.(), + }); + } + if (this._opts.getStandaloneReportHTML) { this._dom.find('a[data-action="save-html"]', this._dom.rootEl).classList.remove('lh-hidden'); } diff --git a/report/renderer/util.js b/report/renderer/util.js index 369233b69e7c..9d98f8370ab0 100644 --- a/report/renderer/util.js +++ b/report/renderer/util.js @@ -627,6 +627,10 @@ const UIStrings = { thirdPartyResourcesLabel: 'Show 3rd-party resources', /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */ viewTreemapLabel: 'View Treemap', + /** This label is for a button that will show the user a trace of the page. */ + viewTraceLabel: 'View Trace', + /** This label is for a button that will show the user a trace of the page. */ + viewOriginalTraceLabel: 'View Original Trace', /** Option in a dropdown menu that opens a small, summary report in a print dialog. */ dropdownPrintSummary: 'Print Summary', diff --git a/report/types/report-renderer.d.ts b/report/types/report-renderer.d.ts index 42ec26b47c37..06e843a615bd 100644 --- a/report/types/report-renderer.d.ts +++ b/report/types/report-renderer.d.ts @@ -5,6 +5,7 @@ */ import { Result as AuditResult } from "../../types/lhr/audit-result"; +import { ReportUIFeatures } from "../renderer/report-ui-features.js"; declare module Renderer { function renderReport(lhr: AuditResult, options?: Options): HTMLElement; @@ -26,6 +27,12 @@ declare module Renderer { onPageAnchorRendered?: (link: HTMLAnchorElement) => void; /** If defined, `Save as HTML` option is shown in dropdown menu. */ getStandaloneReportHTML?: () => string; + /** + * If defined, adds a `View Trace` button to the report, and calls this callback when clicked. + * The callback should do something to present the user with a visualization of the trace + * data, which can be gotten from the artifacts. + */ + onViewTrace?: () => void; } } diff --git a/shared/localization/locales/en-US.json b/shared/localization/locales/en-US.json index f39541895e40..327921febc2c 100644 --- a/shared/localization/locales/en-US.json +++ b/shared/localization/locales/en-US.json @@ -2543,6 +2543,12 @@ "report/renderer/util.js | varianceDisclaimer": { "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics." }, + "report/renderer/util.js | viewOriginalTraceLabel": { + "message": "View Original Trace" + }, + "report/renderer/util.js | viewTraceLabel": { + "message": "View Trace" + }, "report/renderer/util.js | viewTreemapLabel": { "message": "View Treemap" }, diff --git a/shared/localization/locales/en-XL.json b/shared/localization/locales/en-XL.json index 73e85bccac43..13c016b3dcee 100644 --- a/shared/localization/locales/en-XL.json +++ b/shared/localization/locales/en-XL.json @@ -2543,6 +2543,12 @@ "report/renderer/util.js | varianceDisclaimer": { "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ." }, + "report/renderer/util.js | viewOriginalTraceLabel": { + "message": "V̂íêẃ Ôŕîǵîńâĺ T̂ŕâćê" + }, + "report/renderer/util.js | viewTraceLabel": { + "message": "V̂íêẃ T̂ŕâćê" + }, "report/renderer/util.js | viewTreemapLabel": { "message": "V̂íêẃ T̂ŕêém̂áp̂" },