DevTools: Introduce timeline recording info dialog

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 435 matching lines @@
             this._stopRecording();
         }
 
         /**
          * @this {!WebInspector.TimelinePanel}
          */
         function finishLoading()
         {
             this._setOperationInProgress(null);
             this._updateToggleTimelineButton(false);
-            this._hideStatusPane();
+            this._hideRecordingHelpMessage();
         }
         var progressIndicator = new WebInspector.ProgressIndicator();
         this._setOperationInProgress(progressIndicator);
         return new WebInspector.ProgressProxy(progressIndicator, finishLoading.bind(this));
     },
 
     /**
      * @param {?WebInspector.ProgressIndicator} indicator
      */
     _setOperationInProgress: function(indicator)
@@ skipping 190 matching lines @@
             toolbarItem.setEnabled(enabled);
         }
         this._recordingOptionUIControls.forEach(handler);
     },
 
     /**
      * @param {boolean} userInitiated
      */
     _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);

[caseq, 2015/08/28 23:36:55]

Can we make it a callback, not event? There does not seem to be a need for
multiple subscribers.

[alph, 2015/08/29 00:49:38]

no way. It is an event!

+        WebInspector.Dialog.show(null, this._statusDialog, true);
+        WebInspector.Dialog.currentInstance().focus();

[pfeldman, 2015/08/28 23:24:52]

Lets move this into show?

[alph, 2015/08/29 00:49:38]

Done.

         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)
             this._lazyFrameModel.setMergeRecords(false);
 
         for (var i = 0; i < this._overviewControls.length; ++i)
             this._overviewControls[i].timelineStarted();
 
         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);
     },
 
     _onSuspendStateChanged: function()
     {
         this._updateToggleTimelineButton(this.toggleTimelineButton.toggled());
     },
 
     /**
      * @param {boolean} toggled
@@ skipping 61 matching lines @@
         this._updateSelectionDetails();
         delete this._filmStripModel;
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _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();

[caseq, 2015/08/28 23:36:55]

convert to if ()?

[alph, 2015/08/29 00:49:37]

Done.

     },
 
     _recordingInProgress: function()
     {
         return this.toggleTimelineButton.toggled();
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _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);

[caseq, 2015/08/28 23:36:55]

ditto.

[alph, 2015/08/29 00:49:38]

Done.

     },
 
     _showRecordingHelpMessage: function()
     {
         /**
          * @param {string} tagName
          * @param {string} contents
          * @return {!Element}
          */
         function encloseWithTag(tagName, contents)
         {
             var e = createElement(tagName);
             e.textContent = contents;
             return e;
         }
 
         var recordNode = encloseWithTag("b", WebInspector.ShortcutsScreen.TimelinePanelShortcuts.StartStopRecording[0].name);
         var reloadNode = encloseWithTag("b", WebInspector.ShortcutsScreen.TimelinePanelShortcuts.RecordPageReload[0].name);
         var navigateNode = encloseWithTag("b", WebInspector.UIString("WASD"));
         var hintText = createElementWithClass("div", "recording-hint");
         hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("To capture a new timeline, click the record toolbar button or hit %s."), [recordNode], null));
         hintText.createChild("br");
         hintText.appendChild(WebInspector.formatLocalized(WebInspector.UIString("To evaluate page load performance, hit %s to record the reload."), [reloadNode], null));
         hintText.createChild("p");
         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);
+        this._hideRecordingHelpMessage();
+        this._helpMessageElement = this._searchableView.element.createChild("div", "timeline-status-pane fill");
+        this._helpMessageElement.removeChildren();

[caseq, 2015/08/28 23:36:55]

drop this

[alph, 2015/08/29 00:49:37]

Done.

+        this._helpMessageElement.appendChild(hintText);
     },
 
-    /**
-     * @param {string|!Element} statusMessage
-     */
-    _updateStatus: function(statusMessage)
+    _hideRecordingHelpMessage: function()
     {
-        if (!this._statusElement)
-            this._showStatusPane();
-        this._statusElement.removeChildren();
-        if (typeof statusMessage === "string")
-            this._statusElement.textContent = statusMessage;
-        else
-            this._statusElement.appendChild(statusMessage);
-    },
-
-    _showStatusPane: 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()
     {
         this._stopPending = false;
         this._updateToggleTimelineButton(false);
         if (this._lazyFrameModel) {
             this._lazyFrameModel.reset();
             this._lazyFrameModel.addTraceEvents(this._model.target(), this._model.inspectedTargetEvents(), this._tracingModel.sessionId());
         }
         this._overviewPane.reset();
         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()
     {
         var markers = new Map();
         var recordTypes = WebInspector.TimelineModel.RecordType;
         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, 0));
@@ skipping 857 matching lines @@
         case WebInspector.TimelineModel.RecordType.JSFrame:
             return false;
         default:
             return true;
         }
     },
 
     __proto__: WebInspector.TimelineModel.Filter.prototype
 }
 
+/**
+ * @constructor
+ * @extends {WebInspector.DialogDelegate}
+ */
+WebInspector.TimelinePanel.StatusDialog = function()
+{
+    WebInspector.DialogDelegate.call(this);
+    var shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
+    shadowRoot.appendChild(WebInspector.Widget.createStyleElement("timeline/timelineStatusDialog.css"));
+    this._contentElement = shadowRoot.createChild("div", "filmstrip-dialog");
+    this._contentElement.classList.add("timeline-status-dialog");

[caseq, 2015/08/28 23:36:55]

use space-separated class list in the call above?

[alph, 2015/08/29 00:49:38]

Done.

+    this._contentElement.createChild("div", "title").textContent = WebInspector.UIString("Recording Timeline");
+    this._status = this._contentElement.createChild("div", "status");
+    this._time = this._contentElement.createChild("div", "time");
+    this._bufferUsage = this._contentElement.createChild("div", "buffer-usage").createChild("div", "indicator-container").createChild("div", "indicator");
+    this._stopButton = createTextButton(WebInspector.UIString("Finish"), this._onFinish.bind(this));
+    this._contentElement.createChild("div", "stop-button").appendChild(this._stopButton);
+    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");

[caseq, 2015/08/28 23:36:55]

why not just disabled = true?

[alph, 2015/08/29 00:49:38]

Done.

+        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._startTime = Date.now();
+        this._timeUpdateTimer = setInterval(this._updateTimer.bind(this, false), 1000);
+    },
+
+    _stopTimer: function()
+    {
+        if (!this._timeUpdateTimer)
+            return;
+        clearInterval(this._timeUpdateTimer);
+        this._updateTimer(true);

[caseq, 2015/08/28 23:36:55]

I'd nuke precise mode for the sake of brevity -- it does not seem to add any
value.

[alph, 2015/08/29 00:49:38]

I'd keep it. Otherwise it might show strange values like "0 sec"

+        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());
 }
 
 /**
  * @return {!WebInspector.TimelinePanel}
  */
 WebInspector.TimelinePanel.instance = function()
 {
@@ skipping 33 matching lines @@
     /**
      * @override
      * @param {string} value
      */
     handleQueryParam: function(value)
     {
         WebInspector.TimelinePanel.show();
         WebInspector.TimelinePanel.instance()._loadFromURL(value);
     }
 }