Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1217)

Unified Diff: chrome_linux/resources/inspector/TimelinePanel.js

Issue 14690006: Update reference builds to r197396. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/deps/reference_builds/
Patch Set: Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome_linux/resources/inspector/ScriptsPanel.js ('k') | chrome_linux/resources/inspector/auditsPanel.css » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome_linux/resources/inspector/TimelinePanel.js
===================================================================
--- chrome_linux/resources/inspector/TimelinePanel.js (revision 197568)
+++ chrome_linux/resources/inspector/TimelinePanel.js (working copy)
@@ -1652,8 +1652,11 @@
WebInspector.TimelineOverviewBase = function(model)
{
WebInspector.View.call(this);
+this.element.classList.add("fill");
+
this._model = model;
this._canvas = this.element.createChild("canvas", "fill");
+this._context = this._canvas.getContext("2d");
}
WebInspector.TimelineOverviewBase.prototype = {
@@ -1676,6 +1679,12 @@
};
},
+_resetCanvas: function()
+{
+this._canvas.width = this.element.clientWidth * window.devicePixelRatio;
+this._canvas.height = this.element.clientHeight * window.devicePixelRatio;
+},
+
__proto__: WebInspector.View.prototype
}
@@ -1684,7 +1693,6 @@
{
WebInspector.TimelineOverviewBase.call(this, model);
this.element.id = "timeline-overview-memory";
-this.element.classList.add("fill");
this._maxHeapSizeLabel = this.element.createChild("div", "max memory-graph-label");
this._minHeapSizeLabel = this.element.createChild("div", "min memory-graph-label");
@@ -1697,9 +1705,7 @@
if (!records.length)
return;
-const yPadding = 5;
-this._canvas.width = this.element.clientWidth;
-this._canvas.height = this.element.clientHeight - yPadding;
+this._resetCanvas();
const lowerOffset = 3;
var maxUsedHeapSize = 0;
@@ -1726,7 +1732,7 @@
histogram[x] = Math.max(histogram[x] || 0, y);
});
-var ctx = this._canvas.getContext("2d");
+var ctx = this._context;
this._clear(ctx);
@@ -1753,8 +1759,8 @@
ctx.stroke();
ctx.fillStyle = "rgba(214,225,254, 0.8);";
-ctx.lineTo(width, 60);
-ctx.lineTo(0, 60);
+ctx.lineTo(width, this._canvas.height);
+ctx.lineTo(0, this._canvas.height);
ctx.lineTo(0, height - initialY);
ctx.fill();
ctx.closePath();
@@ -1778,37 +1784,30 @@
WebInspector.TimelineOverviewBase.call(this, model);
this.element.id = "timeline-overview-events";
-this._context = this._canvas.getContext("2d");
this._fillStyles = {};
var categories = WebInspector.TimelinePresentationModel.categories();
for (var category in categories)
-this._fillStyles[category] = WebInspector.TimelinePresentationModel.createFillStyleForCategory(this._context, 0, WebInspector.TimelineEventOverview._innerStripHeight, categories[category]);
+this._fillStyles[category] = WebInspector.TimelinePresentationModel.createFillStyleForCategory(this._context, 0, WebInspector.TimelineEventOverview._stripGradientHeight, categories[category]);
-this._disabledCategoryFillStyle = WebInspector.TimelinePresentationModel.createFillStyle(this._context, 0, WebInspector.TimelineEventOverview._innerStripHeight,
+this._disabledCategoryFillStyle = WebInspector.TimelinePresentationModel.createFillStyle(this._context, 0, WebInspector.TimelineEventOverview._stripGradientHeight,
"rgb(218, 218, 218)", "rgb(170, 170, 170)", "rgb(143, 143, 143)");
this._disabledCategoryBorderStyle = "rgb(143, 143, 143)";
}
-WebInspector.TimelineEventOverview._canvasHeight = 60;
-
WebInspector.TimelineEventOverview._numberOfStrips = 3;
-WebInspector.TimelineEventOverview._stripHeight = Math.round(WebInspector.TimelineEventOverview._canvasHeight / WebInspector.TimelineEventOverview._numberOfStrips);
-WebInspector.TimelineEventOverview._stripPadding = 4;
+WebInspector.TimelineEventOverview._stripGradientHeight = 120;
-WebInspector.TimelineEventOverview._innerStripHeight = WebInspector.TimelineEventOverview._stripHeight - 2 * WebInspector.TimelineEventOverview._stripPadding;
-
WebInspector.TimelineEventOverview.prototype = {
update: function()
{
+this._resetCanvas();
-this._canvas.width = this.element.parentElement.clientWidth;
-this._canvas.height = WebInspector.TimelineEventOverview._canvasHeight;
-
+var stripHeight = Math.round(this._canvas.height / WebInspector.TimelineEventOverview._numberOfStrips);
var timeOffset = this._model.minimumRecordTime();
var timeSpan = this._model.maximumRecordTime() - timeOffset;
var scale = this._canvas.width / timeSpan;
@@ -1817,7 +1816,7 @@
this._context.fillStyle = "rgba(0, 0, 0, 0.05)";
for (var i = 1; i < WebInspector.TimelineEventOverview._numberOfStrips; i += 2)
-this._context.fillRect(0.5, i * WebInspector.TimelineEventOverview._stripHeight + 0.5, this._canvas.width, WebInspector.TimelineEventOverview._stripHeight);
+this._context.fillRect(0.5, i * stripHeight + 0.5, this._canvas.width, stripHeight);
function appendRecord(record)
{
@@ -1837,13 +1836,13 @@
return;
}
if (bar)
-this._renderBar(bar.start, bar.end, bar.category);
+this._renderBar(bar.start, bar.end, stripHeight, bar.category);
lastBarByGroup[category.overviewStripGroupIndex] = { start: recordStart, end: recordEnd, category: category };
}
WebInspector.TimelinePresentationModel.forAllRecords(this._model.records, appendRecord.bind(this));
for (var i = 0; i < lastBarByGroup.length; ++i) {
if (lastBarByGroup[i])
-this._renderBar(lastBarByGroup[i].start, lastBarByGroup[i].end, lastBarByGroup[i].category);
+this._renderBar(lastBarByGroup[i].start, lastBarByGroup[i].end, stripHeight, lastBarByGroup[i].category);
}
},
@@ -1852,18 +1851,23 @@
this.update();
},
-_renderBar: function(begin, end, category)
+
+_renderBar: function(begin, end, height, category)
{
+const stripPadding = 4 * window.devicePixelRatio;
+const innerStripHeight = height - 2 * stripPadding;
+
var x = begin + 0.5;
-var y = category.overviewStripGroupIndex * WebInspector.TimelineEventOverview._stripHeight + WebInspector.TimelineEventOverview._stripPadding + 0.5;
+var y = category.overviewStripGroupIndex * height + stripPadding + 0.5;
var width = Math.max(end - begin, 1);
this._context.save();
this._context.translate(x, y);
+this._context.scale(1, innerStripHeight / WebInspector.TimelineEventOverview._stripGradientHeight);
this._context.fillStyle = category.hidden ? this._disabledCategoryFillStyle : this._fillStyles[category.name];
-this._context.fillRect(0, 0, width, WebInspector.TimelineEventOverview._innerStripHeight);
+this._context.fillRect(0, 0, width, WebInspector.TimelineEventOverview._stripGradientHeight);
this._context.strokeStyle = category.hidden ? this._disabledCategoryBorderStyle : category.borderColor;
-this._context.strokeRect(0, 0, width, WebInspector.TimelineEventOverview._innerStripHeight);
+this._context.strokeRect(0, 0, width, WebInspector.TimelineEventOverview._stripGradientHeight);
this._context.restore();
},
@@ -1874,18 +1878,16 @@
WebInspector.TimelineFrameOverview = function(model)
{
WebInspector.TimelineOverviewBase.call(this, model);
-this._canvas.classList.add("timeline-frame-overview-bars");
+this.element.id = "timeline-overview-frames";
this.reset();
-this._outerPadding = 4;
-this._maxInnerBarWidth = 10;
+this._outerPadding = 4 * window.devicePixelRatio;
+this._maxInnerBarWidth = 10 * window.devicePixelRatio;
-this._actualPadding = 5;
+this._actualPadding = 5 * window.devicePixelRatio;
this._actualOuterBarWidth = this._maxInnerBarWidth + this._actualPadding;
-this._context = this._canvas.getContext("2d");
-
this._fillStyles = {};
var categories = WebInspector.TimelinePresentationModel.categories();
for (var category in categories)
@@ -1902,12 +1904,13 @@
update: function()
{
-const minBarWidth = 4;
-this._framesPerBar = Math.max(1, this._frames.length * minBarWidth / this.element.clientWidth);
+const minBarWidth = 4 * window.devicePixelRatio;
+this._resetCanvas();
+this._framesPerBar = Math.max(1, this._frames.length * minBarWidth / this._canvas.width);
this._barTimes = [];
var visibleFrames = this._aggregateFrames(this._framesPerBar);
-const paddingTop = 4;
+const paddingTop = 4 * window.devicePixelRatio;
@@ -1916,7 +1919,7 @@
if (fullBarLength < this._medianFrameLength)
fullBarLength = Math.min(this._medianFrameLength * 2, this._maxFrameLength);
-var scale = (this._canvas.clientHeight - paddingTop) / fullBarLength;
+var scale = (this._canvas.height - paddingTop) / fullBarLength;
this._renderBars(visibleFrames, scale);
},
@@ -1972,11 +1975,7 @@
_renderBars: function(frames, scale)
{
-
-this._canvas.width = this._canvas.clientWidth;
-this._canvas.height = this._canvas.clientHeight;
-
-const maxPadding = 5;
+const maxPadding = 5 * window.devicePixelRatio;
this._actualOuterBarWidth = Math.min((this._canvas.width - 2 * this._outerPadding) / frames.length, this._maxInnerBarWidth + maxPadding);
this._actualPadding = Math.min(Math.floor(this._actualOuterBarWidth / 3), maxPadding);
@@ -2000,12 +1999,12 @@
this._context.save();
this._context.beginPath();
-this._context.font = "9px monospace";
+this._context.font = 9 * window.devicePixelRatio + "px monospace";
this._context.textAlign = "right";
this._context.textBaseline = "top";
-const labelPadding = 2;
-var lineHeight = 12;
+const labelPadding = 2 * window.devicePixelRatio;
+var lineHeight = 12 * window.devicePixelRatio;
var labelTopMargin = 0;
for (var i = 0; i < fpsMarks.length; ++i) {
@@ -2033,7 +2032,7 @@
this._context.fillText(label, labelX, labelY);
labelTopMargin = labelY + lineHeight;
}
-this._context.strokeStyle = "rgb(51, 51, 51)";
+this._context.strokeStyle = "rgb(0, 0, 0, 0.3)";
this._context.stroke();
this._context.restore();
},
@@ -2073,7 +2072,7 @@
var y0 = Math.floor(this._canvas.height - frame.duration * scale) + 0.5;
var y1 = this._canvas.height + 0.5;
-this._context.strokeStyle = "rgb(90, 90, 90)";
+this._context.strokeStyle = "rgba(90, 90, 90, 0.3)";
this._context.beginPath();
this._context.moveTo(x, y1);
this._context.lineTo(x, y0);
@@ -2134,7 +2133,7 @@
scripting: new WebInspector.TimelineCategory("scripting", WebInspector.UIString("Scripting"), 1, "#D8AA34", "#F3D07A", "#F1C453"),
rendering: new WebInspector.TimelineCategory("rendering", WebInspector.UIString("Rendering"), 2, "#8266CC", "#AF9AEB", "#9A7EE6"),
painting: new WebInspector.TimelineCategory("painting", WebInspector.UIString("Painting"), 2, "#5FA050", "#8DC286", "#71B363"),
-other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), -1, "#BBBBBB", "#DDDDDD", "#EEEEEE")
+other: new WebInspector.TimelineCategory("other", WebInspector.UIString("Other"), -1, "#BBBBBB", "#DDDDDD", "#DDDDDD")
};
return WebInspector.TimelinePresentationModel._categories;
};
@@ -2378,17 +2377,16 @@
origin = parentRecord;
parentRecord = newParentRecord;
}
-if (parentRecord === this._rootRecord) {
+if (parentRecord === this._rootRecord)
coalescingBucket = record.thread ? record.type : "mainThread";
-var coalescedRecord = this._findCoalescedParent(record, coalescingBucket);
+var coalescedRecord = this._findCoalescedParent(record, parentRecord, coalescingBucket);
if (coalescedRecord) {
if (!origin)
origin = parentRecord;
parentRecord = coalescedRecord;
}
}
-}
var children = record.children;
var scriptDetails;
@@ -2455,11 +2453,13 @@
},
-_findCoalescedParent: function(record, bucket)
+_findCoalescedParent: function(record, newParent, bucket)
{
-const coalescingThresholdSeconds = 0.001;
+const coalescingThresholdSeconds = 0.005;
-var lastRecord = this._coalescingBuckets[bucket];
+var lastRecord = bucket ? this._coalescingBuckets[bucket] : newParent.children.peekLast();
+if (lastRecord && lastRecord.coalesced)
+lastRecord = lastRecord.children.peekLast();
var startTime = WebInspector.TimelineModel.startTimeInSeconds(record);
var endTime = WebInspector.TimelineModel.endTimeInSeconds(record);
if (!lastRecord || lastRecord.type !== record.type)
@@ -2470,9 +2470,6 @@
return null;
if (lastRecord.parent.coalesced)
return lastRecord.parent;
-
-if (lastRecord.parent !== this._rootRecord)
-return null;
return this._replaceWithCoalescedRecord(lastRecord);
},
@@ -3139,7 +3136,7 @@
if (typeof this._detailsNode === "undefined") {
this._detailsNode = this._getRecordDetails();
-if (this._detailsNode) {
+if (this._detailsNode && !this.coalesced) {
this._detailsNode.insertBefore(document.createTextNode("("), this._detailsNode.firstChild);
this._detailsNode.appendChild(document.createTextNode(")"));
}
@@ -3373,7 +3370,7 @@
".timeline-category-" + category.name + " .timeline-tree-icon"
return selector + " { background-image: -webkit-linear-gradient(" +
-category.fillColorStop0 + ", " + category.fillColorStop1 + " 25%, " + category.fillColorStop1 + " 75%, " + category.borderColor + ");" +
+category.fillColorStop0 + ", " + category.fillColorStop1 + " 25%, " + category.fillColorStop1 + " 25%, " + category.fillColorStop1 + ");" +
" border-color: " + category.borderColor +
"}";
}
@@ -3833,13 +3830,19 @@
labelContainer.addStyleClass("status-bar-item");
var label = document.createElement("label");
-var checkElement = document.createElement("input");
+var checkBorder = label.createChild("div", "timeline-category-checkbox");
+var checkElement = checkBorder.createChild("div", "timeline-category-checkbox-check timeline-category-checkbox-checked");
checkElement.type = "checkbox";
-checkElement.className = "timeline-category-checkbox";
checkElement.checked = true;
-checkElement.addEventListener("click", onCheckboxClicked, false);
-label.appendChild(checkElement);
+checkElement.addEventListener("click", listener, false);
+function listener(event)
+{
+checkElement.checked = !checkElement.checked;
+checkElement.enableStyleClass("timeline-category-checkbox-checked", checkElement.checked);
+onCheckboxClicked(event);
+}
+
var typeElement = document.createElement("span");
typeElement.className = "type";
typeElement.textContent = category.title;
@@ -4335,18 +4338,22 @@
_revealRecord: function(recordToReveal)
{
-this._recordToHighlight = recordToReveal;
-var treeUpdated = false;
for (var parent = recordToReveal.parent; parent !== this._rootRecord(); parent = parent.parent) {
-treeUpdated = treeUpdated || parent.collapsed;
+if (!parent.collapsed)
+continue;
+this._presentationModel.invalidateFilteredRecords();
parent.collapsed = false;
}
-if (treeUpdated)
-this._invalidateAndScheduleRefresh(true, true);
-
var recordsInWindow = this._presentationModel.filteredRecords();
var index = recordsInWindow.indexOf(recordToReveal);
+this._recordToHighlight = recordToReveal;
+var oldScrollTop = this._containerElement.scrollTop;
this._containerElement.scrollTop = index * WebInspector.TimelinePanel.rowHeight;
+
+
+
+if (this._containerElement.scrollTop === oldScrollTop)
+this._refresh();
},
_refreshRecords: function()
@@ -4386,9 +4393,10 @@
this._itemsGraphsElement.removeChild(this._expandElements);
this._expandElements.removeChildren();
-this._clearRecordHighlight();
var highlightedRecord = this._recordToHighlight;
delete this._recordToHighlight;
+var highlightedListRowElement;
+var highlightedGraphRowElement;
for (var i = 0; i < endIndex; ++i) {
var record = recordsInWindow[i];
@@ -4412,8 +4420,8 @@
}
if (highlightedRecord === record) {
-this._highlightedListRowElement = listRowElement;
-this._highlightedGraphRowElement = graphRowElement;
+highlightedListRowElement = listRowElement;
+highlightedGraphRowElement = graphRowElement;
}
listRowElement.row.update(record, isEven, visibleTop);
@@ -4441,24 +4449,14 @@
this._adjustScrollPosition((recordsInWindow.length + this._headerLineCount) * rowHeight);
this._updateSearchHighlight(false);
-if (this._highlightedListRowElement) {
-this._highlightedListRowElement.addStyleClass("highlighted-timeline-record");
-this._highlightedGraphRowElement.addStyleClass("highlighted-timeline-record");
+if (highlightedListRowElement) {
+highlightedListRowElement.addStyleClass("highlighted-timeline-record");
+highlightedGraphRowElement.addStyleClass("highlighted-timeline-record");
}
return recordsInWindow.length;
},
-_clearRecordHighlight: function()
-{
-if (!this._highlightedListRowElement)
-return;
-this._highlightedListRowElement.removeStyleClass("highlighted-timeline-record");
-delete this._highlightedListRowElement;
-this._highlightedGraphRowElement.removeStyleClass("highlighted-timeline-record");
-delete this._highlightedGraphRowElement;
-},
-
_refreshMainThreadBars: function()
{
const barOffset = 3;
@@ -4983,14 +4981,9 @@
WebInspector.TimelineExpandableElement = function(container)
{
-this._element = document.createElement("div");
-this._element.className = "timeline-expandable";
-
-var leftBorder = document.createElement("div");
-leftBorder.className = "timeline-expandable-left";
-this._element.appendChild(leftBorder);
-
-container.appendChild(this._element);
+this._element = container.createChild("div", "timeline-expandable");
+this._element.createChild("div", "timeline-expandable-left");
+this._element.createChild("div", "timeline-expandable-arrow");
}
WebInspector.TimelineExpandableElement.prototype = {
« no previous file with comments | « chrome_linux/resources/inspector/ScriptsPanel.js ('k') | chrome_linux/resources/inspector/auditsPanel.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698