Merge pull request #282 from radum/http2-chunks

Support chunks in HTTP2 Fixes #237

Author: micmro

Diff for: package.json

@@ -56,6 +56,6 @@
     "whatwg-fetch": "^3.6.2"
   },
   "dependencies": {
-    "@types/har-format": "^1.2.6"
+    "@types/har-format": "^1.2.8"
   }
 }

Diff for: src/css-raw/perf-cascade.css

@@ -132,6 +132,7 @@
 .block-send {fill: #b0bec5;}
 .block-wait {fill: #1ec659;}
 .block-receive {fill: #1eaaf1;}
+.block-receive-chunk {fill: #a1c3fa;}
 .block-undefined {fill: #0f0;}
 
 /* Info overlay SVG - wrapper */

Diff for: src/ts/transformers/har.ts

@@ -242,6 +242,7 @@ const getUserTimings = (currPage: Page, options: ChartOptions) => {
  */
 const buildDetailTimingBlocks = (startRelative: number, harEntry: Entry): WaterfallEntryTiming[] => {
   const t = harEntry.timings;
+  const chunks = harEntry._chunks || [];
   const types: TimingType[] = ["blocked", "dns", "connect", "send", "wait", "receive"];
   return types.reduce((collect: WaterfallEntryTiming[], key: TimingType) => {
     const time = getTimePair(key, harEntry, collect, startRelative);
@@ -261,6 +262,10 @@ const buildDetailTimingBlocks = (startRelative: number, harEntry: Entry): Waterf
         .concat([createWaterfallEntryTiming(key, Math.round(connectStart), Math.round(time.end))]);
     }
 
+    if (key === "receive" && chunks && chunks.length > 0) {
+      return collect.concat([createWaterfallEntryTiming(key, Math.round(time.start), Math.round(time.end), chunks)]);
+    }
+
     return collect.concat([createWaterfallEntryTiming(key, Math.round(time.start), Math.round(time.end))]);
   }, []);
 };

Diff for: src/ts/transformers/helpers.ts

@@ -106,14 +106,16 @@ export function createWaterfallEntry(url: string,
 /** helper to create a `WaterfallEntryTiming` */
 export function createWaterfallEntryTiming(type: TimingType,
                                            start: number,
-                                           end: number): WaterfallEntryTiming {
+                                           end: number,
+                                           chunks?: { bytes: number, ts: number }[]): WaterfallEntryTiming {
   const total = (typeof start !== "number" || typeof end !== "number") ? NaN : (end - start);
   const typeClean = sanitizeAlphaNumeric(type) as TimingType;
   return {
     end,
     start,
     total,
     type : typeClean,
+    chunks,
   };
 }
 

Diff for: src/ts/typing/waterfall.ts

@@ -77,6 +77,7 @@ export interface WaterfallEntryTiming {
   start: number;
   /** end time in ms - relative to initial document request */
   end: number;
+  chunks?: Array<object>;
 }
 
 export interface WaterfallResponseDetails {

Diff for: src/ts/waterfall/row/svg-row-subcomponents.ts

@@ -57,6 +57,22 @@ function makeBlock(rectData: RectData, className: string) {
   return holder;
 }
 
+function makeChunkBlock(chunkData, rectData: RectData, className: string) {
+  const holder = svg.newG("");
+  const blockHeight = rectData.height - 1;
+  // TODO: Once we have a way to pass the available bandwidth we can calculate the length for each chunk.
+  // const blockWidth = chunkData.ts - (chunkData.bytes / (5000000 / 8.0));
+  const rectX = misc.roundNumber(chunkData.ts / rectData.unit) + "%";
+  const rect = svg.newRect({
+    height: blockHeight,
+    width: "1px", // misc.roundNumber(blockWidth / rectData.unit) + "%",
+    x: rectX,
+    y: rectData.y,
+  }, className);
+  holder.appendChild(rect);
+  return holder;
+}
+
 /**
  * Converts a segment to RectData
  * @param  {WaterfallEntryTiming} segment
@@ -142,6 +158,14 @@ export function createRect(rectData: RectData, entry: WaterfallEntry): SVGElemen
         const childRectData = segmentToRectData(segment, rectData);
         const childRect = makeBlock(childRectData, `segment ${childRectData.cssClass}`);
         firstX = Math.min(firstX, childRectData.x);
+
+        if (segment.type === 'receive' && segment.chunks && segment.chunks.length > 0) {
+          segment.chunks.forEach((chunk) => {
+            const chunkRect = makeChunkBlock(chunk, childRectData, `${childRectData.cssClass}-chunk`);
+            childRect.appendChild(chunkRect);
+          });
+        }
+
         rectHolder.appendChild(childRect);
       }
     });