DevTools: Introduce timeline recording info dialog

Source/devtools/front_end/timeline/TimelinePanel.js

Index: Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/Source/devtools/front_end/timeline/TimelinePanel.js b/Source/devtools/front_end/timeline/TimelinePanel.js
index d37b2416bb0fbd2daf5ff63f3da8863c711d1954..c4b573e6fe9df94f948438d2e52d2f4513055808 100644
--- a/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -453,7 +453,7 @@ WebInspector.TimelinePanel.prototype = {
         {
             this._setOperationInProgress(null);
             this._updateToggleTimelineButton(false);
-            this._hideStatusPane();
+            this._hideRecordingHelpMessage();
         }
         var progressIndicator = new WebInspector.ProgressIndicator();
         this._setOperationInProgress(progressIndicator);
@@ -664,7 +664,13 @@ WebInspector.TimelinePanel.prototype = {
      */
     _startRecording: function(userInitiated)
     {
+        console.assert(!this._statusDialog, "Status dialog is already opened.");
+        this._statusDialog = new WebInspector.TimelinePanel.StatusDialog();
+        this._statusDialog.addEventListener(WebInspector.TimelinePanel.StatusDialog.Events.Finish, this._stopRecording, this);
+        WebInspector.Dialog.show(null, this._statusDialog, true);
+        WebInspector.Dialog.currentInstance().focus();
         this._updateStatus(WebInspector.UIString("Initializing recording\u2026"));
+
         this._autoRecordGeneration = userInitiated ? null : {};
         this._model.startRecording(true, this._enableJSSamplingSettingSetting.get(), this._captureMemorySetting.get(), this._captureLayersAndPicturesSetting.get(), this._captureFilmStripSetting && this._captureFilmStripSetting.get());
         if (this._lazyFrameModel)
@@ -676,16 +682,17 @@ WebInspector.TimelinePanel.prototype = {
         if (userInitiated)
             WebInspector.userMetrics.TimelineStarted.record();
         this._setUIControlsEnabled(false);
+        this._hideRecordingHelpMessage();
     },
 
     _stopRecording: function()
     {
+        this._statusDialog && this._statusDialog.finish();
+        this._updateStatus(WebInspector.UIString("Retrieving timeline\u2026"));
         this._stopPending = true;
         this._updateToggleTimelineButton(false);
         this._autoRecordGeneration = null;
         this._model.stopRecording();
-        if (this._statusElement)
-            this._updateStatus(WebInspector.UIString("Retrieving events\u2026"));
         this._setUIControlsEnabled(true);
     },
 
@@ -767,10 +774,9 @@ WebInspector.TimelinePanel.prototype = {
     _onRecordingStarted: function(event)
     {
         this._updateToggleTimelineButton(true);
-        if (event.data && event.data.fromFile)
-            this._updateStatus(WebInspector.UIString("Loading\u2026"));
-        else
-            this._updateStatus(WebInspector.UIString("%d events collected", 0));
+        var message = event.data && event.data.fromFile ? WebInspector.UIString("Loading\u2026") : WebInspector.UIString("Recording\u2026");
+        this._updateStatus(message);
+        this._statusDialog && this._statusDialog.startTimer();
     },
 
     _recordingInProgress: function()
@@ -784,16 +790,20 @@ WebInspector.TimelinePanel.prototype = {
     _onTracingBufferUsage: function(event)
     {
         var usage = /** @type {number} */ (event.data);
-        this._updateStatus(WebInspector.UIString("Buffer usage %d%%", Math.round(usage * 100)));
+        this._statusDialog && this._statusDialog.updateBufferUsage(usage * 100);
+    },
+
+    _onRetrieveEventsProgress: function()
+    {
+        this._updateStatus(WebInspector.UIString("Retrieving timeline\u2026"));
     },
 
     /**
-     * @param {!WebInspector.Event} event
+     * @param {string} statusMessage
      */
-    _onRetrieveEventsProgress: function(event)
+    _updateStatus: function(statusMessage)
     {
-        var progress = /** @type {number} */ (event.data);
-        this._updateStatus(WebInspector.UIString("Retrieving events\u2026 %d%%", Math.round(progress * 100)));
+        this._statusDialog && this._statusDialog.updateStatus(statusMessage);
     },
 
     _showRecordingHelpMessage: function()
@@ -821,34 +831,17 @@ WebInspector.TimelinePanel.prototype = {
         hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("After recording, select an area of interest in the overview by dragging."), [], null));
         hintText.createChild("br");
         hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("Then, zoom and pan the timeline with the mousewheel and %s keys."), [navigateNode], null));
-        this._updateStatus(hintText);
-    },
-
-    /**
-     * @param {string|!Element} statusMessage
-     */
-    _updateStatus: function(statusMessage)
-    {
-        if (!this._statusElement)
-            this._showStatusPane();
-        this._statusElement.removeChildren();
-        if (typeof statusMessage === "string")
-            this._statusElement.textContent = statusMessage;
-        else
-            this._statusElement.appendChild(statusMessage);
+        this._hideRecordingHelpMessage();
+        this._helpMessageElement = this._searchableView.element.createChild("div", "timeline-status-pane fill");
+        this._helpMessageElement.removeChildren();
+        this._helpMessageElement.appendChild(hintText);
     },
 
-    _showStatusPane: function()
+    _hideRecordingHelpMessage: function()
     {
-        this._hideStatusPane();
-        this._statusElement = this._searchableView.element.createChild("div", "timeline-status-pane fill");
-    },
-
-    _hideStatusPane: function()
-    {
-        if (this._statusElement)
-            this._statusElement.remove();
-        delete this._statusElement;
+        if (this._helpMessageElement)
+            this._helpMessageElement.remove();
+        delete this._helpMessageElement;
     },
 
     _onRecordingStopped: function()
@@ -863,12 +856,15 @@ WebInspector.TimelinePanel.prototype = {
         this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());
         this.requestWindowTimes(this._model.minimumRecordTime(), this._model.maximumRecordTime());
         this._refreshViews();
-        this._hideStatusPane();
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStopped();
         this._setMarkers();
         this._overviewPane.scheduleUpdate();
         this._updateSearchHighlight(false, true);
+        if (this._statusDialog) {
+            this._statusDialog.hide();
+            delete this._statusDialog;
+        }
     },
 
     _setMarkers: function()
@@ -1746,6 +1742,114 @@ WebInspector.TimelineStaticFilter.prototype = {
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }
 
+/**
+ * @constructor
+ * @extends {WebInspector.DialogDelegate}
+ */
+WebInspector.TimelinePanel.StatusDialog = function()
+{
+    WebInspector.DialogDelegate.call(this);
+    this.element.classList.add("timeline-status-dialog");
+    this.element.createChild("div", "title").textContent = WebInspector.UIString("Recording Timeline");
+    this._status = this.element.createChild("div", "status");

[pfeldman, 2015/08/27 22:22:13]

Please use timeline prefix everywhere or migrate to shadow.

[alph, 2015/08/28 18:34:42]

Done.

+    this._time = this.element.createChild("div", "time");
+    this._bufferUsage = this.element.createChild("div", "buffer-usage").createChild("div", "indicator-container").createChild("div", "indicator");
+    this._stopButton = this.element.createChild("div", "stop-button").createChild("button");
+    this._stopButton.textContent = WebInspector.UIString("Finish");
+    this._stopButton.setAttribute("autofocus", "true");
+    this._stopButton.addEventListener("click", this._onFinish.bind(this));
+    this._startTime = Date.now();
+    this._finishKeys = new Set([
+        WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Space).key,
+        WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Enter).key,
+        WebInspector.ShortcutsScreen.TimelinePanelShortcuts.StartStopRecording[0].key
+    ]);
+}
+
+WebInspector.TimelinePanel.StatusDialog.Events = {
+    Finish: "Finish"
+}
+
+WebInspector.TimelinePanel.StatusDialog.prototype = {
+    /**
+     * @override
+     */
+    willHide: function()
+    {
+        this._stopTimer();
+    },
+
+    finish: function()
+    {
+        this._stopButton.setAttribute("disabled", "true");
+        this._stopTimer();
+    },
+
+    hide: function()
+    {
+        WebInspector.Dialog.hide();
+    },
+
+    /**
+     * @param {string} text
+     */
+    updateStatus: function(text)
+    {
+        this._status.textContent = text;
+    },
+
+    /**
+     * @param {number} percent
+     */
+    updateBufferUsage: function(percent)
+    {
+        this._bufferUsage.style.width = percent.toFixed(1) + "%";
+        this._updateTimer();
+    },
+
+    /**
+     * @override
+     * @param {!KeyboardEvent} event
+     */
+    onKeyDown: function(event)
+    {
+        var key = WebInspector.KeyboardShortcut.makeKeyFromEvent(event);
+        if (this._finishKeys.has(key))
+            this._onFinish();
+        event.consume();
+    },
+
+    _onFinish: function()
+    {
+        this.dispatchEventToListeners(WebInspector.TimelinePanel.StatusDialog.Events.Finish);
+    },
+
+    startTimer: function()
+    {
+        this._timeUpdateTimer = setInterval(this._updateTimer.bind(this, false), 1000);
+    },
+
+    _stopTimer: function()
+    {
+        if (!this._timeUpdateTimer)
+            return;
+        clearInterval(this._timeUpdateTimer);
+        this._updateTimer(true);
+        delete this._timeUpdateTimer;
+    },
+
+    /**
+     * @param {boolean=} precise
+     */
+    _updateTimer: function(precise)
+    {
+        var elapsed = (Date.now() - this._startTime) / 1000;
+        this._time.textContent = WebInspector.UIString("%s\u2009sec", elapsed.toFixed(precise ? 1 : 0));
+    },
+
+    __proto__: WebInspector.DialogDelegate.prototype
+}
+
 WebInspector.TimelinePanel.show = function()
 {
     WebInspector.inspectorView.setCurrentPanel(WebInspector.TimelinePanel.instance());