From ac46b5bf86bfce967a92ca88e94504ef938de5a3 Mon Sep 17 00:00:00 2001 From: Michael Mrowetz Date: Sat, 6 May 2017 23:57:13 +0900 Subject: [PATCH] add object-literal-key-quotes rule and fix lint issues --- src/ts/helpers/svg.ts | 13 ++-- src/ts/transformers/extract-details-keys.ts | 12 ++-- src/ts/transformers/har.ts | 4 +- .../details-overlay/overlay-manager.ts | 22 +++--- .../details-overlay/svg-details-overlay.ts | 28 ++++---- src/ts/waterfall/row/svg-indicators.ts | 2 +- src/ts/waterfall/row/svg-row-subcomponents.ts | 68 +++++++++---------- src/ts/waterfall/row/svg-row.ts | 16 ++--- .../sub-components/svg-alignment-helper.ts | 16 ++--- .../sub-components/svg-general-components.ts | 8 +-- src/ts/waterfall/sub-components/svg-marks.ts | 26 +++---- src/ts/waterfall/svg-chart.ts | 24 +++---- tslint.json | 3 - 13 files changed, 119 insertions(+), 123 deletions(-) diff --git a/src/ts/helpers/svg.ts b/src/ts/helpers/svg.ts index 3b52596a..c89991db 100644 --- a/src/ts/helpers/svg.ts +++ b/src/ts/helpers/svg.ts @@ -45,12 +45,11 @@ interface SvgElementOptions { className?: string; } -function newElement(tagName: string, - { +function newElement(tagName: string, { attributes = {}, - css = {}, - text = "", - className = "", + css = {}, + text = "", + className = "", }: SvgElementOptions = {}): T { const element = document.createElementNS(svgNamespaceUri, tagName) as T; if (className) { @@ -125,8 +124,8 @@ const getTestSVGEl = (() => { // lazy init svgTestEl if (svgTestEl === undefined) { const attributes = { - "className": "water-fall-chart temp", - "width": "9999px", + className: "water-fall-chart temp", + width: "9999px", }; const css = { "left": "0px", diff --git a/src/ts/transformers/extract-details-keys.ts b/src/ts/transformers/extract-details-keys.ts index 31c5fd40..825d6ae8 100644 --- a/src/ts/transformers/extract-details-keys.ts +++ b/src/ts/transformers/extract-details-keys.ts @@ -169,11 +169,11 @@ export function getKeys(entry: Entry, requestID: number, startRelative: number, const headerToKvTuple = (header: Header): KvTuple => [header.name, header.value]; return { - "general": parseGeneralDetails(entry, startRelative, requestID), - "request": parseRequestDetails(entry), - "requestHeaders": requestHeaders.map(headerToKvTuple), - "response": parseResponseDetails(entry), - "responseHeaders": responseHeaders.map(headerToKvTuple), - "timings": parseTimings(entry, startRelative, endRelative), + general: parseGeneralDetails(entry, startRelative, requestID), + request: parseRequestDetails(entry), + requestHeaders: requestHeaders.map(headerToKvTuple), + response: parseResponseDetails(entry), + responseHeaders: responseHeaders.map(headerToKvTuple), + timings: parseTimings(entry, startRelative, endRelative), }; } diff --git a/src/ts/transformers/har.ts b/src/ts/transformers/har.ts index a4a5f24a..c360c667 100644 --- a/src/ts/transformers/har.ts +++ b/src/ts/transformers/har.ts @@ -272,8 +272,8 @@ const getTimePair = (key: string, harEntry: Entry, collect: WaterfallEntryTiming const end = isNaN(preciseEnd) ? (start + harEntry.timings[key]) : preciseEnd; return { - "end": Math.round(end), - "start": Math.round(start), + end: Math.round(end), + start: Math.round(start), }; }; diff --git a/src/ts/waterfall/details-overlay/overlay-manager.ts b/src/ts/waterfall/details-overlay/overlay-manager.ts index 9e712ae7..2d50be86 100644 --- a/src/ts/waterfall/details-overlay/overlay-manager.ts +++ b/src/ts/waterfall/details-overlay/overlay-manager.ts @@ -66,22 +66,22 @@ class OverlayManager { } const self = this; const newOverlay: OpenOverlay = { - "defaultY": y, - "entry": entry, - "index": index, - "onClose": () => { + defaultY: y, + entry, + index, + onClose: () => { self.closeOverlay(index, detailsHeight, rowItems); }, - "openTabIndex": 0, + openTabIndex: 0, }; this.openOverlays.push(newOverlay); this.openOverlays = this.openOverlays.sort((a, b) => a.index > b.index ? 1 : -1); this.renderOverlays(detailsHeight, rowItems); this.context.pubSub.publishToOverlayChanges({ - "changedIndex": index, - "combinedOverlayHeight": self.getCombinedOverlayHeight(), - "type": "open", + changedIndex: index, + combinedOverlayHeight: self.getCombinedOverlayHeight(), + type: "open", } as OverlayChangeEvent); } @@ -108,9 +108,9 @@ class OverlayManager { this.renderOverlays(detailsHeight, rowItems); this.context.pubSub.publishToOverlayChanges({ - "changedIndex": index, - "combinedOverlayHeight": self.getCombinedOverlayHeight(), - "type": "closed", + changedIndex: index, + combinedOverlayHeight: self.getCombinedOverlayHeight(), + type: "closed", } as OverlayChangeEvent); } diff --git a/src/ts/waterfall/details-overlay/svg-details-overlay.ts b/src/ts/waterfall/details-overlay/svg-details-overlay.ts index b9ab8841..a4ac78a9 100644 --- a/src/ts/waterfall/details-overlay/svg-details-overlay.ts +++ b/src/ts/waterfall/details-overlay/svg-details-overlay.ts @@ -7,10 +7,10 @@ function createCloseButtonSvg(y: number): SVGGElement { const closeBtn = svg.newA("info-overlay-close-btn"); closeBtn.appendChild(svg.newRect({ - "height": 23, - "width": 23, - "x": "100%", - "y": y, + height: 23, + width: 23, + x: "100%", + y, })); closeBtn.appendChild(svg.newTextEl("✕", { @@ -28,12 +28,12 @@ function createCloseButtonSvg(y: number): SVGGElement { function createHolder(y: number, detailsHeight: number) { const holder = svg.newG("info-overlay-holder"); const bg = svg.newRect({ - "height": detailsHeight, - "rx": 2, - "ry": 2, - "width": "100%", - "x": "0", - "y": y, + height: detailsHeight, + rx: 2, + ry: 2, + width: "100%", + x: "0", + y, }, "info-overlay-bg"); holder.appendChild(bg); @@ -45,10 +45,10 @@ export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHei const holder = createHolder(y, detailsHeight); const foreignObject = svg.newForeignObject({ - "height": detailsHeight, - "width": "100%", - "x": "0", - "y": y, + height: detailsHeight, + width: "100%", + x: "0", + y, }); const closeBtn = createCloseButtonSvg(y); diff --git a/src/ts/waterfall/row/svg-indicators.ts b/src/ts/waterfall/row/svg-indicators.ts index 29b5243e..b0129e08 100644 --- a/src/ts/waterfall/row/svg-indicators.ts +++ b/src/ts/waterfall/row/svg-indicators.ts @@ -10,7 +10,7 @@ import { * _Width of icons is fixed_ */ export function makeIcon(type: string, title: string): Icon { - return { "type": type, "title": title, "width": 20 }; + return { type, title, width: 20 }; } /** diff --git a/src/ts/waterfall/row/svg-row-subcomponents.ts b/src/ts/waterfall/row/svg-row-subcomponents.ts index 3d88b7d5..6c5538e5 100644 --- a/src/ts/waterfall/row/svg-row-subcomponents.ts +++ b/src/ts/waterfall/row/svg-row-subcomponents.ts @@ -16,10 +16,10 @@ import { WaterfallEntryTiming } from "../../typing/waterfall"; function makeBlock(rectData: RectData, className: string) { const blockHeight = rectData.height - 1; const rect = svg.newRect({ - "height": blockHeight, - "width": misc.roundNumber(rectData.width / rectData.unit) + "%", - "x": misc.roundNumber(rectData.x / rectData.unit) + "%", - "y": rectData.y, + height: blockHeight, + width: misc.roundNumber(rectData.width / rectData.unit) + "%", + x: misc.roundNumber(rectData.x / rectData.unit) + "%", + y: rectData.y, }, className); if (rectData.label) { rect.appendChild(svg.newTitle(rectData.label)); // Add tile to wedge path @@ -40,16 +40,16 @@ function makeBlock(rectData: RectData, className: string) { */ function segmentToRectData(segment: WaterfallEntryTiming, rectData: RectData): RectData { return { - "cssClass": timingTypeToCssClass(segment.type), - "height": (rectData.height - 6), - "hideOverlay": rectData.hideOverlay, - "label": segment.type + " (" + Math.round(segment.start) + "ms - " + cssClass: timingTypeToCssClass(segment.type), + height: (rectData.height - 6), + hideOverlay: rectData.hideOverlay, + label: segment.type + " (" + Math.round(segment.start) + "ms - " + Math.round(segment.end) + "ms | total: " + Math.round(segment.total) + "ms)", - "showOverlay": rectData.showOverlay, - "unit": rectData.unit, - "width": segment.total, - "x": segment.start || 0.001, - "y": rectData.y, + showOverlay: rectData.showOverlay, + unit: rectData.unit, + width: segment.total, + x: segment.start || 0.001, + y: rectData.y, } as RectData; } @@ -73,7 +73,7 @@ function createTimingLabel(rectData: RectData, timeTotal: number, firstX: number if (percStart + (roughTxtWidth / minWidth * 100) > 100) { percStart = firstX / rectData.unit - spacingPerc; - txtEl = svg.newTextEl(totalLabel, { x: `${misc.roundNumber(percStart)}%`, y }, { "textAnchor": "end" }); + txtEl = svg.newTextEl(totalLabel, { x: `${misc.roundNumber(percStart)}%`, y }, { textAnchor: "end" }); } return txtEl; @@ -152,14 +152,14 @@ export function createRequestLabelFull(x: number, y: number, name: string, heigh clipPath: `url(#titleFullClipPath)`, }); labelHolder.appendChild(svg.newRect({ - "height": height - 4, - "rx": 5, - "ry": 5, + height: height - 4, + rx: 5, + ry: 5, // for initial load performance use 500px as base width // it's updated one by one on hover - "width": 500, - "x": x - 3, - "y": y + 3, + width: 500, + x: x - 3, + y: y + 3, }, "label-full-bg")); labelHolder.appendChild(blockLabel); return labelHolder; @@ -243,10 +243,10 @@ export function appendRequestLabels(rowFixed: SVGGElement, requestNumberLabel: S export function createBgStripe(y: number, height: number, isEven: boolean): SVGRectElement { const className = isEven ? "even" : "odd"; return svg.newRect({ - "height": height, - "width": "100%", // make up for the spacing - "x": 0, - "y": y, + height, + width: "100%", // make up for the spacing + x: 0, + y, }, className); } @@ -254,13 +254,13 @@ export function createNameRowBg(y: number, rowHeight: number): SVGGElement { const rowFixed = svg.newG("row row-fixed"); rowFixed.appendChild(svg.newRect({ - "height": rowHeight, - "width": "100%", - "x": "0", - "y": y, + height: rowHeight, + width: "100%", + x: "0", + y, }, "", { - "opacity": 0, + opacity: 0, })); return rowFixed; @@ -270,13 +270,13 @@ export function createRowBg(y: number, rowHeight: number): SVGGElement { const rowFixed = svg.newG("row row-flex"); rowFixed.appendChild(svg.newRect({ - "height": rowHeight, - "width": "100%", - "x": "0", - "y": y, + height: rowHeight, + width: "100%", + x: "0", + y, }, "", { - "opacity": 0, + opacity: 0, })); return rowFixed; diff --git a/src/ts/waterfall/row/svg-row.ts b/src/ts/waterfall/row/svg-row.ts index ab6ea591..20491d72 100644 --- a/src/ts/waterfall/row/svg-row.ts +++ b/src/ts/waterfall/row/svg-row.ts @@ -14,14 +14,14 @@ import * as rowSubComponents from "./svg-row-subcomponents"; // initial clip path const clipPathElProto = svg.newClipPath("titleClipPath"); clipPathElProto.appendChild(svg.newRect({ - "height": "100%", - "width": "100%", + height: "100%", + width: "100%", })); const clipPathElFullProto = svg.newClipPath("titleFullClipPath"); clipPathElFullProto.appendChild(svg.newRect({ - "height": "100%", - "width": "100%", + height: "100%", + width: "100%", })); const ROW_LEFT_MARGIN = 3; @@ -39,12 +39,12 @@ export function createRow(context: Context, index: number, rowItem.setAttribute("tabindex", "0"); rowItem.setAttribute("xlink:href", "javascript:void(0)"); const leftFixedHolder = svg.newSvg("left-fixed-holder", { - "width": `${leftColumnWith}%`, - "x": "0", + width: `${leftColumnWith}%`, + x: "0", }); const flexScaleHolder = svg.newSvg("flex-scale-waterfall", { - "width": `${100 - leftColumnWith}%`, - "x": `${leftColumnWith}%`, + width: `${100 - leftColumnWith}%`, + x: `${leftColumnWith}%`, }); const rect = rowSubComponents.createRect(rectData, entry.segments, entry.total); diff --git a/src/ts/waterfall/sub-components/svg-alignment-helper.ts b/src/ts/waterfall/sub-components/svg-alignment-helper.ts index 780dde7b..4068f478 100644 --- a/src/ts/waterfall/sub-components/svg-alignment-helper.ts +++ b/src/ts/waterfall/sub-components/svg-alignment-helper.ts @@ -13,17 +13,17 @@ import { HoverElements, HoverEvtListeners } from "../../typing/svg-alignment-hel export function createAlignmentLines(diagramHeight: number): HoverElements { return { endline: svg.newLine({ - "x1": "0", - "x2": "0", - "y1": "0", - "y2": diagramHeight, + x1: "0", + x2: "0", + y1: "0", + y2: diagramHeight, }, "line-end"), startline: svg.newLine({ - "x1": "0", - "x2": "0", - "y1": "0", - "y2": diagramHeight, + x1: "0", + x2: "0", + y1: "0", + y2: diagramHeight, }, "line-start"), }; } diff --git a/src/ts/waterfall/sub-components/svg-general-components.ts b/src/ts/waterfall/sub-components/svg-general-components.ts index 95cfeeba..b744ff7f 100644 --- a/src/ts/waterfall/sub-components/svg-general-components.ts +++ b/src/ts/waterfall/sub-components/svg-general-components.ts @@ -39,10 +39,10 @@ const appendSecond = (context: Context, timeHolder: SVGGElement, const x = roundNumber(secPerc * sec) + "%"; const lineEl = svg.newLine({ - "x1": x, - "x2": x, - "y1": 0, - "y2": diagramHeight, + x1: x, + x2: x, + y1: 0, + y2: diagramHeight, }, lineClass); context.pubSub.subscribeToOverlayChanges((change: OverlayChangeEvent) => { diff --git a/src/ts/waterfall/sub-components/svg-marks.ts b/src/ts/waterfall/sub-components/svg-marks.ts index e53c3d70..b8338d21 100644 --- a/src/ts/waterfall/sub-components/svg-marks.ts +++ b/src/ts/waterfall/sub-components/svg-marks.ts @@ -13,7 +13,7 @@ import { Mark } from "../../typing/waterfall"; export function createMarks(context: Context, marks: Mark[]) { const diagramHeight = context.diagramHeight; const marksHolder = svg.newG("marker-holder", { - "transform": "scale(1, 1)", + transform: "scale(1, 1)", }); marks.forEach((mark, i) => { @@ -27,10 +27,10 @@ export function createMarks(context: Context, marks: Mark[]) { mark.x = x; const line = svg.newLine({ - "x1": x + "%", - "x2": x + "%", - "y1": 0, - "y2": diagramHeight, + x1: x + "%", + x2: x + "%", + y1: 0, + y2: diagramHeight, }); const lastMark = marks[i - 1]; @@ -41,10 +41,10 @@ export function createMarks(context: Context, marks: Mark[]) { } // would use polyline but can't use percentage for points const lineConnection = svg.newLine({ - "x1": x + "%", - "x2": mark.x + "%", - "y1": diagramHeight, - "y2": diagramHeight + 23, + x1: x + "%", + x2: mark.x + "%", + y1: diagramHeight, + y2: diagramHeight + 23, }); lineHolder.appendChild(line); lineHolder.appendChild(lineConnection); @@ -128,10 +128,10 @@ export function createLineRect(context: Context, entry: Mark): SVGGElement { 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, - "width": ((entry.duration || 1) / context.unit) + "%", - "x": ((entry.startTime || 0.001) / context.unit) + "%", - "y": 0, + height: context.diagramHeight, + width: ((entry.duration || 1) / context.unit) + "%", + x: ((entry.startTime || 0.001) / context.unit) + "%", + y: 0, }, "line-mark")); return holder; diff --git a/src/ts/waterfall/svg-chart.ts b/src/ts/waterfall/svg-chart.ts index 3df41a72..893d1ee0 100644 --- a/src/ts/waterfall/svg-chart.ts +++ b/src/ts/waterfall/svg-chart.ts @@ -92,13 +92,13 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti /** Main SVG Element that holds all data */ const timeLineHolder = svg.newSvg("water-fall-chart", { - "height": chartHolderHeight, + height: chartHolderHeight, }); /** Holder for scale, event and marks */ const scaleAndMarksHolder = svg.newSvg("scale-and-marks-holder", { - "width": `${100 - options.leftColumnWith}%`, - "x": `${options.leftColumnWith}%`, + width: `${100 - options.leftColumnWith}%`, + x: `${options.leftColumnWith}%`, }); /** Holder for on-hover vertical comparison bars */ @@ -156,16 +156,16 @@ export function createWaterfallSvg(data: WaterfallData, options: ChartRenderOpti const x = (entry.start || 0.001); const detailsHeight = 450; const rectData = { - "cssClass": requestTypeToCssClass(entry.responseDetails.requestType), - "height": options.rowHeight, - "hideOverlay": options.showAlignmentHelpers ? mouseListeners.onMouseLeavePartial : undefined, - "label": `${entry.url} (${Math.round(entry.start)}ms - ` + + cssClass: requestTypeToCssClass(entry.responseDetails.requestType), + height: options.rowHeight, + hideOverlay: options.showAlignmentHelpers ? mouseListeners.onMouseLeavePartial : undefined, + label: `${entry.url} (${Math.round(entry.start)}ms - ` + `${Math.round(entry.end)}ms | total: ${Math.round(entry.total)}ms)`, - "showOverlay": options.showAlignmentHelpers ? mouseListeners.onMouseEnterPartial : undefined, - "unit": context.unit, - "width": entryWidth, - "x": x, - "y": y, + showOverlay: options.showAlignmentHelpers ? mouseListeners.onMouseEnterPartial : undefined, + unit: context.unit, + width: entryWidth, + x, + y, } as RectData; const showDetailsOverlay = () => { diff --git a/tslint.json b/tslint.json index 38f534fe..2ea5c436 100644 --- a/tslint.json +++ b/tslint.json @@ -5,9 +5,6 @@ ], "rules": { "interface-name": [false], - - // Disable this until https://github.com/palantir/tslint/commit/16e8d0 is released to avoid crash - "object-literal-key-quotes": [false], "object-curly-spacing": [true], "no-console": [false],