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

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 38 matching lines @@
   /**
    * @param {number} begin
    * @param {number} end
    * @param {number} position
    * @param {number} height
    * @param {string} color
    */
   _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);
   }
 
   /**
    * @override
    * @param {number} windowLeft
    * @param {number} windowRight
    * @return {!{startTime: number, endTime: number}}
    */
   windowTimes(windowLeft, windowRight) {
     var absoluteMin = this._model.minimumRecordTime();
@@ skipping 28 matching lines @@
   constructor(model) {
     super('input', null, model);
   }
 
   /**
    * @override
    */
   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();
     var maxPriority = -1;
     for (var descriptor of descriptors) {
       for (var type of descriptor.eventTypes)
         descriptorsByType.set(type, descriptor);
       maxPriority = Math.max(maxPriority, descriptor.priority);
     }
 
     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) {
       for (var i = 0; i < events.length; ++i) {
         var event = events[i];
         if (event.name !== TimelineModel.TimelineModel.RecordType.EventDispatch)
           continue;
         var descriptor = descriptorsByType.get(event.args['data']['type']);
         if (!descriptor || descriptor.priority !== priority)
           continue;
@@ skipping 15 matching lines @@
    */
   constructor(model) {
     super('network', Common.UIString('NET'), model);
   }
 
   /**
    * @override
    */
   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();
     requests.forEach(drawRequest);
     for (var path of paths) {
       ctx.fillStyle = path[0];
       ctx.globalAlpha = 0.3;
       ctx.fill(path[1]['waiting']);
       ctx.globalAlpha = 1;
       ctx.fill(path[1]['transfer']);
@@ skipping 65 matching lines @@
     this._backgroundCanvas.width = this.element.clientWidth * window.devicePixelRatio;
     this._backgroundCanvas.height = this.element.clientHeight * window.devicePixelRatio;
   }
 
   /**
    * @override
    */
   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;
     var scale = width / timeSpan;
     var quantTime = quantSizePx / scale;
     var categories = Timeline.TimelineUIUtils.categories();
     var categoryOrder = ['idle', 'loading', 'painting', 'rendering', 'scripting', 'other'];
     var otherIndex = categoryOrder.indexOf('other');
     var idleIndex = 0;
     console.assert(idleIndex === categoryOrder.indexOf('idle'));
     for (var i = idleIndex + 1; i < categoryOrder.length; ++i)
       categories[categoryOrder[i]]._overviewIndex = i;
 
     var backgroundContext = this._backgroundCanvas.getContext('2d');
     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
      * @param {!Array<!SDK.TracingModel.Event>} events
      */
     function drawThreadEvents(ctx, events) {
       var quantizer = new Timeline.Quantizer(timeOffset, quantTime, drawSample);
       var x = 0;
       var categoryIndexStack = [];
       var paths = [];
@@ skipping 72 matching lines @@
   constructor(model, frameModel) {
     super('responsiveness', null, model);
     this._frameModel = frameModel;
   }
 
   /**
    * @override
    */
   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) {
       var frame = frames[i];
       if (!frame.hasWarnings())
         continue;
       paintWarningDecoration(frame.startTime, frame.duration);
     }
 
     var events = this._model.mainThreadEvents();
@@ skipping 46 matching lines @@
     if (!frames.length)
       return;
 
     var drawGeneration = Symbol('drawGeneration');
     this._drawGeneration = drawGeneration;
     this._imageByFrame(frames[0]).then(image => {
       if (this._drawGeneration !== drawGeneration)
         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);
       this._drawFrames(imageWidth, imageHeight);
     });
   }
 
   /**
    * @param {!Components.FilmStripModel.Frame} frame
    * @return {!Promise<!HTMLImageElement>}
@@ skipping 30 matching lines @@
   /**
    * @param {number} imageWidth
    * @param {number} imageHeight
    */
   _drawFrames(imageWidth, imageHeight) {
     if (!imageWidth)
       return;
     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();
     for (var x = padding; x < width; x += imageWidth + 2 * padding) {
       var time = zeroTime + (x + imageWidth / 2) * scale;
       var frame = this._filmStripModel.frameByTimestamp(time);
       if (!frame)
         continue;
       context.rect(x - 0.5, 0.5, imageWidth + 1, imageHeight + 1);
       this._imageByFrame(frame).then(drawFrameImage.bind(this, x));
@@ skipping 70 matching lines @@
   constructor(model, frameModel) {
     super('framerate', Common.UIString('FPS'), model);
     this._frameModel = frameModel;
   }
 
   /**
    * @override
    */
   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;
 
     var lineWidth = window.devicePixelRatio;
     var offset = lineWidth & 1 ? 0.5 : 0;
     var tickDepth = 1.5 * window.devicePixelRatio;
     ctx.beginPath();
     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 :
                        Math.round(baseY - visualHeight * Math.min(baseFrameDurationMs / frame.duration, 1)) - offset;
       ctx.lineTo(x, y + tickDepth);
       ctx.lineTo(x, y);
     }
     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);
     ctx.fillStyle = 'hsl(110, 50%, 88%)';
     ctx.strokeStyle = 'hsl(110, 50%, 60%)';
     ctx.lineWidth = lineWidth;
     ctx.fill();
     ctx.stroke();
   }
 };
@@ skipping 47 matching lines @@
       var counters = event.args.data;
       if (!counters || !counters.jsHeapSizeUsed)
         return;
       maxUsedHeapSize = Math.max(maxUsedHeapSize, counters.jsHeapSizeUsed);
       minUsedHeapSize = Math.min(minUsedHeapSize, counters.jsHeapSizeUsed);
     }
     events.forEach(calculateMinMaxSizes);
     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);
 
     var histogram = new Array(width);
 
     /**
      * @param {!SDK.TracingModel.Event} event
      */
     function buildHistogram(event) {
       var counters = event.args.data;
       if (!counters || !counters.jsHeapSizeUsed)
         return;
       var x = Math.round((event.startTime - minTime) * xFactor);
       var y = Math.round((counters.jsHeapSizeUsed - minUsedHeapSize) * yFactor);
       histogram[x] = Math.max(histogram[x] || 0, y);
     }
     events.forEach(buildHistogram);
 
-    var ctx = this._context;
+    var ctx = this.context();
     var heightBeyondView = height + lowerOffset + lineWidth;
 
     ctx.translate(0.5, 0.5);
     ctx.beginPath();
     ctx.moveTo(-lineWidth, heightBeyondView);
     var y = 0;
     var isFirstPoint = true;
     var lastX = 0;
     for (var x = 0; x < histogram.length; x++) {
       if (typeof histogram[x] === 'undefined')
@@ skipping 62 matching lines @@
       counters[group] = this._quantDuration;
       this._callback(counters);
       interval -= this._quantDuration;
     }
     this._counters = [];
     this._counters[group] = interval;
     this._lastTime = time;
     this._remainder = this._quantDuration - interval;
   }
 };