commit 23428d44b7742e0e6cbc727a04d1eabbdd47499d
author Alexei Filippov <alph@chromium.org> Sat Apr 28 01:09:07 2018
committer Commit Bot <commit-bot@chromium.org> Sat Apr 28 01:09:07 2018
tree 9641fcd229412aed3b148eb427c4c6688a57e116
parent 35f97d680fbd4b87d88597ffa41509512e5914d5

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/1033588
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Commit-Queue: Alexei Filippov <alph@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#554594}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 12ebbf1bc21ecf9a08f256755b1a18bea65f6420

front_end/perf_ui/FlameChart.js

diff --git a/front_end/perf_ui/FlameChart.js b/front_end/perf_ui/FlameChart.js
index fd82ea5..e782d5a 100644
--- a/front_end/perf_ui/FlameChart.js
+++ b/front_end/perf_ui/FlameChart.js
@@ -702,7 +702,7 @@
     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 @@
       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 @@
 
     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 @@
       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 @@
         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 @@
     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 @@
   }
 
   _updateHeight() {
-    const height = this._levelToOffset(this._dataProvider.maxStackDepth());
+    const height = this._levelToOffset(this._dataProvider.maxStackDepth()) + 2;
     this._chartViewport.setContentHeight(height);
   }