Refactor Histogram relationship diagnostics.

tracing/tracing/metrics/system_health/loading_metric.html

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);
     }
   }