Add screenshots of diagnostics to metrics-results-ui.md.

docs/metrics-results-ui.md

 <!-- Copyright 2016 The Chromium Authors. All rights reserved.
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file.
 -->
 
 # Metrics Results UI
 
 This document assumes familiarity with the concepts introduced in
 [how-to-write-metrics](/docs/how-to-write-metrics.md).
 
@@ skipping 88 matching lines @@
 
 ### The Show Histogram Button
 
 By default, table cells contain only averages of the Histograms in those cells.
 
 Click the bar chart icon in table cells to display more information about the
 Histogram:
  * Histogram bin count bar chart (if the Histogram has only a single bin, then
    it will be a box chart),
  * summary statistics as configured by the metric,
- * Diagnostics
+ * Up to 3 groups of diagnostics may be available in tabs:
+    * Metadata
+    * Sample diagnostics
+    * Other diagnostics added to Histograms by metrics
+
+![Diagnostics tabs
+](/docs/images/metrics-results-ui-diagnostics-tabs.png)
+
+Metadata may contain
+ * Information about the device that produced the results
+ * Telemetry context
+ * Source control revisions
+ * Links to logs and traces
+These metadata diagnostics are added to Histograms by telemetry or other
+processes outside of metrics.
+
+Metrics can add diagnostics either to samples within Histograms or to Histograms
+themselves.
 
 Click and drag the mouse around the bar chart in order to display sample
 diagnostics for the selected Histogram bins.
 
 ![Show full Histogram data for a cell.
 ](/docs/images/metrics-results-ui-show-histogram.png)
 
+Sample diagnostics may include Breakdown diagnostics, which indicate relative
+sizes of component metrics for the selected samples.
+
+![Breakdowns](/docs/images/how-to-write-metrics-breakdown.png)
+
+Other Histogram diagnostics may include RelatedHistogramBreakdown diagnostics,
+which indicate relative sizes of component metrics over all samples.
+
+![RelatedHistogramBreakdowns](/docs/images/how-to-write-metrics-related-histogram-breakdown.png)
+
+For more about summation metrics, see [Diagnostic
+Metrics](https://chromium.googlesource.com/chromium/src/+/HEAD/docs/speed/diagnostic_metrics.md#Summation-Diagnostics).
+
 ## The Groupby-picker
 
 The `groupby-picker` sits just above the table and allows you to control how
 Histograms are grouped into the Grouping Tree.
 
 Grouping keys include
  * Histogram name
  * Benchmark name
  * Story name
  * Storyset repetition
@@ skipping 180 matching lines @@
 
 ### The Show All Checkbox
 
 By default, this checkbox is unchecked so that the table only displays
 Histograms that are source nodes in the metric graphical model.
 Check this checkbox in order to show all Histograms, including those that are
 not source nodes in the metric graphical model.
 
 ![Show All Histograms checkbox.
 ](/docs/images/metrics-results-ui-show-all.png)