Timeline: quit using Progress, introduce TimelineLifecycleDelegate

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel 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.
@@ skipping 14 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {WebInspector.Panel}
+ * @implements {WebInspector.TimelineLifecycleDelegate}
  * @implements {WebInspector.TimelineModeViewDelegate}
  * @implements {WebInspector.Searchable}
  */
 WebInspector.TimelinePanel = function()
 {
     WebInspector.Panel.call(this, "timeline");
     this.registerRequiredCSS("timeline/timelinePanel.css");
     this.element.addEventListener("contextmenu", this._contextMenu.bind(this), false);
     this._dropTarget = new WebInspector.DropTarget(this.element, [WebInspector.DropTarget.Types.Files, WebInspector.DropTarget.Types.URIList], WebInspector.UIString("Drop timeline file or URL here"), this._handleDrop.bind(this));
 
@@ skipping 336 matching lines @@
         if (Runtime.experiments.isEnabled("timelineRecordingPerspectives") && perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Load) {
             this._reloadButton = new WebInspector.ToolbarButton(WebInspector.UIString("Record & Reload"), "refresh-toolbar-item");
             this._reloadButton.addEventListener("click", () => WebInspector.targetManager.reloadPage());
             this._panelToolbar.appendToolbarItem(this._reloadButton);
         } else {
             this._panelToolbar.appendToolbarItem(WebInspector.Toolbar.createActionButton(this._toggleRecordAction));
         }
 
         this._updateTimelineControls();
         var clearButton = new WebInspector.ToolbarButton(WebInspector.UIString("Clear recording"), "clear-toolbar-item");
-        clearButton.addEventListener("click", this._onClearButtonClick, this);
+        clearButton.addEventListener("click", this._clear, this);
         this._panelToolbar.appendToolbarItem(clearButton);
 
         this._panelToolbar.appendSeparator();
 
         this._panelToolbar.appendText(WebInspector.UIString("Capture:"));
 
         this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
         if (!Runtime.experiments.isEnabled("timelineRecordingPerspectives") || perspectiveSetting.get() === WebInspector.TimelinePanel.Perspectives.Custom) {
             if (Runtime.experiments.isEnabled("networkRequestsOnTimeline")) {
                 this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(WebInspector.UIString("Network"),
@@ skipping 35 matching lines @@
                 var option = this._cpuThrottlingCombobox.createOption(name, "", String(value));
                 this._cpuThrottlingCombobox.addOption(option);
                 if (value === this._cpuThrottlingManager.rate())
                     this._cpuThrottlingCombobox.select(option);
             }
             addGroupingOption.call(this, WebInspector.UIString("No CPU throttling"), 1);
             for (var rate of [1.2, 1.5, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 15, 20, 30, 50])
                 addGroupingOption.call(this, WebInspector.UIString("%fx slowdown", rate), rate);
             this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
         }
-
-        this._progressToolbarItem = new WebInspector.ToolbarItem(createElement("div"));
-        this._progressToolbarItem.setVisible(false);
-        this._panelToolbar.appendToolbarItem(this._progressToolbarItem);
     },
 
-    /**
-     * @return {!WebInspector.Progress}
-     */
     _prepareToLoadTimeline: function()
     {
-        /**
-         * @this {!WebInspector.TimelinePanel}
-         */
-        function finishLoading()
-        {
-            this._setState(WebInspector.TimelinePanel.State.Idle);
-            this._progressToolbarItem.setVisible(false);
-            this._progressToolbarItem.element.removeChildren();
-            this._hideRecordingHelpMessage();
-        }
-        console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
-        this._setState(WebInspector.TimelinePanel.State.Loading);
-        var progressIndicator = new WebInspector.ProgressIndicator();
-        this._progressToolbarItem.setVisible(true);
-        this._progressToolbarItem.element.appendChild(progressIndicator.element);
-        return new WebInspector.ProgressProxy(progressIndicator, finishLoading.bind(this));
+         console.assert(this._state === WebInspector.TimelinePanel.State.Idle);
+         this._setState(WebInspector.TimelinePanel.State.Loading);
     },
 
     _createFileSelector: function()
     {
         if (this._fileSelectorElement)
             this._fileSelectorElement.remove();
         this._fileSelectorElement = WebInspector.createFileSelectorElement(this._loadFromFile.bind(this));
         this.element.appendChild(this._fileSelectorElement);
     },
 
@@ skipping 45 matching lines @@
         return true;
     },
 
     /**
      * @param {!File} file
      */
     _loadFromFile: function(file)
     {
         if (this._state !== WebInspector.TimelinePanel.State.Idle)
             return;
-        WebInspector.TimelineLoader.loadFromFile(this._model, file, this._prepareToLoadTimeline());
+        this._prepareToLoadTimeline();
+        this._loader = WebInspector.TimelineLoader.loadFromFile(this._tracingModel, file, this);
         this._createFileSelector();
     },
 
     /**
      * @param {string} url
      */
     _loadFromURL: function(url)
     {
         if (this._state !== WebInspector.TimelinePanel.State.Idle)
             return;
-        WebInspector.TimelineLoader.loadFromURL(this._model, url, this._prepareToLoadTimeline());
+        this._prepareToLoadTimeline();
+        this._loader = WebInspector.TimelineLoader.loadFromURL(this._tracingModel, url, this);
     },
 
     _refreshViews: function()
     {
         for (var i = 0; i < this._currentViews.length; ++i) {
             var view = this._currentViews[i];
             view.refreshRecords();
         }
         this._updateSelectionDetails();
     },
@@ skipping 69 matching lines @@
         this._recordingOptionUIControls.forEach(handler);
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _startRecording: function(userInitiated)
     {
         console.assert(!this._statusPane, "Status pane is already opened.");
         this._setState(WebInspector.TimelinePanel.State.StartPending);
-        this._statusPane = new WebInspector.TimelinePanel.StatusPane();
-        this._statusPane.addEventListener(WebInspector.TimelinePanel.StatusPane.Events.Finish, this._stopRecording, this);
+        this._statusPane = new WebInspector.TimelinePanel.StatusPane(this._stopRecording.bind(this));
         this._statusPane.showPane(this._statusPaneContainer);
         this._statusPane.updateStatus(WebInspector.UIString("Initializing recording\u2026"));
 
         this._autoRecordGeneration = userInitiated ? null : Symbol("Generation");
         this._model.startRecording(true, this._captureJSProfileSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting.get(), this._captureFilmStripSetting && this._captureFilmStripSetting.get());
 
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStarted();
 
         if (userInitiated)
@@ skipping 39 matching lines @@
             this._stopRecording();
     },
 
     _garbageCollectButtonClicked: function()
     {
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].heapProfilerAgent().collectGarbage();
     },
 
-    _onClearButtonClick: function()
+    _clear: function()
     {
         this._tracingModel.reset();
         this._model.reset();
         this._showRecordingHelpMessage();
     },
 
     _onRecordsCleared: function()
     {
         this.requestWindowTimes(0, Infinity);
         delete this._selection;
@@ skipping 97 matching lines @@
         this._setMarkers();
         this._overviewPane.scheduleUpdate();
         this._updateSearchHighlight(false, true);
         if (this._statusPane) {
             this._statusPane.hide();
             delete this._statusPane;
         }
         this._detailsSplitWidget.showBoth();
     },
 
+    /**
+     * @override
+     */
+    loadingStarted: function()
+    {
+        this._hideRecordingHelpMessage();
+        this._model.startCollectingTraceEvents(true);
+
+        if (this._statusPane)
+            this._statusPane.hide();
+        this._statusPane = new WebInspector.TimelinePanel.StatusPane(this._cancelLoading.bind(this));
+        this._statusPane.showPane(this._statusPaneContainer);
+        this._statusPane.updateStatus(WebInspector.UIString("Loading timeline\u2026"));
+        this.loadingProgress(0);
+    },
+
+    /**
+     * @override
+     * @param {number=} progress
+     */
+    loadingProgress: function(progress)
+    {
+        if (typeof progress === "number")
+            this._statusPane.updateProgressBar(WebInspector.UIString("Received"), progress * 100);
+    },
+
+    /**
+     * @override
+     * @param {boolean} success
+     */
+    loadingComplete: function(success)
+    {
+        if (!success) {
+            this._onRecordingStopped();
+            this._clear();
+        } else {
+            this._model.tracingComplete();
+        }
+        delete this._loader;
+    },
+
+    _cancelLoading: function()
+    {
+        if (this._loader)
+            this._loader.cancel();
+    },
+
     _setMarkers: function()
     {
         var markers = new Map();
         var recordTypes = WebInspector.TimelineModel.RecordType;
         var zeroTime = this._model.minimumRecordTime();
         for (var record of this._model.eventDividerRecords()) {
             if (record.type() === recordTypes.TimeStamp || record.type() === recordTypes.ConsoleTime)
                 continue;
             markers.set(record.startTime(), WebInspector.TimelineUIUtils.createDividerForRecord(record, zeroTime, 0));
         }
@@ skipping 409 matching lines @@
             leftTime = Math.max(leftTime - 0.05 * span, this._tracingModel.minimumRecordTime());
             rightTime = Math.min(rightTime + 0.05 * span, this._tracingModel.maximumRecordTime());
         }
         this.requestWindowTimes(leftTime, rightTime);
     },
 
     __proto__: WebInspector.Panel.prototype
 }
 
 /**
+ * @interface
+ */
+WebInspector.TimelineLifecycleDelegate = function()

[alph, 2016/03/02 21:03:12]

Looks like a regular progress indicator delegate interface. Should we call it
accordingly, e.g. ProgressDelegate ?

+{
+}
+
+WebInspector.TimelineLifecycleDelegate.prototype = {
+    loadingStarted: function() {},
+
+    /**
+     * @param {number=} progress
+     */
+    loadingProgress: function(progress) {},
+
+    /**
+     * @param {boolean} success
+     */
+    loadingComplete: function(success) {},
+};
+
+
+/**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.TimelineModeView}
  * @param {!WebInspector.TimelineModeViewDelegate} delegate
  * @param {!WebInspector.TimelineTreeView} innerTreeView
  */
 WebInspector.TimelineTreeModeView = function(delegate, innerTreeView)
 {
     WebInspector.VBox.call(this);
     this._treeView = innerTreeView;
@@ skipping 475 matching lines @@
             return true;
         }
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
+ * @param {function()} stopCallback
  */
-WebInspector.TimelinePanel.StatusPane = function()
+WebInspector.TimelinePanel.StatusPane = function(stopCallback)
 {
     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("timeline/timelineStatusDialog.css");
     this.contentElement.classList.add("timeline-status-dialog");
 
     var statusLine = this.contentElement.createChild("div", "status-dialog-line status");
     statusLine.createChild("div", "label").textContent = WebInspector.UIString("Status");
     this._status = statusLine.createChild("div", "content");
 
-    var timeLine = this.contentElement.createChild("div", "status-dialog-line time");
-    timeLine.createChild("div", "label").textContent = WebInspector.UIString("Time");
-    this._time = timeLine.createChild("div", "content");
+    this._timeLine = this.contentElement.createChild("div", "status-dialog-line time hidden");
+    this._timeLine.createChild("div", "label").textContent = WebInspector.UIString("Time");
+    this._time = this._timeLine.createChild("div", "content");
 
     var progressLine = this.contentElement.createChild("div", "status-dialog-line progress");
     this._progressLabel = progressLine.createChild("div", "label");
     this._progressBar = progressLine.createChild("div", "indicator-container").createChild("div", "indicator");
 
-    this._stopButton = createTextButton(WebInspector.UIString("Finish"), this._onFinish.bind(this));
+    this._stopButton = createTextButton(WebInspector.UIString("Stop"), stopCallback);
     this.contentElement.createChild("div", "stop-button").appendChild(this._stopButton);
 }
 
-WebInspector.TimelinePanel.StatusPane.Events = {
-    Finish: "Finish"
-}
-
 WebInspector.TimelinePanel.StatusPane.prototype = {
     finish: function()
     {
         this._stopTimer();
         this._stopButton.disabled = true;
     },
 
     hide: function()
     {
         this.element.parentNode.classList.remove("tinted");
@@ skipping 21 matching lines @@
      * @param {string} activity
      * @param {number} percent
      */
     updateProgressBar: function(activity, percent)
     {
         this._progressLabel.textContent = activity;
         this._progressBar.style.width = percent.toFixed(1) + "%";
         this._updateTimer();
     },
 
-    _onFinish: function()
-    {
-        this.dispatchEventToListeners(WebInspector.TimelinePanel.StatusPane.Events.Finish);
-    },
-
     startTimer: function()
     {
         this._startTime = Date.now();
         this._timeUpdateTimer = setInterval(this._updateTimer.bind(this, false), 1000);
+        this._timeLine.classList.remove("hidden");

[alph, 2016/03/02 21:03:12]

Doesn't seem good when controls move around dialog during operation.

         this._updateTimer();
     },
 
     _stopTimer: function()
     {
         if (!this._timeUpdateTimer)
             return;
         clearInterval(this._timeUpdateTimer);
         this._updateTimer(true);
         delete this._timeUpdateTimer;
@@ skipping 286 matching lines @@
      * @override
      * @param {!WebInspector.Target} target
      */
     targetRemoved: function(target)
     {
         this._targets.remove(target, true);
     },
 
     __proto__: WebInspector.Object.prototype
 }