Index: tracing/tracing/metrics/system_health/loading_metric.html |
diff --git a/tracing/tracing/metrics/system_health/loading_metric.html b/tracing/tracing/metrics/system_health/loading_metric.html |
index cea182e9964f7d74fa37507e1071abffc6431673..0e46e49f20be5ee30feefb31864414e140b0bf7c 100644 |
--- a/tracing/tracing/metrics/system_health/loading_metric.html |
+++ b/tracing/tracing/metrics/system_health/loading_metric.html |
@@ -220,11 +220,12 @@ tr.exportTo('tr.metrics.sh', function() { |
const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); |
samples.push({ |
value: timeToFirstMeaningfulPaint, |
+ breakdownTree, |
diagnostics: { |
- 'Breakdown of [navStart, FMP]': breakdownDiagnostic, |
- 'Start': new RelatedEventSet(navigationStart), |
- 'End': new RelatedEventSet(fmpMarkerEvent), |
- 'Navigation infos': new tr.v.d.GenericSet([{ |
+ breakdown: breakdownDiagnostic, |
+ start: new RelatedEventSet(navigationStart), |
+ end: new RelatedEventSet(fmpMarkerEvent), |
+ infos: new tr.v.d.GenericSet([{ |
url, |
pid: rendererHelper.pid, |
start: navigationStart.start, |
@@ -253,11 +254,12 @@ tr.exportTo('tr.metrics.sh', function() { |
const breakdownDiagnostic = createBreakdownDiagnostic(breakdownTree); |
samples.push({ |
value: mainThreadCpuTime, |
+ breakdownTree, |
diagnostics: { |
- 'Breakdown of [navStart, FMP]': breakdownDiagnostic, |
- 'Start': new RelatedEventSet(navigationStart), |
- 'End': new RelatedEventSet(fmpMarkerEvent), |
- 'Navigation infos': new tr.v.d.GenericSet([{ |
+ breakdown: breakdownDiagnostic, |
+ start: new RelatedEventSet(navigationStart), |
+ end: new RelatedEventSet(fmpMarkerEvent), |
+ infos: new tr.v.d.GenericSet([{ |
url, |
pid: rendererHelper.pid, |
start: navigationStart.start, |
@@ -323,16 +325,17 @@ tr.exportTo('tr.metrics.sh', function() { |
const timeToFirstInteractive = navStartToFirstInteractiveRange.duration; |
samples.push({ |
value: timeToFirstInteractive, |
+ breakdownTree, |
diagnostics: { |
- 'Start': new RelatedEventSet(navigationStart), |
- 'Last long task': new RelatedEventSet(lastLongTaskEvent), |
- 'Navigation infos': new tr.v.d.GenericSet([{ |
+ start: new RelatedEventSet(navigationStart), |
+ lastLongTask: new RelatedEventSet(lastLongTaskEvent), |
+ infos: new tr.v.d.GenericSet([{ |
url, |
pid: rendererHelper.pid, |
start: navigationStartTime, |
interactive: firstInteractive, |
}]), |
- 'Breakdown of [navStart, Interactive]': breakdownDiagnostic, |
+ breakdown: breakdownDiagnostic, |
} |
}); |
} |
@@ -442,9 +445,36 @@ tr.exportTo('tr.metrics.sh', function() { |
}; |
} |
- function addSamplesToHistogram(samples, histogram) { |
+ function addSamplesToHistogram(samples, histogram, histograms) { |
+ const relatedHistograms = new Map(); |
for (const sample of samples) { |
histogram.addSample(sample.value, sample.diagnostics); |
+ |
+ if (!sample.breakdownTree) continue; |
+ for (const [category, breakdown] of Object.entries( |
+ sample.breakdownTree)) { |
+ const relatedName = `${histogram.name}:${category}`; |
+ let relatedHist = relatedHistograms.get(relatedName); |
+ if (!relatedHist) { |
+ relatedHist = histograms.createHistogram( |
+ relatedName, histogram.unit, [], { |
+ binBoundaries: FIRST_PAINT_BOUNDARIES, |
+ summaryOptions: SUMMARY_OPTIONS, |
+ }); |
+ relatedHistograms.set(relatedName, relatedHist); |
+ |
+ let relatedNames = histogram.diagnostics.get('breakdown'); |
+ if (!relatedNames) { |
+ relatedNames = new tr.v.d.RelatedNameMap(); |
+ histogram.diagnostics.set('breakdown', relatedNames); |
+ } |
+ relatedNames.set(category, relatedName); |
+ } |
+ relatedHist.addSample(breakdown.total, { |
+ breakdown: tr.v.d.Breakdown.fromEntries( |
+ Object.entries(breakdown.events)), |
+ }); |
+ } |
} |
} |
@@ -496,17 +526,26 @@ tr.exportTo('tr.metrics.sh', function() { |
const samplesSet = |
collectLoadingMetricsForRenderer(rendererHelper); |
- addSamplesToHistogram(samplesSet.firstPaintSamples, |
- firstPaintHistogram); |
- addSamplesToHistogram(samplesSet.firstContentfulPaintSamples, |
- firstContentfulPaintHistogram); |
- addSamplesToHistogram(samplesSet.onLoadSamples, onLoadHistogram); |
- addSamplesToHistogram(samplesSet.firstMeaningfulPaintSamples, |
- firstMeaningfulPaintHistogram); |
- addSamplesToHistogram(samplesSet.firstMeaningfulPaintCpuTimeSamples, |
- firstMeaningfulPaintCpuTimeHistogram); |
- addSamplesToHistogram(samplesSet.firstInteractiveSamples, |
- firstInteractiveHistogram); |
+ addSamplesToHistogram( |
+ samplesSet.firstPaintSamples, firstPaintHistogram, histograms); |
+ addSamplesToHistogram( |
+ samplesSet.firstContentfulPaintSamples, |
+ firstContentfulPaintHistogram, |
+ histograms); |
+ addSamplesToHistogram( |
+ samplesSet.onLoadSamples, onLoadHistogram, histograms); |
+ addSamplesToHistogram( |
+ samplesSet.firstMeaningfulPaintSamples, |
+ firstMeaningfulPaintHistogram, |
+ histograms); |
+ addSamplesToHistogram( |
+ samplesSet.firstMeaningfulPaintCpuTimeSamples, |
+ firstMeaningfulPaintCpuTimeHistogram, |
+ histograms); |
+ addSamplesToHistogram( |
+ samplesSet.firstInteractiveSamples, |
+ firstInteractiveHistogram, |
+ histograms); |
} |
} |