diff --git a/src/ts/file-reader.ts b/src/ts/file-reader.ts index 19b2874b..fa4fb5b1 100644 --- a/src/ts/file-reader.ts +++ b/src/ts/file-reader.ts @@ -16,7 +16,7 @@ export function readFile(file: File, function parseJson(rawData) { try { - let harData = JSON.parse(rawData); + const harData = JSON.parse(rawData); callback(null, harData.log); } catch (e) { callback(e); @@ -24,7 +24,7 @@ export function readFile(file: File, } /** start reading the file */ - let extension = fileName.match(/\.[0-9a-z]+$/i)[0]; + const extension = fileName.match(/\.[0-9a-z]+$/i)[0]; if ([".zhar", ".zip"].indexOf(extension) !== -1) { /** zhar */ zip.createReader(new zip.BlobReader(file), (zipReader) => { @@ -38,7 +38,7 @@ export function readFile(file: File, }); } else { - let reader = new FileReader(); + const reader = new FileReader(); /** try to parse the file once uploaded to browser */ reader.addEventListener("load", (e: any) => { diff --git a/src/ts/helpers/dom.ts b/src/ts/helpers/dom.ts index 8786993e..ea496729 100644 --- a/src/ts/helpers/dom.ts +++ b/src/ts/helpers/dom.ts @@ -44,7 +44,7 @@ export function getParentByClassName(base: Element, className: string) { return base.parentElement; } return getParentByClassName(base.parentElement, className); -}; +} /** * Removes all child DOM nodes from `el` diff --git a/src/ts/helpers/icons.ts b/src/ts/helpers/icons.ts index f59891a1..c8fb7268 100644 --- a/src/ts/helpers/icons.ts +++ b/src/ts/helpers/icons.ts @@ -123,7 +123,7 @@ export function svg(x: number, y: number, title: string, scale: number = 1): SVG return image(x, y, title, scale); } - export function html(x: number, y: number, title: string, scale: number = 1): SVGElement { +export function html(x: number, y: number, title: string, scale: number = 1): SVGElement { return toSvg(x, y, title, "icon-html", scale, `(arr: T[], item: T): boolean { * @param arr Array to search * @param predicate Function that returns true for a match */ -export function findIndex(arr: T[], predicate: {(el: T, index: number): Boolean}) { +export function findIndex(arr: T[], predicate: (el: T, index: number) => boolean) { let i = 0; if (!arr || arr.length < 1) { return undefined; @@ -52,7 +52,7 @@ export function findIndex(arr: T[], predicate: {(el: T, index: number): Boole * @param arr Array to search * @param predicate Function that returns true for a match */ -export function find(arr: T[], predicate: {(el: T, index: number): Boolean}) { +export function find(arr: T[], predicate: (el: T, index: number) => boolean) { const index = findIndex(arr, predicate); if (index === undefined) { return undefined; @@ -71,7 +71,7 @@ export function resourceUrlFormatter(url: string, maxLength: number): string { return url.replace(/https?:\/\//, ""); } - let matches = parseUrl(url); + const matches = parseUrl(url); if ((matches.authority + matches.path).length < maxLength) { return matches.authority + matches.path; @@ -80,7 +80,7 @@ export function resourceUrlFormatter(url: string, maxLength: number): string { const maxAuthLength = Math.floor(maxLength / 2) - 3; const maxPathLength = Math.floor(maxLength / 2) - 5; // maybe we could fine tune these numbers - let p = matches.path.split("/"); + const p = matches.path.split("/"); if (matches.authority.length > maxAuthLength) { return matches.authority.substr(0, maxAuthLength) + "..." + p[p.length - 1].substr(-maxPathLength); } diff --git a/src/ts/helpers/parse.ts b/src/ts/helpers/parse.ts index 28ff8ddb..261a494d 100644 --- a/src/ts/helpers/parse.ts +++ b/src/ts/helpers/parse.ts @@ -176,13 +176,13 @@ export function toInt(input: string | number): number { /** Validates the `ChartOptions` attributes types */ export function validateOptions(options: ChartRenderOption): ChartRenderOption { - let validateInt = (name: keyof ChartRenderOption) => { + const validateInt = (name: keyof ChartRenderOption) => { options[name] = toInt(options[name] as any); if (options[name] === undefined) { throw TypeError(`option "${name}" needs to be a number`); } }; - let ensureBoolean = (name: keyof ChartRenderOption) => { + const ensureBoolean = (name: keyof ChartRenderOption) => { options[name] = !!options[name]; }; diff --git a/src/ts/helpers/svg.ts b/src/ts/helpers/svg.ts index eae0d0f1..8ae05a6e 100644 --- a/src/ts/helpers/svg.ts +++ b/src/ts/helpers/svg.ts @@ -3,13 +3,13 @@ */ import { addClass } from "./dom"; -export type StringToStringOrNumberMap = {[key: string]: string|number}; +export interface StringToStringOrNumberMap { [key: string]: string|number; } export type DomAttributeMap = StringToStringOrNumberMap; export type CssStyleMap = StringToStringOrNumberMap; function entries(obj: StringToStringOrNumberMap): Array<[string, string]> { const entries: Array<[string, string]> = []; - for (let k of Object.keys(obj)) { + for (const k of Object.keys(obj)) { entries.push([k, String((obj[k]))]); } return entries; @@ -100,7 +100,7 @@ export function newTextEl(text: string, attributes: DomAttributeMap = {}, } /** temp SVG element for size measurements */ -let getTestSVGEl = (() => { +const getTestSVGEl = (() => { /** Reference to Temp SVG element for size measurements */ let svgTestEl: SVGSVGElement; let removeSvgTestElTimeout; @@ -145,7 +145,7 @@ let getTestSVGEl = (() => { * @returns number */ export function getNodeTextWidth(textNode: SVGTextElement, skipClone: boolean = false): number { - let tmp = getTestSVGEl(); + const tmp = getTestSVGEl(); let tmpTextNode: SVGTextElement; let shadow; if (skipClone) { diff --git a/src/ts/legend/legend.ts b/src/ts/legend/legend.ts index 8d551f65..221cf18e 100644 --- a/src/ts/legend/legend.ts +++ b/src/ts/legend/legend.ts @@ -2,7 +2,7 @@ * Creates the html for diagrams legend */ export function makeLegend(): HTMLUListElement { - let ulNode = document.createElement("ul"); + const ulNode = document.createElement("ul"); ulNode.className = "resource-legend"; ulNode.innerHTML = ` diff --git a/src/ts/main.ts b/src/ts/main.ts index a45d394f..de6f2b86 100755 --- a/src/ts/main.ts +++ b/src/ts/main.ts @@ -38,14 +38,14 @@ function PerfCascade(waterfallDocsData: WaterfallDocs, chartOptions: Partial { - let el = doc.parentElement; - let newDoc = createWaterfallSvg(pageDoc, options); + const el = doc.parentElement; + const newDoc = createWaterfallSvg(pageDoc, options); el.replaceChild(newDoc, doc); doc = newDoc; }); @@ -81,5 +81,5 @@ export function fromHar(harData: Har, options: ChartOptions = {}): SVGSVGElement // aditional imported members that get exported via UMD export { - ChartOptions + ChartOptions, }; diff --git a/src/ts/paging/paging.ts b/src/ts/paging/paging.ts index db969a30..1815669e 100644 --- a/src/ts/paging/paging.ts +++ b/src/ts/paging/paging.ts @@ -51,7 +51,7 @@ export default class Paging { } this.selectedPageIndex = pageIndex; - let selectedPage = this.doc.pages[this.selectedPageIndex]; + const selectedPage = this.doc.pages[this.selectedPageIndex]; this.onPageUpdateCbs.forEach((cb) => { cb(this.selectedPageIndex, selectedPage); }); @@ -82,13 +82,13 @@ export default class Paging { // remove all existing options, like placeholders removeChildren(selectbox); this.doc.pages.forEach((p, i) => { - let option = new Option(p.title, i.toString(), false, i === this.selectedPageIndex); + const option = new Option(p.title, i.toString(), false, i === this.selectedPageIndex); selectbox.add(option); }); selectbox.style.display = "block"; selectbox.addEventListener("change", (evt) => { - let val = parseInt((evt.target as HTMLOptionElement).value, 10); + const val = parseInt((evt.target as HTMLOptionElement).value, 10); self.setSelectedPageIndex(val); }); } diff --git a/src/ts/transformers/extract-details-keys.ts b/src/ts/transformers/extract-details-keys.ts index 569fcd67..31c5fd40 100644 --- a/src/ts/transformers/extract-details-keys.ts +++ b/src/ts/transformers/extract-details-keys.ts @@ -98,7 +98,7 @@ function parseResponseDetails(entry: Entry): KvTuple[] { }; const contentLength = getHeader(headers, "Content-Length"); - let contentSize = undefined; + let contentSize; if (content.size !== -1 && contentLength !== content.size.toString()) { contentSize = content.size; } diff --git a/src/ts/transformers/har-heuristics.ts b/src/ts/transformers/har-heuristics.ts index cb73d6f4..66784269 100644 --- a/src/ts/transformers/har-heuristics.ts +++ b/src/ts/transformers/har-heuristics.ts @@ -89,7 +89,7 @@ export function documentIsSecure(data: Entry[]) { /** Scans `entry` for noteworthy issues or infos and highlights them */ export function collectIndicators(entry: Entry, docIsTLS: boolean, requestType: RequestType) { // const harEntry = entry; - let output: WaterfallEntryIndicator[] = []; + const output: WaterfallEntryIndicator[] = []; if (isPush(entry)) { output.push({ diff --git a/src/ts/transformers/har-tabs.ts b/src/ts/transformers/har-tabs.ts index 2899c82d..d0911ef2 100644 --- a/src/ts/transformers/har-tabs.ts +++ b/src/ts/transformers/har-tabs.ts @@ -25,7 +25,7 @@ import { makeDefinitionList } from "./helpers"; export function makeTabs(entry: Entry, requestID: number, requestType: RequestType, startRelative: number, endRelative: number, indicators: WaterfallEntryIndicator[]): WaterfallEntryTab[] { - let tabs = [] as WaterfallEntryTab[]; + const tabs = [] as WaterfallEntryTab[]; const tabsData = getKeys(entry, requestID, startRelative, endRelative); tabs.push(makeGeneralTab(tabsData.general, indicators)); @@ -68,14 +68,14 @@ function makeGeneralTab(generalData: KvTuple[], indicators: WaterfallEntryIndica let content = ""; // Make indicator sections - let errors = indicators + const errors = indicators .filter((i) => i.type === "error") .map((i) => [i.title, i.description] as KvTuple); - let warnings = indicators + const warnings = indicators .filter((i) => i.type === "warning") .map((i) => [i.title, i.description] as KvTuple); // all others - let info = indicators + const info = indicators .filter((i) => i.type !== "error" && i.type !== "warning") .map((i) => [i.title, i.description] as KvTuple); diff --git a/src/ts/transformers/har.ts b/src/ts/transformers/har.ts index 35e0824f..a4a5f24a 100644 --- a/src/ts/transformers/har.ts +++ b/src/ts/transformers/har.ts @@ -36,7 +36,7 @@ import { */ export function transformDoc(harData: Har | Log, options: HarTransformerOptions): WaterfallDocs { // make sure it's the *.log base node - let data = (harData["log"] !== undefined ? harData["log"] : harData) as Log; + const data = (harData["log"] !== undefined ? harData["log"] : harData) as Log; const pages = getPages(data); return { @@ -96,7 +96,7 @@ export function transformPage(harData: Har | Log, pageIndex: number = 0, options: HarTransformerOptions): WaterfallData { // make sure it's the *.log base node - let data = (harData["log"] !== undefined ? harData["log"] : harData) as Log; + const data = (harData["log"] !== undefined ? harData["log"] : harData) as Log; const pages = getPages(data); const currPage = pages[pageIndex]; @@ -172,13 +172,13 @@ const getMarks = (pageTimings: PageTiming, currPage: Page, options: HarTransform * @param {HarTransformerOptions} options - HAR-parser-specific options */ const getUserTimimngs = (currPage: Page, options: HarTransformerOptions) => { - let baseFilter = options.showUserTimingEndMarker ? + const baseFilter = options.showUserTimingEndMarker ? (k: string) => k.indexOf("_userTime.") === 0 : (k: string) => k.indexOf("_userTime.") === 0 && k.indexOf("_userTime.endTimer-") !== 0; let filterFn = baseFilter; if (Array.isArray(options.showUserTiming)) { - let findTimings = options.showUserTiming; + const findTimings = options.showUserTiming; filterFn = (k: string) => ( baseFilter(k) && findTimings.indexOf(k.replace(/^_userTime\./, "")) >= 0 @@ -224,9 +224,9 @@ const getUserTimimngs = (currPage: Page, options: HarTransformerOptions) => { * @returns Array */ const buildDetailTimingBlocks = (startRelative: number, harEntry: Entry): WaterfallEntryTiming[] => { - let t = harEntry.timings; + const t = harEntry.timings; return ["blocked", "dns", "connect", "send", "wait", "receive"].reduce((collect: WaterfallEntryTiming[], - key: TimingType) => { + key: TimingType) => { const time = getTimePair(key, harEntry, collect, startRelative); diff --git a/src/ts/transformers/helpers.ts b/src/ts/transformers/helpers.ts index 8c66ac5a..d5b05f96 100644 --- a/src/ts/transformers/helpers.ts +++ b/src/ts/transformers/helpers.ts @@ -21,11 +21,11 @@ import { makeIcon } from "../waterfall/row/svg-indicators"; * @returns {string} stringified HTML definition list */ export function makeDefinitionList(dlKeyValues: KvTuple[], addClass: boolean = false) { - let makeClass = (key: string) => { + const makeClass = (key: string) => { if (!addClass) { return ""; } - let className = toCssClass(key) || "no-colour"; + const className = toCssClass(key) || "no-colour"; return `class="${className}"`; }; return dlKeyValues @@ -44,7 +44,7 @@ export function mimeToRequestType(mimeType: string): RequestType { if (mimeType === undefined) { return "other"; } - let types = mimeType.split("/"); + const types = mimeType.split("/"); let part2 = types[1]; // take care of text/css; charset=UTF-8 etc if (part2 !== undefined) { @@ -169,7 +169,7 @@ export function makeMimeTypeIcon(status: number, * @param nestedKvPairs - nested `KvTuple`s (possibly sub-nested) */ export const flattenKvTuple = (nestedKvPairs: Array<(KvTuple | KvTuple[])>): KvTuple[] => { - let returnKv: KvTuple[] = []; + const returnKv: KvTuple[] = []; nestedKvPairs.forEach((maybeKv) => { if (maybeKv === undefined || maybeKv.length === 0) { return; diff --git a/src/ts/typing/index.ts b/src/ts/typing/index.ts index 8ee3c57b..88642da5 100644 --- a/src/ts/typing/index.ts +++ b/src/ts/typing/index.ts @@ -1,5 +1,5 @@ -export * from "./open-overlay" -export * from "./options" -export * from "./paging" -export * from "./rect-data" -export * from "./waterfall" +export * from "./open-overlay"; +export * from "./options"; +export * from "./paging"; +export * from "./rect-data"; +export * from "./waterfall"; diff --git a/src/ts/waterfall/details-overlay/html-details-body.ts b/src/ts/waterfall/details-overlay/html-details-body.ts index 3ce982ed..15ee945c 100644 --- a/src/ts/waterfall/details-overlay/html-details-body.ts +++ b/src/ts/waterfall/details-overlay/html-details-body.ts @@ -11,8 +11,8 @@ import { WaterfallEntry } from "../../typing/waterfall"; */ export function createDetailsBody(requestID: number, detailsHeight: number, entry: WaterfallEntry) { - let html = document.createElement("html") as HTMLHtmlElement; - let body = document.createElement("body"); + const html = document.createElement("html") as HTMLHtmlElement; + const body = document.createElement("body"); body.setAttribute("xmlns", "http://www.w3.org/1999/xhtml"); html.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns", "http://www.w3.org/2000/xmlns/"); diff --git a/src/ts/waterfall/details-overlay/overlay-manager.ts b/src/ts/waterfall/details-overlay/overlay-manager.ts index f6ddfbf7..9e712ae7 100644 --- a/src/ts/waterfall/details-overlay/overlay-manager.ts +++ b/src/ts/waterfall/details-overlay/overlay-manager.ts @@ -134,17 +134,17 @@ class OverlayManager { private renderOverlays(detailsHeight: number, rowItems: SVGAElement[]) { /** shared variable to keep track of heigth */ let currY = 0; - let updateHeight = (overlay, y, currHeight) => { + const updateHeight = (overlay, y, currHeight) => { currY += currHeight; overlay.actualY = y; overlay.height = currHeight; }; - let addNewOverlay = (overlayHolder: SVGGElement, overlay: OpenOverlay) => { - let y = overlay.defaultY + currY; - let infoOverlay = createRowInfoOverlay(overlay, y, detailsHeight); + const addNewOverlay = (overlayHolder: SVGGElement, overlay: OpenOverlay) => { + const y = overlay.defaultY + currY; + const infoOverlay = createRowInfoOverlay(overlay, y, detailsHeight); // if overlay has a preview image show it - let previewImg = infoOverlay.querySelector("img.preview") as HTMLImageElement; + const previewImg = infoOverlay.querySelector("img.preview") as HTMLImageElement; if (previewImg && !previewImg.src) { previewImg.setAttribute("src", previewImg.attributes.getNamedItem("data-src").value); } @@ -155,7 +155,7 @@ class OverlayManager { overlayHolder.appendChild(infoOverlay); updateHeight(overlay, y, infoOverlay.getBoundingClientRect().height); }; - let updateRow = (rowItem: SVGAElement, index: number) => { + const updateRow = (rowItem: SVGAElement, index: number) => { const overlay = find(this.openOverlays, (o) => o.index === index); const overlayEl = rowItem.nextElementSibling.firstElementChild as SVGGElement; this.realignRow(rowItem, currY); @@ -188,9 +188,9 @@ class OverlayManager { }; rowItems.forEach(updateRow); } -}; +} export { - OverlayManager + OverlayManager, }; export default OverlayManager; diff --git a/src/ts/waterfall/details-overlay/pub-sub.ts b/src/ts/waterfall/details-overlay/pub-sub.ts index e4e9bc18..c3bde8e3 100644 --- a/src/ts/waterfall/details-overlay/pub-sub.ts +++ b/src/ts/waterfall/details-overlay/pub-sub.ts @@ -25,9 +25,9 @@ class PubSub { public publishToOverlayChanges(change: OverlayChangeEvent) { this.subscribers.forEach((fn) => fn(change)); } -}; +} export { - PubSub -} + PubSub, +}; export default PubSub; diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts index 27fd83b1..b9ab8841 100644 --- a/src/ts/waterfall/details-overlay/svg-details-overlay.ts +++ b/src/ts/waterfall/details-overlay/svg-details-overlay.ts @@ -4,7 +4,7 @@ import { OpenOverlay } from "../../typing/open-overlay"; import { createDetailsBody } from "./html-details-body"; function createCloseButtonSvg(y: number): SVGGElement { - let closeBtn = svg.newA("info-overlay-close-btn"); + const closeBtn = svg.newA("info-overlay-close-btn"); closeBtn.appendChild(svg.newRect({ "height": 23, @@ -26,8 +26,8 @@ function createCloseButtonSvg(y: number): SVGGElement { } function createHolder(y: number, detailsHeight: number) { - let holder = svg.newG("info-overlay-holder"); - let bg = svg.newRect({ + const holder = svg.newG("info-overlay-holder"); + const bg = svg.newRect({ "height": detailsHeight, "rx": 2, "ry": 2, @@ -42,23 +42,23 @@ function createHolder(y: number, detailsHeight: number) { export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHeight: number): SVGGElement { const requestID = overlay.index + 1; - let holder = createHolder(y, detailsHeight); + const holder = createHolder(y, detailsHeight); - let foreignObject = svg.newForeignObject({ + const foreignObject = svg.newForeignObject({ "height": detailsHeight, "width": "100%", "x": "0", "y": y, }); - let closeBtn = createCloseButtonSvg(y); + const closeBtn = createCloseButtonSvg(y); closeBtn.addEventListener("click", () => overlay.onClose(overlay.index)); - let body = createDetailsBody(requestID, detailsHeight, overlay.entry); - let buttons = body.getElementsByClassName("tab-button") as NodeListOf; - let tabs = body.getElementsByClassName("tab") as NodeListOf; + const body = createDetailsBody(requestID, detailsHeight, overlay.entry); + const buttons = body.getElementsByClassName("tab-button") as NodeListOf; + const tabs = body.getElementsByClassName("tab") as NodeListOf; - let setTabStatus = (tabIndex: number) => { + const setTabStatus = (tabIndex: number) => { overlay.openTabIndex = tabIndex; forEachNodeList(tabs, (tab: HTMLDivElement, j) => { tab.style.display = (tabIndex === j) ? "block" : "none"; diff --git a/src/ts/waterfall/row/svg-indicators.ts b/src/ts/waterfall/row/svg-indicators.ts index 47a21f42..29b5243e 100644 --- a/src/ts/waterfall/row/svg-indicators.ts +++ b/src/ts/waterfall/row/svg-indicators.ts @@ -24,7 +24,7 @@ export function getIndicatorIcons(entry: WaterfallEntry): Icon[] { return []; } - let combinedTitle = []; + const combinedTitle = []; let icon = ""; const errors = indicators.filter((i) => i.type === "error"); const warnings = indicators.filter((i) => i.type === "warning"); diff --git a/src/ts/waterfall/row/svg-row-subcomponents.ts b/src/ts/waterfall/row/svg-row-subcomponents.ts index 24eca948..9935ee1e 100644 --- a/src/ts/waterfall/row/svg-row-subcomponents.ts +++ b/src/ts/waterfall/row/svg-row-subcomponents.ts @@ -15,7 +15,7 @@ import { WaterfallEntryTiming } from "../../typing/waterfall"; */ function makeBlock(rectData: RectData, className: string) { const blockHeight = rectData.height - 1; - let rect = svg.newRect({ + const rect = svg.newRect({ "height": blockHeight, "width": misc.roundNumber(rectData.width / rectData.unit) + "%", "x": misc.roundNumber(rectData.x / rectData.unit) + "%", @@ -69,7 +69,7 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number let txtEl = svg.newTextEl(totalLabel, {x: `${misc.roundNumber(percStart)}%`, y}); // (pessimistic) estimation of text with to avoid performance penalty of `getBBox` - let roughTxtWidth = totalLabel.length * 8; + const roughTxtWidth = totalLabel.length * 8; if (percStart + (roughTxtWidth / minWidth * 100) > 100) { percStart = firstX / rectData.unit - spacingPerc; @@ -87,8 +87,8 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number * @return {SVGElement} Renerated SVG (rect or g element) */ export function createRect(rectData: RectData, segments: WaterfallEntryTiming[], timeTotal: number): SVGElement { - let rect = makeBlock(rectData, `time-block ${rectData.cssClass}`); - let rectHolder = svg.newG("rect-holder"); + const rect = makeBlock(rectData, `time-block ${rectData.cssClass}`); + const rectHolder = svg.newG("rect-holder"); let firstX = rectData.x; rectHolder.appendChild(rect); @@ -96,8 +96,8 @@ export function createRect(rectData: RectData, segments: WaterfallEntryTiming[], if (segments && segments.length > 0) { segments.forEach((segment) => { if (segment.total > 0 && typeof segment.start === "number") { - let childRectData = segmentToRectData(segment, rectData); - let childRect = makeBlock(childRectData, `segment ${childRectData.cssClass}`); + const childRectData = segmentToRectData(segment, rectData); + const childRect = makeBlock(childRectData, `segment ${childRectData.cssClass}`); firstX = Math.min(firstX, childRectData.x); rectHolder.appendChild(childRect); } @@ -134,7 +134,7 @@ export function createRequestNumberLabel(x: number, y: number, requestNumber: st */ export function createRequestLabelClipped(x: number, y: number, name: string, height: number) { - let blockLabel = createRequestLabel(x, y, name, height); + const blockLabel = createRequestLabel(x, y, name, height); blockLabel.style.clipPath = `url(#titleClipPath)`; return blockLabel; } @@ -147,8 +147,8 @@ export function createRequestLabelClipped(x: number, y: number, name: string, he * @param {number} height height of row */ export function createRequestLabelFull(x: number, y: number, name: string, height: number) { - let blockLabel = createRequestLabel(x, y, name, height); - let labelHolder = svg.newG("full-label", {}, { + const blockLabel = createRequestLabel(x, y, name, height); + const labelHolder = svg.newG("full-label", {}, { clipPath: `url(#titleFullClipPath)`, }); labelHolder.appendChild(svg.newRect({ @@ -169,7 +169,7 @@ export function createRequestLabelFull(x: number, y: number, name: string, heigh function createRequestLabel(x: number, y: number, name: string, height: number): SVGTextElement { const blockName = misc.resourceUrlFormatter(name, 125); y = y + Math.round(height / 2) + 5; - let blockLabel = svg.newTextEl(blockName, {x, y}); + const blockLabel = svg.newTextEl(blockName, {x, y}); blockLabel.appendChild(svg.newTitle(name)); blockLabel.style.opacity = name.match(/js.map$/) ? "0.5" : "1"; @@ -189,8 +189,8 @@ const supportsAnimationFrame = (typeof window.requestAnimationFrame === "functio */ export function appendRequestLabels(rowFixed: SVGGElement, requestNumberLabel: SVGTextElement, shortLabel: SVGTextElement, fullLabel: SVGGElement) { - let labelFullBg = fullLabel.getElementsByTagName("rect")[0] as SVGRectElement; - let fullLabelText = fullLabel.getElementsByTagName("text")[0] as SVGTextElement; + const labelFullBg = fullLabel.getElementsByTagName("rect")[0] as SVGRectElement; + const fullLabelText = fullLabel.getElementsByTagName("text")[0] as SVGTextElement; // use display: none to not render it and visibility to remove it from search results (crt+f in chrome at least) fullLabel.style.display = "none"; @@ -251,7 +251,7 @@ export function createBgStripe(y: number, height: number, isEven: boolean): SVGR } export function createNameRowBg(y: number, rowHeight: number): SVGGElement { - let rowFixed = svg.newG("row row-fixed"); + const rowFixed = svg.newG("row row-fixed"); rowFixed.appendChild(svg.newRect({ "height": rowHeight, @@ -267,7 +267,7 @@ export function createNameRowBg(y: number, rowHeight: number): SVGGElement { } export function createRowBg(y: number, rowHeight: number): SVGGElement { - let rowFixed = svg.newG("row row-flex"); + const rowFixed = svg.newG("row row-flex"); rowFixed.appendChild(svg.newRect({ "height": rowHeight, diff --git a/src/ts/waterfall/row/svg-row.ts b/src/ts/waterfall/row/svg-row.ts index f6721f87..ab6ea591 100644 --- a/src/ts/waterfall/row/svg-row.ts +++ b/src/ts/waterfall/row/svg-row.ts @@ -35,22 +35,22 @@ export function createRow(context: Context, index: number, const y = rectData.y; const rowHeight = rectData.height; const leftColumnWith = context.options.leftColumnWith; - let rowItem = svg.newA(entry.responseDetails.rowClass); + const rowItem = svg.newA(entry.responseDetails.rowClass); rowItem.setAttribute("tabindex", "0"); rowItem.setAttribute("xlink:href", "javascript:void(0)"); - let leftFixedHolder = svg.newSvg("left-fixed-holder", { + const leftFixedHolder = svg.newSvg("left-fixed-holder", { "width": `${leftColumnWith}%`, "x": "0", }); - let flexScaleHolder = svg.newSvg("flex-scale-waterfall", { + const flexScaleHolder = svg.newSvg("flex-scale-waterfall", { "width": `${100 - leftColumnWith}%`, "x": `${leftColumnWith}%`, }); - let rect = rowSubComponents.createRect(rectData, entry.segments, entry.total); - let rowName = rowSubComponents.createNameRowBg(y, rowHeight); - let rowBar = rowSubComponents.createRowBg(y, rowHeight); - let bgStripe = rowSubComponents.createBgStripe(y, rowHeight, (index % 2 === 0)); + const rect = rowSubComponents.createRect(rectData, entry.segments, entry.total); + const rowName = rowSubComponents.createNameRowBg(y, rowHeight); + const rowBar = rowSubComponents.createRowBg(y, rowHeight); + const bgStripe = rowSubComponents.createBgStripe(y, rowHeight, (index % 2 === 0)); let x = ROW_LEFT_MARGIN + maxIconsWidth; @@ -71,14 +71,14 @@ export function createRow(context: Context, index: number, // Jump to the largest offset of all rows x = ROW_LEFT_MARGIN + maxIconsWidth; - let requestNumber = `${index + 1}`; + const requestNumber = `${index + 1}`; const requestNumberLabel = rowSubComponents.createRequestNumberLabel(x, y, requestNumber, rowHeight, maxNumberWidth); // 4 is slightly bigger than the hover "glow" around the url x += maxNumberWidth + 4; - let shortLabel = rowSubComponents.createRequestLabelClipped(x, y, resourceUrlFormatter(entry.url, 40), + const shortLabel = rowSubComponents.createRequestLabelClipped(x, y, resourceUrlFormatter(entry.url, 40), rowHeight); - let fullLabel = rowSubComponents.createRequestLabelFull(x, y, entry.url, rowHeight); + const fullLabel = rowSubComponents.createRequestLabelFull(x, y, entry.url, rowHeight); // create and attach request block rowBar.appendChild(rect); diff --git a/src/ts/waterfall/sub-components/svg-general-components.ts b/src/ts/waterfall/sub-components/svg-general-components.ts index 292662b7..95cfeeba 100644 --- a/src/ts/waterfall/sub-components/svg-general-components.ts +++ b/src/ts/waterfall/sub-components/svg-general-components.ts @@ -16,8 +16,8 @@ import { OverlayChangeEvent } from "../../typing/open-overlay"; * @param {number} sec second of the time marker to render * @param {boolean} addLabel if true a time label is added to the marker-line */ -let appendSecond = (context: Context, timeHolder: SVGGElement, - secsTotal: number, sec: number, addLabel: boolean = false) => { +const appendSecond = (context: Context, timeHolder: SVGGElement, + secsTotal: number, sec: number, addLabel: boolean = false) => { const diagramHeight = context.diagramHeight; const secPerc = 100 / secsTotal; @@ -29,7 +29,7 @@ let appendSecond = (context: Context, timeHolder: SVGGElement, const showTextBefore = (sec > secsTotal - 0.2); lineClass = "second-line"; let x = roundNumber(secPerc * sec) + 0.5 + "%"; - let css = {}; + const css = {}; if (showTextBefore) { x = roundNumber(secPerc * sec) - 0.5 + "%"; css["text-anchor"] = "end"; @@ -46,9 +46,9 @@ let appendSecond = (context: Context, timeHolder: SVGGElement, }, lineClass); context.pubSub.subscribeToOverlayChanges((change: OverlayChangeEvent) => { - let offset = change.combinedOverlayHeight; + const offset = change.combinedOverlayHeight; // figure out why there is an offset - let scale = (diagramHeight + offset) / (diagramHeight); + const scale = (diagramHeight + offset) / (diagramHeight); lineEl.setAttribute("transform", `scale(1, ${scale})`); if (addLabel) { @@ -68,7 +68,7 @@ let appendSecond = (context: Context, timeHolder: SVGGElement, * @param {number} durationMs Full duration of the waterfall */ export function createTimeScale(context: Context, durationMs: number): SVGGElement { - let timeHolder = svg.newG("time-scale full-width"); + const timeHolder = svg.newG("time-scale full-width"); const subStepMs = Math.ceil(durationMs / 10000) * 200; /** steps between each major second marker */ const subStep = 1000 / subStepMs; diff --git a/src/ts/waterfall/sub-components/svg-marks.ts b/src/ts/waterfall/sub-components/svg-marks.ts index dfb42245..e53c3d70 100644 --- a/src/ts/waterfall/sub-components/svg-marks.ts +++ b/src/ts/waterfall/sub-components/svg-marks.ts @@ -12,21 +12,21 @@ import { Mark } from "../../typing/waterfall"; */ export function createMarks(context: Context, marks: Mark[]) { const diagramHeight = context.diagramHeight; - let marksHolder = svg.newG("marker-holder", { + const marksHolder = svg.newG("marker-holder", { "transform": "scale(1, 1)", }); marks.forEach((mark, i) => { const x = roundNumber(mark.startTime / context.unit); - let markHolder = svg.newG("mark-holder type-" + mark.name.toLowerCase().replace(/([0-9]+[ ]?ms)|\W/g, "")); - let lineHolder = svg.newG("line-holder"); - let lineLabelHolder = svg.newG("line-label-holder"); - let lineLabel = svg.newTextEl(mark.name, { x: x + "%", y: diagramHeight + 25 }); + const markHolder = svg.newG("mark-holder type-" + mark.name.toLowerCase().replace(/([0-9]+[ ]?ms)|\W/g, "")); + const lineHolder = svg.newG("line-holder"); + const lineLabelHolder = svg.newG("line-label-holder"); + const lineLabel = svg.newTextEl(mark.name, { x: x + "%", y: diagramHeight + 25 }); lineLabel.setAttribute("writing-mode", "tb"); let lineRect: SVGGElement; mark.x = x; - let line = svg.newLine({ + const line = svg.newLine({ "x1": x + "%", "x2": x + "%", "y1": 0, @@ -40,7 +40,7 @@ export function createMarks(context: Context, marks: Mark[]) { mark.x = lastMark.x + minDistance; } // would use polyline but can't use percentage for points - let lineConnection = svg.newLine({ + const lineConnection = svg.newLine({ "x1": x + "%", "x2": mark.x + "%", "y1": diagramHeight, @@ -55,8 +55,8 @@ export function createMarks(context: Context, marks: Mark[]) { } context.pubSub.subscribeToOverlayChanges((change: OverlayChangeEvent) => { - let offset = change.combinedOverlayHeight; - let scale = (diagramHeight + offset) / (diagramHeight); + const offset = change.combinedOverlayHeight; + const scale = (diagramHeight + offset) / (diagramHeight); line.setAttribute("transform", `scale(1, ${scale})`); lineLabelHolder.setAttribute("transform", `translate(0, ${offset})`); @@ -69,7 +69,7 @@ export function createMarks(context: Context, marks: Mark[]) { let isHoverActive = false; /** click indicator - overwrites `isHoverActive` */ let isClickActive = false; - let onLabelMouseEnter = () => { + const onLabelMouseEnter = () => { if (!isHoverActive) { // move marker to top markHolder.parentNode.appendChild(markHolder); @@ -83,14 +83,14 @@ export function createMarks(context: Context, marks: Mark[]) { } }; - let onLabelMouseLeave = () => { + const onLabelMouseLeave = () => { isHoverActive = false; if (!isClickActive) { removeClass(lineHolder, "active"); } }; - let onLabelClick = () => { + const onLabelClick = () => { if (isClickActive) { // deselect isHoverActive = false; @@ -125,7 +125,7 @@ export function createMarks(context: Context, marks: Mark[]) { * @param {Mark} entry Line entry */ export function createLineRect(context: Context, entry: Mark): SVGGElement { - let holder = svg.newG(`line-mark-holder line-marker-${toCssClass(entry.name)}`); + const holder = svg.newG(`line-mark-holder line-marker-${toCssClass(entry.name)}`); holder.appendChild(svg.newTitle(entry.name.replace(/^startTimer-/, ""))); holder.appendChild(svg.newRect({ "height": context.diagramHeight, diff --git a/src/ts/waterfall/svg-chart.ts b/src/ts/waterfall/svg-chart.ts index d07c5a9f..2bd9cc96 100644 --- a/src/ts/waterfall/svg-chart.ts +++ b/src/ts/waterfall/svg-chart.ts @@ -9,9 +9,9 @@ import {WaterfallData, WaterfallEntry} from "../typing/waterfall"; import OverlayManager from "./details-overlay/overlay-manager"; import { PubSub } from "./details-overlay/pub-sub"; import * as row from "./row/svg-row"; -import * as alignmentHelper from "./sub-components/svg-alignment-helper"; +import * as alignmentHelper from "./sub-components/svg-alignment-helper"; import * as generalComponents from "./sub-components/svg-general-components"; -import * as marks from "./sub-components/svg-marks"; +import * as marks from "./sub-components/svg-marks"; /** * Get a string that's as wide, or wider than any number from 0-n. @@ -54,7 +54,7 @@ function createContext(data: WaterfallData, options: ChartRenderOption, entriesToShow: WaterfallEntry[]): Context { const unit = data.durationMs / 100; const diagramHeight = (entriesToShow.length + 1) * options.rowHeight; - let context = { + const context = { diagramHeight, overlayManager: undefined, pubSub : new PubSub(), @@ -80,10 +80,10 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti .sort((a, b) => (a.start || 0) - (b.start || 0)); /** Holder of request-details overlay */ - let overlayHolder = svg.newG("overlays"); + const overlayHolder = svg.newG("overlays"); /** Holds all rows */ - let rowHolder = svg.newG("rows-holder"); + const rowHolder = svg.newG("rows-holder"); const context = createContext(data, options, entriesToShow); @@ -91,12 +91,12 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti const chartHolderHeight = getSvgHeight(data.marks, context.diagramHeight); /** Main SVG Element that holds all data */ - let timeLineHolder = svg.newSvg("water-fall-chart", { + const timeLineHolder = svg.newSvg("water-fall-chart", { "height": chartHolderHeight, }); /** Holder for scale, event and marks */ - let scaleAndMarksHolder = svg.newSvg("scale-and-marks-holder", { + const scaleAndMarksHolder = svg.newSvg("scale-and-marks-holder", { "width": `${100 - options.leftColumnWith}%`, "x": `${options.leftColumnWith}%`, }); @@ -106,7 +106,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti let mouseListeners: HoverEvtListeners; if (options.showAlignmentHelpers) { hoverOverlayHolder = svg.newG("hover-overlays"); - let hoverEl = alignmentHelper.createAlignmentLines(context.diagramHeight); + const hoverEl = alignmentHelper.createAlignmentLines(context.diagramHeight); hoverOverlayHolder.appendChild(hoverEl.startline); hoverOverlayHolder.appendChild(hoverEl.endline); mouseListeners = alignmentHelper.makeHoverEvtListeners(hoverEl); @@ -137,7 +137,7 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti const widestRequestNumber = getWidestDigitString(entriesToShow.length); const maxNumberWidth = svg.getNodeTextWidth(svg.newTextEl(`${widestRequestNumber}`), true); - let rowItems: SVGAElement[] = []; + const rowItems: SVGAElement[] = []; function getChartHeight(): number { return chartHolderHeight + context.overlayManager.getCombinedOverlayHeight(); @@ -168,11 +168,11 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti "y": y, } as RectData; - let showDetailsOverlay = () => { + const showDetailsOverlay = () => { context.overlayManager.toggleOverlay(i, y + options.rowHeight, detailsHeight, entry, rowItems); }; - let rowItem = row.createRow(context, i, maxIconsWidth, maxNumberWidth, rectData, entry, showDetailsOverlay); + const rowItem = row.createRow(context, i, maxIconsWidth, maxNumberWidth, rectData, entry, showDetailsOverlay); rowItems.push(rowItem); rowHolder.appendChild(rowItem);