Merge pull request #199 from micmro/188

#188 make chart keyboard accessible.

Author: micmro

Diff for: src/css-raw/perf-cascade.css

@@ -95,7 +95,7 @@
 .block-undefined {fill: #0f0;}
 
 /* Info overlay SVG - wrapper */
-.info-overlay {fill: #fff; stroke: #cdcdcd;}
+.info-overlay-bg {fill: #fff; stroke: #cdcdcd;}
 .info-overlay-close-btn {fill: rgba(205, 205, 205, 0.8); transform: translate(-23px, -23px); cursor: pointer;}
 .info-overlay-close-btn text {fill: #111; pointer-events: none;}
 .info-overlay-close-btn:focus {border: solid 1px #36c;}
@@ -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; }

Diff for: src/ts/helpers/dom.ts

@@ -31,6 +31,21 @@ export function removeClass<T extends Element>(el: T, className: string): T {
   return el;
 }
 
+/**
+ * Helper to recursively find parent with the `className` class
+ * @param base `Element` to start from
+ * @param className class that the parent should have
+ */
+export function getParentByClassName(base: Element, className: string) {
+  if (base.parentElement === undefined) {
+    return undefined;
+  }
+  if (base.parentElement.classList.contains(className)) {
+    return base.parentElement;
+  }
+  return getParentByClassName(base.parentElement, className);
+};
+
 /**
  * Removes all child DOM nodes from `el`
  * @param  {Element} el
@@ -41,3 +56,19 @@ 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);
+}
+
+// /** Calls `fn` with each element of `els` */
+export function forEachNodeList<T extends Node>(els: NodeListOf<T>, fn: (el: T, index: number) => any) {
+  Array.prototype.forEach.call(els, fn);
+}

Diff for: src/ts/helpers/misc.ts

@@ -27,6 +27,39 @@ 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++;
+  }
+  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 +128,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;
+}

Diff for: src/ts/helpers/svg.ts

@@ -132,7 +132,7 @@ let getTestSVGEl = (() => {
     clearTimeout(removeSvgTestElTimeout);
     removeSvgTestElTimeout = setTimeout(() => {
       svgTestEl.parentNode.removeChild(svgTestEl);
-    }, 1000);
+    }, 500);
 
     return svgTestEl;
   };
@@ -146,15 +146,23 @@ let getTestSVGEl = (() => {
  */
 export function getNodeTextWidth(textNode: SVGTextElement, skipClone: boolean = false): number {
   let tmp = getTestSVGEl();
-  let tmpTextNode;
+  let tmpTextNode: SVGTextElement;
+  let shadow;
   if (skipClone) {
+    shadow = textNode.style.textShadow;
     tmpTextNode = textNode;
   } else {
-    tmpTextNode = textNode.cloneNode(false) as SVGTextElement;
+    tmpTextNode = textNode.cloneNode(true) as SVGTextElement;
+    tmpTextNode.setAttribute("x", "0");
+    tmpTextNode.setAttribute("y", "0");
   }
-  tmp.appendChild(tmpTextNode);
   // make sure to turn of shadow for performance
   tmpTextNode.style.textShadow = "0";
+  tmp.appendChild(tmpTextNode);
   window.document.body.appendChild(tmp);
-  return tmpTextNode.getBBox().width;
+  const width = tmpTextNode.getBBox().width;
+  if (skipClone && shadow !== undefined) {
+    textNode.style.textShadow = shadow;
+  }
+  return width;
 }

Diff for: src/ts/typing/context.ts

@@ -1,42 +1,20 @@
-import {OverlayChangeEvent, OverlayChangeSubscriber} from "./open-overlay";
-import {ChartRenderOption} from "./options";
-import {WaterfallEntry} from "./waterfall";
+import { OverlayManager } from "../waterfall/details-overlay/overlay-manager";
+import { PubSub } from "../waterfall/details-overlay/pub-sub";
+import { ChartRenderOption } from "./options";
 
 /**
  * Context object that is passed to (usually stateless) child-functions
  * to inject state and dependencies
  */
 export interface Context {
   /** Publish and Subscribe instance for overlay updates */
-  pubSub: PubSubClass;
+  pubSub: PubSub;
   /** Overlay (popup) instance manager */
-  overlayManager: OverlayManagerClass;
+  overlayManager: OverlayManager;
   /** horizontal unit (duration in ms of 1%) */
   unit: number;
   /** height of the requests part of the diagram in px */
   diagramHeight: number;
   /** Chart config/customization options */
   options: ChartRenderOption;
 }
-
-export interface PubSubClass {
-  subscribeToOverlayChanges: (fn: OverlayChangeSubscriber) => void;
-  publishToOverlayChanges: (change: OverlayChangeEvent) => void;
-}
-
-export interface OverlayManagerClass {
-  /** all open overlays height combined */
-  getCombinedOverlayHeight: () => number;
-
-  /** Opens an overlay - rerenders others  */
-  openOverlay: (index: number, y: number, detailsHeight: number, entry: WaterfallEntry,
-                              barEls: SVGGElement[]) => void;
-  /** toggles an overlay - rerenders others  */
-  toggleOverlay: (index: number, y: number, detailsHeight: number, entry: WaterfallEntry,
-                              barEls: SVGGElement[]) => void;
-
-  /** closes on overlay - rerenders others internally */
-  closeOverlay: (index: number, detailsHeight: number, barEls: SVGGElement[]) => void;
-
-  // constructor(context: Context, overlayHolder: SVGGElement);
-}

Diff for: src/ts/typing/open-overlay.ts

@@ -22,8 +22,8 @@ export interface OpenOverlay {
 
 export interface OverlayChangeEvent {
   type: EventType;
-  /** list of currenly open overlays */
-  openOverlays: OpenOverlay[];
+  /** index that triggerd the change */
+  changedIndex?: number;
   combinedOverlayHeight: number;
 }
 

Diff for: 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}