Add the recording button back to the Timelines sidebar.

https://bugs.webkit.org/show_bug.cgi?id=127314

Reviewed by Joseph Pecoraro.

* Localizations/en.lproj/localizedStrings.js: Updated.

* UserInterface/TimelineContentView.js:
(WebInspector.TimelineContentView.prototype.get navigationItems):
(WebInspector.TimelineContentView.prototype._update):
(WebInspector.TimelineContentView.prototype._updateTimes):
(WebInspector.TimelineContentView.prototype._startUpdatingCurrentTime):
(WebInspector.TimelineContentView.prototype._recordingTimesUpdated):
(WebInspector.TimelineContentView.prototype._clearTimeline):
(WebInspector.TimelineContentView.prototype._recordingReset):
Add a clear button and reset the time ruler and views when the recording resets.

* UserInterface/TimelineSidebarPanel.css:
(.sidebar > .panel.timeline > .status-bar):
(.sidebar > .panel.timeline > .status-bar > .record-glyph):
(.sidebar > .panel.timeline > .status-bar > .record-glyph.recording):
(.sidebar > .panel.timeline > .status-bar > .record-glyph:hover):
(.sidebar > .panel.timeline > .status-bar > .record-glyph.recording:hover):
(.sidebar > .panel.timeline > .status-bar > .record-glyph.forced):
(.sidebar > .panel.timeline > .status-bar > .record-glyph.recording.forced):
(.sidebar > .panel.timeline > .status-bar > .record-status):
Add styles for the recording button and status message.

* UserInterface/TimelineSidebarPanel.js:
(WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
(WebInspector.TimelineSidebarPanel.prototype._recordingStarted):
(WebInspector.TimelineSidebarPanel.prototype._recordingStopped):
(WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOver):
(WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOut):
(WebInspector.TimelineSidebarPanel.prototype._recordGlyphClicked):
Add support for the recording button and status message.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162422 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog

+2014-01-20  Timothy Hatcher  <timothy@apple.com>
+
+        Add the recording button back to the Timelines sidebar.
+
+        https://bugs.webkit.org/show_bug.cgi?id=127314
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js: Updated.
+
+        * UserInterface/TimelineContentView.js:
+        (WebInspector.TimelineContentView.prototype.get navigationItems):
+        (WebInspector.TimelineContentView.prototype._update):
+        (WebInspector.TimelineContentView.prototype._updateTimes):
+        (WebInspector.TimelineContentView.prototype._startUpdatingCurrentTime):
+        (WebInspector.TimelineContentView.prototype._recordingTimesUpdated):
+        (WebInspector.TimelineContentView.prototype._clearTimeline):
+        (WebInspector.TimelineContentView.prototype._recordingReset):
+        Add a clear button and reset the time ruler and views when the recording resets.
+
+        * UserInterface/TimelineSidebarPanel.css:
+        (.sidebar > .panel.timeline > .status-bar):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph.recording):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph:hover):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph.recording:hover):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph.forced):
+        (.sidebar > .panel.timeline > .status-bar > .record-glyph.recording.forced):
+        (.sidebar > .panel.timeline > .status-bar > .record-status):
+        Add styles for the recording button and status message.
+
+        * UserInterface/TimelineSidebarPanel.js:
+        (WebInspector.TimelineSidebarPanel.prototype._contentBrowserCurrentContentViewDidChange):
+        (WebInspector.TimelineSidebarPanel.prototype._recordingStarted):
+        (WebInspector.TimelineSidebarPanel.prototype._recordingStopped):
+        (WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOver):
+        (WebInspector.TimelineSidebarPanel.prototype._recordGlyphMousedOut):
+        (WebInspector.TimelineSidebarPanel.prototype._recordGlyphClicked):
+        Add support for the recording button and status message.
+
 2014-01-20  Timothy Hatcher  <timothy@apple.com>
 
         Make the TimelineRecordTreeElement location subtitle live.

Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

 var localizedStrings = new Object;

Source/WebInspectorUI/UserInterface/TimelineContentView.js

@@ -44,6 +44,9 @@ WebInspector.TimelineContentView = function(recording)
     this._viewContainer.classList.add(WebInspector.TimelineContentView.ViewContainerStyleClassName);
     this.element.appendChild(this._viewContainer);
 
+    this._clearTimelineNavigationItem = new WebInspector.ButtonNavigationItem("clear-timeline", WebInspector.UIString("Clear Timeline"), "Images/NavigationItemTrash.svg", 16, 16);
+    this._clearTimelineNavigationItem.addEventListener(WebInspector.ButtonNavigationItem.Event.Clicked, this._clearTimeline, this);
+
     this._overviewTimelineView = new WebInspector.OverviewTimelineView(recording);
 
     this._discreteTimelineViewMap = new Map;
@@ -77,7 +80,9 @@ WebInspector.TimelineContentView = function(recording)
     this._currentTimelineViewIdentifier = null;
 
     this._updating = false;
+    this._currentTime = NaN;
     this._lastUpdateTimestamp = NaN;
+    this._startTimeNeedsReset = true;
 
     recording.addEventListener(WebInspector.TimelineRecording.Event.Reset, this._recordingReset, this);
 
@@ -128,6 +133,11 @@ WebInspector.TimelineContentView.prototype = {
         return [this._pathComponentMap.get(this._currentTimelineViewIdentifier)];
     },
 
+    get navigationItems()
+    {
+        return [this._clearTimelineNavigationItem];
+    },
+
     shown: function()
     {
         if (!this._currentTimelineView)
@@ -241,6 +251,11 @@ WebInspector.TimelineContentView.prototype = {
 
     _update: function(timestamp)
     {
+        if (this._waitingToResetCurrentTime) {
+            requestAnimationFrame(this._updateCallback);
+            return;
+        }
+
         var startTime = this._recording.startTime;
         var currentTime = this._currentTime || startTime;
         var endTime = this._recording.endTime;
@@ -248,6 +263,21 @@ WebInspector.TimelineContentView.prototype = {
 
         currentTime += timespanSinceLastUpdate;
 
+        this._updateTimes(startTime, currentTime, endTime);
+
+        // Only stop updating if the current time is greater than the end time.
+        if (!this._updating && currentTime >= endTime) {
+            this._lastUpdateTimestamp = NaN;
+            return;
+        }
+
+        this._lastUpdateTimestamp = timestamp;
+
+        requestAnimationFrame(this._updateCallback);
+    },
+
+    _updateTimes: function(startTime, currentTime, endTime)
+    {
         if (this._startTimeNeedsReset && !isNaN(startTime)) {
             var selectionOffset = this._timelineOverview.selectionStartTime - this._timelineOverview.startTime;
 
@@ -270,16 +300,6 @@ WebInspector.TimelineContentView.prototype = {
         // Force a layout now since we are already in an animation frame and don't need to delay it until the next.
         this._timelineOverview.updateLayoutIfNeeded();
         this._currentTimelineView.updateLayoutIfNeeded();
-
-        // Only stop updating if the current time is greater than the end time.
-        if (!this._updating && currentTime >= endTime) {
-            this._lastUpdateTimestamp = NaN;
-            return;
-        }
-
-        this._lastUpdateTimestamp = timestamp;
-
-        requestAnimationFrame(this._updateCallback);
     },
 
     _startUpdatingCurrentTime: function()
@@ -288,6 +308,13 @@ WebInspector.TimelineContentView.prototype = {
         if (this._updating)
             return;
 
+        if (!isNaN(this._currentTime)) {
+            // We have a current time already, so we likely need to jump into the future to a better current time.
+            // This happens when you stop and later restart recording.
+            this._waitingToResetCurrentTime = true;
+            this._recording.addEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        }
+
         this._updating = true;
 
         if (!this._updateCallback)
@@ -312,11 +339,48 @@ WebInspector.TimelineContentView.prototype = {
         this._stopUpdatingCurrentTime();
     },
 
+    _recordingTimesUpdated: function(event)
+    {
+        if (!this._waitingToResetCurrentTime)
+            return;
+
+        // Make the current time be the start time of the last added record. This is the best way
+        // currently to jump to the right period of time after recording starts.
+        // FIXME: If no activity is happening we can sit for a while until a record is added.
+        // We might want to have the backend send a "start" record to get current time moving.
+
+        for (var timeline of this._recording.timelines.values()) {
+            var lastRecord = timeline.records.lastValue;
+            if (!lastRecord)
+                continue;
+            this._currentTime = Math.max(this._currentTime, lastRecord.startTime);
+        }
+
+        this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        delete this._waitingToResetCurrentTime;
+    },
+
+    _clearTimeline: function(event)
+    {
+        this._recording.reset();
+    },
+
     _recordingReset: function(event)
     {
-        this._startTimeNeedsReset = true;
         this._currentTime = NaN;
 
+        if (!this._updating) {
+            // Force the time ruler and views to reset to 0.
+            this._startTimeNeedsReset = true;
+            this._updateTimes(0, 0, 0);
+        }
+
+        this._lastUpdateTimestamp = NaN;
+        this._startTimeNeedsReset = true;
+
+        this._recording.removeEventListener(WebInspector.TimelineRecording.Event.TimesUpdated, this._recordingTimesUpdated, this);
+        delete this._waitingToResetCurrentTime;
+
         this._overviewTimelineView.reset();
         for (var timelineView of this._discreteTimelineViewMap.values())
             timelineView.reset();

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.css

@@ -23,11 +23,70 @@
  * THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-.sidebar > .panel.timeline > .navigation-bar {
+.sidebar > .panel.timeline > .status-bar {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
+    height: 22px;
+    border-bottom: 1px solid rgb(179, 179, 179);
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 21px;
+    height: 21px;
+    padding: 0;
+    border: none;
+    outline: none;
+    color: transparent;
+    overflow: hidden;
+
+    -webkit-appearance: none;
+
+    background-color: transparent;
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
+    background-repeat: no-repeat;
+    background-size: 21px 21px;
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph.recording {
+    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x);
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph:hover {
+    background-image: -webkit-image-set(url(Images/RecordingHovered.png) 1x, url(Images/RecordingHovered@2x.png) 2x);
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph.recording:hover {
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x);
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph.forced {
+    background-image: -webkit-image-set(url(Images/RecordingStopped.png) 1x, url(Images/RecordingStopped@2x.png) 2x) !important;
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-glyph.recording.forced {
+    background-image: -webkit-image-set(url(Images/Recording.png) 1x, url(Images/Recording@2x.png) 2x) !important;
+}
+
+.sidebar > .panel.timeline > .status-bar > .record-status {
+    position: absolute;
+    top: 0;
+    right: 21px;
+    left: 21px;
+
+    text-align: center;
+
+    line-height: 20px;
+    font-size: 11px;
+    font-family: "Lucida Grande", sans-serif;
+    font-weight: bold;
+
+    color: rgb(76, 76, 76);
+    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
 }
 
 .sidebar > .panel.timeline > .title-bar {

Source/WebInspectorUI/UserInterface/TimelineSidebarPanel.js

@@ -49,8 +49,20 @@ WebInspector.TimelineSidebarPanel = function()
     timelinesTitleBarElement.classList.add(WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass);
     this.element.insertBefore(timelinesTitleBarElement, this.element.firstChild);
 
-    this._navigationBar = new WebInspector.NavigationBar;
-    this.element.insertBefore(this._navigationBar.element, this.element.firstChild);
+    var statusBarElement = document.createElement("div");
+    statusBarElement.classList.add(WebInspector.TimelineSidebarPanel.StatusBarStyleClass);
+    this.element.insertBefore(statusBarElement, this.element.firstChild);
+
+    this._recordGlyphElement = document.createElement("div");
+    this._recordGlyphElement.className = WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass;
+    this._recordGlyphElement.addEventListener("mouseover", this._recordGlyphMousedOver.bind(this));
+    this._recordGlyphElement.addEventListener("mouseout", this._recordGlyphMousedOut.bind(this));
+    this._recordGlyphElement.addEventListener("click", this._recordGlyphClicked.bind(this));
+    statusBarElement.appendChild(this._recordGlyphElement);
+
+    this._recordStatusElement = document.createElement("div");
+    this._recordStatusElement.className = WebInspector.TimelineSidebarPanel.RecordStatusStyleClass;
+    statusBarElement.appendChild(this._recordStatusElement);
 
     function createTimelineTreeElement(label, iconClass, identifier)
     {
@@ -78,6 +90,8 @@ WebInspector.TimelineSidebarPanel = function()
     this.contentElement.insertBefore(this._stripeBackgroundElement, this.contentElement.firstChild);
 
     WebInspector.contentBrowser.addEventListener(WebInspector.ContentBrowser.Event.CurrentContentViewDidChange, this._contentBrowserCurrentContentViewDidChange, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStarted, this._recordingStarted, this);
+    WebInspector.timelineManager.addEventListener(WebInspector.TimelineManager.Event.RecordingStopped, this._recordingStopped, this);
 
     function delayedWork()
     {
@@ -89,6 +103,11 @@ WebInspector.TimelineSidebarPanel = function()
     setTimeout(delayedWork.bind(this), 0);
 };
 
+WebInspector.TimelineSidebarPanel.StatusBarStyleClass = "status-bar";
+WebInspector.TimelineSidebarPanel.RecordGlyphStyleClass = "record-glyph";
+WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass = "recording";
+WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass = "forced";
+WebInspector.TimelineSidebarPanel.RecordStatusStyleClass = "record-status";
 WebInspector.TimelineSidebarPanel.TitleBarStyleClass = "title-bar";
 WebInspector.TimelineSidebarPanel.TimelinesTitleBarStyleClass = "timelines";
 WebInspector.TimelineSidebarPanel.TimelineEventsTitleBarStyleClass = "timeline-events";
@@ -288,5 +307,48 @@ WebInspector.TimelineSidebarPanel.prototype = {
             this.element.classList.add(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
         else
             this.element.classList.remove(WebInspector.TimelineSidebarPanel.TimelineContentViewShowingStyleClass);
+    },
+
+    _recordingStarted: function(event)
+    {
+        this._recordStatusElement.textContent = WebInspector.UIString("Recording");
+        this._recordGlyphElement.classList.add(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _recordingStopped: function(event)
+    {
+        this._recordStatusElement.textContent = "";
+        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingStyleClass);
+    },
+
+    _recordGlyphMousedOver: function(event)
+    {
+        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recordingEnabled)
+            this._recordStatusElement.textContent = WebInspector.UIString("Stop Recording");
+        else
+            this._recordStatusElement.textContent = WebInspector.UIString("Start Recording");
+    },
+
+    _recordGlyphMousedOut: function(event)
+    {
+        this._recordGlyphElement.classList.remove(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recordingEnabled)
+            this._recordStatusElement.textContent = WebInspector.UIString("Recording");
+        else
+            this._recordStatusElement.textContent = "";
+    },
+
+    _recordGlyphClicked: function(event)
+    {
+        // Add forced class to prevent the glyph from showing a confusing status after click.
+        this._recordGlyphElement.classList.add(WebInspector.TimelineSidebarPanel.RecordGlyphRecordingForcedStyleClass);
+
+        if (WebInspector.timelineManager.recordingEnabled)
+            WebInspector.timelineManager.stopRecording();
+        else
+            WebInspector.timelineManager.startRecording();
     }
 };