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

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)
......
......@@ -23,19 +23,23 @@
* THE POSSIBILITY OF SUCH DAMAGE.
*/
WebInspector.ResourceTimelineDataGridNode = function(resourceTimelineRecord)
WebInspector.ResourceTimelineDataGridNode = function(resourceTimelineRecord, graphOnly, graphDataSource)
{
WebInspector.DataGridNode.call(this, {});
WebInspector.TimelineDataGridNode.call(this, graphOnly, graphDataSource);
this._resource = resourceTimelineRecord.resource;
this._record = resourceTimelineRecord;
this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
this._record.resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
this._record.addEventListener(WebInspector.TimelineRecord.Event.Updated, graphOnly ? this.needsGraphRefresh : this._needsRefresh, this);
if (!graphOnly) {
this._resource.addEventListener(WebInspector.Resource.Event.URLDidChange, this._needsRefresh, this);
this._resource.addEventListener(WebInspector.Resource.Event.TypeDidChange, this._needsRefresh, this);
this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFinish, this._needsRefresh, this);
this._resource.addEventListener(WebInspector.Resource.Event.LoadingDidFail, this._needsRefresh, this);
this._resource.addEventListener(WebInspector.Resource.Event.SizeDidChange, this._needsRefresh, this);
this._resource.addEventListener(WebInspector.Resource.Event.TransferSizeDidChange, this._needsRefresh, this);
}
};
WebInspector.Object.addConstructorFunctions(WebInspector.ResourceTimelineDataGridNode);
......@@ -43,18 +47,20 @@ WebInspector.Object.addConstructorFunctions(WebInspector.ResourceTimelineDataGri
WebInspector.ResourceTimelineDataGridNode.IconStyleClassName = "icon";
WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName = "error";
WebInspector.ResourceTimelineDataGridNode.Event = {
NeedsRefresh: "resource-timeline-data-grid-node-needs-refresh"
};
WebInspector.ResourceTimelineDataGridNode.prototype = {
constructor: WebInspector.ResourceTimelineDataGridNode,
__proto__: WebInspector.TimelineDataGridNode.prototype,
// Public
get record()
get records()
{
return this._record;
return [this._record];
},
get resource()
{
return this._resource;
},
get data()
......@@ -62,19 +68,27 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
if (this._cachedData)
return this._cachedData;
var resource = this._record.resource;
var resource = this._resource;
var data = {};
data.name = WebInspector.displayNameForURL(resource.url, resource.urlComponents);
data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
data.type = resource.type;
data.statusCode = resource.statusCode;
data.cached = resource.cached;
data.size = resource.size;
data.transferSize = resource.transferSize;
data.duration = resource.receiveDuration;
data.latency = resource.latency;
data.timeline = resource.responseReceivedTimestamp || resource.requestSentTimestamp;
if (!this._graphOnly) {
var zeroTime = this.graphDataSource ? this.graphDataSource.zeroTime : 0;
data.name = WebInspector.displayNameForURL(resource.url, resource.urlComponents);
data.domain = WebInspector.displayNameForHost(resource.urlComponents.host);
data.scheme = resource.urlComponents.scheme ? resource.urlComponents.scheme.toUpperCase() : "";
data.method = resource.requestMethod;
data.type = resource.type;
data.statusCode = resource.statusCode;
data.cached = resource.cached;
data.size = resource.size;
data.transferSize = resource.transferSize;
data.requestSent = resource.requestSentTimestamp - zeroTime;
data.duration = resource.receiveDuration;
data.latency = resource.latency;
}
data.graph = this._record.startTime;
this._cachedData = data;
return data;
......@@ -82,7 +96,7 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
createCellContent: function(columnIdentifier, cell)
{
var resource = this._record.resource;
var resource = this._resource;
if (resource.failed || resource.canceled || resource.statusCode >= 400)
cell.classList.add(WebInspector.ResourceTimelineDataGridNode.ErrorStyleClassName);
......@@ -97,9 +111,9 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
var fragment = document.createDocumentFragment();
var gotToButton = WebInspector.createGoToArrowButton();
gotToButton.addEventListener("click", this._goToResource.bind(this));
fragment.appendChild(gotToButton);
var goToButton = WebInspector.createGoToArrowButton();
goToButton.addEventListener("click", this._goToResource.bind(this));
fragment.appendChild(goToButton);
var icon = document.createElement("div");
icon.className = WebInspector.ResourceTimelineDataGridNode.IconStyleClassName;
......@@ -129,181 +143,39 @@ WebInspector.ResourceTimelineDataGridNode.prototype = {
case "transferSize":
return isNaN(value) ? emptyValuePlaceholderString : Number.bytesToString(value);
case "requestSent":
case "latency":
case "duration":
return isNaN(value) ? emptyValuePlaceholderString : Number.secondsToString(value);
case "timeline":
return this._createGraphElement();
}
return WebInspector.DataGridNode.prototype.createCellContent.call(this, columnIdentifier);
return WebInspector.TimelineDataGridNode.prototype.createCellContent.call(this, columnIdentifier, cell);
},
refresh: function()
{
delete this._cachedData;
WebInspector.DataGridNode.prototype.refresh.call(this);
},
updateLayout: function()
{
this._refreshLabelPositions();
},
select: function(supressSelectedEvent)
{
if (this.element.classList.contains(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName))
this.element.classList.remove(WebInspector.TimelinesContentView.OffscreenDataGridRowStyleClassName);
if (this._scheduledRefreshIdentifier) {
cancelAnimationFrame(this._scheduledRefreshIdentifier);
delete this._scheduledRefreshIdentifier;
}
WebInspector.DataGridNode.prototype.select.call(this, supressSelectedEvent);
delete this._cachedData;
this._refreshLabelPositions();
WebInspector.TimelineDataGridNode.prototype.refresh.call(this);
},
// Private
_needsRefresh: function()
{
this.dispatchEventToListeners(WebInspector.ResourceTimelineDataGridNode.Event.NeedsRefresh);
},
_goToResource: function(event)
{
WebInspector.resourceSidebarPanel.showSourceCode(this._record.resource);
},
_createGraphElement: function(cell)
{
if (!this._graphElement) {
this._graphElement = document.createElement("div");
this._graphElement.className = "network-graph-side";
this._barAreaElement = document.createElement("div");
this._barAreaElement.className = "network-graph-bar-area";
this._barAreaElement.resource = this._record.resource;
this._graphElement.appendChild(this._barAreaElement);
this._barLeftElement = document.createElement("div");
this._barLeftElement.className = "network-graph-bar waiting";
this._barAreaElement.appendChild(this._barLeftElement);
this._barRightElement = document.createElement("div");
this._barRightElement.className = "network-graph-bar";
this._barAreaElement.appendChild(this._barRightElement);
this._labelLeftElement = document.createElement("div");
this._labelLeftElement.className = "network-graph-label waiting";
this._barAreaElement.appendChild(this._labelLeftElement);
this._labelRightElement = document.createElement("div");
this._labelRightElement.className = "network-graph-label";
this._barAreaElement.appendChild(this._labelRightElement);
this._graphElement.addEventListener("mouseover", this._refreshLabelPositions.bind(this));
}
this._refreshGraph();
return this._graphElement;
},
_refreshGraph: function(c)
{
var resource = this._record.resource;
if (resource.cached)
this._graphElement.classList.add("resource-cached");
var calculator = this.dataGrid.currentCalculator;
var percentages = calculator.computeBarGraphPercentages(resource);
this._percentages = percentages;
if (!this._graphElement.classList.contains("network-" + resource.type)) {
this._graphElement.removeMatchingStyleClasses("network-resource-type-\\w+");
this._graphElement.classList.add("network-" + resource.type);
}
this._barLeftElement.style.setProperty("left", percentages.start + "%");
this._barRightElement.style.setProperty("right", (100 - percentages.end) + "%");
this._barLeftElement.style.setProperty("right", (100 - percentages.end) + "%");
this._barRightElement.style.setProperty("left", percentages.middle + "%");
var labels = calculator.computeBarGraphLabels(resource);
this._labelLeftElement.textContent = labels.left;
this._labelRightElement.textContent = labels.right;
if (this._scheduledRefreshIdentifier)
return;
var tooltip = (labels.tooltip || "");
this._barLeftElement.title = tooltip;
this._labelLeftElement.title = tooltip;
this._labelRightElement.title = tooltip;
this._barRightElement.title = tooltip;
this._scheduledRefreshIdentifier = requestAnimationFrame(this.refresh.bind(this));
},
_refreshLabelPositions: function()
_goToResource: function(event)
{
if (!this._percentages)
return;
this._labelLeftElement.style.removeProperty("left");
this._labelLeftElement.style.removeProperty("right");
this._labelLeftElement.classList.remove("before");
this._labelLeftElement.classList.remove("hidden");
this._labelRightElement.style.removeProperty("left");
this._labelRightElement.style.removeProperty("right");
this._labelRightElement.classList.remove("after");
this._labelRightElement.classList.remove("hidden");
const labelPadding = 10;
const leftLabelWidth = this._labelLeftElement.offsetWidth + labelPadding;
const rightLabelWidth = this._labelRightElement.offsetWidth + labelPadding;
const barRightElementOffsetWidth = this._barRightElement.offsetWidth;
const barLeftElementOffsetWidth = this._barLeftElement.offsetWidth;
const leftBarWidth = barLeftElementOffsetWidth - barRightElementOffsetWidth;
const rightBarWidth = barRightElementOffsetWidth;
const leftCallout = (leftLabelWidth > leftBarWidth);
const rightCallout = (rightLabelWidth > rightBarWidth);
// Hide the left or right callout if there is not enough space.
const graphElementOffsetWidth = this._graphElement.offsetWidth;
if (leftCallout && (graphElementOffsetWidth * (this._percentages.start / 100)) < leftLabelWidth)
var leftHidden = true;
if (rightCallout && (graphElementOffsetWidth * ((100 - this._percentages.end) / 100)) < rightLabelWidth)
var rightHidden = true;
// The left/right label data are the same, so a before/after label can be replaced by a single on-bar label.
if (barLeftElementOffsetWidth == barRightElementOffsetWidth) {
if (leftCallout && !rightCallout)
leftHidden = true;
else if (rightCallout && !leftCallout)
rightHidden = true;
}
if (leftCallout) {
if (leftHidden)
this._labelLeftElement.classList.add("hidden");
this._labelLeftElement.style.setProperty("right", (100 - this._percentages.start) + "%");
this._labelLeftElement.classList.add("before");
} else {
this._labelLeftElement.style.setProperty("left", this._percentages.start + "%");
this._labelLeftElement.style.setProperty("right", (100 - this._percentages.middle) + "%");
}
if (rightCallout) {
if (rightHidden)
this._labelRightElement.classList.add("hidden");
this._labelRightElement.style.setProperty("left", this._percentages.end + "%");
this._labelRightElement.classList.add("after");
} else {
this._labelRightElement.style.setProperty("left", this._percentages.middle + "%");
this._labelRightElement.style.setProperty("right", (100 - this._percentages.end) + "%");
}
WebInspector.resourceSidebarPanel.showSourceCode(this._resource);
}
}
WebInspector.ResourceTimelineDataGridNode.prototype.__proto__ = WebInspector.DataGridNode.prototype;
};
/*
* 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.
*