Implement Composition.buildFromEvents()

tracing/tracing/ui/base/chart_base_2d.html

Index: tracing/tracing/ui/base/chart_base_2d.html
diff --git a/tracing/tracing/ui/base/chart_base_2d.html b/tracing/tracing/ui/base/chart_base_2d.html
index b67691d8901d24b8e7cedd722562ab5ec149fcae..e5391e893b9a66467416bcb0d60e9a44dceddce3 100644
--- a/tracing/tracing/ui/base/chart_base_2d.html
+++ b/tracing/tracing/ui/base/chart_base_2d.html
@@ -6,6 +6,7 @@ found in the LICENSE file.
 -->
 
 <link rel="import" href="/tracing/base/iteration_helpers.html">
+<link rel="import" href="/tracing/base/raf.html">
 <link rel="import" href="/tracing/base/range.html">
 <link rel="import" href="/tracing/ui/base/chart_base.html">
 <link rel="import" href="/tracing/ui/base/mouse_tracker.html">
@@ -41,7 +42,6 @@ tr.exportTo('tr.ui.b', function() {
       this.hideXAxis_ = false;
       this.hideYAxis_ = false;
       this.data_ = [];
-      this.leftMargin_ = 50;
 
       d3.select(this.chartAreaElement)
           .append('g')
@@ -185,7 +185,7 @@ tr.exportTo('tr.ui.b', function() {
         .call(d3.svg.axis()
               .scale(this.xScale_)
               .orient('bottom'));
-      window.requestAnimationFrame(function() {
+      tr.b.requestAnimationFrame(function() {

[charliea (OOO until 10-5), 2016/07/13 14:30:06]

You certainly don't have to fix it here (this CL makes things strictly better
wrt. RAF), but I'm not sure I understand why we're using RAF here. This code
looks suspiciously like someone was looking for a reason to try it out.

         var previousRight = undefined;
         xAxis.selectAll('.tick')[0].forEach(function(tick) {
           var currentLeft = tick.transform.baseVal[0].matrix.e;
@@ -198,13 +198,7 @@ tr.exportTo('tr.ui.b', function() {
           }
         });
         xAxis[0][0].style.opacity = 1;
-      });
-    },
-
-    getMargin_: function() {
-      var margin = ChartBase.prototype.getMargin_.call(this);
-      margin.left = this.leftMargin_;
-      return margin;
+      }, this);
     },
 
     updateDataRange_: function() {
@@ -265,7 +259,7 @@ tr.exportTo('tr.ui.b', function() {
 
       yAxis.call(axisModifier);
 
-      window.requestAnimationFrame(function() {
+      tr.b.requestAnimationFrame(function() {
         var previousTop = undefined;
         var leftMargin = 0;
         yAxis.selectAll('.tick')[0].forEach(function(tick) {
@@ -280,13 +274,15 @@ tr.exportTo('tr.ui.b', function() {
             tick.style.opacity = 0;
           }
         });
-        if (leftMargin > this.leftMargin_) {
-          this.leftMargin_ = leftMargin;
+
+        leftMargin = parseInt(Math.ceil(leftMargin));
+        if (leftMargin > this.margin.left) {
+          this.margin.left = leftMargin;
           this.updateContents_();
         } else {
           yAxis[0][0].style.opacity = 1;
         }
-      }.bind(this));
+      }, this);
     },
 
     updateContents_: function() {
@@ -342,9 +338,8 @@ tr.exportTo('tr.ui.b', function() {
 
     getDataPointAtClientPoint_: function(clientX, clientY) {
       var rect = this.getBoundingClientRect();
-      var margin = this.margin;
-      var x = clientX - rect.left - margin.left;
-      var y = clientY - rect.top - margin.top;
+      var x = clientX - rect.left - this.margin.left;
+      var y = clientY - rect.top - this.margin.top;
       x = this.xScale_.invert(x);
       y = this.yScale_.invert(y);
       x = tr.b.clamp(x, this.xScale_.domain()[0], this.xScale_.domain()[1]);