#155 refactor to remove rawRessource

Author: Michael Mrowetz

src/ts/helpers/heuristics.ts

@@ -64,3 +64,14 @@ export function resourceUrlFormatter(url: string, maxLength: number): string {
 export function roundNumber(num: number, decimals: number = 2) {
   return Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals);
 }
+
+/**
+ *
+ * Checks if `status` code is `>= lowerBound` and `<= upperBound`
+ * @param  {number} entry
+ * @param  {number} lowerBound - inclusive lower bound
+ * @param  {number} upperBound - inclusive upper bound
+ */
+export function isInStatusCodeRange(status: number, lowerBound: number, upperBound: number) {
+  return status >= lowerBound && status <= upperBound;
+}

src/ts/helpers/misc.ts

@@ -125,10 +125,10 @@ const htmlCharMap = {
 const htmlChars = new RegExp(Object.keys(htmlCharMap).join("|"), "g");
 
 /**
- * Escapes unsafe characters is a string to render safely in HTML
+ * Escapes unsafe characters in a string to render safely in HTML
  * @param  {string} unsafe - string to be rendered in HTML
  */
-export function escapeHtml(unsafe: string | number | boolean = "") {
+export function escapeHtml(unsafe: string | number | boolean = ""): string {
   if (typeof unsafe !== "string") {
     if (typeof unsafe["toString"] === "function") {
       unsafe = unsafe.toString();

src/ts/helpers/parse.ts

@@ -3,7 +3,6 @@
  */
 
 import { hasHeader } from "../helpers/har";
-import { isInStatusCodeRange } from "../helpers/heuristics";
 import * as misc from "../helpers/misc";
 import { Entry } from "../typing/har";
 import { WaterfallEntryIndicator } from "../typing/waterfall";
@@ -44,7 +43,7 @@ function hasCacheIssue(entry: Entry) {
   if (entry.request.method.toLowerCase() !== "get") {
     return false;
   }
-  if (entry.response.status === 204 || !isInStatusCodeRange(entry, 200, 299)) {
+  if (entry.response.status === 204 || !misc.isInStatusCodeRange(entry.response.status, 200, 299)) {
     return false;
   }
 
@@ -126,7 +125,7 @@ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType:
   }
 
   if (!entry.response.content.mimeType &&
-    isInStatusCodeRange(entry, 200, 299) &&
+    misc.isInStatusCodeRange(entry.response.status, 200, 299) &&
     entry.response.status !== 204) {
     output.push({
       description: "Response doesn't contain a 'Content-Type' header.",

src/ts/transformers/har-heuristics.ts

@@ -1,17 +1,19 @@
-import { roundNumber } from "../helpers/misc";
+import { isInStatusCodeRange, roundNumber } from "../helpers/misc";
 import { toInt } from "../helpers/parse";
 import { Entry, Har, PageTimings } from "../typing/har";
 import {
+  Icon,
   Mark,
-  RequestType,
   TimingType,
   WaterfallData,
   WaterfallDocs,
   WaterfallEntry,
   WaterfallEntryIndicator,
   WaterfallEntryTab,
   WaterfallEntryTiming,
+  WaterfallResponseDetails,
 } from "../typing/waterfall";
+import { makeIcon } from "../waterfall/row/svg-indicators";
 import { collectIndicators, documentIsSecure } from "./har-heuristics";
 import { makeTabs } from "./har-tabs";
 import { mimeToRequestType } from "./helpers";
@@ -20,9 +22,7 @@ function createWaterfallEntry(url: string,
                               start: number,
                               end: number,
                               segments: WaterfallEntryTiming[] = [],
-                              rawResource: Entry,
-                              requestType: RequestType,
-                              indicators: WaterfallEntryIndicator[],
+                              responseDetails: WaterfallResponseDetails,
                               tabs: WaterfallEntryTab[]): WaterfallEntry {
   const total = (typeof start !== "number" || typeof end !== "number") ? undefined : (end - start);
   return {
@@ -31,9 +31,7 @@ function createWaterfallEntry(url: string,
     start,
     end,
     segments,
-    rawResource,
-    requestType,
-    indicators,
+    responseDetails,
     tabs,
   };
 }
@@ -77,13 +75,12 @@ function toWaterFallEntry(entry: Entry, index: number, startRelative: number, is
   const endRelative = toInt(entry._all_end) || (startRelative + entry.time);
   const requestType = mimeToRequestType(entry.response.content.mimeType);
   const indicators = collectIndicators(entry, isTLS, requestType);
+  const responseDetails = createResponseDetails(entry, indicators);
   return createWaterfallEntry(entry.request.url,
     startRelative,
     endRelative,
     buildDetailTimingBlocks(startRelative, entry),
-    entry,
-    requestType,
-    indicators,
+    responseDetails,
     makeTabs(entry, (index + 1), requestType, startRelative, endRelative, indicators),
   );
 }
@@ -199,3 +196,51 @@ function getTimePair(key: string, harEntry: Entry, collect: WaterfallEntryTiming
     "start": start,
   };
 }
+
+function createResponseDetails(entry: Entry, indicators: WaterfallEntryIndicator[]): WaterfallResponseDetails {
+  const requestType = mimeToRequestType(entry.response.content.mimeType);
+
+  return {
+    icon: getMimeTypeIcon(entry, requestType),
+    rowClass: getRowCssClasses(entry),
+    indicators,
+    requestType,
+    statusCode: entry.response.status,
+  };
+}
+
+/**
+ * Scan the request for errors or potential issues and highlight them
+ * @param  {Entry} entry
+ * @returns {Icon}
+ */
+function getMimeTypeIcon(entry: Entry, requestType): Icon {
+  const status = entry.response.status;
+  // highlight redirects
+  if (!!entry.response.redirectURL) {
+    const url = encodeURI(entry.response.redirectURL.split("?")[0] || "");
+    return makeIcon("err3xx", `${status} response status: Redirect to ${url}...`);
+  } else if (isInStatusCodeRange(status, 400, 499)) {
+    return makeIcon("err4xx", `${status} response status: ${entry.response.statusText}`);
+  } else if (isInStatusCodeRange(status, 500, 599)) {
+    return makeIcon("err5xx", `${status} response status: ${entry.response.statusText}`);
+  } else if (status === 204) {
+    return makeIcon("plain", "No content");
+  } else {
+    return makeIcon(requestType, requestType);
+  }
+}
+
+function getRowCssClasses(entry: Entry): string {
+  const classes = ["row-item"];
+  if (isInStatusCodeRange(entry.response.status, 500, 599)) {
+    classes.push("status5xx");
+  } else if (isInStatusCodeRange(entry.response.status, 400, 499)) {
+    classes.push("status4xx");
+  } else if (entry.response.status !== 304 &&
+    isInStatusCodeRange(entry.response.status, 300, 399)) {
+    // 304 == Not Modified, so not an issue
+    classes.push("status3xx");
+  }
+  return classes.join(" ");
+}

src/ts/transformers/har.ts

@@ -1,5 +1,3 @@
-import {Entry} from "./har";
-
 export type TimingType = "blocked" | "dns" | "connect" | "send" | "wait" | "receive" | "ssl";
 export type RequestType = "other" | "image" | "video" | "audio" | "font" | "svg" |  "html" |
   "plain" | "css" | "javascript" | "flash";
@@ -28,12 +26,8 @@ export interface WaterfallEntry {
   end: number;
   /** time segments (dns, tls/ssl, connect...) */
   segments: WaterfallEntryTiming[];
-  /** raw e.g. HAR entry */
-  rawResource: Entry;
-  /** media type category */
-  requestType: RequestType;
-  /** Warnings, Errors and Info indicators  */
-  indicators: WaterfallEntryIndicator[];
+  /** Resource-type icon  */
+  responseDetails: WaterfallResponseDetails;
   /** Tabs to render in the details-overlay view */
   tabs: WaterfallEntryTab[];
 }
@@ -79,6 +73,19 @@ export interface WaterfallEntryTiming {
   end: number;
 }
 
+export interface WaterfallResponseDetails {
+  /** HTTP response status code */
+  statusCode: number;
+  /** Response Type Icon (e.g. Mime type) */
+  icon: Icon;
+  /** Warnings, Errors and Info indicators  */
+  indicators: WaterfallEntryIndicator[];
+  /** CSS class to use for row */
+  rowClass?: string;
+  /** media type category */
+  requestType: RequestType;
+}
+
 export interface WaterfallData {
   title: string;
   durationMs: number;
@@ -92,3 +99,16 @@ export interface WaterfallData {
 export interface WaterfallDocs {
   pages: WaterfallData[];
 }
+
+/**
+ * Interface for `Icon` metadata
+ * (e.g. warning and response type icons)
+ */
+export interface Icon {
+  /** Icon types (as in `helpers/icons.ts`) */
+  type: string;
+  /** title for icon */
+  title: string;
+  /** width of icon in px */
+  width: number;
+}

src/ts/typing/waterfall.ts

@@ -31,7 +31,7 @@ export function createDetailsBody(requestID: number, detailsHeight: number, entr
 
   body.innerHTML = `
     <div class="wrapper">
-      <header class="type-${entry.requestType}">
+      <header class="type-${entry.responseDetails.requestType}">
         <h3><strong>#${requestID}</strong> <a href="${entry.url}">${entry.url}</a></h3>
         <nav class="tab-nav">
         <ul>

src/ts/waterfall/details-overlay/html-details-body.ts

@@ -46,7 +46,7 @@ function createHolder(y: number, detailsHeight: number) {
 }
 
 export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHeight: number): SVGGElement {
-  const requestID = overlay.entry.rawResource._number || overlay.index + 1;
+  const requestID = overlay.index + 1;
   let wrapper = svg.newG("outer-info-overlay-holder");
   let holder = createHolder(y, detailsHeight);
 

src/ts/waterfall/details-overlay/svg-details-overlay.ts

@@ -1,60 +1,33 @@
-/**
- * Creation of sub-components used in a resource request row
- */
-
-import { isInStatusCodeRange } from "../../helpers/heuristics";
-import { WaterfallEntry } from "../../typing/waterfall";
+import {
+  Icon,
+  WaterfallEntry,
+} from "../../typing/waterfall";
 
 /**
- * Interface for `Icon` metadata
+ * Convinience helper to create a new `Icon`
+ *
+ * _Width of icons is fixed_
  */
-export interface Icon {
-  type: string;
-  title: string;
-  width: number;
-}
-
-// helper to avoid typing out all key of the helper object
-function makeIcon(type: string, title: string): Icon {
+export function makeIcon(type: string, title: string): Icon {
   return { "type": type, "title": title, "width": 20 };
 }
 
-/**
- * Scan the request for errors or potential issues and highlight them
- * @param  {WaterfallEntry} entry
- * @returns {Icon}
- */
-export function getMimeTypeIcon(entry: WaterfallEntry): Icon {
-  const harEntry = entry.rawResource;
-  // highlight redirects
-  if (!!harEntry.response.redirectURL) {
-    const url = encodeURI(harEntry.response.redirectURL.split("?")[0] || "");
-    return makeIcon("err3xx", `${harEntry.response.status} response status: Redirect to ${url}...`);
-  } else if (isInStatusCodeRange(harEntry, 400, 499)) {
-    return makeIcon("err4xx", `${harEntry.response.status} response status: ${harEntry.response.statusText}`);
-  } else if (isInStatusCodeRange(harEntry, 500, 599)) {
-    return makeIcon("err5xx", `${harEntry.response.status} response status: ${harEntry.response.statusText}`);
-  } else if (harEntry.response.status === 204) {
-    return makeIcon("plain", "No content");
-  } else {
-    return makeIcon(entry.requestType, entry.requestType);
-  }
-}
 /**
  * Gets the Indicators in Icon format
  * @param  {WaterfallEntry} entry
  * @returns {Icon[]}
  */
 export function getIndicatorIcons(entry: WaterfallEntry): Icon[] {
-  if (entry.indicators.length === 0) {
+  const indicators = entry.responseDetails.indicators;
+  if (indicators.length === 0) {
     return [];
   }
 
   let combinedTitle = [];
   let icon = "";
-  const errors = entry.indicators.filter((i) => i.type === "error");
-  const warnings = entry.indicators.filter((i) => i.type === "warning");
-  const info = entry.indicators.filter((i) => i.type !== "error" && i.type !== "warning");
+  const errors = indicators.filter((i) => i.type === "error");
+  const warnings = indicators.filter((i) => i.type === "warning");
+  const info = indicators.filter((i) => i.type !== "error" && i.type !== "warning");
 
   if (errors.length > 0) {
     combinedTitle.push(`Error${errors.length > 1 ? "s" : ""}:\n${errors.map((e) => e.title).join("\n")}`);

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

@@ -1,12 +1,10 @@
-import { isInStatusCodeRange } from "../../helpers/heuristics";
 import * as icons from "../../helpers/icons";
 import * as misc from "../../helpers/misc";
 import * as svg from "../../helpers/svg";
 import { Context } from "../../typing/context";
-import {Entry} from "../../typing/har";
 import { RectData } from "../../typing/rect-data";
-import {WaterfallEntry} from "../../typing/waterfall";
-import * as indicators from "./svg-indicators";
+import { WaterfallEntry } from "../../typing/waterfall";
+import { getIndicatorIcons } from "./svg-indicators";
 import * as rowSubComponents from "./svg-row-subcomponents";
 
 // initial clip path
@@ -16,20 +14,6 @@ clipPathElProto.appendChild(svg.newRect({
   "width": "100%",
 }));
 
-function getRowCssClasses(harEntry: Entry): string {
-  const classes = ["row-item"];
-  if (isInStatusCodeRange(harEntry, 500, 599)) {
-    classes.push("status5xx");
-  } else if (isInStatusCodeRange(harEntry, 400, 499)) {
-    classes.push("status4xx");
-  } else if (harEntry.response.status !== 304 &&
-    isInStatusCodeRange(harEntry, 300, 399)) {
-    // 304 == Not Modified, so not an issue
-    classes.push("status3xx");
-  }
-  return classes.join(" ");
-}
-
 const ROW_LEFT_MARGIN = 3;
 
 // Create row for a single request
@@ -41,7 +25,7 @@ export function createRow(context: Context, index: number,
   const y = rectData.y;
   const rowHeight = rectData.height;
   const leftColumnWith = context.options.leftColumnWith;
-  let rowItem = svg.newG(getRowCssClasses(entry.rawResource));
+  let rowItem = svg.newG(entry.responseDetails.rowClass);
   let leftFixedHolder = svg.newSvg("left-fixed-holder", {
     "width": `${leftColumnWith}%`,
     "x": "0",
@@ -59,14 +43,14 @@ export function createRow(context: Context, index: number,
   let x = ROW_LEFT_MARGIN + maxIconsWidth;
 
   if (context.options.showMimeTypeIcon) {
-    const icon = indicators.getMimeTypeIcon(entry);
+    const icon = entry.responseDetails.icon;
     x -= icon.width;
     rowName.appendChild(icons[icon.type](x, y + 3, icon.title));
   }
 
   if (context.options.showIndicatorIcons) {
-    // Create and add warnings for potential issues
-    indicators.getIndicatorIcons(entry).forEach((icon: indicators.Icon) => {
+    // Create and add warnings for potentia;l issues
+    getIndicatorIcons(entry).forEach((icon) => {
       x -= icon.width;
       rowName.appendChild(icons[icon.type](x, y + 3, icon.title));
     });