microsoft · AdamTReineke · Jan 17, 2018 · Jan 5, 2018 · Jan 8, 2018 · Jan 8, 2018
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ dist/
 *.js
 *.js.map
 *.d.ts
-!injectDemoToolbar.user.js
+!injectDemoToolbar.user.js
+!commontypes.d.ts
diff --git a/index.html b/index.html
@@ -2,42 +2,53 @@
 <html>
     <head>
         <title>Demo for WebPerfToolbar</title>
+        <style>
+            body { background-color: lightgray; }
+        </style>
 <style>
 /** TODO: These need to be moved into JS (for ease of usage in an app). They're inline in the demo for ease of development. */
 
 #PTB_buttons {
     position:fixed;
     bottom: 0;
     left: 50px;
-    border:1px solid black;
-    border-bottom: none;
 
     list-style:none;
     padding:0;
     margin:0;
+
+    z-index: 2147483647; /* we're on top */
 }
 #PTB_buttons li {
     display:inline-block;
     line-height:1.6em;
     margin-left:0.5em;
     padding:0.2em;
     cursor:pointer;
+
+    border:1px solid black;
+    border-bottom: none;
 }
 #PTB_buttons li:first-child {
     margin-left:0;
 }
 
 #PTB_frame {
     position:fixed;
-    width:30%;
-    min-width:300px;
-    right:0;
+    left:0;
     top:0;
+
+    width:100%;
     height:100%;
-    border-left:1px solid black;
+    overflow:auto;
+
+    padding:0.5em;
+    background:rgba(255, 255, 255, 0.95);
+    z-index:2147483646; /* we're one layer below the top */
 }
 
 #PTB_frame table {
+    margin-top:0.5em;
     border-collapse: collapse;
     border-spacing: 0;
     border: 1px solid black;
@@ -50,6 +61,10 @@
     border: 1px solid black;
     padding:0.2em;
 }
+
+#PTB_frame .numeric {
+    text-align: right;
+}
 </style>
     </head>
     <body>
@@ -67,11 +82,15 @@
                     (new PerfToolbar.Toolbar([
                         /** Configure this to include the panels you need */
                         {
-                            panel: PerfToolbar.NavigationTimingsPanel,
+                            panelConstructor: PerfToolbar.NavigationTimingsPanel,
                             config: {
                                 goalMs: 25
                             }
                         },
+                        {
+                            panelConstructor: PerfToolbar.ResourceTimingsPanel,
+                            config: {}
+                        }
                     /** End configuration */
                     ])).render();
                 }

diff --git a/injectDemoToolbar.user.js b/injectDemoToolbar.user.js
@@ -13,7 +13,7 @@
 
     var initFunc = function() {
         var style = document.createElement("style");
-        style.innerHTML = "#PTB_buttons {position:fixed;bottom: 0;left: 50px;border:1px solid black;border-bottom: none;list-style:none;padding:0;margin:0;}#PTB_buttons li {display:inline-block;line-height:1.6em;margin-left:0.5em;padding:0.2em;cursor:pointer;}#PTB_buttons li:first-child {margin-left:0;}#PTB_frame {position:fixed;width:30%;min-width:300px;right:0;top:0;height:100%;border-left:1px solid black;background:white;z-index:99999;overflow:scroll;}#PTB_frame table {border-collapse: collapse;border-spacing: 0;border: 1px solid black;}#PTB_frame th {font-weight: bold;}#PTB_frame th,#PTB_frame td {border: 1px solid black;padding:0.2em;}";
+        style.innerHTML = "#PTB_buttons {position:fixed;bottom: 0;left: 50px;list-style:none;padding:0;margin:0;z-index: 2147483647; /* we're on top */}#PTB_buttons li {display:inline-block;line-height:1.6em;margin-left:0.5em;padding:0.2em;cursor:pointer;border:1px solid black;border-bottom: none;}#PTB_buttons li:first-child {margin-left:0;}#PTB_frame {position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;padding:0.5em;background:rgba(255, 255, 255, 0.95);z-index:2147483646; /* we're one layer below the top */}#PTB_frame table {margin-top:0.5em;border-collapse: collapse;border-spacing: 0;border: 1px solid black;}#PTB_frame th {font-weight: bold;}#PTB_frame th,#PTB_frame td {border: 1px solid black;padding:0.2em;}#PTB_frame .numeric {text-align: right;}";
         document.body.appendChild(style);
 
         var s = document.createElement("script");
@@ -27,10 +27,14 @@
         (new PerfToolbar.Toolbar([
             /** Configure this to include the panels you need */
             {
-                panel: PerfToolbar.NavigationTimingsPanel,
+                panelConstructor: PerfToolbar.NavigationTimingsPanel,
                 config: {
                     goalMs: 25
                 }
+            },
+            {
+                panelConstructor: PerfToolbar.ResourceTimingsPanel,
+                config: {}
             }
             /** End configuration */
         ])).render();

diff --git a/package.json b/package.json
@@ -4,11 +4,17 @@
   "description": "A toolbar for monitoring web performance.",
   "main": "dist/bundle.js",
   "scripts": {
-    "test": "karma start karma.conf.js",
     "build": "webpack",
+    "test": "karma start karma.conf.js",
     "demo": "npm run build && http-server -o -c-1",
+
+    "tslint": "tslint -p .",
     "tsc-verbose": "tsc -p tsconfig.json --traceResolution true",
-    "tslint": "tslint -p ."
+
+    "test-tslint": "tslint -p test/.",
+    "test-tsc-verbose": "tsc -p test/tsconfig.json --traceResolution true",
+
+    "check": "npm run tslint && npm run test-tslint && npm run build"
   },
   "keywords": [],
   "author": "",

diff --git a/src/button.ts b/src/button.ts
@@ -10,6 +10,9 @@ export interface IButtonConfiguration {
     /** The panel that owns this button. */
     parent?: IPanel;
 
+    /** The name of the button, exposed in the title attribute for the button. */
+    title?: string;
+
     /** Gets the background color for the button. */
     getColor?(): string;
 
@@ -31,10 +34,14 @@ export class Button {
     /** The panel that provides this button. */
     public readonly parent: IPanel | undefined;
 
+    /** The name of the button, exposed in the title attribute for the button. */
+    public readonly title: string;
+
     /**
      * Create the button.
      */
     public constructor(config: IButtonConfiguration = {}) {
+        this.title = config.title !== undefined ? config.title : "";
         this.emoji = config.emoji !== undefined ? config.emoji : "";
         this.parent = config.parent;
         /* tslint:disable no-unbound-method */
@@ -50,6 +57,7 @@ export class Button {
     public render(container: HTMLElement): void {
         const li: HTMLLIElement = document.createElement("li");
         li.setAttribute("style", `background-color:${this.getColor()}`);
+        li.setAttribute("title", this.title);
         li.innerText = `${this.emoji} ${this.getValue()}`;
 
         li.addEventListener("click", () => {

diff --git a/src/commontypes.d.ts b/src/commontypes.d.ts
@@ -0,0 +1,25 @@
+// begin types from https://github.com/Microsoft/TypeScript/issues/15012
+
+type Required<T> = {
+    [P in Purify<keyof T>]: NonNullable<T[P]>;
+};
+type Purify<T extends string> = {[P in T]: T; }[T];
+type NonNullable<T> = T & {};
+
+// end types from https://github.com/Microsoft/TypeScript/issues/15012
+
+/**
+ * The types we expect from entry.initiatorType.
+ * Values from https://w3c.github.io/resource-timing/#dom-performanceresourcetiming-initiatortype
+ */
+type InitiatorType = "link" | "script" | "img" | "iframe" | "css" | "navigation" | "xmlhttprequest" | "fetch" | "beacon" | "other";
+
+/**
+ * Finish the typings for a file gotten by `performance.getEntriesByType("resource")`
+ */
+interface IResourcePerformanceEntry extends PerformanceEntry, PerformanceResourceTiming {
+    decodedBodySize: number;
+    encodedBodySize: number;
+    initiatorType: InitiatorType;
+    transferSize: number;
+}
diff --git a/src/formatter.ts b/src/formatter.ts
@@ -1,6 +1,9 @@
 /** The level of precision we want to see for numbers */
 export const DECIMAL_PLACES: number = 2;
 
+/** The maximum length of a file name */
+export const MAX_FILE_NAME_LENGTH: number = 60;
+
 /**
  * Formats a duration for output. Makes sure the numbers are valid and only returns a certain number of decimal places.
  * Invalid input returns a dash.
@@ -9,10 +12,71 @@ export const DECIMAL_PLACES: number = 2;
  * @param decimalPlaces The number of decimal places to show.
  */
 export const duration: (end: number, start: number, decimalPlaces?: number) => string =
-    (end: number, start: number, decimalPlaces: number = DECIMAL_PLACES): string => {
-        if (isNaN(end) || isNaN(start)) {
+    (end, start, decimalPlaces = DECIMAL_PLACES) => {
+        if (isNaN(end) ||
+            isNaN(start) ||
+            (end - start < 0) ||
+            (end === 0 && start === 0)) {
             return "-";
         }
 
-        return (end - start).toFixed(decimalPlaces);
+        return (end - start).toLocaleString(undefined, {
+            minimumFractionDigits: decimalPlaces,
+            maximumFractionDigits: decimalPlaces,
+        });
+    };
+
+/**
+ * Formats a path into a filename.
+ * @param path The file name to be formatted.
+ * @param maxLength The maximum length of the returned file name, plus three characters for periods.
+ */
+export const pathToFilename: (path: string, maxLength?: number) => string =
+    (path, maxLength = MAX_FILE_NAME_LENGTH) => {
+        let trimmed: string = path.substring(path.lastIndexOf("/") + 1);
+
+        if (trimmed.length > maxLength) {
+            trimmed = `${trimmed.substring(0, maxLength)}...`;
+        }
+
+        return trimmed;
+    };
+
+enum FileSizeUnits {
+    b,
+    Kb,
+    Mb,
+}
+
+/**
+ * Simple object for passing to toLocaleString to configure the number of decimal places to display.
+ */
+const LOCALE_STRING_DECIMAL_PLACES: { maximumFractionDigits: number; minimumFractionDigits: number } = {
+    minimumFractionDigits: DECIMAL_PLACES,
+    maximumFractionDigits: DECIMAL_PLACES,
+};
+
+/**
+ * Converts a size in bytes to another size, with a unit.
+ * @param bytes The size in bytes.
+ * @param unit The desired unit to conver to.
+ */
+export const sizeToString: (bytes: number, unit?: keyof typeof FileSizeUnits) => string =
+    (bytes, unit = "Kb"): string => {
+        const twoExpTen: number = 1024;
+
+        if (bytes === 0) {
+            return "-";
+        }
+
+        switch (unit) {
+            case "b":
+                return `${bytes.toLocaleString(undefined, LOCALE_STRING_DECIMAL_PLACES)} b`;
+            case "Kb":
+                return `${(bytes / twoExpTen).toLocaleString(undefined, LOCALE_STRING_DECIMAL_PLACES)} Kb`;
+            case "Mb":
+                return `${(bytes / (twoExpTen * twoExpTen)).toLocaleString(undefined, LOCALE_STRING_DECIMAL_PLACES)} Mb`;
+            default:
+                throw new Error("unknown unit");
+        }
     };
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
 export { Toolbar } from "./toolbar";
 export { Button } from "./button";
 export { NavigationTimingsPanel } from "./panels/navigation-timing";
+export { ResourceTimingsPanel } from "./panels/resource-timing";
diff --git a/src/ipanel.ts b/src/ipanel.ts
@@ -1,9 +1,9 @@
 import { Button } from "./button";
 import { PanelFrame } from "./panelframe";
 
-export interface IPanelWithConfiguration<C, P> {
+export interface IPanelWithConfiguration<C extends IPanelConfig, P extends IPanel> {
     config: C;
-    panel: IPanelConstructor<C, P>;
+    panelConstructor: IPanelConstructor<C, P>;
 }
 
 export interface IPanelConstructor<C, P> {
@@ -17,11 +17,6 @@ export interface IPanelConfig {
 
 /** Describes a panel within the opened toolbar. */
 export interface IPanel {
-    /**
-     * The name of the panel.
-     */
-    name: string;
-
     /**
      * Gets the buttons provided by this panel to be displayed in the collapsed toolbar.
      */

diff --git a/src/panels/navigation-timing.ts b/src/panels/navigation-timing.ts
@@ -5,8 +5,14 @@ import { PanelFrame } from "../panelframe";
 
 /** Describes the configuration options available for the network panel */
 export interface INavigationTimingsPanelConfig extends IPanelConfig {
+    /** The emoji for the button */
+    buttonEmoji: string;
+    /** The title for the button */
+    buttonTitle: string;
     /** The goal for the load duration */
     goalMs: number;
+    /** The name of the panel */
+    panelName: string;
     /** The performance timing object, can be included in the config to enable injection of a mock object for testing */
     timings: PerformanceTiming;
 }
@@ -15,14 +21,15 @@ export interface INavigationTimingsPanelConfig extends IPanelConfig {
 const navigationTimingsPanelDefaultConfig: INavigationTimingsPanelConfig = {
     goalMs: 500,
     timings: performance.timing,
+    panelName: "Navigation Timings",
+    buttonTitle: "Duration from navigation to end of load event",
+    buttonEmoji: "⏱️",
 };
 
 /**
  * Provides a panel that shows the navigation timings for a page
  */
 export class NavigationTimingsPanel implements IPanel {
-    /** The name of the panel */
-    public readonly name: string = "Navigation Timings";
 
     /** The settings for this panel. */
     private readonly config: INavigationTimingsPanelConfig;
@@ -42,7 +49,8 @@ export class NavigationTimingsPanel implements IPanel {
     public getButtons(): Button[] {
         return [new Button({
             parent: this,
-            emoji: "⏱️",
+            title: this.config.buttonTitle,
+            emoji: this.config.buttonEmoji,
             getValue: (): string => `${Formatter.duration(this.config.timings.loadEventEnd, this.config.timings.navigationStart)} ms`,
             getColor: (): string => this.config.timings.loadEventEnd - this.config.timings.navigationStart <= this.config.goalMs ? "green" : "red",
         })];
@@ -55,7 +63,7 @@ export class NavigationTimingsPanel implements IPanel {
     public render(target: HTMLElement): void {
         const t: PerformanceTiming = this.config.timings;
 
-        target.innerHTML = `
+        target.innerHTML = `<h1>${this.config.panelName}</h1>
 <table>
     <tr>
         <th>Get Connected</th>