Timeline: fix a bunch of references to out-of-file privates

third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
index 74244769281581804489ff8f0bd8d5dcdd9c1bf5..45b18d3222c8b1d23b8d02e812584cea6b08e761 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
@@ -56,8 +56,9 @@ Timeline.TimelineEventOverview = class extends UI.TimelineOverviewBase {
   _renderBar(begin, end, position, height, color) {
     var x = begin;
     var width = end - begin;
-    this._context.fillStyle = color;
-    this._context.fillRect(x, position, width, height);
+    var ctx = this.context();
+    ctx.fillStyle = color;
+    ctx.fillRect(x, position, width, height);
   }
 
   /**
@@ -106,7 +107,7 @@ Timeline.TimelineEventOverviewInput = class extends Timeline.TimelineEventOvervi
   update() {
     super.update();
     var events = this._model.mainThreadEvents();
-    var height = this._canvas.height;
+    var height = this.height();
     var descriptors = Timeline.TimelineUIUtils.eventDispatchDesciptors();
     /** @type {!Map.<string,!Timeline.TimelineUIUtils.EventDispatchTypeDescriptor>} */
     var descriptorsByType = new Map();
@@ -120,7 +121,7 @@ Timeline.TimelineEventOverviewInput = class extends Timeline.TimelineEventOvervi
     var /** @const */ minWidth = 2 * window.devicePixelRatio;
     var timeOffset = this._model.minimumRecordTime();
     var timeSpan = this._model.maximumRecordTime() - timeOffset;
-    var canvasWidth = this._canvas.width;
+    var canvasWidth = this.width();
     var scale = canvasWidth / timeSpan;
 
     for (var priority = 0; priority <= maxPriority; ++priority) {
@@ -156,15 +157,15 @@ Timeline.TimelineEventOverviewNetwork = class extends Timeline.TimelineEventOver
    */
   update() {
     super.update();
-    var height = this._canvas.height;
+    var height = this.height();
     var numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other) + 1;
     var bandHeight = Math.floor(height / numBands);
     var devicePixelRatio = window.devicePixelRatio;
     var timeOffset = this._model.minimumRecordTime();
     var timeSpan = this._model.maximumRecordTime() - timeOffset;
-    var canvasWidth = this._canvas.width;
+    var canvasWidth = this.width();
     var scale = canvasWidth / timeSpan;
-    var ctx = this._context;
+    var ctx = this.context();
     var requests = this._model.networkRequests();
     /** @type {!Map<string,!{waiting:!Path2D,transfer:!Path2D}>} */
     var paths = new Map();
@@ -250,8 +251,8 @@ Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEvent
   update() {
     super.update();
     var /** @const */ quantSizePx = 4 * window.devicePixelRatio;
-    var width = this._canvas.width;
-    var height = this._canvas.height;
+    var width = this.width();
+    var height = this.height();
     var baseLine = height;
     var timeOffset = this._model.minimumRecordTime();
     var timeSpan = this._model.maximumRecordTime() - timeOffset;
@@ -269,7 +270,7 @@ Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEvent
     for (var thread of this._model.virtualThreads())
       drawThreadEvents(backgroundContext, thread.events);
     applyPattern(backgroundContext);
-    drawThreadEvents(this._context, this._model.mainThreadEvents());
+    drawThreadEvents(this.context(), this._model.mainThreadEvents());
 
     /**
      * @param {!CanvasRenderingContext2D} ctx
@@ -362,12 +363,13 @@ Timeline.TimelineEventOverviewResponsiveness = class extends Timeline.TimelineEv
    */
   update() {
     super.update();
-    var height = this._canvas.height;
+    var height = this.height();
     var timeOffset = this._model.minimumRecordTime();
     var timeSpan = this._model.maximumRecordTime() - timeOffset;
-    var scale = this._canvas.width / timeSpan;
+    var scale = this.width() / timeSpan;
     var frames = this._frameModel.frames();
-    var ctx = this._context;
+    // This is due to usage of new signatures of fill() and storke() that closure compiler does not recognize.

[alph, 2016/12/09 05:53:37]

Can't you just add them to externs.js ?

+    var ctx = /** @type {!Object} */ (this.context());
     var fillPath = new Path2D();
     var markersPath = new Path2D();
     for (var i = 0; i < frames.length; ++i) {
@@ -434,7 +436,7 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
         return;
       if (!image.naturalWidth || !image.naturalHeight)
         return;
-      var imageHeight = this._canvas.height - 2 * Timeline.TimelineFilmStripOverview.Padding;
+      var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding;
       var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
       var popoverScale = Math.min(200 / image.naturalWidth, 1);
       this._emptyImage = new Image(image.naturalWidth * popoverScale, image.naturalHeight * popoverScale);
@@ -485,11 +487,11 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
     if (!this._filmStripModel.frames().length)
       return;
     var padding = Timeline.TimelineFilmStripOverview.Padding;
-    var width = this._canvas.width;
+    var width = this.width();
     var zeroTime = this._filmStripModel.zeroTime();
     var spanTime = this._filmStripModel.spanTime();
     var scale = spanTime / width;
-    var context = this._canvas.getContext('2d');
+    var context = this.context();
     var drawGeneration = this._drawGeneration;
 
     context.beginPath();
@@ -580,17 +582,18 @@ Timeline.TimelineEventOverviewFrames = class extends Timeline.TimelineEventOverv
    */
   update() {
     super.update();
-    var height = this._canvas.height;
+    var height = this.height();
     var /** @const */ padding = 1 * window.devicePixelRatio;
     var /** @const */ baseFrameDurationMs = 1e3 / 60;
     var visualHeight = height - 2 * padding;
     var timeOffset = this._model.minimumRecordTime();
     var timeSpan = this._model.maximumRecordTime() - timeOffset;
-    var scale = this._canvas.width / timeSpan;
+    var scale = this.width() / timeSpan;
     var frames = this._frameModel.frames();
     var baseY = height - padding;
-    var ctx = this._context;
+    var ctx = this.context();
     var bottomY = baseY + 10 * window.devicePixelRatio;
+    var x = 0;
     var y = bottomY;
     if (!frames.length)
       return;
@@ -602,7 +605,7 @@ Timeline.TimelineEventOverviewFrames = class extends Timeline.TimelineEventOverv
     ctx.moveTo(0, y);
     for (var i = 0; i < frames.length; ++i) {
       var frame = frames[i];
-      var x = Math.round((frame.startTime - timeOffset) * scale) + offset;
+      x = Math.round((frame.startTime - timeOffset) * scale) + offset;
       ctx.lineTo(x, y);
       ctx.lineTo(x, y + tickDepth);
       y = frame.idle ? bottomY :
@@ -612,7 +615,7 @@ Timeline.TimelineEventOverviewFrames = class extends Timeline.TimelineEventOverv
     }
     if (frames.length) {
       var lastFrame = frames.peekLast();
-      var x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + offset;
+      x = Math.round((lastFrame.startTime + lastFrame.duration - timeOffset) * scale) + offset;
       ctx.lineTo(x, y);
     }
     ctx.lineTo(x, bottomY);
@@ -680,8 +683,8 @@ Timeline.TimelineEventOverviewMemory = class extends Timeline.TimelineEventOverv
     minUsedHeapSize = Math.min(minUsedHeapSize, maxUsedHeapSize);
 
     var lineWidth = 1;
-    var width = this._canvas.width;
-    var height = this._canvas.height - lowerOffset;
+    var width = this.width();
+    var height = this.height() - lowerOffset;
     var xFactor = width / (maxTime - minTime);
     var yFactor = (height - lineWidth) / Math.max(maxUsedHeapSize - minUsedHeapSize, 1);
 
@@ -700,7 +703,7 @@ Timeline.TimelineEventOverviewMemory = class extends Timeline.TimelineEventOverv
     }
     events.forEach(buildHistogram);
 
-    var ctx = this._context;
+    var ctx = this.context();
     var heightBeyondView = height + lowerOffset + lineWidth;
 
     ctx.translate(0.5, 0.5);