[SCM] WebKit Debian packaging branch, webkit-1.2, updated. upstream/1.1.90-6072-g9a69373
pfeldman at chromium.org
pfeldman at chromium.org
Wed Apr 7 23:11:34 UTC 2010
The following commit has been merged in the webkit-1.2 branch:
commit 8127b0971dba1e23ed370d7848732c01ae994a27
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Wed Oct 28 09:59:30 2009 +0000
2009-10-27 Pavel Feldman <pfeldman at chromium.org>
Reviewed by NOBODY (OOPS!).
Web Inspector: Initial revision of the Timeline grid.
https://bugs.webkit.org/show_bug.cgi?id=30834
* English.lproj/localizedStrings.js:
* WebCore.gypi:
* inspector/front-end/AbstractTimelinePanel.js:
(WebInspector.AbstractTimelinePanel.prototype.populateSidebar):
(WebInspector.AbstractTimelinePanel.prototype.refresh):
(WebInspector.AbstractTimelineCalculator):
* inspector/front-end/Images/timelineBarBlue.png: Added.
* inspector/front-end/Images/timelineBarGray.png: Added.
* inspector/front-end/Images/timelineBarGreen.png: Added.
* inspector/front-end/Images/timelineBarOrange.png: Added.
* inspector/front-end/Images/timelineBarPurple.png: Added.
* inspector/front-end/Images/timelineBarRed.png: Added.
* inspector/front-end/Images/timelineBarYellow.png: Added.
* inspector/front-end/Images/timelineCheckmarks.png: Added.
* inspector/front-end/Images/timelineDots.png: Added.
* inspector/front-end/ResourcesPanel.js:
(WebInspector.ResourceTimeCalculator):
(WebInspector.ResourceTransferSizeCalculator):
* inspector/front-end/TimelineAgent.js:
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel):
(WebInspector.TimelinePanel.prototype.get statusBarItems):
(WebInspector.TimelinePanel.prototype.get categories):
(WebInspector.TimelinePanel.prototype.populateSidebar):
(WebInspector.TimelinePanel.prototype._createStatusbarButtons):
(WebInspector.TimelinePanel.prototype.addItemToTimeline):
(WebInspector.TimelinePanel.prototype.refresh):
(WebInspector.TimelinePanel.prototype._toggleTimelineButtonClick):
(WebInspector.TimelinePanel.prototype.reset):
(WebInspector.TimelinePanel.prototype._formatRecord):
(WebInspector.TimelinePanel.prototype.showCategory):
(WebInspector.TimelinePanel.prototype.hideCategory):
(WebInspector.TimelineRecordTreeElement):
(WebInspector.TimelineRecordTreeElement.prototype.onattach):
(WebInspector.TimelineCalculator):
(WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages):
(WebInspector.TimelineCalculator.prototype.computePercentageFromEventTime):
(WebInspector.TimelineCalculator.prototype.computeBarGraphLabels):
(WebInspector.TimelineCalculator.prototype.updateBoundaries):
(WebInspector.TimelineCalculator.prototype.formatValue):
(WebInspector.TimelineGraph):
(WebInspector.TimelineGraph.prototype.get graphElement):
(WebInspector.TimelineGraph.prototype.refreshLabelPositions):
(WebInspector.TimelineGraph.prototype.refresh):
* inspector/front-end/inspector.css:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@50203 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 36bd52c..3929856 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,59 @@
+2009-10-27 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Timothy Hatcher.
+
+ Web Inspector: Initial revision of the Timeline grid.
+
+ https://bugs.webkit.org/show_bug.cgi?id=30834
+
+ * English.lproj/localizedStrings.js:
+ * WebCore.gypi:
+ * inspector/front-end/AbstractTimelinePanel.js:
+ (WebInspector.AbstractTimelinePanel.prototype.populateSidebar):
+ (WebInspector.AbstractTimelinePanel.prototype.refresh):
+ (WebInspector.AbstractTimelineCalculator):
+ * inspector/front-end/Images/timelineBarBlue.png: Added.
+ * inspector/front-end/Images/timelineBarGray.png: Added.
+ * inspector/front-end/Images/timelineBarGreen.png: Added.
+ * inspector/front-end/Images/timelineBarOrange.png: Added.
+ * inspector/front-end/Images/timelineBarPurple.png: Added.
+ * inspector/front-end/Images/timelineBarRed.png: Added.
+ * inspector/front-end/Images/timelineBarYellow.png: Added.
+ * inspector/front-end/Images/timelineCheckmarks.png: Added.
+ * inspector/front-end/Images/timelineDots.png: Added.
+ * inspector/front-end/ResourcesPanel.js:
+ (WebInspector.ResourceTimeCalculator):
+ (WebInspector.ResourceTransferSizeCalculator):
+ * inspector/front-end/TimelineAgent.js:
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel):
+ (WebInspector.TimelinePanel.prototype.get statusBarItems):
+ (WebInspector.TimelinePanel.prototype.get categories):
+ (WebInspector.TimelinePanel.prototype.populateSidebar):
+ (WebInspector.TimelinePanel.prototype._createStatusbarButtons):
+ (WebInspector.TimelinePanel.prototype.addItemToTimeline):
+ (WebInspector.TimelinePanel.prototype.refresh):
+ (WebInspector.TimelinePanel.prototype._toggleTimelineButtonClick):
+ (WebInspector.TimelinePanel.prototype.reset):
+ (WebInspector.TimelinePanel.prototype._formatRecord):
+ (WebInspector.TimelinePanel.prototype.showCategory):
+ (WebInspector.TimelinePanel.prototype.hideCategory):
+ (WebInspector.TimelineRecordTreeElement):
+ (WebInspector.TimelineRecordTreeElement.prototype.onattach):
+ (WebInspector.TimelineCalculator):
+ (WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages):
+ (WebInspector.TimelineCalculator.prototype.computePercentageFromEventTime):
+ (WebInspector.TimelineCalculator.prototype.computeBarGraphLabels):
+ (WebInspector.TimelineCalculator.prototype.updateBoundaries):
+ (WebInspector.TimelineCalculator.prototype.formatValue):
+ (WebInspector.TimelineGraph):
+ (WebInspector.TimelineGraph.prototype.get graphElement):
+ (WebInspector.TimelineGraph.prototype.refreshLabelPositions):
+ (WebInspector.TimelineGraph.prototype.refresh):
+ * inspector/front-end/inspector.css:
+ * inspector/front-end/inspector.js:
+ (WebInspector._createPanels):
+
2009-10-27 Joseph Pecoraro <joepeck at webkit.org>
Reviewed by Pavel Feldman.
diff --git a/WebCore/English.lproj/localizedStrings.js b/WebCore/English.lproj/localizedStrings.js
index 5798287..e9b08b4 100644
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
diff --git a/WebCore/WebCore.gypi b/WebCore/WebCore.gypi
index a563ca0..1c6fc40 100644
--- a/WebCore/WebCore.gypi
+++ b/WebCore/WebCore.gypi
@@ -3756,6 +3756,15 @@
'inspector/front-end/Images/timelineHollowPillRed.png',
'inspector/front-end/Images/timelineHollowPillYellow.png',
'inspector/front-end/Images/timelineIcon.png',
+ 'inspector/front-end/Images/timelineBarBlue.png',
+ 'inspector/front-end/Images/timelineBarGray.png',
+ 'inspector/front-end/Images/timelineBarGreen.png',
+ 'inspector/front-end/Images/timelineBarOrange.png',
+ 'inspector/front-end/Images/timelineBarPurple.png',
+ 'inspector/front-end/Images/timelineBarRed.png',
+ 'inspector/front-end/Images/timelineBarYellow.png',
+ 'inspector/front-end/Images/timelineCheckmarks.png',
+ 'inspector/front-end/Images/timelineDots.png',
'inspector/front-end/Images/timelinePillBlue.png',
'inspector/front-end/Images/timelinePillGray.png',
'inspector/front-end/Images/timelinePillGreen.png',
diff --git a/WebCore/inspector/front-end/AbstractTimelinePanel.js b/WebCore/inspector/front-end/AbstractTimelinePanel.js
index 72ff8c0..85d1f05 100644
--- a/WebCore/inspector/front-end/AbstractTimelinePanel.js
+++ b/WebCore/inspector/front-end/AbstractTimelinePanel.js
@@ -50,6 +50,16 @@ WebInspector.AbstractTimelinePanel.prototype = {
// Should be implemented by the concrete subclasses.
},
+ populateSidebar: function()
+ {
+ // Should be implemented by the concrete subclasses.
+ },
+
+ refresh: function()
+ {
+ // Should be implemented by the concrete subclasses.
+ },
+
createInterface: function()
{
this._createFilterPanel();
@@ -300,11 +310,11 @@ WebInspector.AbstractTimelinePanel.prototype = {
WebInspector.AbstractTimelinePanel.prototype.__proto__ = WebInspector.Panel.prototype;
-WebInspector.TimelineCalculator = function()
+WebInspector.AbstractTimelineCalculator = function()
{
}
-WebInspector.TimelineCalculator.prototype = {
+WebInspector.AbstractTimelineCalculator.prototype = {
computeSummaryValues: function(items)
{
var total = 0;
diff --git a/WebCore/inspector/front-end/Images/timelineBarBlue.png b/WebCore/inspector/front-end/Images/timelineBarBlue.png
new file mode 100644
index 0000000..22641b5
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarBlue.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarGray.png b/WebCore/inspector/front-end/Images/timelineBarGray.png
new file mode 100644
index 0000000..f66cf43
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarGray.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarGreen.png b/WebCore/inspector/front-end/Images/timelineBarGreen.png
new file mode 100644
index 0000000..cc59082
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarGreen.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarOrange.png b/WebCore/inspector/front-end/Images/timelineBarOrange.png
new file mode 100644
index 0000000..e5ae6f5
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarOrange.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarPurple.png b/WebCore/inspector/front-end/Images/timelineBarPurple.png
new file mode 100644
index 0000000..f891252
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarPurple.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarRed.png b/WebCore/inspector/front-end/Images/timelineBarRed.png
new file mode 100644
index 0000000..b850037
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarRed.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineBarYellow.png b/WebCore/inspector/front-end/Images/timelineBarYellow.png
new file mode 100644
index 0000000..2b3e9a7
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineBarYellow.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineCheckmarks.png b/WebCore/inspector/front-end/Images/timelineCheckmarks.png
new file mode 100644
index 0000000..9afa9bb
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineCheckmarks.png differ
diff --git a/WebCore/inspector/front-end/Images/timelineDots.png b/WebCore/inspector/front-end/Images/timelineDots.png
new file mode 100644
index 0000000..e9ba4d3
Binary files /dev/null and b/WebCore/inspector/front-end/Images/timelineDots.png differ
diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js
index 41485dd..71bc9ad 100644
--- a/WebCore/inspector/front-end/ResourcesPanel.js
+++ b/WebCore/inspector/front-end/ResourcesPanel.js
@@ -795,7 +795,7 @@ WebInspector.ResourcesPanel.prototype.__proto__ = WebInspector.AbstractTimelineP
WebInspector.ResourceTimeCalculator = function(startAtZero)
{
- WebInspector.TimelineCalculator.call(this);
+ WebInspector.AbstractTimelineCalculator.call(this);
this.startAtZero = startAtZero;
}
@@ -956,7 +956,7 @@ WebInspector.ResourceTimeCalculator.prototype = {
},
}
-WebInspector.ResourceTimeCalculator.prototype.__proto__ = WebInspector.TimelineCalculator.prototype;
+WebInspector.ResourceTimeCalculator.prototype.__proto__ = WebInspector.AbstractTimelineCalculator.prototype;
WebInspector.ResourceTransferTimeCalculator = function()
{
@@ -1003,7 +1003,7 @@ WebInspector.ResourceTransferDurationCalculator.prototype.__proto__ = WebInspect
WebInspector.ResourceTransferSizeCalculator = function()
{
- WebInspector.TimelineCalculator.call(this);
+ WebInspector.AbstractTimelineCalculator.call(this);
}
WebInspector.ResourceTransferSizeCalculator.prototype = {
@@ -1027,7 +1027,7 @@ WebInspector.ResourceTransferSizeCalculator.prototype = {
}
}
-WebInspector.ResourceTransferSizeCalculator.prototype.__proto__ = WebInspector.TimelineCalculator.prototype;
+WebInspector.ResourceTransferSizeCalculator.prototype.__proto__ = WebInspector.AbstractTimelineCalculator.prototype;
WebInspector.ResourceSidebarTreeElement = function(resource)
{
diff --git a/WebCore/inspector/front-end/TimelineAgent.js b/WebCore/inspector/front-end/TimelineAgent.js
index 2886e90..b8e1bf3 100644
--- a/WebCore/inspector/front-end/TimelineAgent.js
+++ b/WebCore/inspector/front-end/TimelineAgent.js
@@ -43,7 +43,7 @@ WebInspector.TimelineAgent.RecordType = {
TimerRemove : 6,
TimerFire : 7,
XHRReadyStateChange : 8,
- XHRLoad : 9,
+ XHRLoad : 9
};
WebInspector.addRecordToTimeline = function(record) {
diff --git a/WebCore/inspector/front-end/TimelinePanel.js b/WebCore/inspector/front-end/TimelinePanel.js
index 72f1594..42d6050 100644
--- a/WebCore/inspector/front-end/TimelinePanel.js
+++ b/WebCore/inspector/front-end/TimelinePanel.js
@@ -30,22 +30,20 @@
WebInspector.TimelinePanel = function()
{
- WebInspector.Panel.call(this);
-
- this.createSidebar();
-
+ WebInspector.AbstractTimelinePanel.call(this);
this.element.addStyleClass("timeline");
- this.timelineView = document.createElement("div");
- this.timelineView.id = "timeline-view";
- this.element.appendChild(this.timelineView);
+ this.createInterface();
+ this.summaryBar.element.id = "timeline-summary";
+ this.resourcesGraphsElement.id = "timeline-graphs";
+
+ this._createStatusbarButtons();
- this.recordsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RECORDS"), {}, true);
- this.recordsTreeElement.expanded = true;
- this.sidebarTree.appendChild(this.recordsTreeElement);
+ this.calculator = new WebInspector.TimelineCalculator();
- this.toggleTimelineButton = new WebInspector.StatusBarButton("", "record-profile-status-bar-item");
- this.toggleTimelineButton.addEventListener("click", this._toggleTimelineButton.bind(this), false);
+ this.filter(this.filterAllElement, false);
+ this._records = [];
+ this._staleRecords = [];
}
WebInspector.TimelinePanel.prototype = {
@@ -58,7 +56,36 @@ WebInspector.TimelinePanel.prototype = {
get statusBarItems()
{
- return [this.toggleTimelineButton.element];
+ return [this.toggleTimelineButton.element, this.clearButton.element];
+ },
+
+ get categories()
+ {
+ if (!this._categories) {
+ this._categories = {
+ loading: new WebInspector.ResourceCategory("loading", WebInspector.UIString("Loading"), "rgb(47,102,236)"),
+ scripting: new WebInspector.ResourceCategory("scripting", WebInspector.UIString("Scripting"), "rgb(157,231,119)"),
+ rendering: new WebInspector.ResourceCategory("rendering", WebInspector.UIString("Rendering"), "rgb(164,60,255)"),
+ other: new WebInspector.ResourceCategory("other", WebInspector.UIString("Other"), "rgb(186,186,186)")
+ };
+ }
+ return this._categories;
+ },
+
+ populateSidebar: function()
+ {
+ this.recordsTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("RECORDS"), {}, true);
+ this.recordsTreeElement.expanded = true;
+ this.sidebarTree.appendChild(this.recordsTreeElement);
+ },
+
+ _createStatusbarButtons: function()
+ {
+ this.toggleTimelineButton = new WebInspector.StatusBarButton("", "record-profile-status-bar-item");
+ this.toggleTimelineButton.addEventListener("click", this._toggleTimelineButtonClicked.bind(this), false);
+
+ this.clearButton = new WebInspector.StatusBarButton("", "timeline-clear-status-bar-item");
+ this.clearButton.addEventListener("click", this.reset.bind(this), false);
},
timelineWasStarted: function()
@@ -73,20 +100,51 @@ WebInspector.TimelinePanel.prototype = {
addRecordToTimeline: function(record)
{
- this._innerAddRecordToTimeline(this.recordsTreeElement, record);
+ var formattedRecord = this._formatRecord(record);
+ this._records.push(formattedRecord);
+ this._staleRecords.push(formattedRecord);
+ this.needsRefresh = true;
+
+ for (var i = 0; record.children && i < record.children.length; ++i)
+ this.addRecordToTimeline(record.children[i]);
},
- _innerAddRecordToTimeline: function(parentElement, record)
+ refresh: function()
{
- var treeItem = new WebInspector.TimelineRecordTreeElement(this, record);
- parentElement.appendChild(treeItem);
- if (record.children)
- parentElement.expanded = true;
- for (var i = 0; i < record.children.length; ++i)
- this._innerAddRecordToTimeline(treeItem, record.children[i]);
+ this.needsRefresh = false;
+
+ var staleRecordsLength = this._staleRecords.length;
+ var boundariesChanged = false;
+
+ for (var i = 0; i < staleRecordsLength; ++i) {
+ var record = this._staleRecords[i];
+ if (!record._timelineTreeElement) {
+ // Create the resource tree element and graph.
+ record._timelineTreeElement = new WebInspector.TimelineRecordTreeElement(record);
+ record._timelineTreeElement._timelineGraph = new WebInspector.TimelineGraph(record);
+ this.recordsTreeElement.appendChild(record._timelineTreeElement);
+ this.resourcesGraphsElement.appendChild(record._timelineTreeElement._timelineGraph.graphElement);
+ }
+
+ if (this.calculator.updateBoundaries(record))
+ boundariesChanged = true;
+ }
+
+ if (boundariesChanged) {
+ // The boundaries changed, so all resource graphs are stale.
+ this._staleRecords = this._records;
+ staleRecordsLength = this._staleRecords.length;
+ }
+
+ for (var i = 0; i < staleRecordsLength; ++i)
+ this._staleRecords[i]._timelineTreeElement._timelineGraph.refresh(this.calculator);
+
+ this._staleRecords = [];
+
+ this.updateGraphDividersIfNeeded();
},
- _toggleTimelineButton: function()
+ _toggleTimelineButtonClicked: function()
{
if (InspectorController.timelineProfilerEnabled())
InspectorController.stopTimelineProfiler();
@@ -94,33 +152,82 @@ WebInspector.TimelinePanel.prototype = {
InspectorController.startTimelineProfiler();
},
- updateMainViewWidth: function(width)
+ reset: function()
{
- this.timelineView.style.left = width + "px";
+ this.containerElement.scrollTop = 0;
+
+ this.calculator = new WebInspector.TimelineCalculator();
+
+ if (this._records) {
+ var recordsLength = this._records.length;
+ for (var i = 0; i < recordsLength; ++i) {
+ var record = this._records[i];
+
+ delete record._resourcesTreeElement;
+ delete record._resourcesView;
+ }
+ }
+
+ this._records = [];
+ this._staleRecords = [];
+
+ this.recordsTreeElement.removeChildren();
+ this.resourcesGraphsElement.removeChildren();
+
+ this.updateGraphDividersIfNeeded(true);
},
- getRecordTypeName: function(record)
+ _formatRecord: function(record)
{
- if (!this._recordTypeNames) {
- this._recordTypeNames = {};
+ if (!this._recordStyles) {
+ this._recordStyles = {};
var recordTypes = WebInspector.TimelineAgent.RecordType;
- this._recordTypeNames[recordTypes.DOMDispatch] = WebInspector.UIString("DOM Event");
- this._recordTypeNames[recordTypes.Layout] = WebInspector.UIString("Layout");
- this._recordTypeNames[recordTypes.RecalculateStyles] = WebInspector.UIString("Recalculate Style");
- this._recordTypeNames[recordTypes.Paint] = WebInspector.UIString("Paint");
- this._recordTypeNames[recordTypes.Layout] = WebInspector.UIString("Layout");
- this._recordTypeNames[recordTypes.ParseHTML] = WebInspector.UIString("Parse");
+ this._recordStyles[recordTypes.DOMDispatch] = { title: WebInspector.UIString("DOM Event"), category: this._categories.scripting };
+ this._recordStyles[recordTypes.Layout] = { title: WebInspector.UIString("Layout"), category: this._categories.rendering };
+ this._recordStyles[recordTypes.RecalculateStyles] = { title: WebInspector.UIString("Recalculate Style"), category: this._categories.rendering };
+ this._recordStyles[recordTypes.Paint] = { title: WebInspector.UIString("Paint"), category: this._categories.rendering };
+ this._recordStyles[recordTypes.ParseHTML] = { title: WebInspector.UIString("Parse"), category: this._categories.loading };
+ this._recordStyles[recordTypes.TimerInstall] = { title: WebInspector.UIString("Install Timer"), category: this._categories.scripting };
+ this._recordStyles[recordTypes.TimerRemove] = { title: WebInspector.UIString("Remove Timer"), category: this._categories.scripting };
+ this._recordStyles[recordTypes.TimerFire] = { title: WebInspector.UIString("Timer Fired"), category: this._categories.scripting };
+ this._recordStyles[recordTypes.XHRReadyStateChange] = { title: WebInspector.UIString("XHR Ready State Change"), category: this._categories.loading };
+ this._recordStyles[recordTypes.XHRLoad] = { title: WebInspector.UIString("XHR Load"), category: this._categories.loading };
+ this._recordStyles["Other"] = { title: WebInspector.UIString("Other"), icon: 0, category: this._categories.other };
}
- return this._itemTypeNames[record.type];
- }
+
+ var style = this._recordStyles[record.type];
+ if (!style)
+ style = this._recordStyles["Other"];
+
+ var formattedRecord = {};
+ formattedRecord.category = style.category;
+ formattedRecord.title = style.title;
+ formattedRecord.startTime = record.startTime / 1000;
+ formattedRecord.data = record.data;
+ formattedRecord.endTime = (typeof record.endTime !== "undefined") ? record.endTime / 1000 : formattedRecord.startTime;
+ return formattedRecord;
+ },
+
+ showCategory: function(category)
+ {
+ var filterClass = "filter-" + category;
+ this.resourcesGraphsElement.addStyleClass(filterClass);
+ this.recordsTreeElement.childrenListElement.addStyleClass(filterClass);
+ },
+
+ hideCategory: function(category)
+ {
+ var filterClass = "filter-" + category;
+ this.resourcesGraphsElement.removeStyleClass(filterClass);
+ this.recordsTreeElement.childrenListElement.removeStyleClass(filterClass);
+ },
}
-WebInspector.TimelinePanel.prototype.__proto__ = WebInspector.Panel.prototype;
+WebInspector.TimelinePanel.prototype.__proto__ = WebInspector.AbstractTimelinePanel.prototype;
-WebInspector.TimelineRecordTreeElement = function(panel, record)
+WebInspector.TimelineRecordTreeElement = function(record)
{
- this._panel = panel;
this._record = record;
// Pass an empty title, the title gets made later in onattach.
@@ -132,10 +239,15 @@ WebInspector.TimelineRecordTreeElement.prototype = {
{
this.listItemElement.removeChildren();
this.listItemElement.addStyleClass("timeline-tree-item");
+ this.listItemElement.addStyleClass("timeline-category-" + this._record.category.name);
+
+ var iconElement = document.createElement("span");
+ iconElement.className = "timeline-tree-icon";
+ this.listItemElement.appendChild(iconElement);
var typeElement = document.createElement("span");
typeElement.className = "type";
- typeElement.textContent = this._panel.getRecordTypeName(this._record);
+ typeElement.textContent = this._record.title;
this.listItemElement.appendChild(typeElement);
if (this._record.data) {
@@ -154,3 +266,107 @@ WebInspector.TimelineRecordTreeElement.prototype = {
}
WebInspector.TimelineRecordTreeElement.prototype.__proto__ = TreeElement.prototype;
+
+
+WebInspector.TimelineCalculator = function()
+{
+ WebInspector.AbstractTimelineCalculator.call(this);
+}
+
+WebInspector.TimelineCalculator.prototype = {
+ computeBarGraphPercentages: function(record)
+ {
+ var start = ((record.startTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ var end = ((record.endTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ return {start: start, end: end};
+ },
+
+ computePercentageFromEventTime: function(eventTime)
+ {
+ return ((eventTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ },
+
+ computeBarGraphLabels: function(record)
+ {
+ return {tooltip: record.title};
+ },
+
+ updateBoundaries: function(record)
+ {
+ var didChange = false;
+
+ var lowerBound = record.startTime;
+
+ if (typeof this.minimumBoundary === "undefined" || lowerBound < this.minimumBoundary) {
+ this.minimumBoundary = lowerBound;
+ didChange = true;
+ }
+
+ var upperBound = record.endTime;
+ if (typeof this.maximumBoundary === "undefined" || upperBound > this.maximumBoundary) {
+ this.maximumBoundary = upperBound;
+ didChange = true;
+ }
+
+ return didChange;
+ },
+
+ formatValue: function(value)
+ {
+ return Number.secondsToString(value, WebInspector.UIString.bind(WebInspector));
+ },
+
+}
+
+WebInspector.TimelineCalculator.prototype.__proto__ = WebInspector.AbstractTimelineCalculator.prototype;
+
+
+WebInspector.TimelineGraph = function(record)
+{
+ this.record = record;
+
+ this._graphElement = document.createElement("div");
+ this._graphElement.className = "timeline-graph-side";
+
+ this._barAreaElement = document.createElement("div");
+ this._barAreaElement.className = "timeline-graph-bar-area hidden";
+ this._graphElement.appendChild(this._barAreaElement);
+
+ this._barElement = document.createElement("div");
+ this._barElement.className = "timeline-graph-bar";
+ this._barAreaElement.appendChild(this._barElement);
+
+ this._graphElement.addStyleClass("timeline-category-" + record.category.name);
+}
+
+WebInspector.TimelineGraph.prototype = {
+ get graphElement()
+ {
+ return this._graphElement;
+ },
+
+ refreshLabelPositions: function()
+ {
+ },
+
+ refresh: function(calculator)
+ {
+ var percentages = calculator.computeBarGraphPercentages(this.record);
+ var labels = calculator.computeBarGraphLabels(this.record);
+
+ this._percentages = percentages;
+
+ this._barAreaElement.removeStyleClass("hidden");
+
+ if (!this._graphElement.hasStyleClass("timeline-category-" + this.record.category.name)) {
+ this._graphElement.removeMatchingStyleClasses("timeline-category-\\w+");
+ this._graphElement.addStyleClass("timeline-category-" + this.record.category.name);
+ }
+
+ this._barElement.style.setProperty("left", percentages.middle + "%");
+ this._barElement.style.setProperty("right", (100 - percentages.end) + "%");
+
+ var tooltip = (labels.tooltip || "");
+ this._barElement.title = tooltip;
+ }
+}
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index f5c68e2..dc8c5c3 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -3266,24 +3266,123 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
/* Timeline Style */
-#timeline-views {
+#timeline-summary {
position: absolute;
top: 0;
- right: 0;
- left: 200px;
- bottom: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+}
+
+.timeline-clear-status-bar-item .glyph {
+ -webkit-mask-image: url(Images/clearConsoleButtonGlyph.png);
}
.timeline-tree-item {
height: 18px;
- padding-left: 24px;
+ padding-left: 10px;
+ padding-top: 2px;
white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.timeline-tree-item .type {
+ padding-left: 14px;
+}
+
+.timeline-tree-item .timeline-tree-icon {
+ background-image: url(Images/timelineDots.png);
+ margin-top: 2px;
+ width: 12px;
+ height: 12px;
+ position: absolute;
+}
+
+.timeline-tree-item:nth-of-type(2n) {
+ background-color: rgba(0, 0, 0, 0.05);
}
.timeline-tree-item .data.dimmed {
color: rgba(0, 0, 0, 0.7);
}
+.timeline-category-loading, .timeline-category-scripting, .timeline-category-rendering {
+ display: none;
+}
+
+.filter-all .timeline-category-loading, .filter-loading .timeline-category-loading,
+.filter-all .timeline-category-scripting, .filter-scripting .timeline-category-scripting,
+.filter-all .timeline-category-rendering, .filter-rendering .timeline-category-rendering {
+ display: list-item;
+}
+
+#timeline-graphs {
+ position: absolute;
+ left: 0;
+ right: 0;
+ max-height: 100%;
+ top: 19px;
+}
+
+.timeline-graph-side {
+ position: relative;
+ height: 18px;
+ padding: 0 5px;
+ white-space: nowrap;
+ margin-top: 0px;
+ border-top: 1px solid transparent;
+ overflow: hidden;
+}
+
+.timeline-graph-bar-area {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 8px;
+ left: 9px;
+}
+
+.timeline-graph-bar {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto -5px;
+ border-width: 6px 7px;
+ height: 13px;
+ min-width: 14px;
+ opacity: 0.65;
+ -webkit-border-image: url(Images/timelineBarGray.png) 6 7 6 7;
+}
+
+.timeline-graph-side:nth-of-type(2n) {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.timeline-category-loading .timeline-graph-bar {
+ -webkit-border-image: url(Images/timelineBarBlue.png) 6 7 6 7;
+}
+
+.timeline-category-scripting .timeline-graph-bar {
+ -webkit-border-image: url(Images/timelineBarOrange.png) 6 7 6 7;
+}
+
+.timeline-category-rendering .timeline-graph-bar {
+ -webkit-border-image: url(Images/timelineBarPurple.png) 6 7 6 7;
+}
+
+.timeline-category-loading .timeline-tree-icon {
+ background-position-y: 0px;
+}
+
+.timeline-category-scripting .timeline-tree-icon {
+ background-position-y: 48px;
+}
+
+.timeline-category-rendering .timeline-tree-icon {
+ background-position-y: 72px;
+}
+
/* Profiler Style */
#profile-views {
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list