reorder row structure, tab mostly working

Author: Michael Mrowetz

src/css-raw/perf-cascade.css

@@ -149,8 +149,11 @@
 .info-overlay-holder .tab-nav li {margin: 0; padding: 0; display: inline-block;}
 .info-overlay-holder button { background: transparent; outline:0; border:0; border-bottom: solid 2px transparent; padding: 0.5em 1em; margin:0 0.25em;}
 .info-overlay-holder li:first-child  button {margin-left: 1em;}
-.info-overlay-holder button:focus,.info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
+.info-overlay-holder button:focus,
+.info-overlay-holder button.active:focus,
+.info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
 .info-overlay-holder button.active {border-color: #fff; cursor: default;}
+.info-overlay-holder button.active:focus {border-color: rgba(255,255,255, 0.8);}
 
 /* Info overlay HTML - content */
 .info-overlay-holder dt {float: left; clear: both; margin-top: 0.5em; width: 25%; text-align: right; font-weight: bold; }

src/ts/helpers/dom.ts

@@ -41,3 +41,28 @@ export function removeChildren<T extends Element>(el: T): T {
   }
   return el;
 }
+
+/**
+ * Get last element of `NodeList`
+ * @param list NodeListOf e.g. return value of `getElementsByClassName`
+ */
+export function getLastItemOfNodeList<T extends Node>(list: NodeListOf<T>) {
+  if (!list || list.length === 0) {
+    return undefined;
+  }
+  return list.item(list.length - 1);
+}
+
+/**
+ * Helper to make `NodeListOf` iterable
+ * @param list NodeListOf e.g. return value of `getElementsByClassName`
+ * @param fn Function called for
+ */
+export function forEachNodeList<T extends Node>(list: NodeListOf<T>, fn: {(el: T, index: number): void}): void {
+  if (!list || list.length === 0) {
+    return undefined;
+  }
+  for (let i = 0, len = list.length; i < len; i ++) {
+    fn(list.item(i), i);
+  }
+}

src/ts/helpers/misc.ts

@@ -27,6 +27,42 @@ export function contains<T>(arr: T[], item: T): boolean {
   return arr.some((x) => x === item);
 }
 
+
+/**
+ * Returns Index of first match to `predicate` in `arr`
+ * @param arr Array to search
+ * @param predicate Function that returns true for a match
+ */
+export function findIndex<T>(arr: T[], predicate: {(el: T, index: number): Boolean}) {
+  let i = 0;
+  if (!arr || arr.length < 1) {
+    return undefined;
+  }
+  const len = arr.length;
+  while (i < len) {
+    if (predicate(arr[i], i)) {
+      return i;
+    }
+    i++;
+  }
+
+  // 7. Return undefined.
+  return undefined;
+}
+
+/**
+ * Returns first match to `predicate` in `arr`
+ * @param arr Array to search
+ * @param predicate Function that returns true for a match
+ */
+export function find<T>(arr: T[], predicate: {(el: T, index: number): Boolean}) {
+  const index = findIndex(arr, predicate);
+  if (index === undefined) {
+    return undefined;
+  }
+  return arr[index];
+}
+
 /**
  * Formats and shortens a url for ui
  * @param  {string} url
@@ -95,3 +131,19 @@ export function toCssClass(seed: string) {
 export function pluralize(word: string, count: number) {
   return word + (count > 1 ? "s" : "");
 }
+
+/**
+ * Check if event is `tab` + `shift` key, to move to previous input element
+ * @param {KeyboardEvent} evt Keyboard event
+ */
+export function isTabUp(evt: KeyboardEvent) {
+  return evt.which === 9 && evt.shiftKey;
+}
+
+/**
+ * Check if event is only `tab` key, to move to next input element
+ * @param {KeyboardEvent} evt Keyboard event
+ */
+export function isTabDown(evt: KeyboardEvent) {
+  return evt.which === 9 && !evt.shiftKey;
+}

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

@@ -1,6 +1,14 @@
 import { escapeHtml, sanitizeUrlForLink } from "../../helpers/parse";
 import { WaterfallEntry } from "../../typing/waterfall";
 
+/**
+ * Creates the HTML body for the overlay
+ *
+ * _All tabable elements are set to `tabindex="-1"` to avoid tabing issues_
+ * @param requestID ID
+ * @param detailsHeight
+ * @param entry
+ */
 export function createDetailsBody(requestID: number, detailsHeight: number, entry: WaterfallEntry) {
 
   let html = document.createElement("html") as HTMLHtmlElement;
@@ -33,7 +41,9 @@ export function createDetailsBody(requestID: number, detailsHeight: number, entr
   body.innerHTML = `
     <div class="wrapper">
       <header class="type-${entry.responseDetails.requestType}">
-        <h3><strong>#${requestID}</strong> <a href="${sanitizeUrlForLink(entry.url)}">${escapeHtml(entry.url)}</a></h3>
+        <h3><strong>#${requestID}</strong> <a href="${sanitizeUrlForLink(entry.url)}">
+          ${escapeHtml(entry.url)}
+        </a></h3>
         <nav class="tab-nav">
           <ul>
             ${tabMenu}

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

@@ -1,4 +1,5 @@
-import { removeChildren } from "../../helpers/dom";
+import { forEachNodeList, removeChildren } from "../../helpers/dom";
+import { find } from "../../helpers/misc";
 import { Context, OverlayManagerClass } from "../../typing/context";
 import { OpenOverlay, OverlayChangeEvent } from "../../typing/open-overlay";
 import { WaterfallEntry } from "../../typing/waterfall";
@@ -9,8 +10,7 @@ class OverlayManager implements OverlayManagerClass {
   /** Collection of currely open overlays */
   private openOverlays: OpenOverlay[] = [];
 
-  // TODO: move `overlayHolder` to constructor
-  constructor(private context: Context, private overlayHolder: SVGGElement) {
+  constructor(private context: Context, private rowHolder: SVGGElement) {
 
   }
 
@@ -19,8 +19,30 @@ class OverlayManager implements OverlayManagerClass {
     return this.openOverlays.reduce((pre, curr) => pre + curr.height, 0);
   }
 
-  public getOpenOverlays() {
-    return this.openOverlays;
+  /**
+   * Get ref to Overlay SVG Element in DOM.
+   *
+   * _Item might be re-drawn, when another Overlay is changed_
+   */
+  public getOpenOverlayDomEl(overlay: OpenOverlay) {
+    return this.rowHolder.querySelector(`.overlay-index-${overlay.index}`) as SVGGElement;
+  }
+
+  /**
+   * Get ref to the last (DOM element wise) Overlay SVG Element in DOM.
+   *
+   * _Item might be re-drawn, when another Overlay is changed_
+   */
+  public getLastOpenOverlayDomEl() {
+    const overlays = this.rowHolder.querySelectorAll(".info-overlay-holder");
+    return overlays.item(overlays.length - 1) as SVGGElement;
+  }
+
+  /**
+   * Are any overlays currently open?
+   */
+  public hasOpenOverlays() {
+    return this.openOverlays.length > 0;
   }
 
   /**
@@ -42,6 +64,7 @@ class OverlayManager implements OverlayManagerClass {
       "openTabIndex": 0,
     };
     this.openOverlays.push(newOverlay);
+    this.openOverlays = this.openOverlays.sort((a, b) => a.index > b.index ? 1 : -1);
 
     this.renderOverlays(detailsHeight);
     this.context.pubSub.publishToOverlayChanges({
@@ -115,27 +138,47 @@ class OverlayManager implements OverlayManagerClass {
    * @param  {SVGGElement} overlayHolder
    */
   private renderOverlays(detailsHeight: number) {
-    removeChildren(this.overlayHolder);
+    // removeChildren(this.rowHolder);
 
     let currY = 0;
-    this.openOverlays
-      .sort((a, b) => a.index > b.index ? 1 : -1)
-      .forEach((overlay) => {
-        let y = overlay.defaultY + currY;
-        let infoOverlay = createRowInfoOverlay(overlay, y, detailsHeight);
-        // if overlay has a preview image show it
-        let previewImg = infoOverlay.querySelector("img.preview") as HTMLImageElement;
-        if (previewImg && !previewImg.src) {
-          previewImg.setAttribute("src", previewImg.attributes.getNamedItem("data-src").value);
+
+    let 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);
+      // if overlay has a preview image show it
+      let previewImg = infoOverlay.querySelector("img.preview") as HTMLImageElement;
+      if (previewImg && !previewImg.src) {
+        previewImg.setAttribute("src", previewImg.attributes.getNamedItem("data-src").value);
+      }
+      overlayHolder.appendChild(infoOverlay);
+      updateHeight(overlay, y, infoOverlay.getBoundingClientRect().height);
+    };
+
+    const rowItems = this.rowHolder.getElementsByClassName("row-item") as NodeListOf<SVGAElement>;
+    forEachNodeList(rowItems, (rowItem, index) => {
+      const overlay = find(this.openOverlays, (o) => o.index === index);
+      let overlayEl = rowItem.nextElementSibling.firstElementChild as SVGGElement;
+      if (overlay === undefined) {
+        if (overlayEl) {
+          // remove closed overlay
+          removeChildren(rowItem.nextElementSibling);
         }
-        this.overlayHolder.appendChild(infoOverlay);
-
-        let currHeight = infoOverlay.getBoundingClientRect().height;
-        currY += currHeight;
-        overlay.actualY = y;
-        overlay.height = currHeight;
-        return overlay;
-      });
+        return; // not open
+      }
+      if (overlayEl) {
+        updateHeight(overlay, overlay.defaultY + currY, overlay.height);
+        const fo = overlayEl.getElementsByTagName("foreignObject").item(0) as SVGForeignObjectElement;
+        fo.setAttribute("y", overlay.actualY.toString());
+        return;
+      }
+      addNewOverlay(rowItem.nextElementSibling as SVGGElement, overlay);
+    });
   }
 };
 export {

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

@@ -47,7 +47,7 @@ function createHolder(y: number, detailsHeight: number) {
 
 export function createRowInfoOverlay(overlay: OpenOverlay, y: number, detailsHeight: number): SVGGElement {
   const requestID = overlay.index + 1;
-  let wrapper = svg.newG("outer-info-overlay-holder");
+  let wrapper = svg.newG(`outer-info-overlay-holder overlay-index-${overlay.index}`);
   let holder = createHolder(y, detailsHeight);
 
   let foreignObject = svg.newForeignObject({