Bold names of source Histograms in histogram-set-table.

tracing/tracing/value/ui/histogram_set_table.html

Index: tracing/tracing/value/ui/histogram_set_table.html
diff --git a/tracing/tracing/value/ui/histogram_set_table.html b/tracing/tracing/value/ui/histogram_set_table.html
index 5ce202905e7fa19a58009ebf12568a7803378113..5f8241774dd733d8b4f9af91ff516656837534ee 100644
--- a/tracing/tracing/value/ui/histogram_set_table.html
+++ b/tracing/tracing/value/ui/histogram_set_table.html
@@ -48,6 +48,7 @@ tr.exportTo('tr.v.ui', function() {
       this.displayLabels_ = [];
       this.histograms_ = undefined;
       this.sourceHistograms_ = undefined;
+      this.sourceHistogramNames_ = undefined;
       this.groupedHistograms_ = undefined;
       this.hierarchies_ = undefined;
       this.tableRows_ = undefined;
@@ -94,6 +95,13 @@ tr.exportTo('tr.v.ui', function() {
       this.groupedHistograms_ = undefined;
       this.displayLabels_ = displayLabels;
 
+      this.sourceHistogramNames_ = new Set();
+      if (this.histograms_.length !== this.sourceHistograms_.length) {
+        for (const hist of this.sourceHistograms_) {
+          this.sourceHistogramNames_.add(hist.name);
+        }
+      }
+
       if (opt_progress !== undefined) this.progress_ = opt_progress;
 
       if (histograms.length === 0) {
@@ -122,8 +130,11 @@ tr.exportTo('tr.v.ui', function() {
 
       this.progress_ = () => Promise.resolve();
 
-      this.checkNameColumnOverflow_(
-          tr.v.ui.HistogramSetTableRow.walkAll(this.$.table.tableRows));
+      for (const row of
+          tr.v.ui.HistogramSetTableRow.walkAll(this.$.table.tableRows)) {
+        row.nameCell.isSource = this.sourceHistogramNames_.has(row.name);
+        this.checkNameColumnOverflow_(row);
+      }
     },
 
     buildNameColumnTitle_() {
@@ -252,6 +263,11 @@ tr.exportTo('tr.v.ui', function() {
         await this.progress_('Building DOM...');
         this.$.table.tableRows = this.tableRows_;
 
+        for (const row of
+            tr.v.ui.HistogramSetTableRow.walkAll(this.$.table.tableRows)) {
+          row.nameCell.isSource = this.sourceHistogramNames_.has(row.name);
+        }
+
         // Try to restore previous row state.
         // Wait to do this until after the base table has the new rows so that
         // setExpandedForTableRow doesn't get confused.
@@ -282,25 +298,22 @@ tr.exportTo('tr.v.ui', function() {
       // animationFrame here, which would be inefficient.
       if (this.nameColumnTitle_.children[1].style.display === 'block') return;
       await tr.b.animationFrame();
-      this.checkNameColumnOverflow_(event.row.subRows);
+      for (const row of event.row.subRows) {
+        this.checkNameColumnOverflow_(row);
+      }
     },
 
-    checkNameColumnOverflow_(rows) {
-      for (const row of rows) {
-        if (!row.nameCell.isOverflowing) continue;
+    checkNameColumnOverflow_(row) {
+      if (!row.nameCell.isOverflowing) return;
 
-        const [nameSpan, dots] = this.nameColumnTitle_.children;
-        dots.style.display = 'block';
+      const [nameSpan, dots] = this.nameColumnTitle_.children;
+      dots.style.display = 'block';
 
-        // Size the span containing 'Name' so that the dots align with the
-        // ellipses in the name-cells.
-        const labelWidthPx = tr.v.ui.NAME_COLUMN_WIDTH_PX -
-          dots.getBoundingClientRect().width;
-        nameSpan.style.width = labelWidthPx + 'px';
-        // TODO(benjhayden): Manage this using polymer.
-
-        return;
-      }
+      // Size the span containing 'Name' so that the dots align with the
+      // ellipses in the name-cells.
+      const labelWidthPx = tr.v.ui.NAME_COLUMN_WIDTH_PX -
+        dots.getBoundingClientRect().width;
+      nameSpan.style.width = labelWidthPx + 'px';
     },
 
     groupHistograms_() {