#198 push icon inline rendering

Author: Michael Mrowetz

src/ts/helpers/icons.ts

@@ -3,7 +3,7 @@ import * as svgLib from "./svg";
  *  SVG Icons
  */
 
-const wrapSvgIcon = (x: number, y: number, title: string,
+const wrapSvgIcon = (x: string | number, y: number, title: string,
                      className: string, scale: number, svgEl: SVGElement): SVGElement => {
   const holder = svgLib.newSvg("", {
     x,
@@ -239,7 +239,7 @@ export function audio(x: number, y: number, title: string, scale: number = 1): S
 }
 
 let pushIconLazy: SVGPathElement;
-export function push(x: number, y: number, title: string, scale: number = 1): SVGElement {
+export function push(x: number | string, y: number, title: string, scale: number = 1): SVGElement {
   if (pushIconLazy === undefined) {
     const d = `M14.668 9q0 .416-.285.7L9.37 14.716Q9.067 15 8.667 15q-.393 0-.694-.285l-.577
   -.578q-.293-.292-.293-.7 0-.41.293-.7l2.256-2.258H4.23q-.4 0-.65-.29t-.25-.698v-.986q0-.408.25

src/ts/waterfall/row/svg-row-subcomponents.ts

@@ -3,11 +3,12 @@
  */
 
 import { getParentByClassName } from "../../helpers/dom";
+import { push } from "../../helpers/icons";
 import * as misc from "../../helpers/misc";
 import * as svg from "../../helpers/svg";
 import { timingTypeToCssClass } from "../../transformers/styling-converters";
 import { RectData } from "../../typing/rect-data";
-import { WaterfallEntryTiming } from "../../typing/waterfall";
+import { WaterfallEntry, WaterfallEntryTiming } from "../../typing/waterfall";
 import {
   onHoverInShowTooltip,
   onHoverOutShowTooltip,
@@ -105,14 +106,45 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number
   return txtEl;
 }
 
+function createPushIndicator(rectData: RectData): SVGElement {
+  const scale = 0.6;
+  const iconNaturalSize = 12; // default svg size (12px)
+  const y = rectData.y + ((rectData.height - 4  - (iconNaturalSize * scale))  / 2);
+  const percStart = (rectData.x + rectData.width) / rectData.unit;
+  const iconEl = push(`${misc.roundNumber(percStart)}%`, y, "Http2 Push", scale);
+
+  const el = svg.newG(`push-inline-wrap`, {
+    transform: `translate(-${rectData.height / 2})`,
+  }, {
+    fillOpacity: "0.5",
+  });
+  el.appendChild(iconEl);
+
+  return el;
+}
+
+// function createPushIndicator(rectData: RectData): SVGElement {
+//   const y = rectData.y + rectData.height / 1.5;
+//   const x = `${misc.roundNumber(rectData.x / rectData.unit)}%`;
+//   return svg.newTextEl("→", {
+//     transform: `translate(-5)`,
+//     x,
+//     y,
+//   }, {
+//     "fillOpacity": "0.5",
+//     "text-anchor": "end",
+//   });
+// }
+
 /**
  * Render the block and timings for a request
  * @param  {RectData}         rectData Basic dependencys and globals
- * @param  {WaterfallEntryTiming[]} segments Request and Timing Data
- * @param  {number} timeTotal  - total time of the request
- * @return {SVGElement}                Renerated SVG (rect or g element)
+ * @param  {WaterfallEntry}   entry Request Details, e.g. Request and Timing Data
+ * @return {SVGElement}       Renerated SVG (rect or g element)
  */
-export function createRect(rectData: RectData, segments: WaterfallEntryTiming[], timeTotal: number): SVGElement {
+export function createRect(rectData: RectData, entry: WaterfallEntry): SVGElement {
+  // entry.responseDetails.indicators;
+  const segments = entry.segments;
   const rect = makeBlock(rectData, `time-block ${rectData.cssClass}`);
   const rectHolder = svg.newG("rect-holder");
   let firstX = rectData.x;
@@ -129,7 +161,10 @@ export function createRect(rectData: RectData, segments: WaterfallEntryTiming[],
       }
     });
 
-    rectHolder.appendChild(createTimingLabel(rectData, timeTotal, firstX));
+    if (misc.find(entry.responseDetails.indicators, (indicator) => indicator.id === "push")) {
+      rectHolder.appendChild(createPushIndicator(rectData));
+    }
+    rectHolder.appendChild(createTimingLabel(rectData, entry.total, firstX));
   }
 
   return rectHolder;

src/ts/waterfall/row/svg-row.ts

@@ -47,7 +47,7 @@ export function createRow(context: Context, index: number,
     x: `${leftColumnWidth}%`,
   });
 
-  const rect = rowSubComponents.createRect(rectData, entry.segments, entry.total);
+  const rect = rowSubComponents.createRect(rectData, entry);
   const rowName = rowSubComponents.createNameRowBg(y, rowHeight);
   const rowBar = rowSubComponents.createRowBg(y, rowHeight);
   const bgStripe = rowSubComponents.createBgStripe(y, rowHeight, (index % 2 === 0));