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: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554594}

third_party/blink/renderer/devtools/front_end/perf_ui/FlameChart.js

@@ -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);
   }