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

Review-Url: https://codereview.chromium.org/2564613003
Cr-Commit-Position: refs/heads/master@{#437607}

third_party/WebKit/Source/devtools/front_end/layers/LayerTreeModel.js

@@ -194,7 +194,7 @@ Layers.AgentLayerTree = class extends SDK.LayerTreeBase {
       if (layer)
         layer._reset(layers[i]);
       else
-        layer = new Layers.AgentLayer(this._target, layers[i]);
+        layer = new Layers.AgentLayer(this.target(), layers[i]);
       this._layersById[layerId] = layer;
       var backendNodeId = layers[i].backendNodeId;
       if (backendNodeId)

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.
+    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);

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

@@ -38,18 +38,23 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
    * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
   constructor(model, frameModel, irModel, filters) {
-    super(model, filters);
+    super();
+    this._model = model;
+    this._filters = filters;
+    /** @type {?UI.FlameChart.TimelineData} */
+    this._timelineData = null;
     this._frameModel = frameModel;
     this._irModel = irModel;
     this._consoleColorGenerator =
         new UI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
+    const font = this.font();
 
     this._headerLevel1 = {
       padding: 4,
       height: 17,
       collapsible: true,
       color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
-      font: this._font,
+      font: font,
       backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0
     };
@@ -58,7 +63,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
       padding: 2,
       height: 17,
       collapsible: false,
-      font: this._font,
+      font: font,
       color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
       backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 1,
@@ -70,7 +75,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
       height: 17,
       collapsible: true,
       color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
-      font: this._font,
+      font: font,
       backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0,
       useFirstLineForOverview: true,
@@ -82,7 +87,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
       height: 17,
       collapsible: true,
       color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
-      font: this._font,
+      font: font,
       backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 1,
       shareHeaderLine: true
@@ -135,6 +140,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
    */
   reset() {
     super.reset();
+    this._timelineData = null;
     /** @type {!Array<!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */
     this._entryData = [];
     /** @type {!Array<!Timeline.TimelineFlameChartEntryType>} */
@@ -694,6 +700,16 @@ Timeline.TimelineFlameChartDataProvider = class extends Timeline.TimelineFlameCh
     var entryIndex = this._entryData.indexOf(event);
     return this.createSelection(entryIndex);
   }
+
+  /**
+   * @param {!SDK.TracingModel.Event} event
+   * @return {boolean}
+   */
+  _isVisible(event) {
+    return this._filters.every(function(filter) {
+      return filter.accept(event);
+    });
+  }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;

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

@@ -7,18 +7,15 @@
  * @unrestricted
  */
 Timeline.TimelineFlameChartDataProviderBase = class {
-  /**
-   * @param {!TimelineModel.TimelineModel} model
-   * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
-   */
-  constructor(model, filters) {
+  constructor() {
     UI.FlameChartDataProvider.call(this);
     this.reset();
-    this._model = model;
-    /** @type {?UI.FlameChart.TimelineData} */
-    this._timelineData;
     this._font = '11px ' + Host.fontFamily();
-    this._filters = filters;
+  }
+
+  /** @return {string} */
+  font() {
+    return this._font;
   }
 
   /**
@@ -186,16 +183,6 @@ Timeline.TimelineFlameChartDataProviderBase = class {
   timelineData() {
     throw new Error('Not implemented');
   }
-
-  /**
-   * @param {!SDK.TracingModel.Event} event
-   * @return {boolean}
-   */
-  _isVisible(event) {
-    return this._filters.every(function(filter) {
-      return filter.accept(event);
-    });
-  }
 };
 
 /**

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

@@ -10,7 +10,10 @@ Timeline.TimelineFlameChartNetworkDataProvider = class extends Timeline.Timeline
    * @param {!TimelineModel.TimelineModel} model
    */
   constructor(model) {
-    super(model, []);
+    super();
+    this._model = model;
+    /** @type {?UI.FlameChart.TimelineData} */
+    this._timelineData = null;
     var loadingCategory = Timeline.TimelineUIUtils.categories()['loading'];
     this._waitingColor = loadingCategory.childColor;
     this._processingColor = loadingCategory.color;
@@ -48,6 +51,7 @@ Timeline.TimelineFlameChartNetworkDataProvider = class extends Timeline.Timeline
    */
   reset() {
     super.reset();
+    this._timelineData = null;
     /** @type {!Array<!TimelineModel.TimelineModel.NetworkRequest>} */
     this._requests = [];
   }

third_party/WebKit/Source/devtools/front_end/ui_lazy/TimelineOverviewPane.js

@@ -492,6 +492,21 @@ UI.TimelineOverviewBase = class extends UI.VBox {
     this._context = this._canvas.getContext('2d');
   }
 
+  /** @return {number} */
+  width() {
+    return this._canvas.width;
+  }
+
+  /** @return {number} */
+  height() {
+    return this._canvas.height;
+  }
+
+  /** @return {!CanvasRenderingContext2D} */
+  context() {
+    return this._context;
+  }
+
   /**
    * @override
    */