Commit 12ebbf1b authored by Alexei Filippov's avatar Alexei Filippov Committed by Commit Bot

DevTools: Fix flamechart group layout issues

There were small visual misaligment issues that has been fixed.

BUG=837760

Change-Id: I7724ec5165140344b966cf7133799eb1bad1f808
Reviewed-on: https://chromium-review.googlesource.com/1033588Reviewed-by: default avatarDmitry Gozman <dgozman@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554594}
parent 5caa3e14
......@@ -702,7 +702,7 @@ PerfUI.FlameChart = class extends UI.VBox {
this._forEachGroup((offset, index, group, isFirst, groupHeight) => {
if (index === this._selectedGroup) {
context.fillStyle = this._selectedGroupBackroundColor;
context.fillRect(0, offset - 2, width, groupHeight - 1);
context.fillRect(0, offset, width, groupHeight - group.style.padding);
}
});
context.restore();
......@@ -890,7 +890,7 @@ PerfUI.FlameChart = class extends UI.VBox {
while (nextGroup < groups.length && groups[nextGroup].style.nestingLevel > group.style.nestingLevel)
nextGroup++;
const endLevel = nextGroup < groups.length ? groups[nextGroup].startLevel : this._dataProvider.maxStackDepth();
this._drawCollapsedOverviewForGroup(group, offset + 1, endLevel);
this._drawCollapsedOverviewForGroup(group, offset, endLevel);
});
context.save();
......@@ -931,10 +931,12 @@ PerfUI.FlameChart = class extends UI.VBox {
this._forEachGroup((offset, index, group, isFirst, groupHeight) => {
if (index === this._selectedGroup) {
const lineWidth = 2;
const bracketLength = 10;
context.fillStyle = this._selectedGroupBorderColor;
context.fillRect(0, offset - 2, 2, groupHeight - 1);
context.fillRect(0, offset - 2, 10, 2);
context.fillRect(0, offset + groupHeight - 5, 10, 2);
context.fillRect(0, offset - lineWidth, lineWidth, groupHeight - group.style.padding + 2 * lineWidth);
context.fillRect(0, offset - lineWidth, bracketLength, lineWidth);
context.fillRect(0, offset + groupHeight - group.style.padding, bracketLength, lineWidth);
}
});
......@@ -991,7 +993,7 @@ PerfUI.FlameChart = class extends UI.VBox {
const parentGroupVisible = groupStack.peekLast().visible;
const thisGroupVisible = parentGroupVisible && (!this._isGroupCollapsible(i) || group.expanded);
groupStack.push({nestingLevel: group.style.nestingLevel, visible: thisGroupVisible});
const nextOffset = i === groups.length - 1 ? groupOffsets[i + 1] + group.style.padding - 2 : groupOffsets[i + 1];
const nextOffset = i === groups.length - 1 ? groupOffsets[i + 1] + group.style.padding : groupOffsets[i + 1];
if (!parentGroupVisible || nextOffset < top)
continue;
callback(groupTop, i, group, firstGroup, nextOffset - groupTop);
......@@ -1066,7 +1068,7 @@ PerfUI.FlameChart = class extends UI.VBox {
lastColor = segments[i].data;
context.fillStyle = lastColor;
}
context.rect(segment.begin, y, segment.end - segment.begin, barHeight - 1);
context.rect(segment.begin, y, segment.end - segment.begin, barHeight);
}
context.fill();
......@@ -1239,7 +1241,7 @@ PerfUI.FlameChart = class extends UI.VBox {
this._groupOffsets = new Uint32Array(groups.length + 1);
let groupIndex = -1;
let currentOffset = this._rulerEnabled ? PerfUI.FlameChart.HeaderHeight : 2;
let currentOffset = this._rulerEnabled ? PerfUI.FlameChart.HeaderHeight + 2 : 2;
let visible = true;
/** @type !Array<{nestingLevel: number, visible: boolean}> */
const groupStack = [{nestingLevel: -1, visible: true}];
......@@ -1388,7 +1390,7 @@ PerfUI.FlameChart = class extends UI.VBox {
}
_updateHeight() {
const height = this._levelToOffset(this._dataProvider.maxStackDepth());
const height = this._levelToOffset(this._dataProvider.maxStackDepth()) + 2;
this._chartViewport.setContentHeight(height);
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment