DevTools: Slim down timeline overview height

third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
index 5e23e23fd5f0719e440dd0f6effa4571be6471f4..b966565d114334f2003dc0acb24b5f5910f50ec8 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineEventOverview.js
@@ -157,26 +157,24 @@ Timeline.TimelineEventOverviewNetwork = class extends Timeline.TimelineEventOver
    */
   update() {
     super.update();
-    var height = this.height();
-    var numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other) + 1;
-    var bandHeight = Math.floor(height / numBands);
-    var devicePixelRatio = window.devicePixelRatio;
-    var timeOffset = this._model.minimumRecordTime();
-    var timeSpan = this._model.maximumRecordTime() - timeOffset;
-    var canvasWidth = this.width();
-    var scale = canvasWidth / timeSpan;
-    var ctx = this.context();
-    var requests = this._model.networkRequests();
-    /** @type {!Map<string,!{waiting:!Path2D,transfer:!Path2D}>} */
-    var paths = new Map();
+    const height = this.height();
+    const numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other) + 1;
+    const bandHeight = height - numBands;
+    const timeOffset = this._model.minimumRecordTime();
+    const timeSpan = this._model.maximumRecordTime() - timeOffset;
+    const canvasWidth = this.width();
+    const scale = canvasWidth / timeSpan;
+    const ctx = this.context();
+    const requests = this._model.networkRequests();
+    const paths = new Array(numBands).fill(0).map(() => ({style: '', path: new Path2D()}));
     requests.forEach(drawRequest);

[caseq, 2017/01/20 23:07:02]

let's make changes to path more explicit?

-    for (var path of paths) {
-      ctx.fillStyle = path[0];
-      ctx.globalAlpha = 0.3;
-      ctx.fill(path[1]['waiting']);
-      ctx.globalAlpha = 1;
-      ctx.fill(path[1]['transfer']);
-    }
+    ctx.globalAlpha = 0.7;
+    paths.reverse().forEach(path => {
+      ctx.fillStyle = 'white';
+      ctx.fill(path.path);
+      ctx.fillStyle = path.style;
+      ctx.fill(path.path);
+    });
 
     /**
      * @param {!Timeline.TimelineUIUtils.NetworkCategory} category
@@ -202,24 +200,15 @@ Timeline.TimelineEventOverviewNetwork = class extends Timeline.TimelineEventOver
      * @param {!TimelineModel.TimelineModel.NetworkRequest} request
      */
     function drawRequest(request) {
-      var tickWidth = 2 * devicePixelRatio;
-      var category = Timeline.TimelineUIUtils.networkRequestCategory(request);
-      var style = Timeline.TimelineUIUtils.networkCategoryColor(category);
-      var band = categoryBand(category);
-      var y = band * bandHeight;
-      var path = paths.get(style);
-      if (!path) {
-        path = {waiting: new Path2D(), transfer: new Path2D()};
-        paths.set(style, path);
-      }
-      var s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0);
-      var e = Math.min(Math.ceil((request.endTime - timeOffset) * scale), canvasWidth);
-      path['waiting'].rect(s, y, e - s, bandHeight - 1);
-      path['transfer'].rect(e - tickWidth / 2, y, tickWidth, bandHeight - 1);
-      if (!request.responseTime)
-        return;
-      var r = Math.ceil((request.responseTime - timeOffset) * scale);
-      path['transfer'].rect(r - tickWidth / 2, y, tickWidth, bandHeight - 1);
+      const category = Timeline.TimelineUIUtils.networkRequestCategory(request);
+      const style = Timeline.TimelineUIUtils.networkCategoryColor(category);

[caseq, 2017/01/20 23:07:02]

inline?

+      const band = categoryBand(category);
+      const path = paths[band];
+      const y = (numBands - band - 1);
+      const s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0);
+      const e = Math.min(Math.ceil((request.endTime - timeOffset) * scale), canvasWidth);
+      path.style = style;

[caseq, 2017/01/20 23:07:02]

why do we change band path's style each time?

+      path.path.rect(s, y, e - s, bandHeight - 1);
     }
   }
 };