From bf8fb9ca85ea24abdb6136a0fab0977bf36b9040 Mon Sep 17 00:00:00 2001
From: Jan Scheffler <janscheffler@chromium.org>
Date: Fri, 27 Sep 2019 13:10:53 +0000
Subject: [PATCH] [devtools] Add relative coverage to timeline

This cl changes the coverage graph in the timeline
to show the coverage relative to the currently loaded
size instead of the total size at the end of the
timeline.

Screenshot: https://imgur.com/a/rm8TmDQ

Bug: chromium:1004203
Change-Id: Ie405c1be365aea8f0847f431a85e6d5feccc814e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1824105
Reviewed-by: Yang Guo <yangguo@chromium.org>
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Jan Scheffler <janscheffler@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#700689}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: 3a7f438e9ed78b555a3742987a96ebd48211bd69
---
 front_end/timeline/TimelineEventOverview.js | 56 ++++++++++++++-------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/front_end/timeline/TimelineEventOverview.js b/front_end/timeline/TimelineEventOverview.js
index e9a5be5bf6..f24d822e6c 100644
--- a/front_end/timeline/TimelineEventOverview.js
+++ b/front_end/timeline/TimelineEventOverview.js
@@ -740,12 +740,21 @@ Timeline.TimelineEventOverviewCoverage = class extends Timeline.TimelineEventOve
 
     let total = 0;
     let total_used = 0;
+    /** @type {!Map<!Coverage.CoverageInfo>} */
     const usedByTimestamp = new Map();
+    /** @type {!Map<!Coverage.CoverageInfo>} */
+    const totalByTimestamp = new Map();
     for (const urlInfo of this._coverageModel.entries()) {
       for (const info of urlInfo.entries()) {
         total += info.size();
         for (const [stamp, used] of info.usedByTimestamp()) {
           total_used += used;
+
+          if (!totalByTimestamp.has(stamp))
+            totalByTimestamp.set(stamp, new Set());
+
+          totalByTimestamp.get(stamp).add(info);
+
           if (!usedByTimestamp.has(stamp))
             usedByTimestamp.set(stamp, used);
           else
@@ -753,6 +762,26 @@ Timeline.TimelineEventOverviewCoverage = class extends Timeline.TimelineEventOve
         }
       }
     }
+
+    /** @type {!Set<!Coverage.CoverageInfo>} */
+    const seen = new Set();
+    /** @type {!Map<number, number>} */
+    const coverageByTimestamp = new Map();
+    let sumTotal = 0, sumUsed = 0;
+
+    const sortedByTimestamp = Array.from(totalByTimestamp.entries()).sort((a, b) => a[0] - b[0]);
+    for (const [stamp, infos] of sortedByTimestamp) {
+      for (const info of infos.values()) {
+        if (seen.has(info))
+          continue;
+
+        seen.add(info);
+        sumTotal += info.size();
+      }
+      sumUsed += usedByTimestamp.get(stamp);
+      coverageByTimestamp.set(stamp, sumUsed / sumTotal);
+    }
+
     const percentUsed = total ? Math.round(100 * total_used / total) : 0;
     const lowerOffset = 3 * ratio;
 
@@ -764,48 +793,41 @@ Timeline.TimelineEventOverviewCoverage = class extends Timeline.TimelineEventOve
     const width = this.width();
     const height = this.height() - lowerOffset;
     const xFactor = width / (maxTime - minTime);
-    const yFactor = (height - lineWidth) / Math.max(total, 1);
+    const yFactor = height - lineWidth;
 
-
-    let y = 0;
+    let yOffset = 0;
     const ctx = this.context();
     const heightBeyondView = height + lowerOffset + lineWidth;
     ctx.translate(0.5, 0.5);
     ctx.beginPath();
     ctx.moveTo(-lineWidth, heightBeyondView);
 
-    ctx.lineTo(-lineWidth, height - y);
+    ctx.lineTo(-lineWidth, height - yOffset);
 
-    const entries = Array.from(usedByTimestamp.entries()).sort((a, b) => a[0] - b[0]);
-    let cummulative_used = 0;
-    for (const [stamp, used] of entries) {
+    for (const [stamp, coverage] of coverageByTimestamp) {
       if (stamp > maxTime)
         break;
       const x = (stamp - minTime) * xFactor;
-      cummulative_used += used;
-      y = cummulative_used * yFactor;
-      ctx.lineTo(x, height - y);
+      yOffset = coverage * yFactor;
+      ctx.lineTo(x, height - yOffset);
     }
 
-
-    ctx.lineTo(width + lineWidth, height - y);
+    ctx.lineTo(width + lineWidth, height - yOffset);
     ctx.lineTo(width + lineWidth, heightBeyondView);
     ctx.closePath();
-
     ctx.fillStyle = 'hsla(220, 90%, 70%, 0.2)';
     ctx.fill();
     ctx.lineWidth = lineWidth;
     ctx.strokeStyle = 'hsl(220, 90%, 70%)';
     ctx.stroke();
 
-    cummulative_used = 0;
-    for (const [stamp, used] of entries) {
+    for (const [stamp, coverage] of coverageByTimestamp) {
       if (stamp > maxTime)
         break;
-      cummulative_used += used;
       ctx.beginPath();
       const x = (stamp - minTime) * xFactor;
-      ctx.arc(x, height - cummulative_used * yFactor, 2 * lineWidth, 0, 2 * Math.PI, false);
+      const y = height - coverage * yFactor;
+      ctx.arc(x, y, 2 * lineWidth, 0, 2 * Math.PI, false);
       ctx.closePath();
       ctx.stroke();
       ctx.fill();