Implement Composition.buildFromEvents()

tracing/tracing/ui/base/chart_base.html

Index: tracing/tracing/ui/base/chart_base.html
diff --git a/tracing/tracing/ui/base/chart_base.html b/tracing/tracing/ui/base/chart_base.html
index 5bbc6d9c8f6dfb90e255638bb35a1a5dbb0d0a96..bcb53b3690a53b83d5edad5e547a7a980b4a10b6 100644
--- a/tracing/tracing/ui/base/chart_base.html
+++ b/tracing/tracing/ui/base/chart_base.html
@@ -23,7 +23,6 @@ found in the LICENSE file.
         text-overflow: ellipsis;
         overflow: hidden;
         display: inline-block;
-        width: 50px;
       }
     </style>
 
@@ -55,6 +54,12 @@ found in the LICENSE file.
       this.updateContents_();
     },
 
+    set width(w) {
+      w -= 20;  // reserve 20px for the checkbox
+      this.$.link.style.width = w + 'px';
+      this.$.label.style.width = w + 'px';
+    },
+
     get textContent() {
       return this.$.label.textContent;
     },
@@ -119,7 +124,6 @@ found in the LICENSE file.
   }
 
   * /deep/ .chart-base {
-    font-size: 12pt;
     -webkit-user-select: none;
     cursor: default;
   }
@@ -130,6 +134,10 @@ found in the LICENSE file.
     shape-rendering: crispEdges;
     stroke: #000;
   }
+
+  * /deep/ .chart-base .legend body {
+    margin: 0;
+  }
 </style>
 
 <template id="chart-base-template">
@@ -224,6 +232,7 @@ tr.exportTo('tr.ui.b', function() {
       this.seriesByKey_ = new Map();
       this.width_ = 400;
       this.height_ = 300;
+      this.margin = {top: 20, right: 72, bottom: 30, left: 50};
 
       // This should use tr.ui.b.instantiateTemplate. However, creating
       // svg-namespaced elements inside a template isn't possible. Thus, this
@@ -273,10 +282,19 @@ tr.exportTo('tr.ui.b', function() {
     },
 
     set chartTitle(chartTitle) {
+      if (chartTitle && !this.chartTitle_)
+        this.margin.top += this.titleMarginPx;
+      else if (this.chartTitle_ && !chartTitle)
+        this.margin.top -= this.titleMarginPx;
+
       this.chartTitle_ = chartTitle;
       this.updateContents_();
     },
 
+    get titleMarginPx() {
+      return 20;
+    },
+
     get chartAreaElement() {
       return this.querySelector('#chart-area');
     },
@@ -287,22 +305,10 @@ tr.exportTo('tr.ui.b', function() {
       this.updateContents_();
     },
 
-    getMargin_: function() {
-      var margin = {top: 20, right: 72, bottom: 30, left: 50};
-      if (this.chartTitle_)
-        margin.top += 20;
-      return margin;
-    },
-
-    get margin() {
-      return this.getMargin_();
-    },
-
     get chartAreaSize() {
-      var margin = this.margin;
       return {
-        width: this.width_ - margin.left - margin.right,
-        height: this.height_ - margin.top - margin.bottom
+        width: this.width_ - this.margin.left - this.margin.right,
+        height: this.height_ - this.margin.top - this.margin.bottom
       };
     },
 
@@ -364,15 +370,13 @@ tr.exportTo('tr.ui.b', function() {
     },
 
     updateContents_: function() {
-      var margin = this.margin;
-
       var thisSel = d3.select(this);
       thisSel.attr('width', this.width_);
       thisSel.attr('height', this.height_);
 
       var chartAreaSel = d3.select(this.chartAreaElement);
       chartAreaSel.attr('transform',
-          'translate(' + margin.left + ',' + margin.top + ')');
+          'translate(' + this.margin.left + ',' + this.margin.top + ')');
 
       this.updateScales_();
       this.updateTitle_(chartAreaSel);
@@ -401,11 +405,12 @@ tr.exportTo('tr.ui.b', function() {
       var series = [...this.seriesByKey_.values()].reverse();
       var legendEntriesSel = chartAreaSel.selectAll('.legend').data(series);
 
+      var width = this.margin.right - 2;
       legendEntriesSel.enter()
           .append('foreignObject')
           .attr('class', 'legend')
           .attr('x', this.chartAreaSize.width + 2)
-          .attr('width', 70)
+          .attr('width', width)
           .attr('height', 18)
           .attr('transform', function(series, i) {
               return 'translate(0,' + i * 18 + ')';
@@ -416,6 +421,7 @@ tr.exportTo('tr.ui.b', function() {
             var selected = this.currentHighlightedLegendKey === series.key;
             return getColorOfKey(series.key, selected);
           }.bind(this))
+          .property('width', width)
           .property('target', function(series) { return series.target; })
           .property('optional', function(series) { return series.optional; })
           .property('enabled', function(series) { return series.enabled; })