DevTools: Slim down timeline overview height

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 139 matching lines @@
    */
   constructor(model) {
     super('network', Common.UIString('NET'), model);
   }
 
   /**
    * @override
    */
   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
      * @return {number}
      */
     function categoryBand(category) {
       var categories = Timeline.TimelineUIUtils.NetworkCategory;
       switch (category) {
         case categories.HTML:
           return 0;
         case categories.Script:
           return 1;
         case categories.Style:
           return 2;
         case categories.Media:
           return 3;
         default:
           return 4;
       }
     }
 
     /**
      * @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);
     }
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEventOverview {
   /**
    * @param {!TimelineModel.TimelineModel} model
@@ skipping 545 matching lines @@
       counters[group] = this._quantDuration;
       this._callback(counters);
       interval -= this._quantDuration;
     }
     this._counters = [];
     this._counters[group] = interval;
     this._lastTime = time;
     this._remainder = this._quantDuration - interval;
   }
 };