DevTools: Update network overview with two level bars.

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();
-    const height = this.height();
-    const numBands = categoryBand(Timeline.TimelineUIUtils.NetworkCategory.Other) + 1;
-    const devicePixelRatio = window.devicePixelRatio;
-    const bandHeight = height - (numBands + 1) * devicePixelRatio;
-    const timeOffset = this._model.minimumRecordTime();
-    const timeSpan = this._model.maximumRecordTime() - timeOffset;
-    const canvasWidth = this.width();
-    const scale = canvasWidth / timeSpan;
-    const ctx = this.context();
-    const paths = [];
-    for (const categoryName in Timeline.TimelineUIUtils.NetworkCategory) {
-      const category = Timeline.TimelineUIUtils.NetworkCategory[categoryName];
-      paths[categoryBand(category)] = {
-        style: Timeline.TimelineUIUtils.networkCategoryColor(category),
-        path: new Path2D()
-      };
+    var height = this.height();

[caseq, 2017/01/27 00:55:19]

inline below.

+    var devicePixelRatio = window.devicePixelRatio;

[caseq, 2017/01/27 00:55:19]

remove.

+    var bandHeight = height / 2;
+    var timeOffset = this._model.minimumRecordTime();
+    var timeSpan = this._model.maximumRecordTime() - timeOffset;
+    var canvasWidth = this.width();
+    var scale = canvasWidth / timeSpan;
+    var ctx = this.context();

[caseq, 2017/01/27 00:55:19]

move down to actual usage.

+    var highPath = new Path2D();
+    var lowPath = new Path2D();
+    var priorities = Protocol.Network.ResourcePriority;
+    var highPrioritySet = new Set([priorities.VeryHigh, priorities.High, priorities.Medium])
+    for (var request of this._model.networkRequests()) {
+      var path = highPrioritySet.has(request.priority) ? highPath : lowPath;
+      var s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0);
+      var e = Math.min(Math.ceil((request.endTime - timeOffset) * scale + 1), canvasWidth);
+      path.rect(s, 0, e - s, bandHeight - 1);
     }
-    for (const request of this._model.networkRequests()) {
-      const category = Timeline.TimelineUIUtils.networkRequestCategory(request);
-      const band = categoryBand(category);
-      const y = (numBands - band - 1) * devicePixelRatio;
-      const s = Math.max(Math.floor((request.startTime - timeOffset) * scale), 0);
-      const e = Math.min(Math.ceil((request.endTime - timeOffset) * scale + 1), canvasWidth);
-      paths[band].path.rect(s, y, e - s, bandHeight);
-    }
-    for (const path of paths.reverse()) {
-      ctx.globalAlpha = 1;
-      ctx.fillStyle = path.style;
-      ctx.fill(path.path);
-      ctx.globalAlpha = 0.4;
-      ctx.fillStyle = 'white';
-      ctx.fill(path.path);
-    }
-
-    /**
-     * @param {!Timeline.TimelineUIUtils.NetworkCategory} category
-     * @return {number}
-     */
-    function categoryBand(category) {
-      const 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;
-      }
-    }
+    ctx.save();
+    ctx.fillStyle = 'hsl(214, 60%, 60%)';
+    ctx.fill(highPath);
+    ctx.translate(0, bandHeight);
+    ctx.fillStyle = 'hsl(214, 80%, 80%)';
+    ctx.fill(lowPath);
+    ctx.restore();
   }
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineEventOverviewCPUActivity = class extends Timeline.TimelineEventOverview {
   /**
    * @param {!TimelineModel.TimelineModel} model
    */
@@ skipping 544 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;
   }
 };