[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:46 UTC 2010
The following commit has been merged in the webkit-1.2 branch:
commit 6b25871b5dd78ef7ccd6ddf0f82cad75aa3aaf3c
Author: pfeldman at chromium.org <pfeldman at chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Date: Tue Nov 3 17:06:01 2009 +0000
2009-11-03 Pavel Feldman <pfeldman at chromium.org>
Reviewed by Timothy Hatcher.
Web Inspector: Implement Timeline Window, wire it to the bottom timeline.
https://bugs.webkit.org/show_bug.cgi?id=31056
* English.lproj/localizedStrings.js:
* inspector/front-end/AbstractTimelinePanel.js:
(WebInspector.AbstractTimelinePanel.prototype.get items):
(WebInspector.AbstractTimelinePanel.prototype.createInterface):
(WebInspector.AbstractTimelinePanel.prototype.updateGraphDividersIfNeeded):
(WebInspector.AbstractTimelinePanel.prototype._updateDividersLabelBarPosition):
(WebInspector.AbstractTimelinePanel.prototype.invalidateAllItems):
(WebInspector.AbstractTimelinePanel.prototype.refresh):
(WebInspector.AbstractTimelinePanel.prototype.adjustScrollPosition):
(WebInspector.AbstractTimelinePanel.prototype.addExtraDivider):
(WebInspector.TimelineGrid):
(WebInspector.TimelineGrid.prototype.get itemsGraphsElement):
(WebInspector.TimelineGrid.prototype.updateDividers):
(WebInspector.TimelineGrid.prototype.addExtraDivider):
(WebInspector.TimelineGrid.prototype.setScrollAndDividerTop):
* inspector/front-end/ResourcesPanel.js:
(WebInspector.ResourcesPanel):
(WebInspector.ResourcesPanel.prototype.updateGraphDividersIfNeeded):
(WebInspector.ResourcesPanel.prototype.get _resources):
* inspector/front-end/TimelinePanel.js:
(WebInspector.TimelinePanel):
(WebInspector.TimelinePanel.prototype.get categories):
(WebInspector.TimelinePanel.prototype._formatRecord):
(WebInspector.TimelinePanel.prototype.reset):
(WebInspector.TimelinePanel.prototype._createOverview):
(WebInspector.TimelinePanel.prototype.setSidebarWidth):
(WebInspector.TimelinePanel.prototype.updateMainViewWidth):
(WebInspector.TimelinePanel.prototype.updateGraphDividersIfNeeded):
(WebInspector.TimelinePanel.prototype.refresh):
(WebInspector.TimelinePanel.prototype._resizeWindow):
(WebInspector.TimelinePanel.prototype._windowResizeDragging):
(WebInspector.TimelinePanel.prototype._dragWindow):
(WebInspector.TimelinePanel.prototype._windowDragging):
(WebInspector.TimelinePanel.prototype._resizeWindowLeft):
(WebInspector.TimelinePanel.prototype._resizeWindowRight):
(WebInspector.TimelinePanel.prototype._setWindowPosition):
(WebInspector.TimelinePanel.prototype._endWindowDragging):
(WebInspector.TimelineCategoryTreeElement):
(WebInspector.TimelineCategoryTreeElement.prototype.onattach):
(WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages):
(WebInspector.TimelineCalculator.prototype.get minimumBoundary):
(WebInspector.TimelineCalculator.prototype.get maximumBoundary):
(WebInspector.TimelineCalculator.prototype.reset):
(WebInspector.TimelineCalculator.prototype.updateBoundaries):
(WebInspector.TimelineCalculator.prototype.formatValue):
* inspector/front-end/inspector.css:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@50458 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/WebCore/ChangeLog b/WebCore/ChangeLog
index 2a190af..9b61c14 100644
--- a/WebCore/ChangeLog
+++ b/WebCore/ChangeLog
@@ -1,3 +1,58 @@
+2009-11-03 Pavel Feldman <pfeldman at chromium.org>
+
+ Reviewed by Timothy Hatcher.
+
+ Web Inspector: Implement Timeline Window, wire it to the bottom timeline.
+
+ https://bugs.webkit.org/show_bug.cgi?id=31056
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/AbstractTimelinePanel.js:
+ (WebInspector.AbstractTimelinePanel.prototype.get items):
+ (WebInspector.AbstractTimelinePanel.prototype.createInterface):
+ (WebInspector.AbstractTimelinePanel.prototype.updateGraphDividersIfNeeded):
+ (WebInspector.AbstractTimelinePanel.prototype._updateDividersLabelBarPosition):
+ (WebInspector.AbstractTimelinePanel.prototype.invalidateAllItems):
+ (WebInspector.AbstractTimelinePanel.prototype.refresh):
+ (WebInspector.AbstractTimelinePanel.prototype.adjustScrollPosition):
+ (WebInspector.AbstractTimelinePanel.prototype.addExtraDivider):
+ (WebInspector.TimelineGrid):
+ (WebInspector.TimelineGrid.prototype.get itemsGraphsElement):
+ (WebInspector.TimelineGrid.prototype.updateDividers):
+ (WebInspector.TimelineGrid.prototype.addExtraDivider):
+ (WebInspector.TimelineGrid.prototype.setScrollAndDividerTop):
+ * inspector/front-end/ResourcesPanel.js:
+ (WebInspector.ResourcesPanel):
+ (WebInspector.ResourcesPanel.prototype.updateGraphDividersIfNeeded):
+ (WebInspector.ResourcesPanel.prototype.get _resources):
+ * inspector/front-end/TimelinePanel.js:
+ (WebInspector.TimelinePanel):
+ (WebInspector.TimelinePanel.prototype.get categories):
+ (WebInspector.TimelinePanel.prototype._formatRecord):
+ (WebInspector.TimelinePanel.prototype.reset):
+ (WebInspector.TimelinePanel.prototype._createOverview):
+ (WebInspector.TimelinePanel.prototype.setSidebarWidth):
+ (WebInspector.TimelinePanel.prototype.updateMainViewWidth):
+ (WebInspector.TimelinePanel.prototype.updateGraphDividersIfNeeded):
+ (WebInspector.TimelinePanel.prototype.refresh):
+ (WebInspector.TimelinePanel.prototype._resizeWindow):
+ (WebInspector.TimelinePanel.prototype._windowResizeDragging):
+ (WebInspector.TimelinePanel.prototype._dragWindow):
+ (WebInspector.TimelinePanel.prototype._windowDragging):
+ (WebInspector.TimelinePanel.prototype._resizeWindowLeft):
+ (WebInspector.TimelinePanel.prototype._resizeWindowRight):
+ (WebInspector.TimelinePanel.prototype._setWindowPosition):
+ (WebInspector.TimelinePanel.prototype._endWindowDragging):
+ (WebInspector.TimelineCategoryTreeElement):
+ (WebInspector.TimelineCategoryTreeElement.prototype.onattach):
+ (WebInspector.TimelineCalculator.prototype.computeBarGraphPercentages):
+ (WebInspector.TimelineCalculator.prototype.get minimumBoundary):
+ (WebInspector.TimelineCalculator.prototype.get maximumBoundary):
+ (WebInspector.TimelineCalculator.prototype.reset):
+ (WebInspector.TimelineCalculator.prototype.updateBoundaries):
+ (WebInspector.TimelineCalculator.prototype.formatValue):
+ * inspector/front-end/inspector.css:
+
2009-11-03 Simon Hausmann <hausmann at webkit.org>
Reviewed by Tor Arne Vestbø.
diff --git a/WebCore/English.lproj/localizedStrings.js b/WebCore/English.lproj/localizedStrings.js
index 89556b4..c221802 100644
Binary files a/WebCore/English.lproj/localizedStrings.js and b/WebCore/English.lproj/localizedStrings.js differ
diff --git a/WebCore/inspector/front-end/AbstractTimelinePanel.js b/WebCore/inspector/front-end/AbstractTimelinePanel.js
index fd61db5..622e4fc 100644
--- a/WebCore/inspector/front-end/AbstractTimelinePanel.js
+++ b/WebCore/inspector/front-end/AbstractTimelinePanel.js
@@ -57,10 +57,13 @@ WebInspector.AbstractTimelinePanel.prototype = {
// Should be implemented by the concrete subclasses.
},
- createInterface: function()
+ get items()
{
- this._createFilterPanel();
+ return this._items;
+ },
+ createInterface: function()
+ {
this.containerElement = document.createElement("div");
this.containerElement.id = "resources-container";
this.containerElement.addEventListener("scroll", this._updateDividersLabelBarPosition.bind(this), false);
@@ -70,10 +73,19 @@ WebInspector.AbstractTimelinePanel.prototype = {
this.sidebarElement.id = "resources-sidebar";
this.populateSidebar();
- this._createGraph();
+ this._containerContentElement = document.createElement("div");
+ this._containerContentElement.id = "resources-container-content";
+ this.containerElement.appendChild(this._containerContentElement);
+
+ this.summaryBar = new WebInspector.SummaryBar(this.categories);
+ this.summaryBar.element.id = "resources-summary";
+ this._containerContentElement.appendChild(this.summaryBar.element);
+
+ this._timelineGrid = new WebInspector.TimelineGrid(this._containerContentElement);
+ this.itemsGraphsElement = this._timelineGrid.itemsGraphsElement;
},
- _createFilterPanel: function()
+ createFilterPanel: function()
{
this.filterBarElement = document.createElement("div");
this.filterBarElement.id = "resources-filter";
@@ -191,33 +203,6 @@ WebInspector.AbstractTimelinePanel.prototype = {
this.containerElement.scrollTop = 0;
},
- _createGraph: function()
- {
- this._containerContentElement = document.createElement("div");
- this._containerContentElement.id = "resources-container-content";
- this.containerElement.appendChild(this._containerContentElement);
-
- this.summaryBar = new WebInspector.SummaryBar(this.categories);
- this.summaryBar.element.id = "resources-summary";
- this._containerContentElement.appendChild(this.summaryBar.element);
-
- this.itemsGraphsElement = document.createElement("div");
- this.itemsGraphsElement.id = "resources-graphs";
- this._containerContentElement.appendChild(this.itemsGraphsElement);
-
- this.dividersElement = document.createElement("div");
- this.dividersElement.id = "resources-dividers";
- this._containerContentElement.appendChild(this.dividersElement);
-
- this.eventDividersElement = document.createElement("div");
- this.eventDividersElement.id = "resources-event-dividers";
- this._containerContentElement.appendChild(this.eventDividersElement);
-
- this.dividersLabelBarElement = document.createElement("div");
- this.dividersLabelBarElement.id = "resources-dividers-label-bar";
- this._containerContentElement.appendChild(this.dividersLabelBarElement);
- },
-
updateGraphDividersIfNeeded: function(force)
{
if (!this.visible) {
@@ -231,44 +216,14 @@ WebInspector.AbstractTimelinePanel.prototype = {
return false;
}
- var dividerCount = Math.round(this.dividersElement.offsetWidth / 64);
- var slice = this.calculator.boundarySpan / dividerCount;
- if (!force && this._currentDividerSlice === slice)
- return false;
-
- this._currentDividerSlice = slice;
-
- this.dividersElement.removeChildren();
- this.eventDividersElement.removeChildren();
- this.dividersLabelBarElement.removeChildren();
-
- for (var i = 1; i <= dividerCount; ++i) {
- var divider = document.createElement("div");
- divider.className = "resources-divider";
- if (i === dividerCount)
- divider.addStyleClass("last");
- divider.style.left = ((i / dividerCount) * 100) + "%";
-
- this.dividersElement.appendChild(divider.cloneNode());
-
- var label = document.createElement("div");
- label.className = "resources-divider-label";
- if (!isNaN(slice))
- label.textContent = this.calculator.formatValue(slice * i);
- divider.appendChild(label);
-
- this.dividersLabelBarElement.appendChild(divider);
- }
- return true;
+ return this._timelineGrid.updateDividers(force, this.calculator);
},
_updateDividersLabelBarPosition: function()
{
var scrollTop = this.containerElement.scrollTop;
var dividersTop = (scrollTop < this.summaryBar.element.offsetHeight ? this.summaryBar.element.offsetHeight : scrollTop);
- this.dividersElement.style.top = scrollTop + "px";
- this.eventDividersElement.style.top = scrollTop + "px";
- this.dividersLabelBarElement.style.top = dividersTop + "px";
+ this._timelineGrid.setScrollAndDividerTop(scrollTop, dividersTop);
},
get needsRefresh()
@@ -319,11 +274,17 @@ WebInspector.AbstractTimelinePanel.prototype = {
this.updateGraphDividersIfNeeded();
},
+ invalidateAllItems: function()
+ {
+ this._staleItems = this._items;
+ },
+
refresh: function()
{
this.needsRefresh = false;
var staleItemsLength = this._staleItems.length;
+
var boundariesChanged = false;
for (var i = 0; i < staleItemsLength; ++i) {
@@ -459,6 +420,11 @@ WebInspector.AbstractTimelinePanel.prototype = {
// Prevent the container from being scrolled off the end.
if ((this.containerElement.scrollTop + this.containerElement.offsetHeight) > this.sidebarElement.offsetHeight)
this.containerElement.scrollTop = (this.sidebarElement.offsetHeight - this.containerElement.offsetHeight);
+ },
+
+ addEventDivider: function(divider)
+ {
+ this._timelineGrid.addEventDivider(divider);
}
}
@@ -547,3 +513,74 @@ WebInspector.AbstractTimelineCategory.prototype = {
return this.title;
}
}
+
+WebInspector.TimelineGrid = function(container)
+{
+ this._itemsGraphsElement = document.createElement("div");
+ this._itemsGraphsElement.id = "resources-graphs";
+ container.appendChild(this._itemsGraphsElement);
+
+ this._dividersElement = document.createElement("div");
+ this._dividersElement.id = "resources-dividers";
+ container.appendChild(this._dividersElement);
+
+ this._eventDividersElement = document.createElement("div");
+ this._eventDividersElement.id = "resources-event-dividers";
+ container.appendChild(this._eventDividersElement);
+
+ this._dividersLabelBarElement = document.createElement("div");
+ this._dividersLabelBarElement.id = "resources-dividers-label-bar";
+ container.appendChild(this._dividersLabelBarElement);
+}
+
+WebInspector.TimelineGrid.prototype = {
+ get itemsGraphsElement()
+ {
+ return this._itemsGraphsElement;
+ },
+
+ updateDividers: function(force, calculator)
+ {
+ var dividerCount = Math.round(this._dividersElement.offsetWidth / 64);
+ var slice = calculator.boundarySpan / dividerCount;
+ if (!force && this._currentDividerSlice === slice)
+ return false;
+
+ this._currentDividerSlice = slice;
+
+ this._dividersElement.removeChildren();
+ this._eventDividersElement.removeChildren();
+ this._dividersLabelBarElement.removeChildren();
+
+ for (var i = 1; i <= dividerCount; ++i) {
+ var divider = document.createElement("div");
+ divider.className = "resources-divider";
+ if (i === dividerCount)
+ divider.addStyleClass("last");
+ divider.style.left = ((i / dividerCount) * 100) + "%";
+
+ this._dividersElement.appendChild(divider.cloneNode());
+
+ var label = document.createElement("div");
+ label.className = "resources-divider-label";
+ if (!isNaN(slice))
+ label.textContent = calculator.formatValue(slice * i);
+ divider.appendChild(label);
+
+ this._dividersLabelBarElement.appendChild(divider);
+ }
+ return true;
+ },
+
+ addEventDivider: function(divider)
+ {
+ this._eventDividersElement.appendChild(divider);
+ },
+
+ setScrollAndDividerTop: function(scrollTop, dividersTop)
+ {
+ this._dividersElement.style.top = scrollTop + "px";
+ this._eventDividersElement.style.top = scrollTop + "px";
+ this._dividersLabelBarElement.style.top = dividersTop + "px";
+ }
+}
diff --git a/WebCore/inspector/front-end/ResourcesPanel.js b/WebCore/inspector/front-end/ResourcesPanel.js
index 940570f..74e6192 100644
--- a/WebCore/inspector/front-end/ResourcesPanel.js
+++ b/WebCore/inspector/front-end/ResourcesPanel.js
@@ -39,6 +39,7 @@ WebInspector.ResourcesPanel = function()
this.viewsContainerElement.id = "resource-views";
this.element.appendChild(this.viewsContainerElement);
+ this.createFilterPanel();
this.createInterface();
this._createStatusbarButtons();
@@ -564,8 +565,8 @@ WebInspector.ResourcesPanel.prototype = {
loadDividerPadding.style.left = percent + "%";
loadDividerPadding.title = WebInspector.UIString("Load event fired");
loadDividerPadding.appendChild(loadDivider);
-
- this.eventDividersElement.appendChild(loadDividerPadding);
+
+ this.addEventDivider(loadDividerPadding);
}
if (this.mainResourceDOMContentTime !== -1) {
@@ -579,8 +580,8 @@ WebInspector.ResourcesPanel.prototype = {
domContentDividerPadding.style.left = percent + "%";
domContentDividerPadding.title = WebInspector.UIString("DOMContent event fired");
domContentDividerPadding.appendChild(domContentDivider);
-
- this.eventDividersElement.appendChild(domContentDividerPadding);
+
+ this.addEventDivider(domContentDividerPadding);
}
},
@@ -694,7 +695,7 @@ WebInspector.ResourcesPanel.prototype = {
get _resources()
{
- return this._items;
+ return this.items;
}
}
diff --git a/WebCore/inspector/front-end/TimelinePanel.js b/WebCore/inspector/front-end/TimelinePanel.js
index af3af24..1d984ba 100644
--- a/WebCore/inspector/front-end/TimelinePanel.js
+++ b/WebCore/inspector/front-end/TimelinePanel.js
@@ -34,7 +34,10 @@ WebInspector.TimelinePanel = function()
this.element.addStyleClass("timeline");
+ this.createFilterPanel();
+ this._createOverview();
this.createInterface();
+ this.containerElement.id = "timeline-container";
this.summaryBar.element.id = "timeline-summary";
this.itemsGraphsElement.id = "timeline-graphs";
@@ -64,8 +67,7 @@ WebInspector.TimelinePanel.prototype = {
this._categories = {
loading: new WebInspector.TimelineCategory("loading", WebInspector.UIString("Loading"), "rgb(47,102,236)"),
scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), "rgb(157,231,119)"),
- rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), "rgb(164,60,255)"),
- other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), "rgb(186,186,186)")
+ rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), "rgb(164,60,255)")
};
}
return this._categories;
@@ -152,12 +154,11 @@ WebInspector.TimelinePanel.prototype = {
this._recordStyles[recordTypes.XHRReadyStateChange] = { title: WebInspector.UIString("XHR Ready State Change"), category: this.categories.scripting };
this._recordStyles[recordTypes.XHRLoad] = { title: WebInspector.UIString("XHR Load"), category: this.categories.scripting };
this._recordStyles[recordTypes.EvaluateScript] = { title: WebInspector.UIString("Evaluate Script"), category: this.categories.scripting };
- this._recordStyles["Other"] = { title: WebInspector.UIString("Other"), icon: 0, category: this.categories.other };
}
var style = this._recordStyles[record.type];
if (!style)
- style = this._recordStyles["Other"];
+ style = this._recordStyles[recordTypes.EventDispatch];
var formattedRecord = {};
formattedRecord.category = style.category;
@@ -193,6 +194,168 @@ WebInspector.TimelinePanel.prototype = {
{
WebInspector.AbstractTimelinePanel.prototype.reset.call(this);
this._lastRecord = null;
+ this._overviewCalculator.reset();
+ },
+
+ _createOverview: function()
+ {
+ var overviewPanelElement = document.createElement("div");
+ overviewPanelElement.id = "timeline-overview-panel";
+ this.element.appendChild(overviewPanelElement);
+
+ this._overviewSidebarElement = document.createElement("div");
+ this._overviewSidebarElement.id = "timeline-overview-sidebar";
+ overviewPanelElement.appendChild(this._overviewSidebarElement);
+
+ var overviewTreeElement = document.createElement("ol");
+ overviewTreeElement.className = "sidebar-tree";
+ this._overviewSidebarElement.appendChild(overviewTreeElement);
+ var sidebarTree = new TreeOutline(overviewTreeElement);
+
+ var categoriesTreeElement = new WebInspector.SidebarSectionTreeElement(WebInspector.UIString("TIMELINES"), {}, true);
+ categoriesTreeElement.expanded = true;
+ sidebarTree.appendChild(categoriesTreeElement);
+
+ for (var category in this.categories)
+ categoriesTreeElement.appendChild(new WebInspector.TimelineCategoryTreeElement(this.categories[category]));
+
+ this._overviewGridElement = document.createElement("div");
+ this._overviewGridElement.id = "timeline-overview-grid";
+ overviewPanelElement.appendChild(this._overviewGridElement);
+ this._overviewGrid = new WebInspector.TimelineGrid(this._overviewGridElement);
+ this._overviewGrid.setScrollAndDividerTop(0, 0);
+
+ this._overviewWindowElement = document.createElement("div");
+ this._overviewWindowElement.id = "timeline-overview-window";
+ this._overviewWindowElement.addEventListener("mousedown", this._dragWindow.bind(this), false);
+ this._overviewGridElement.appendChild(this._overviewWindowElement);
+
+ this._leftResizeElement = document.createElement("div");
+ this._leftResizeElement.className = "timeline-window-resizer";
+ this._leftResizeElement.style.left = 0;
+ this._overviewGridElement.appendChild(this._leftResizeElement);
+ this._leftResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._leftResizeElement), false);
+
+ this._rightResizeElement = document.createElement("div");
+ this._rightResizeElement.className = "timeline-window-resizer timeline-window-resizer-right";
+ this._rightResizeElement.style.right = 0;
+ this._overviewGridElement.appendChild(this._rightResizeElement);
+ this._rightResizeElement.addEventListener("mousedown", this._resizeWindow.bind(this, this._rightResizeElement), false);
+
+ this._overviewCalculator = new WebInspector.TimelineCalculator();
+
+ var separatorElement = document.createElement("div");
+ separatorElement.id = "timeline-overview-separator";
+ this.element.appendChild(separatorElement);
+ },
+
+ setSidebarWidth: function(width)
+ {
+ WebInspector.AbstractTimelinePanel.prototype.setSidebarWidth.call(this, width);
+ this._overviewSidebarElement.style.width = width + "px";
+ },
+
+ updateMainViewWidth: function(width)
+ {
+ WebInspector.AbstractTimelinePanel.prototype.updateMainViewWidth.call(this, width);
+ this._overviewGridElement.style.left = width + "px";
+ },
+
+ updateGraphDividersIfNeeded: function()
+ {
+ WebInspector.AbstractTimelinePanel.prototype.updateGraphDividersIfNeeded.call(this);
+ this._overviewGrid.updateDividers(true, this._overviewCalculator);
+ },
+
+ refresh: function()
+ {
+ WebInspector.AbstractTimelinePanel.prototype.refresh.call(this);
+ this._overviewGrid.updateDividers(true, this._overviewCalculator);
+ },
+
+ _resizeWindow: function(resizeElement, event)
+ {
+ WebInspector.elementDragStart(resizeElement, this._windowResizeDragging.bind(this, resizeElement), this._endWindowDragging.bind(this), event, "col-resize");
+ },
+
+ _windowResizeDragging: function(resizeElement, event)
+ {
+ if (resizeElement === this._leftResizeElement)
+ this._resizeWindowLeft(event.pageX - this._overviewGridElement.offsetLeft);
+ else
+ this._resizeWindowRight(event.pageX - this._overviewGridElement.offsetLeft);
+ event.preventDefault();
+ },
+
+ _dragWindow: function(event)
+ {
+ WebInspector.elementDragStart(this._overviewWindowElement, this._windowDragging.bind(this, event.pageX,
+ this._leftResizeElement.offsetLeft, this._rightResizeElement.offsetLeft), this._endWindowDragging.bind(this), event, "col-resize");
+ },
+
+ _windowDragging: function(startX, windowLeft, windowRight, event)
+ {
+ var delta = event.pageX - startX;
+ var start = windowLeft + delta;
+ var end = windowRight + delta;
+ var windowSize = windowRight - windowLeft;
+
+ if (start < 0) {
+ start = 0;
+ end = windowSize;
+ }
+
+ if (end > this._overviewGridElement.clientWidth) {
+ end = this._overviewGridElement.clientWidth;
+ start = end - windowSize;
+ }
+ this._setWindowPosition(start, end);
+
+ event.preventDefault();
+ },
+
+ _resizeWindowLeft: function(start)
+ {
+ // Glue to edge.
+ if (start < 20)
+ start = 0;
+ this._setWindowPosition(start, null);
+ },
+
+ _resizeWindowRight: function(end)
+ {
+ // Glue to edge.
+ if (end > this._overviewGridElement.clientWidth - 20)
+ end = this._overviewGridElement.clientWidth;
+ this._setWindowPosition(null, end);
+ },
+
+ _setWindowPosition: function(start, end)
+ {
+ this.calculator.reset();
+ this.invalidateAllItems();
+ if (typeof start === "number") {
+ if (start > this._rightResizeElement.offsetLeft - 25)
+ start = this._rightResizeElement.offsetLeft - 25;
+
+ this.calculator.windowLeft = start / this._overviewGridElement.clientWidth;
+ this._leftResizeElement.style.left = this.calculator.windowLeft*100 + "%";
+ this._overviewWindowElement.style.left = this.calculator.windowLeft*100 + "%";
+ }
+ if (typeof end === "number") {
+ if (end < this._leftResizeElement.offsetLeft + 30)
+ end = this._leftResizeElement.offsetLeft + 30;
+
+ this.calculator.windowRight = end / this._overviewGridElement.clientWidth;
+ this._rightResizeElement.style.left = this.calculator.windowRight*100 + "%";
+ }
+ this._overviewWindowElement.style.width = (this.calculator.windowRight - this.calculator.windowLeft)*100 + "%";
+ this.refresh();
+ },
+
+ _endWindowDragging: function(event)
+ {
+ WebInspector.elementDragEnd(event);
}
}
@@ -210,6 +373,31 @@ WebInspector.TimelineCategory.prototype = {
WebInspector.TimelineCategory.prototype.__proto__ = WebInspector.AbstractTimelineCategory.prototype;
+
+WebInspector.TimelineCategoryTreeElement = function(category)
+{
+ this._category = category;
+
+ // Pass an empty title, the title gets made later in onattach.
+ TreeElement.call(this, "", null, false);
+}
+
+WebInspector.TimelineCategoryTreeElement.prototype = {
+ onattach: function()
+ {
+ this.listItemElement.removeChildren();
+ this.listItemElement.addStyleClass("timeline-category-tree-item");
+
+ this.typeElement = document.createElement("span");
+ this.typeElement.className = "type";
+ this.typeElement.textContent = this._category.title;
+ this.listItemElement.appendChild(this.typeElement);
+ }
+}
+
+WebInspector.TimelineCategoryTreeElement.prototype.__proto__ = TreeElement.prototype;
+
+
WebInspector.TimelineRecordTreeElement = function(record)
{
this._record = record;
@@ -266,8 +454,8 @@ WebInspector.TimelineCalculator = function()
WebInspector.TimelineCalculator.prototype = {
computeBarGraphPercentages: function(record)
{
- var start = ((record.startTime - this.minimumBoundary) / this.boundarySpan) * 100;
- var end = ((record.endTime - this.minimumBoundary) / this.boundarySpan) * 100;
+ var start = (record.startTime - this.minimumBoundary) / this.boundarySpan * 100;
+ var end = (record.endTime - this.minimumBoundary) / this.boundarySpan * 100;
return {start: start, end: end};
},
@@ -281,20 +469,40 @@ WebInspector.TimelineCalculator.prototype = {
return {tooltip: record.title};
},
+ get minimumBoundary()
+ {
+ if (typeof this.windowLeft === "number")
+ return this._absoluteMinimumBoundary + this.windowLeft * (this._absoluteMaximumBoundary - this._absoluteMinimumBoundary);
+ return this._absoluteMinimumBoundary;
+ },
+
+ get maximumBoundary()
+ {
+ if (typeof this.windowLeft === "number")
+ return this._absoluteMinimumBoundary + this.windowRight * (this._absoluteMaximumBoundary - this._absoluteMinimumBoundary);
+ return this._absoluteMaximumBoundary;
+ },
+
+ reset: function()
+ {
+ delete this._absoluteMinimumBoundary;
+ delete this._absoluteMaximumBoundary;
+ },
+
updateBoundaries: function(record)
{
var didChange = false;
var lowerBound = record.startTime;
- if (typeof this.minimumBoundary === "undefined" || lowerBound < this.minimumBoundary) {
- this.minimumBoundary = lowerBound;
+ if (typeof this._absoluteMinimumBoundary === "undefined" || lowerBound < this._absoluteMinimumBoundary) {
+ this._absoluteMinimumBoundary = lowerBound;
didChange = true;
}
var upperBound = record.endTime;
- if (typeof this.maximumBoundary === "undefined" || upperBound > this.maximumBoundary) {
- this.maximumBoundary = upperBound;
+ if (typeof this._absoluteMaximumBoundary === "undefined" || upperBound > this._absoluteMaximumBoundary) {
+ this._absoluteMaximumBoundary = upperBound;
didChange = true;
}
@@ -303,9 +511,8 @@ WebInspector.TimelineCalculator.prototype = {
formatValue: function(value)
{
- return Number.secondsToString(value, WebInspector.UIString.bind(WebInspector));
- },
-
+ return Number.secondsToString(value + this.minimumBoundary - this._absoluteMinimumBoundary, WebInspector.UIString.bind(WebInspector));
+ }
}
WebInspector.TimelineCalculator.prototype.__proto__ = WebInspector.AbstractTimelineCalculator.prototype;
diff --git a/WebCore/inspector/front-end/inspector.css b/WebCore/inspector/front-end/inspector.css
index 541c3b8..d0f1e9f 100644
--- a/WebCore/inspector/front-end/inspector.css
+++ b/WebCore/inspector/front-end/inspector.css
@@ -3275,10 +3275,108 @@ body.inactive .sidebar-tree-item.selected .bubble.search-matches {
height: 0;
}
+#timeline-overview-panel {
+ position: absolute;
+ top: 23px;
+ left: 0;
+ right: 0;
+ height: 80px;
+}
+
+#timeline-overview-separator {
+ position: absolute;
+ top: 103px;
+ left: 0;
+ right: 0;
+ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(236, 236, 236)), to(rgb(217, 217, 217)));
+ border-top: 1px solid rgb(163, 163, 163);
+ border-bottom: 1px solid rgb(163, 163, 163);
+ height: 10px;
+}
+
+#timeline-overview-sidebar {
+ position: absolute;
+ width: 200px;
+ top: 0px;
+ bottom: 0px;
+ left: 0px;
+ background-color: rgb(232, 232, 232);
+ border-right: 1px solid rgb(163, 163, 163);
+}
+
+#timeline-overview-grid {
+ position: absolute;
+ top: 0px;
+ bottom: 0px;
+ left: 200px;
+ right: 0px;
+ background-color: rgb(232, 232, 232);
+}
+
+#timeline-overview-window {
+ background-color: white;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 150;
+}
+
+.timeline-window-resizer {
+ position: absolute;
+ top: 35px;
+ bottom: 15px;
+ width: 6px;
+ margin-left: -3px;
+ background-color: rgb(132, 132, 132);
+ z-index: 500;
+ cursor: col-resize;
+ border: 1px solid white;
+ -webkit-border-radius: 3px;
+}
+
+.timeline .sidebar-resizer-vertical {
+ top: 113px;
+}
+
+#timeline-overview-grid #resources-graphs {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 80px;
+}
+
+#timeline-container {
+ position: absolute;
+ top: 113px;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ border-right: 0 none transparent;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+
.timeline-clear-status-bar-item .glyph {
-webkit-mask-image: url(Images/clearConsoleButtonGlyph.png);
}
+.timeline-category-tree-item {
+ height: 20px;
+ padding-left: 24px;
+ padding-top: 2px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ font-weight: bold;
+}
+
+.timeline-category-tree-item:nth-of-type(2n) {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
.timeline-tree-item {
height: 18px;
padding-left: 10px;
--
WebKit Debian packaging
More information about the Pkg-webkit-commits
mailing list