Commit bf02b452 authored by timothy@apple.com's avatar timothy@apple.com

Implement bar graph rendering for WebInspector.OverviewTimelineView.

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

Reviewed by Joseph Pecoraro.

* UserInterface/Main.html: Added new files.

* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid td.graph-column):
(.timeline-view.overview > .data-grid td.graph-column > div):
(.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar):
Position the bars in the DataGrid cells.

* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.updateLayout):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
(WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
Create the proper DataGridNodes for resources and source code timelines.

* UserInterface/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
(WebInspector.ResourceTimelineDataGridNode.prototype.get records):
(WebInspector.ResourceTimelineDataGridNode.prototype.get resource):
(WebInspector.ResourceTimelineDataGridNode.prototype.get data):
(WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
(WebInspector.ResourceTimelineDataGridNode.prototype.refresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._goToResource):
Simplify by deferring the graph logic to the new TimelineDataGridNode base class.

* UserInterface/SourceCodeTimelineTimelineDataGridNode.js: Added.
(WebInspector.SourceCodeTimelineTimelineDataGridNode):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get records):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get sourceCodeTimeline):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get data):

* UserInterface/TimelineDataGridNode.js: Added.
(WebInspector.TimelineDataGridNode):
(WebInspector.TimelineDataGridNode.prototype.get records):
(WebInspector.TimelineDataGridNode.prototype.get data):
(WebInspector.TimelineDataGridNode.prototype.createCellContent):
(WebInspector.TimelineDataGridNode.prototype.refresh):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph):
(WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
Handles the graph column and manages the records and their bars.

* UserInterface/TimelineRecordBar.css: Added.
(.timeline-record-bar):
(.timeline-record-bar > .segment):
(.timeline-record-bar:not(.has-inactive-segment) > .segment):
(.timeline-record-bar.unfinished > .segment):
(.timeline-record-bar > .segment.inactive + .segment):
(:focus .selected .timeline-record-bar > .segment):
(.timeline-record-bar > .segment.inactive):
(.timeline-record-bar.timeline-record-type-network > .segment):
(.timeline-record-bar.timeline-record-type-layout > .segment):
(.timeline-record-bar.timeline-record-type-script > .segment):

* UserInterface/TimelineRecordBar.js: Added.
(WebInspector.TimelineRecordBar):
(WebInspector.TimelineRecordBar.prototype.get element):
(WebInspector.TimelineRecordBar.prototype.refresh):
(WebInspector.TimelineRecordBar.prototype._updateElementPosition):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@162412 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent c016e5fd
2014-01-11 Timothy Hatcher <timothy@apple.com>
Implement bar graph rendering for WebInspector.OverviewTimelineView.
https://bugs.webkit.org/show_bug.cgi?id=126831
Reviewed by Joseph Pecoraro.
* UserInterface/Main.html: Added new files.
* UserInterface/OverviewTimelineView.css:
(.timeline-view.overview > .data-grid td.graph-column):
(.timeline-view.overview > .data-grid td.graph-column > div):
(.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar):
Position the bars in the DataGrid cells.
* UserInterface/OverviewTimelineView.js:
(WebInspector.OverviewTimelineView.prototype.updateLayout):
(WebInspector.OverviewTimelineView.prototype._addResourceToTreeIfNeeded):
(WebInspector.OverviewTimelineView.prototype._sourceCodeTimelineAdded):
Create the proper DataGridNodes for resources and source code timelines.
* UserInterface/ResourceTimelineDataGridNode.js:
(WebInspector.ResourceTimelineDataGridNode):
(WebInspector.ResourceTimelineDataGridNode.prototype.get records):
(WebInspector.ResourceTimelineDataGridNode.prototype.get resource):
(WebInspector.ResourceTimelineDataGridNode.prototype.get data):
(WebInspector.ResourceTimelineDataGridNode.prototype.createCellContent):
(WebInspector.ResourceTimelineDataGridNode.prototype.refresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._needsRefresh):
(WebInspector.ResourceTimelineDataGridNode.prototype._goToResource):
Simplify by deferring the graph logic to the new TimelineDataGridNode base class.
* UserInterface/SourceCodeTimelineTimelineDataGridNode.js: Added.
(WebInspector.SourceCodeTimelineTimelineDataGridNode):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get records):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get sourceCodeTimeline):
(WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype.get data):
* UserInterface/TimelineDataGridNode.js: Added.
(WebInspector.TimelineDataGridNode):
(WebInspector.TimelineDataGridNode.prototype.get records):
(WebInspector.TimelineDataGridNode.prototype.get data):
(WebInspector.TimelineDataGridNode.prototype.createCellContent):
(WebInspector.TimelineDataGridNode.prototype.refresh):
(WebInspector.TimelineDataGridNode.prototype.refreshGraph):
(WebInspector.TimelineDataGridNode.prototype.needsGraphRefresh):
Handles the graph column and manages the records and their bars.
* UserInterface/TimelineRecordBar.css: Added.
(.timeline-record-bar):
(.timeline-record-bar > .segment):
(.timeline-record-bar:not(.has-inactive-segment) > .segment):
(.timeline-record-bar.unfinished > .segment):
(.timeline-record-bar > .segment.inactive + .segment):
(:focus .selected .timeline-record-bar > .segment):
(.timeline-record-bar > .segment.inactive):
(.timeline-record-bar.timeline-record-type-network > .segment):
(.timeline-record-bar.timeline-record-type-layout > .segment):
(.timeline-record-bar.timeline-record-type-script > .segment):
* UserInterface/TimelineRecordBar.js: Added.
(WebInspector.TimelineRecordBar):
(WebInspector.TimelineRecordBar.prototype.get element):
(WebInspector.TimelineRecordBar.prototype.refresh):
(WebInspector.TimelineRecordBar.prototype._updateElementPosition):
2014-01-08 Timothy Hatcher <timothy@apple.com>
Update the current WebInspector.TimelineView when time range changes.
......
......@@ -87,6 +87,7 @@
<link rel="stylesheet" href="TimelineIcons.css">
<link rel="stylesheet" href="TimelineRuler.css">
<link rel="stylesheet" href="TimelineDataGrid.css">
<link rel="stylesheet" href="TimelineRecordBar.css">
<link rel="stylesheet" href="TimelineOverview.css">
<link rel="stylesheet" href="ProfileView.css">
<link rel="stylesheet" href="JavaScriptProfileView.css">
......@@ -348,12 +349,15 @@
<script src="TimelineDataGrid.js"></script>
<script src="LayoutTimelineDataGrid.js"></script>
<script src="ScriptTimelineDataGrid.js"></script>
<script src="TimelineRecordBar.js"></script>
<script src="TimelineDataGridNode.js"></script>
<script src="ResourceTimelineDataGridNode.js"></script>
<script src="ResourceTimelineDataGridNodePathComponent.js"></script>
<script src="LayoutTimelineRecord.js"></script>
<script src="LayoutTimelineDataGridNode.js"></script>
<script src="ScriptTimelineRecord.js"></script>
<script src="ScriptTimelineDataGridNode.js"></script>
<script src="SourceCodeTimelineTimelineDataGridNode.js"></script>
<script src="TreeOutlineDataGridSynchronizer.js"></script>
<script src="TimelineOverview.js"></script>
<script src="ProfileManager.js"></script>
......
......@@ -56,3 +56,16 @@
.timeline-view.overview > .data-grid .data-container {
top: 0;
}
.timeline-view.overview > .data-grid td.graph-column {
padding: 2px 0;
}
.timeline-view.overview > .data-grid td.graph-column > div {
position: relative;
height: 16px;
}
.timeline-view.overview > .data-grid td.graph-column .timeline-record-bar {
top: 2px;
}
......@@ -44,6 +44,8 @@ WebInspector.OverviewTimelineView = function()
this.element.classList.add(WebInspector.OverviewTimelineView.StyleClassName);
this.element.appendChild(this._dataGrid.element);
this._pendingRepresentedObjects = [];
WebInspector.timelineManager.recording.addEventListener(WebInspector.TimelineRecording.Event.SourceCodeTimelineAdded, this._sourceCodeTimelineAdded, this);
};
......@@ -72,6 +74,8 @@ WebInspector.OverviewTimelineView.prototype = {
shown: function()
{
WebInspector.TimelineView.prototype.shown.call(this);
this._treeOutlineDataGridSynchronizer.synchronize();
},
......@@ -79,12 +83,29 @@ WebInspector.OverviewTimelineView.prototype = {
{
WebInspector.TimelineView.prototype.updateLayout.call(this);
var oldZeroTime = this._timelineRuler.zeroTime;
var oldStartTime = this._timelineRuler.startTime;
var oldEndTime = this._timelineRuler.endTime;
var oldCurrentTime = this._currentTimeMarker.time;
this._timelineRuler.zeroTime = this.zeroTime;
this._timelineRuler.startTime = this.startTime;
this._timelineRuler.endTime = this.endTime;
this._currentTimeMarker.time = this.currentTime;
// The TimelineDataGridNode graphs are positioned with percentages, so they auto resize with the view.
// We only need to refresh the graphs when the any of the times change.
if (this.zeroTime !== oldZeroTime || this.startTime !== oldStartTime || this.endTime !== oldEndTime || this.currentTime !== oldCurrentTime) {
var item = this._dataGrid.children[0];
while (item) {
item.refreshGraph();
item = item.traverseNextNode(false, null, true);
}
}
this._timelineRuler.updateLayout();
this._processPendingRepresentedObjects();
},
// Private
......@@ -171,8 +192,11 @@ WebInspector.OverviewTimelineView.prototype = {
var resourceTreeElement = new WebInspector.ResourceTreeElement(resource);
resourceTreeElement.expand();
// FIXME: This is just a placeholder DataGridNode.
var resourceDataGridNode = new WebInspector.DataGridNode;
var resourceTimelineRecord = this._networkTimeline ? this._networkTimeline.recordForResource(resource) : null;
if (!resourceTimelineRecord)
resourceTimelineRecord = new WebInspector.ResourceTimelineRecord(resource);
var resourceDataGridNode = new WebInspector.ResourceTimelineDataGridNode(resourceTimelineRecord, true, this);
this._treeOutlineDataGridSynchronizer.associate(resourceTreeElement, resourceDataGridNode);
var parentTreeElement = this.navigationSidebarTreeOutline;
......@@ -191,12 +215,45 @@ WebInspector.OverviewTimelineView.prototype = {
return resourceTreeElement;
},
_addSourceCodeTimeline: function(sourceCodeTimeline)
{
var parentTreeElement = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToTreeIfNeeded(sourceCodeTimeline.sourceCode) : this.navigationSidebarTreeOutline;
console.assert(parentTreeElement);
if (!parentTreeElement)
return;
var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
var sourceCodeTimelineDataGridNode = new WebInspector.SourceCodeTimelineTimelineDataGridNode(sourceCodeTimeline, this);
this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
},
_processPendingRepresentedObjects: function()
{
if (!this._pendingRepresentedObjects || !this._pendingRepresentedObjects.length)
return;
for (var representedObject of this._pendingRepresentedObjects) {
if (representedObject instanceof WebInspector.Resource)
this._addResourceToTreeIfNeeded(representedObject);
else if (representedObject instanceof WebInspector.SourceCodeTimeline)
this._addSourceCodeTimeline(representedObject);
else
console.error("Unknown represented object");
}
this._pendingRepresentedObjects = [];
},
_networkTimelineRecordAdded: function(event)
{
var resourceTimelineRecord = event.data.record;
console.assert(resourceTimelineRecord instanceof WebInspector.ResourceTimelineRecord);
this._addResourceToTreeIfNeeded(resourceTimelineRecord.resource);
this._pendingRepresentedObjects.push(resourceTimelineRecord.resource);
this.needsLayout();
// We don't expect to have any source code timelines yet. Those should be added with _sourceCodeTimelineAdded.
console.assert(!WebInspector.timelineManager.recording.sourceCodeTimelinesForSourceCode(resourceTimelineRecord.resource).length);
......@@ -209,18 +266,9 @@ WebInspector.OverviewTimelineView.prototype = {
if (!sourceCodeTimeline)
return;
var parentTreeElement = sourceCodeTimeline.sourceCodeLocation ? this._addResourceToTreeIfNeeded(sourceCodeTimeline.sourceCode) : this.navigationSidebarTreeOutline;
console.assert(parentTreeElement);
if (!parentTreeElement)
return;
this._pendingRepresentedObjects.push(sourceCodeTimeline);
var sourceCodeTimelineTreeElement = new WebInspector.SourceCodeTimelineTreeElement(sourceCodeTimeline);
// FIXME: This is just a placeholder DataGridNode.
var sourceCodeTimelineDataGridNode = new WebInspector.DataGridNode;
this._treeOutlineDataGridSynchronizer.associate(sourceCodeTimelineTreeElement, sourceCodeTimelineDataGridNode);
this._insertTreeElement(sourceCodeTimelineTreeElement, parentTreeElement);
this.needsLayout();
},
_treeElementSelected: function(treeElement, selectedByUser)
......
/*
* Copyright (C) 2014 Apple 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:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 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.
*/
WebInspector.SourceCodeTimelineTimelineDataGridNode = function(sourceCodeTimeline, graphDataSource)
{
WebInspector.TimelineDataGridNode.call(this, true, graphDataSource);
this._sourceCodeTimeline = sourceCodeTimeline;
this._sourceCodeTimeline.addEventListener(WebInspector.Timeline.Event.RecordAdded, this.needsGraphRefresh, this);
};
WebInspector.Object.addConstructorFunctions(WebInspector.SourceCodeTimelineTimelineDataGridNode);
WebInspector.SourceCodeTimelineTimelineDataGridNode.prototype = {
constructor: WebInspector.SourceCodeTimelineTimelineDataGridNode,
__proto__: WebInspector.TimelineDataGridNode.prototype,
// Public
get records()
{
return this._sourceCodeTimeline.records;
},
get sourceCodeTimeline()
{
return this._sourceCodeTimeline;
},
get data()
{
return {graph: this._sourceCodeTimeline.startTime};
}
};
/*
* Copyright (C) 2014 Apple 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:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 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.
*/
WebInspector.TimelineDataGridNode = function(graphOnly, graphDataSource)
{
WebInspector.DataGridNode.call(this, {});
this._graphOnly = graphOnly || false;
this._graphDataSource = graphDataSource || null;
if (graphDataSource) {
this._graphContainerElement = document.createElement("div");
this._timelineRecordBarMap = new Map;
}
};
WebInspector.Object.addConstructorFunctions(WebInspector.TimelineDataGridNode);
WebInspector.TimelineDataGridNode.prototype = {
constructor: WebInspector.TimelineDataGridNode,
__proto__: WebInspector.DataGridNode.prototype,
// Public
get records()
{
// Implemented by subclasses.
return [];
},
get graphDataSource()
{
return this._graphDataSource;
},
get data()
{
var records = this.records || [];
return {graph: records.length ? records[0].startTime : 0};
},
createCellContent: function(columnIdentifier, cell)
{
if (columnIdentifier === "graph") {
this.refreshGraph();
return this._graphContainerElement;
}
return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
},
refresh: function()
{
if (this._graphOnly) {
this.refreshGraph();
return;
}
WebInspector.DataGridNode.prototype.refresh.call(this);
},
refreshGraph: function()
{
if (this._scheduledGraphRefreshIdentifier) {
cancelAnimationFrame(this._scheduledGraphRefreshIdentifier);
delete this._scheduledGraphRefreshIdentifier;
}
var records = this.records || [];
for (var record of records) {
var timelineRecordBar = this._timelineRecordBarMap.get(record);
if (!timelineRecordBar) {
timelineRecordBar = new WebInspector.TimelineRecordBar(record);
this._timelineRecordBarMap.set(record, timelineRecordBar);
}
if (timelineRecordBar.refresh(this._graphDataSource)) {
if (!timelineRecordBar.element.parentNode)
this._graphContainerElement.appendChild(timelineRecordBar.element);
} else {
timelineRecordBar.element.remove();
}
}
},
needsGraphRefresh: function()
{
if (this._scheduledGraphRefreshIdentifier)
return;
this._scheduledGraphRefreshIdentifier = requestAnimationFrame(this.refreshGraph.bind(this));
}
};
/*
* Copyright (C) 2014 Apple 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:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 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.
*/
.timeline-record-bar {
position: absolute;
height: 12px;
}
.timeline-record-bar > .segment {
position: absolute;
height: 12px;
background-color: rgb(225, 225, 225);
border: 1px solid rgb(200, 200, 200);
border-radius: 3px;
min-width: 4px;
}
.timeline-record-bar:not(.has-inactive-segment) > .segment {
left: 0;
width: 100%;
}
.timeline-record-bar > .segment.inactive,
.timeline-record-bar.unfinished > .segment {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.timeline-record-bar > .segment.inactive + .segment {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
:focus .selected .timeline-record-bar > .segment {
background-color: white !important;
border-color: white !important;
}
.timeline-record-bar > .segment.inactive {
opacity: 0.5;
}
.timeline-record-bar.timeline-record-type-network > .segment {
background-color: rgb(120, 176, 225);
border-color: rgb(61, 147, 200);
}
.timeline-record-bar.timeline-record-type-layout > .segment {
background-color: rgb(234, 153, 153);
border-color: rgb(212, 108, 108);
}
.timeline-record-bar.timeline-record-type-script > .segment {
background-color: rgb(190, 148, 233);
border-color: rgb(153, 113, 185);
}
/*
* Copyright (C) 2014 Apple 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:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 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.
*/
WebInspector.TimelineRecordBar = function(record)
{
WebInspector.Object.call(this);
console.assert(record);
this._record = record;
this._element = document.createElement("div");
this._element.classList.add(WebInspector.TimelineRecordBar.StyleClassName);
this._element.classList.add(record.type);
if (record.usesActiveStartTime) {
this._inactiveBarElement = document.createElement("div");
this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
this._inactiveBarElement.classList.add(WebInspector.TimelineRecordBar.InactiveStyleClassName);
this._element.classList.add(WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName);
}
this._activeBarElement = document.createElement("div");
this._activeBarElement.classList.add(WebInspector.TimelineRecordBar.BarSegmentStyleClassName);
if (this._inactiveBarElement)
this._element.appendChild(this._inactiveBarElement);
this._element.appendChild(this._activeBarElement);
};
WebInspector.Object.addConstructorFunctions(WebInspector.TimelineRecordBar);
WebInspector.TimelineRecordBar.StyleClassName = "timeline-record-bar";
WebInspector.TimelineRecordBar.BarSegmentStyleClassName = "segment";
WebInspector.TimelineRecordBar.InactiveStyleClassName = "inactive";
WebInspector.TimelineRecordBar.UnfinishedStyleClassName = "unfinished";
WebInspector.TimelineRecordBar.HasInactiveSegmentStyleClassName = "has-inactive-segment";
WebInspector.TimelineRecordBar.prototype = {
constructor: WebInspector.TimelineRecordBar,
__proto__: WebInspector.Object.prototype,
// Public
get element()
{
return this._element;
},
refresh: function(graphDataSource)
{
var barStartTime = this._record.startTime;
// If this bar has no time info, return early.
if (isNaN(barStartTime))
return false;
var graphStartTime = graphDataSource.startTime;
var graphEndTime = graphDataSource.endTime;
var graphCurrentTime = graphDataSource.currentTime;
var barEndTime = this._record.endTime;
// If this bar is completly after the current time, return early.
if (barStartTime > graphCurrentTime)
return false;
// If this bar is completly before or after the bounds of the graph, return early.
if (barEndTime < graphStartTime || barStartTime > graphEndTime)
return false;
var barUnfinished = isNaN(barEndTime) || barEndTime >= graphCurrentTime;
if (barUnfinished)
barEndTime = graphCurrentTime;
var graphDuration = graphEndTime - graphStartTime;
this._element.classList.toggle(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, barUnfinished);
var newBarLeftPosition = (barStartTime - graphStartTime) / graphDuration;
this._updateElementPosition(this._element, newBarLeftPosition, "left");
var newBarWidth = ((barEndTime - graphStartTime) / graphDuration) - newBarLeftPosition;
this._updateElementPosition(this._element, newBarWidth, "width");
if (!this._record.usesActiveStartTime)
return true;
var barActiveStartTime = Math.max(barStartTime, Math.min(this._record.activeStartTime, barEndTime));
var barDuration = barEndTime - barStartTime;
var inactiveUnfinished = isNaN(barActiveStartTime) || barActiveStartTime >= graphCurrentTime;
this._element.classList.toggle(WebInspector.TimelineRecordBar.UnfinishedStyleClassName, inactiveUnfinished);
if (inactiveUnfinished)
barActiveStartTime = graphCurrentTime;
var middlePercentage = (barActiveStartTime - barStartTime) / barDuration;
this._updateElementPosition(this._inactiveBarElement, 1 - middlePercentage, "right");
this._updateElementPosition(this._inactiveBarElement, middlePercentage, "width");
if (!inactiveUnfinished) {
if (!this._activeBarElement.parentNode)
this._element.appendChild(this._activeBarElement);
this._updateElementPosition(this._activeBarElement, middlePercentage, "left");
this._updateElementPosition(this._activeBarElement, 1 - middlePercentage, "width");
} else
this._activeBarElement.remove();
return true;
},
// Private
_updateElementPosition: function(element, newPosition, property)
{
newPosition *= 100;
newPosition = newPosition.toFixed(2);
var currentPosition = parseFloat(element.style[property]).toFixed(2);
if (currentPosition !== newPosition)
element.style[property] = newPosition + "%";
}
};
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