DevTools: make Timeline flame chart nice again.

Review URL: https://codereview.chromium.org/1830083003

Cr-Commit-Position: refs/heads/master@{#383209}

2 files changed, 15 insertions, 27 deletions

diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
index aa80554..e9e4e1b 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
@@ -291,7 +291,7 @@ WebInspector.TimelineFlameChartDataProvider = function(model, frameModel, irMode
         color: WebInspector.themeSupport.patchColor("#222", WebInspector.ThemeSupport.ColorUsage.Foreground),
         font: this._font,
         backgroundColor: WebInspector.themeSupport.patchColor("white", WebInspector.ThemeSupport.ColorUsage.Background),
-        nestingLevel: 0,
+        nestingLevel: 0
     };
 
     this._headerLevel2 = {
@@ -388,17 +388,16 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
         this._appendInteractionRecords();
 
         var threads = this._model.virtualThreads();
+        this._appendThreadTimelineData(WebInspector.UIString("Main"), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
         var compositorThreads = threads.filter(thread => thread.name.startsWith("CompositorTileWorker"));
         var otherThreads = threads.filter(thread => !thread.name.startsWith("CompositorTileWorker"));
         if (compositorThreads.length) {
-            this._appendHeader(WebInspector.UIString("Rasterizer Threads"), this._headerLevel1);
+            this._appendHeader(WebInspector.UIString("Raster"), this._headerLevel1);
             for (var i = 0; i < compositorThreads.length; ++i)
                 this._appendSyncEvents(compositorThreads[i].events, WebInspector.UIString("Rasterizer Thread %d", i), this._headerLevel2);
         }
         this._appendGPUEvents();
 
-        this._appendThreadTimelineData(WebInspector.UIString("Main Thread"), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
-
         otherThreads.forEach(thread => this._appendThreadTimelineData(thread.name, thread.events, thread.asyncEventsByGroup));
 
         /**
@@ -654,7 +653,7 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
         if (type === WebInspector.TimelineFlameChartEntryType.Frame)
             return "white";
         if (type === WebInspector.TimelineFlameChartEntryType.InteractionRecord)
-            return WebInspector.TimelineUIUtils.interactionPhaseColor(/** @type {!WebInspector.TimelineIRModel.Phases} */ (this._entryData[entryIndex]));
+            return "transparent";
         return "";
     },
 
@@ -681,10 +680,8 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
             barWidth -= 2 * hPadding;
             barY += vPadding;
             barHeight -= 2 * vPadding + 1;
-            context.fillStyle = frame.idle ? "white" : "#eee";
+            context.fillStyle = frame.idle ? "white" : (frame.hasWarnings() ? "#fad1d1" : "#d7f0d1");
             context.fillRect(barX, barY, barWidth, barHeight);
-            if (frame.hasWarnings())
-                paintWarningDecoration(barX, barWidth);
             var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
             var textWidth = context.measureText(frameDurationText).width;
             if (barWidth >= textWidth) {
@@ -694,6 +691,15 @@ WebInspector.TimelineFlameChartDataProvider.prototype = {
             return true;
         }
 
+        if (type === WebInspector.TimelineFlameChartEntryType.InteractionRecord) {
+            var color = WebInspector.TimelineUIUtils.interactionPhaseColor(/** @type {!WebInspector.TimelineIRModel.Phases} */ (this._entryData[entryIndex]));
+            context.fillStyle = color;
+            context.fillRect(barX, barY, barWidth - 1, 2);
+            context.fillRect(barX, barY - 3, 2, 3);
+            context.fillRect(barX + barWidth - 3, barY - 3, 2, 3);
+            return false;
+        }
+
         if (type === WebInspector.TimelineFlameChartEntryType.Event) {
             var event = /** @type {!WebInspector.TracingModel.Event} */ (this._entryData[entryIndex]);
             if (event && event.warning)
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
index da1c28a..5cdacf6 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FlameChart.js
@@ -1354,26 +1354,12 @@ WebInspector.FlameChart.prototype = {
         if (groups.length && lastGroupOffset < top + height)
             context.fillRect(0, lastGroupOffset + 2, width, top + height - lastGroupOffset)
 
-        context.strokeStyle = WebInspector.themeSupport.patchColor("#ddd", colorUsage.Background);
-        context.beginPath();
-        forEachGroup((offset, index, group, isFirst) => {
-            if (isFirst)
-                return;
-            if (group.style.padding > 1)
-                hLine(offset - 1.5);
-            if (group.style.padding > 2)
-                hLine(offset - group.style.padding + 1.5);
-        });
-        hLine(lastGroupOffset + 1.5);
-        context.stroke();
-
         context.strokeStyle = WebInspector.themeSupport.patchColor("#bbb", colorUsage.Background);
         context.beginPath();
         forEachGroup((offset, index, group, isFirst) => {
             if (isFirst || group.style.padding < 4)
                 return;
-            hLine(offset - group.style.padding + 0.5);
-            hLine(offset - 0.5);
+            hLine(offset - 2.5);
         });
         hLine(lastGroupOffset + 0.5);
         context.stroke();
@@ -1422,10 +1408,6 @@ WebInspector.FlameChart.prototype = {
 
         context.strokeStyle = WebInspector.themeSupport.patchColor("#ddd", colorUsage.Background);
         context.beginPath();
-        forEachGroup((offset, index, group) => {
-            if (group.expanded)
-                hLine(offset + barHeight - 0.5);
-        });
         context.stroke();
 
         context.restore();