Commit 8bc799e8 authored by timothy@apple.com's avatar 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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162422 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 2733f18a
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.
......
......@@ -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();
......
......@@ -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 {
......
......@@ -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();
}
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment