Update reference builds to r197396.

chrome_linux64/resources/inspector/TimelinePanel.js

Index: chrome_linux64/resources/inspector/TimelinePanel.js
===================================================================
--- chrome_linux64/resources/inspector/TimelinePanel.js	(revision 197568)
+++ chrome_linux64/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 = {