add object-literal-key-quotes rule and fix lint issues

Author: Michael Mrowetz

src/ts/helpers/svg.ts

@@ -45,12 +45,11 @@ interface SvgElementOptions {
   className?: string;
 }
 
-function newElement<T extends StylableSVGElement>(tagName: string,
-                                                  {
+function newElement<T extends StylableSVGElement>(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",

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),
   };
 }

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),
   };
 };
 

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);
   }
 

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);

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 };
 }
 
 /**

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,24 +243,24 @@ 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);
 }
 
 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;

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);

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"),
   };
 }

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) => {