zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-13 01:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

[devtools] Add relative coverage to timeline

Browse Source 
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
This commit is contained in:
Jan Scheffler
2019-09-27 13:10:53 +00:00
committed by Commit Bot
parent b2bf933083
commit bf8fb9ca85
1 changed files with 39 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/timeline/TimelineEventOverview.js
+39 -17
View File
@@ -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();