Timeline: always create filmstrip model and share single instance of it

This makes FilmStripModel to be always created by TimelinePanel and passed
down to actual users.

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

third_party/WebKit/Source/devtools/front_end/components_lazy/FilmStripModel.js

@@ -11,34 +11,7 @@
  */
 WebInspector.FilmStripModel = function(tracingModel, zeroTime)
 {
-    this._tracingModel = tracingModel;
-    this._zeroTime = zeroTime || tracingModel.minimumRecordTime();
-
-    /** @type {!Array<!WebInspector.FilmStripModel.Frame>} */
-    this._frames = [];
-
-    var browserProcess = tracingModel.processByName("Browser");
-    if (!browserProcess)
-        return;
-    var mainThread = browserProcess.threadByName("CrBrowserMain");
-    if (!mainThread)
-        return;
-
-    var events = mainThread.events();
-    for (var i = 0; i < events.length; ++i) {
-        var event = events[i];
-        if (event.startTime < this._zeroTime)
-            continue;
-        if (!event.hasCategory(WebInspector.FilmStripModel._category))
-            continue;
-        if (event.name === WebInspector.FilmStripModel.TraceEvents.CaptureFrame) {
-            var data = event.args["data"];
-            if (data)
-                this._frames.push(WebInspector.FilmStripModel.Frame._fromEvent(this, event, this._frames.length));
-        } else if (event.name === WebInspector.FilmStripModel.TraceEvents.Screenshot) {
-            this._frames.push(WebInspector.FilmStripModel.Frame._fromSnapshot(this, /** @type {!WebInspector.TracingModel.ObjectSnapshot} */ (event), this._frames.length));
-        }
-    }
+    this.reset(tracingModel, zeroTime);
 }
 
 WebInspector.FilmStripModel._category = "disabled-by-default-devtools.screenshot";
@@ -49,6 +22,42 @@ WebInspector.FilmStripModel.TraceEvents = {
 }
 
 WebInspector.FilmStripModel.prototype = {
+    /**
+     * @param {!WebInspector.TracingModel} tracingModel
+     * @param {number=} zeroTime
+     */
+    reset: function(tracingModel, zeroTime)
+    {
+        this._zeroTime = zeroTime || tracingModel.minimumRecordTime();
+        this._spanTime = tracingModel.maximumRecordTime() - this._zeroTime;
+
+        /** @type {!Array<!WebInspector.FilmStripModel.Frame>} */
+        this._frames = [];
+
+        var browserProcess = tracingModel.processByName("Browser");
+        if (!browserProcess)
+            return;
+        var mainThread = browserProcess.threadByName("CrBrowserMain");
+        if (!mainThread)
+            return;
+
+        var events = mainThread.events();
+        for (var i = 0; i < events.length; ++i) {
+            var event = events[i];
+            if (event.startTime < this._zeroTime)
+                continue;
+            if (!event.hasCategory(WebInspector.FilmStripModel._category))
+                continue;
+            if (event.name === WebInspector.FilmStripModel.TraceEvents.CaptureFrame) {
+                var data = event.args["data"];
+                if (data)
+                    this._frames.push(WebInspector.FilmStripModel.Frame._fromEvent(this, event, this._frames.length));
+            } else if (event.name === WebInspector.FilmStripModel.TraceEvents.Screenshot) {
+                this._frames.push(WebInspector.FilmStripModel.Frame._fromSnapshot(this, /** @type {!WebInspector.TracingModel.ObjectSnapshot} */ (event), this._frames.length));
+            }
+        }
+    },
+
     /**
      * @return {!Array<!WebInspector.FilmStripModel.Frame>}
      */
@@ -65,6 +74,14 @@ WebInspector.FilmStripModel.prototype = {
         return this._zeroTime;
     },
 
+    /**
+     * @return {number}
+     */
+    spanTime: function()
+    {
+        return this._spanTime;
+    },
+
     /**
      * @param {number} timestamp
      * @return {?WebInspector.FilmStripModel.Frame}

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

@@ -432,12 +432,12 @@ WebInspector.TimelineEventOverview.Responsiveness.prototype = {
  * @constructor
  * @extends {WebInspector.TimelineEventOverview}
  * @param {!WebInspector.TimelineModel} model
- * @param {!WebInspector.TracingModel} tracingModel
+ * @param {!WebInspector.FilmStripModel} filmStripModel
  */
-WebInspector.TimelineFilmStripOverview = function(model, tracingModel)
+WebInspector.TimelineFilmStripOverview = function(model, filmStripModel)
 {
     WebInspector.TimelineEventOverview.call(this, "filmstrip", null, model);
-    this._tracingModel = tracingModel;
+    this._filmStripModel = filmStripModel;
     this.reset();
 }
 
@@ -450,8 +450,6 @@ WebInspector.TimelineFilmStripOverview.prototype = {
     update: function()
     {
         WebInspector.TimelineEventOverview.prototype.update.call(this);
-        if (!this._filmStripModel)
-            return;
         var frames = this._filmStripModel.frames();
         if (!frames.length)
             return;
@@ -503,14 +501,14 @@ WebInspector.TimelineFilmStripOverview.prototype = {
      */
     _drawFrames: function(imageWidth, imageHeight)
     {
-        if (!this._filmStripModel || !imageWidth)
+        if (!imageWidth)
             return;
         if (!this._filmStripModel.frames().length)
             return;
         var padding = WebInspector.TimelineFilmStripOverview.Padding;
         var width = this._canvas.width;
-        var zeroTime = this._tracingModel.minimumRecordTime();
-        var spanTime = this._tracingModel.maximumRecordTime() - zeroTime;
+        var zeroTime = this._filmStripModel.zeroTime();
+        var spanTime = this._filmStripModel.spanTime();
         var scale = spanTime / width;
         var context = this._canvas.getContext("2d");
         var drawGeneration = this._drawGeneration;
@@ -548,7 +546,7 @@ WebInspector.TimelineFilmStripOverview.prototype = {
      */
     popoverElementPromise: function(x)
     {
-        if (!this._filmStripModel || !this._filmStripModel.frames().length)
+        if (!this._filmStripModel.frames().length)
             return Promise.resolve(/** @type {?Element} */ (null));
 
         var time = this._calculator.positionToTime(x);
@@ -581,7 +579,6 @@ WebInspector.TimelineFilmStripOverview.prototype = {
     {
         this._lastFrame = undefined;
         this._lastElement = null;
-        this._filmStripModel = new WebInspector.FilmStripModel(this._tracingModel);
         /** @type {!Map<!WebInspector.FilmStripModel.Frame,!Promise<!HTMLImageElement>>} */
         this._frameToImagePromise = new Map();
         this._imageWidth = 0;

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

@@ -63,6 +63,7 @@ WebInspector.TimelinePanel = function()
     this._tracingModel = new WebInspector.TracingModel(this._tracingModelBackingStorage);
     this._model = new WebInspector.TimelineModel(WebInspector.TimelineUIUtils.visibleEventsFilter());
     this._frameModel = new WebInspector.TimelineFrameModel(event => WebInspector.TimelineUIUtils.eventStyle(event).category.name);
+    this._filmStripModel = new WebInspector.FilmStripModel(this._tracingModel);
     this._irModel = new WebInspector.TimelineIRModel();
 
     this._cpuThrottlingManager = new WebInspector.CPUThrottlingManager();
@@ -545,7 +546,7 @@ WebInspector.TimelinePanel.prototype = {
         this._overviewControls.push(new WebInspector.TimelineEventOverview.CPUActivity(this._model));
         this._overviewControls.push(new WebInspector.TimelineEventOverview.Network(this._model));
         if (this._captureFilmStripSetting.get())
-            this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._model, this._tracingModel));
+            this._overviewControls.push(new WebInspector.TimelineFilmStripOverview(this._model, this._filmStripModel));
         if (this._captureMemorySetting.get())
             this._overviewControls.push(new WebInspector.TimelineEventOverview.Memory(this._model));
         this._overviewPane.setOverviewControls(this._overviewControls);
@@ -683,13 +684,13 @@ WebInspector.TimelinePanel.prototype = {
         this.requestWindowTimes(0, Infinity);
         delete this._selection;
         this._frameModel.reset();
+        this._filmStripModel.reset(this._tracingModel);
         this._overviewPane.reset();
         for (var i = 0; i < this._currentViews.length; ++i)
             this._currentViews[i].reset();
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].reset();
         this.select(null);
-        delete this._filmStripModel;
         this._detailsSplitWidget.hideSidebar();
     },
 
@@ -803,7 +804,7 @@ WebInspector.TimelinePanel.prototype = {
         this._model.setEvents(this._tracingModel, loadedFromFile);
         this._frameModel.reset();
         this._frameModel.addTraceEvents(WebInspector.targetManager.mainTarget(), this._model.inspectedTargetEvents(), this._model.sessionId() || "");
-
+        this._filmStripModel.reset(this._tracingModel);
         var groups = WebInspector.TimelineModel.AsyncEventGroup;
         var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
         this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
@@ -1035,10 +1036,8 @@ WebInspector.TimelinePanel.prototype = {
             break;
         case WebInspector.TimelineSelection.Type.Frame:
             var frame = /** @type {!WebInspector.TimelineFrame} */ (this._selection.object());
-            if (!this._filmStripModel)
-                this._filmStripModel = new WebInspector.FilmStripModel(this._tracingModel);
             var screenshotTime = frame.idle ? frame.startTime : frame.endTime; // For idle frames, look at the state at the beginning of the frame.
-            var filmStripFrame = this._filmStripModel && this._filmStripModel.frameByTimestamp(screenshotTime);
+            var filmStripFrame = filmStripFrame = this._filmStripModel.frameByTimestamp(screenshotTime);
             if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
                 filmStripFrame = null;
             this.showInDetails(WebInspector.TimelineUIUtils.generateDetailsContentForFrame(this._frameModel, frame, filmStripFrame));