Add Basic Info buttons (#25)

This allows the config to pass in values that can be displayed in buttons without panels (see index.html).

Also updates our TypeScript related dependencies and disable the Chrome test runner since it isn't working. The IE test runner still works, so tests still run.

index.html

@@ -34,6 +34,23 @@
                         {
                             panelConstructor: PerfToolbar.ResourceTimingsPanel,
                             config: {}
+                        },
+                        {
+                            panelConstructor: PerfToolbar.BasicInfoPanel,
+                            config: {
+                                buttons: [
+                                    {
+                                        emoji: "☁️",
+                                        title: "Server",
+                                        value: function() { return "abc-000.www.foo.com" },
+                                    },
+                                    {
+                                        emoji: "⏱️",
+                                        title: "Time to First Visual",
+                                        value: function() { return "1.23" },
+                                    }
+                                ]
+                            }
                         }
                     /** End configuration */
                     ])).render();

karma.conf.js

@@ -68,7 +68,7 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Chrome', 'IE'],
+    browsers: [/*'Chrome', */'IE'],
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webperftoolbar",
-  "version": "0.1.0-alpha",
+  "version": "0.2.0-alpha",
   "description": "A toolbar for monitoring web performance.",
   "main": "dist/bundle.js",
   "scripts": {
@@ -38,11 +38,11 @@
     "mocha-webpack": "1.0.1",
     "requirejs": "2.3.5",
     "sinon": "4.1.6",
-    "ts-loader": "3.2.0",
-    "ts-node": "4.1.0",
-    "tslib": "1.8.1",
-    "tslint": "5.9.1",
-    "typescript": "2.6.2",
+    "ts-loader": "3.5.0",
+    "ts-node": "7.0.1",
+    "tslib": "1.9.3",
+    "tslint": "5.11.0",
+    "typescript": "3.0.1",
     "uglifyjs-webpack-plugin": "1.1.6",
     "webpack": "3.10.0",
     "webpack-merge": "4.1.1"

src/commontypes.d.ts

@@ -1,13 +1,3 @@
-// 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

src/index.ts

@@ -6,3 +6,4 @@ export { Toolbar } from "./toolbar";
 export { Button } from "./button";
 export { NavigationTimingsPanel } from "./panels/navigation-timing";
 export { ResourceTimingsPanel } from "./panels/resource-timing";
+export { BasicInfoPanel } from "./panels/basic-info";

src/panels/basic-info.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License.
+ */
+
+import { Button } from "../button";
+import { IPanel, IPanelConfig } from "../ipanel";
+import { PanelFrame } from "../panel-frame";
+
+export interface IBasicButton {
+    emoji: string;
+    title: string;
+    value(): string;
+}
+
+/** Describes the configuration options available for the basic info panel */
+export interface IBasicInfoPanelConfig extends IPanelConfig {
+    buttons?: IBasicButton[];
+}
+
+/** A set of default configuration options for the basic info panel */
+const basicInfoPanelDefaultConfig: Required<IBasicInfoPanelConfig> = {
+    buttons: [],
+};
+
+/**
+ * Provides buttons that can show basic information. This doesn't actually open a panel.
+ */
+export class BasicInfoPanel implements IPanel {
+    /** The settings for this panel. */
+    private readonly config: Required<IBasicInfoPanelConfig>;
+
+    /** Construct the panel. */
+    public constructor(_frame: PanelFrame, config?: IBasicInfoPanelConfig) {
+        this.config = { ...basicInfoPanelDefaultConfig, ...config };
+    }
+
+    /** Get a list of buttons by creating instances of each of the buttons defined in the config. */
+    public getButtons(): Button[] {
+        const out: Button[] = [];
+        for (const b of this.config.buttons) {
+            out.push(new Button({
+                parent: this,
+                title: b.title,
+                emoji: b.emoji,
+                getValue: () => b.value(),
+                getColor: () => "white",
+            }));
+        }
+
+        return out;
+    }
+
+    /** Effectively do nothing since the panel can't be opened. */
+    public render(target: HTMLElement): void {
+        target.innerHTML = "";
+    }
+
+    /** Do nothing. Normally the panel would be opened here, but we don't want a panel for this component. */
+    public toggle(): void {
+        return;
+    }
+}

test/panels/navigation-timing.spec.ts

@@ -24,7 +24,6 @@ const getMockTimings = (overrides?: Partial<PerformanceTiming>): PerformanceTimi
             fetchStart: 0,
             loadEventEnd: 0,
             loadEventStart: 0,
-            msFirstPaint: 0,
             navigationStart: 0,
             redirectEnd: 0,
             redirectStart: 0,

test/panels/resource-timing.spec.ts

@@ -34,6 +34,10 @@ const zeroEntry: IResourcePerformanceEntry = {
     responseStart: 0,
     startTime: 0,
     transferSize: 0,
+    toJSON: () => "",
+    workerStart: 0,
+    nextHopProtocol: "",
+    secureConnectionStart: 0,
 };
 
 /** Provides a short mock of the summary data that would be computed from the performance object. */

tslint.json

@@ -36,7 +36,10 @@
         ],
         "object-literal-sort-keys": false,
         "newline-per-chained-call": false,
-        "one-variable-per-declaration": [true, "ignore-for-loop"]
+        "one-variable-per-declaration": [true, "ignore-for-loop"],
+        "file-name-casing": false,
+        "deprecation": false,
+        "no-unused-variable": false
     },
     "jsRules": {
         "max-line-length": {