[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:19:59 UTC 2010
The following commit has been merged in the webkit-1.2 branch:
commit 3dbb87d13e29ccafd36df41393f6838890e93bbc
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Tue Nov 3 17:59:54 2009 +0000
2009-11-03 Pavel Feldman <pfeldman at chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: Implement timeline summary panel.
https://bugs.webkit.org/show_bug.cgi?id=31064
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel.prototype._createOverview):
(WebInspector.TimelinePanel.prototype.refresh):
(WebInspector.TimelineCategoryGraph):
(WebInspector.TimelineCategoryGraph.prototype.get graphElement):
(WebInspector.TimelineCategoryGraph.prototype.addChunk):
(WebInspector.TimelineCategoryGraph.prototype.clearChunks):
(WebInspector.TimelineGraph.prototype.refresh):
* inspector/front-end/inspector.css:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@50463 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index e851bc6..77a0b53 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,21 @@
+2009-11-03 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Timothy Hatcher.
+
+ Web Inspector: Implement timeline summary panel.
+
+ https://bugs.webkit.org/show_bug.cgi?id=31064
+
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel.prototype._createOverview):
+ (WebInspector.TimelinePanel.prototype.refresh):
+ (WebInspector.TimelineCategoryGraph):
+ (WebInspector.TimelineCategoryGraph.prototype.get graphElement):
+ (WebInspector.TimelineCategoryGraph.prototype.addChunk):
+ (WebInspector.TimelineCategoryGraph.prototype.clearChunks):
+ (WebInspector.TimelineGraph.prototype.refresh):
+ * inspector/front-end/inspector.css:
+
2009-11-03 Alexander Pavlov <apavlov at chromium.org>
Reviewed by Timothy Hatcher.
diff --git a/WebCore/inspector/front-end/TimelinePanel.js b/WebCore/inspector/front-end/TimelinePanel.js
index 1d984ba..fa76aa0 100644
--- a/WebCore/inspector/front-end/TimelinePanel.js
+++ b/WebCore/inspector/front-end/TimelinePanel.js
@@ -223,6 +223,14 @@ WebInspector.TimelinePanel.prototype = {
this._overviewGridElement.id = "timeline-overview-grid";
overviewPanelElement.appendChild(this._overviewGridElement);
this._overviewGrid = new WebInspector.TimelineGrid(this._overviewGridElement);
+ this._overviewGrid.itemsGraphsElement.id = "timeline-overview-graphs";
+
+ this._categoryGraphs = {};
+ for (var category in this.categories) {
+ var categoryGraph = new WebInspector.TimelineCategoryGraph(this.categories[category]);
+ this._categoryGraphs[category] = categoryGraph;
+ this._overviewGrid.itemsGraphsElement.appendChild(categoryGraph.graphElement);
+ }
this._overviewGrid.setScrollAndDividerTop(0, 0);
this._overviewWindowElement = document.createElement("div");
@@ -271,6 +279,46 @@ WebInspector.TimelinePanel.prototype = {
{
WebInspector.AbstractTimelinePanel.prototype.refresh.call(this);
this._overviewGrid.updateDividers(true, this._overviewCalculator);
+
+ // Clear summary bars.
+ var timelines = {};
+ for (var category in this.categories) {
+ timelines[category] = [];
+ this._categoryGraphs[category].clearChunks();
+ }
+
+ // Create sparse arrays with 101 cells each to fill with chunks for a given category.
+ for (var i = 0; i < this.items.length; ++i) {
+ var record = this.items[i];
+ this._overviewCalculator.updateBoundaries(record);
+ var percentages = this._overviewCalculator.computeBarGraphPercentages(record);
+ var end = Math.round(percentages.end);
+ var categoryName = record.category.name;
+ for (var j = Math.round(percentages.start); j <= end; ++j)
+ timelines[categoryName][j] = true;
+ }
+
+ // Convert sparse arrays to continuous segments, render graphs for each.
+ for (var category in this.categories) {
+ var timeline = timelines[category];
+ window.timelineSaved = timeline;
+ var chunkStart = -1;
+ for (var j = 0; j < 101; ++j) {
+ if (timeline[j]) {
+ if (chunkStart === -1)
+ chunkStart = j;
+ } else {
+ if (chunkStart !== -1) {
+ this._categoryGraphs[category].addChunk(chunkStart, j);
+ chunkStart = -1;
+ }
+ }
+ }
+ if (chunkStart !== -1) {
+ this._categoryGraphs[category].addChunk(chunkStart, 100);
+ chunkStart = -1;
+ }
+ }
},
_resizeWindow: function(resizeElement, event)
@@ -449,6 +497,8 @@ WebInspector.TimelineRecordTreeElement.prototype.__proto__ = TreeElement.prototy
WebInspector.TimelineCalculator = function()
{
WebInspector.AbstractTimelineCalculator.call(this);
+ this.windowLeft = 0.0;
+ this.windowRight = 1.0;
}
WebInspector.TimelineCalculator.prototype = {
@@ -518,6 +568,40 @@ WebInspector.TimelineCalculator.prototype = {
WebInspector.TimelineCalculator.prototype.__proto__ = WebInspector.AbstractTimelineCalculator.prototype;
+WebInspector.TimelineCategoryGraph = function(category)
+{
+ this._category = category;
+
+ this._graphElement = document.createElement("div");
+ this._graphElement.className = "timeline-graph-side timeline-overview-graph-side filter-all";
+
+ this._barAreaElement = document.createElement("div");
+ this._barAreaElement.className = "timeline-graph-bar-area timeline-category-" + category.name;
+ this._graphElement.appendChild(this._barAreaElement);
+}
+
+WebInspector.TimelineCategoryGraph.prototype = {
+ get graphElement()
+ {
+ return this._graphElement;
+ },
+
+ addChunk: function(start, end)
+ {
+ var chunk = document.createElement("div");
+ chunk.className = "timeline-graph-bar";
+ this._barAreaElement.appendChild(chunk);
+ chunk.style.setProperty("left", start + "%");
+ chunk.style.setProperty("width", (end - start) + "%");
+ },
+
+ clearChunks: function()
+ {
+ this._barAreaElement.removeChildren();
+ }
+}
+
+
WebInspector.TimelineGraph = function(record)
{
this.record = record;
@@ -555,11 +639,6 @@ WebInspector.TimelineGraph.prototype = {
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.start + "%");
this._barElement.style.setProperty("right", (100 - percentages.end) + "%");
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index d0f1e9f..32d0237 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -3329,6 +3329,7 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
bottom: 15px;
width: 6px;
margin-left: -3px;
+ margin-right: -3px;
background-color: rgb(132, 132, 132);
z-index: 500;
cursor: col-resize;
@@ -3416,6 +3417,14 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
display: list-item;
}
+#timeline-overview-graphs {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 20px;
+}
+
#timeline-graphs {
position: absolute;
left: 0;
@@ -3432,6 +3441,13 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
margin-top: 0px;
border-top: 1px solid transparent;
overflow: hidden;
+ pointer-events: none;
+}
+
+.timeline-overview-graph-side {
+ height: 20px;
+ z-index: 170;
+ pointer-events: none;
}
.timeline-graph-bar-area {
@@ -3440,6 +3456,7 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
bottom: 0;
right: 8px;
left: 9px;
+ pointer-events: none;
}
.timeline-graph-bar {
@@ -3452,6 +3469,7 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
min-width: 7px;
opacity: 0.8;
-webkit-border-image: url(Images/timelineBarGray.png) 4 4 5 4;
+ pointer-events: none;
}
.timeline-graph-side:nth-of-type(2n) {
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list