show http2-push arrow inline and not as icon

Author: Michael Mrowetz

src/ts/helpers/icons.ts

@@ -237,15 +237,3 @@ export function audio(x: number, y: number, title: string, scale: number = 1): S
   }
   return wrapSvgIcon(x, y, title, "icon-audio", scale, audioIconLazy.cloneNode(false) as SVGPathElement);
 }
-
-let pushIconLazy: SVGPathElement;
-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
-  -.697.25-.29.65-.29h5.423L7.397 5.257q-.293-.278-.293-.693 0-.416.293-.694l.577-.576Q8.267 3 8.668
-  3q.408 0 .7.293l5.015 5.014q.285.27.285.693z`;
-    pushIconLazy = svgLib.newPath(d);
-  }
-  return wrapSvgIcon(x, y, title, "icon-push", scale, pushIconLazy.cloneNode(false) as SVGPathElement);
-}

src/ts/transformers/har-heuristics.ts

@@ -91,6 +91,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
   if (isPush(entry)) {
     output.push({
       description: "Response was pushed by the server using HTTP2 push.",
+      displayType: "inline",
       icon: "push",
       id: "push",
       title: "Response was pushed by the server",
@@ -101,6 +102,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
   if (docIsTLS && !isSecure(entry)) {
     output.push({
       description: "Insecure request, it should use HTTPS.",
+      displayType: "icon",
       id: "noTls",
       title: "Insecure Connection",
       type: "error",
@@ -110,6 +112,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
   if (hasCacheIssue(entry)) {
     output.push({
       description: "The response is not allow to be cached on the client. Consider setting 'Cache-Control' headers.",
+      displayType: "icon",
       id: "noCache",
       title: "Response not cached",
       type: "error",
@@ -119,6 +122,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
   if (hasCompressionIssue(entry, requestType)) {
     output.push({
       description: "The response is not compressed. Consider enabling HTTP compression on your server.",
+      displayType: "icon",
       id: "noGzip",
       title: "no gzip",
       type: "error",
@@ -130,6 +134,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
     entry.response.status !== 204) {
     output.push({
       description: "Response doesn't contain a 'Content-Type' header.",
+      displayType: "icon",
       id: "warning",
       title: "No MIME Type defined",
       type: "warning",

src/ts/typing/waterfall.ts

@@ -4,6 +4,8 @@ export type RequestType = "other" | "image" | "video" | "audio" | "font" | "svg"
 
 export type IndicatorType = "error" | "warning" | "info";
 
+export type IndicatorDisplayType = "icon" | "inline";
+
 /** Typing for a event, e.g. UserTiming API performance mark from WPT */
 export interface UserTiming {
   duration?: number;
@@ -62,6 +64,8 @@ export interface WaterfallEntryIndicator {
   description: string;
   /** catrgorizes the indicator */
   type: IndicatorType;
+  /** where to show the indicator, defaults to `"icon"` */
+  displayType: IndicatorDisplayType;
 }
 
 /** Time segment of an `WaterfallEntry` */

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

@@ -19,7 +19,7 @@ export function makeIcon(type: string, title: string): Icon {
  * @returns {Icon[]}
  */
 export function getIndicatorIcons(entry: WaterfallEntry): Icon[] {
-  const indicators = entry.responseDetails.indicators;
+  const indicators = entry.responseDetails.indicators.filter((i) => i.displayType === "icon");
   if (indicators.length === 0) {
     return [];
   }

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

@@ -3,7 +3,6 @@
  */
 
 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";
@@ -107,35 +106,22 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number
 }
 
 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);
+  const y = rectData.y + rectData.height / 1.5;
+  const x = `${misc.roundNumber(rectData.x / rectData.unit)}%`;
+  const el = svg.newG("http2-inidicator-holder");
+  el.appendChild(svg.newTextEl("→", {
+      transform: `translate(-5)`,
+      x,
+      y,
+    }, {
+      "fillOpacity": "0.6",
+      "text-anchor": "end",
+    }));
+  el.appendChild(svg.newTitle("http2 Push"));
 
   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

src/ts/waterfall/svg-chart.ts

@@ -129,7 +129,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti
 
   if (options.showIndicatorIcons) {
     const iconsPerBlock = entriesToShow.map((entry: WaterfallEntry) =>
-      entry.responseDetails.indicators.length > 0 ? 1 : 0);
+      entry.responseDetails.indicators.filter((i) => i.displayType === "icon").length > 0 ? 1 : 0);
     maxIcons += Math.max.apply(null, iconsPerBlock);
   }