chore: fix typos

src/ts/main.ts

@@ -48,7 +48,7 @@ function PerfCascade(waterfallDocsData: WaterfallDocs, chartOptions: Partial<Cha
 
   let doc = createWaterfallSvg(paging.getSelectedPage(), options);
 
-  // page update behaviour
+  // page update behavior
   paging.onPageUpdate((_pageIndex, pageDoc) => {
     const el = doc.parentElement as HTMLElement;
     const newDoc = createWaterfallSvg(pageDoc, options);
@@ -85,7 +85,7 @@ export function fromHar(harData: Har, options: ChartOptions = {}): SVGSVGElement
   return PerfCascade(data, options);
 }
 
-// aditional imported members that get exported via UMD
+// additional imported members that get exported via UMD
 export {
   ChartOptions,
 };

src/ts/transformers/har-heuristics.ts

@@ -57,7 +57,7 @@ function hasCompressionIssue(entry: Entry, requestType: RequestType) {
   return (!hasHeader(headers, "Content-Encoding") && isCompressible(entry, requestType));
 }
 
-/** Checks if the ressource uses https */
+/** Checks if the resource uses https */
 function isSecure(entry: Entry) {
   return entry.request.url.indexOf("https://") === 0;
 }

src/ts/transformers/har-tabs.ts

@@ -87,15 +87,15 @@ function makeGeneralTab(generalData: SafeKvTuple[], indicators: WaterfallEntryIn
     .map((i) => [i.title, i.description] as SafeKvTuple);
 
   if (errors.length > 0) {
-    content += `<h2 class="no-boder">${pluralize("Error", errors.length)}</h2>
+    content += `<h2 class="no-border">${pluralize("Error", errors.length)}</h2>
     <dl>${makeDefinitionList(errors)}</dl>`;
   }
   if (warnings.length > 0) {
-    content += `<h2 class="no-boder">${pluralize("Warning", warnings.length)}</h2>
+    content += `<h2 class="no-border">${pluralize("Warning", warnings.length)}</h2>
     <dl>${makeDefinitionList(warnings)}</dl>`;
   }
   if (info.length > 0) {
-    content += `<h2 class="no-boder">Info</h2>
+    content += `<h2 class="no-border">Info</h2>
     <dl>${makeDefinitionList(info)}</dl>`;
   }
 
@@ -113,9 +113,9 @@ function makeRequestTab(request: SafeKvTuple[], requestHeaders: SafeKvTuple[]):
   return makeWaterfallEntryTab("Request", content);
 }
 
-function makeResponseTab(respose: SafeKvTuple[], responseHeaders: SafeKvTuple[]): WaterfallEntryTab {
+function makeResponseTab(response: SafeKvTuple[], responseHeaders: SafeKvTuple[]): WaterfallEntryTab {
   const content = `<dl>
-      ${makeDefinitionList(respose)}
+      ${makeDefinitionList(response)}
     </dl>
     <h2>All Response Headers</h2>
     <dl>

src/ts/transformers/har.ts

@@ -14,6 +14,7 @@ import {
   UserTiming,
   WaterfallData,
   WaterfallDocs,
+  WaterfallEntry,
   WaterfallEntryIndicator,
   WaterfallEntryTiming,
   WaterfallResponseDetails,
@@ -45,14 +46,14 @@ export function transformDoc(harData: Har | Log, options: HarTransformerOptions)
 }
 
 /**
- * Converts an HAR `Entry` into PerfCascads `WaterfallEntry`
+ * Converts an HAR `Entry` into PerfCascade's `WaterfallEntry`
  *
  * @param  {Entry} entry
  * @param  {number} index - resource entry index
  * @param  {number} startRelative - entry start time relative to the document in ms
  * @param  {boolean} isTLS
  */
-function toWaterFallEntry(entry: Entry, index: number, startRelative: number, isTLS: boolean) {
+function toWaterFallEntry(entry: Entry, index: number, startRelative: number, isTLS: boolean): WaterfallEntry {
   startRelative = Math.round(startRelative);
   const endRelative = Math.round(toInt(entry._all_end) || (startRelative + entry.time));
   const requestType = mimeToRequestType(entry.response.content.mimeType);
@@ -67,7 +68,7 @@ function toWaterFallEntry(entry: Entry, index: number, startRelative: number, is
   );
 }
 
-/** retuns the page or a mock page object */
+/** Returns the page or a mock page object */
 const getPages = (data: Log) => {
   if (data.pages && data.pages.length > 0) {
     return data.pages;
@@ -177,7 +178,7 @@ const getMarks = (pageTimings: PageTiming, currPage: Page, options: ChartOptions
     return marks.sort(sortFn);
   }
 
-  return getUserTimimngs(currPage, options)
+  return getUserTimings(currPage, options)
     .concat(marks)
     .sort(sortFn);
 };
@@ -187,7 +188,7 @@ const getMarks = (pageTimings: PageTiming, currPage: Page, options: ChartOptions
  * @param {Page} currPage - active page
  * @param {ChartOptions} options - HAR options
  */
-const getUserTimimngs = (currPage: Page, options: ChartOptions) => {
+const getUserTimings = (currPage: Page, options: ChartOptions) => {
   const baseFilter = options.showUserTimingEndMarker ?
     (k: string) => k.indexOf("_userTime.") === 0 :
     (k: string) => k.indexOf("_userTime.") === 0 && k.indexOf("_userTime.endTimer-") !== 0;
@@ -233,7 +234,7 @@ const getUserTimimngs = (currPage: Page, options: ChartOptions) => {
 };
 
 /**
- * Create `WaterfallEntry`s to represent the subtimings of a request
+ * Create `WaterfallEntry`s to represent the sub-timings of a request
  * ("blocked", "dns", "connect", "send", "wait", "receive")
  * @param  {number} startRelative - Number of milliseconds since page load started (`page.startedDateTime`)
  * @param  {Entry} harEntry

src/ts/typing/waterfall.ts

@@ -13,7 +13,7 @@ export interface UserTiming {
   startTime: number;
 }
 
-/** Type for a time-marker, e.g. the fireing of an event */
+/** Type for a time-marker, e.g. the firing of an event */
 export interface Mark extends UserTiming {
   /** custom data to store x position */
   x?: number;
@@ -36,15 +36,15 @@ export interface WaterfallEntry {
   tabs: WaterfallEntryTab[];
 }
 
-export type TabRenderer = (datailsHeight: number) => string;
+export type TabRenderer = (detailsHeight: number) => string;
 
 /** Represents a single tab of a `WaterfallEntry` */
 export interface WaterfallEntryTab {
   /** Tab title to show in tab-menu */
   title: string;
   /** stringified tab HTML */
   content?: string;
-  /** lazy eveluation to create stringified tab HTML */
+  /** lazy evaluation to create stringified tab HTML */
   renderContent?: TabRenderer;
   /** Add an additional CSS class-name to the tab */
   tabClass?: string;
@@ -62,7 +62,7 @@ export interface WaterfallEntryIndicator {
   title: string;
   /** long description e.g. for details overlay view */
   description: string;
-  /** catrgorizes the indicator */
+  /** categorizes the indicator */
   type: IndicatorType;
   /** where to show the indicator, defaults to `"icon"` */
   displayType: IndicatorDisplayType;

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

@@ -5,7 +5,7 @@ import { WaterfallEntry } from "../../typing/waterfall";
 /**
  * Creates the HTML body for the overlay
  *
- * _All tabable elements are set to `tabindex="-1"` to avoid tabing issues_
+ * _All tab-able elements are set to `tabindex="-1"` to avoid tabbing issues_
  * @param requestID ID
  * @param detailsHeight
  * @param entry

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

@@ -1,5 +1,5 @@
 /**
- * Creation of sub-components used in a ressource request row
+ * Creation of sub-components used in a resource request row
  */
 
 import { getParentByClassName } from "../../helpers/dom";