Merge pull request #6 from CodeMooseUS/telemetry

Adding anonymous telemetry using vscode-extension-telemetry package

Author: CodeMooseUS

README.md

@@ -8,10 +8,10 @@ A VSCode extension to host the chrome devtools inside of a webview.
     </a>
 </p>
 
-## Attach to a running chrome instance:
+## Attaching to a running chrome instance:
 ![Demo1](demo.gif)
 
-## Launch a chrome debugger project and use screencasting:
+## Launching a 'debugger for chrome' project and using screencast:
 ![Demo2](demo2.gif)
 
 # Using the extension
@@ -32,7 +32,9 @@ A VSCode extension to host the chrome devtools inside of a webview.
 
 # Known Issues
 - Prototyping stage
-- Settings in the devtools are not persisted
+- Having the DevTools in a non-foreground tab can cause issues while debugging
+    - This is due to VS Code suspending script execution of non-foreground webviews
+    - The workaround is to put the DevTools in a split view tab so that they are always visible while open
 - Chrome browser extensions can sometimes cause the webview to terminate
 
 # Developing the extension itself

demo2.gif

@@ -2,11 +2,12 @@
   "name": "vscode-devtools-for-chrome",
   "displayName": "DevTools for Chrome",
   "description": "Open the chrome devtools as a dockable webview",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "preview": true,
   "license": "SEE LICENSE IN LICENSE",
   "publisher": "codemooseus",
   "icon": "icon.png",
+  "aiKey": "3ec4c1b4-542f-4adf-830a-a4b04370fa3f",
   "homepage": "https://github.com/CodeMooseUS/vscode-devtools/blob/master/README.md",
   "repository": {
     "type": "git",
@@ -116,13 +117,14 @@
     "postinstall": "node ./node_modules/vscode/bin/install"
   },
   "dependencies": {
+    "applicationinsights": "^1.0.6",
     "chrome-devtools-frontend": "^1.0.602557",
     "vscode": "^1.1.18",
     "ws": "^6.1.0"
   },
   "devDependencies": {
     "@types/node": "^10.5.2",
-    "@types/shelljs": "^0.8.0",
+    "@types/shelljs": "^0.8.0", 
     "@types/ws": "^6.0.1",
     "shelljs": "^0.8.2",
     "ts-node": "^7.0.1",

package.json

@@ -1,25 +1,37 @@
 import * as path from 'path';
 import * as vscode from 'vscode';
 import WebSocket from 'ws';
+import TelemetryReporter from './telemetry';
 import QuickPickItem = vscode.QuickPickItem;
 import * as utils from './utils';
 
-let settings: vscode.WorkspaceConfiguration;
-let hostname: string;
-let port: number;
+interface IPackageInfo {
+    name: string;
+    version: string;
+    aiKey: string;
+}
+
 const debuggerType: string = 'devtools-for-chrome';
+let telemetryReporter: TelemetryReporter;
 
 export function activate(context: vscode.ExtensionContext) {
-    settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
-    hostname = settings.get('hostname') as string || 'localhost';
-    port = settings.get('port') as number || 9222;
+
+    const packageInfo = getPackageInfo(context);
+    if (packageInfo && vscode.env.machineId !== 'someValue.machineId') {
+        // Use the real telemetry reporter
+        telemetryReporter = new TelemetryReporter(packageInfo.name, packageInfo.version, packageInfo.aiKey);
+    } else {
+        // Fallback to a fake telemetry reporter
+        telemetryReporter = new DebugTelemetryReporter();
+    }
+    context.subscriptions.push(telemetryReporter);
 
     context.subscriptions.push(vscode.commands.registerCommand('devtools-for-chrome.launch', async () => {
         launch(context);
     }));
 
     context.subscriptions.push(vscode.commands.registerCommand('devtools-for-chrome.attach', async () => {
-        attach(context);
+        attach(context, /* viaConfig= */ false);
     }));
 
     vscode.debug.registerDebugConfigurationProvider(debuggerType, {
@@ -35,7 +47,7 @@ export function activate(context: vscode.ExtensionContext) {
         resolveDebugConfiguration(folder: vscode.WorkspaceFolder | undefined, config: vscode.DebugConfiguration, token?: vscode.CancellationToken): vscode.ProviderResult<vscode.DebugConfiguration> {
             if (config && config.type == debuggerType) {
                 if (config.request && config.request.localeCompare('attach', 'en', { sensitivity: 'base' }) == 0) {
-                    attach(context);
+                    attach(context, /* viaConfig= */ true);
                 } else {
                     let launchUri: string = '';
                     if (folder.uri.scheme == 'file') {
@@ -56,13 +68,19 @@ export function activate(context: vscode.ExtensionContext) {
 }
 
 async function launch(context: vscode.ExtensionContext, launchUrl?: string, chromePathFromLaunchConfig?: string) {
-    const portFree = await utils.isPortFree(hostname, port);
+    const viaConfig = !!(launchUrl || chromePathFromLaunchConfig);
+    const telemetryProps = { viaConfig: `${viaConfig}` };
+    telemetryReporter.sendTelemetryEvent('launch', telemetryProps);
 
+    const { hostname, port } = getSettings();
+    const portFree = await utils.isPortFree(hostname, port);
     if (portFree) {
+        const settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
         const pathToChrome = settings.get('chromePath') as string || chromePathFromLaunchConfig || utils.getPathToChrome();
 
         if (!pathToChrome || !utils.existsSync(pathToChrome)) {
             vscode.window.showErrorMessage('Chrome was not found. Chrome must be installed for this extension to function. If you have Chrome installed at a custom location you can specify it in the \'chromePath\' setting.');
+            telemetryReporter.sendTelemetryEvent('launch/error/chrome_not_found', telemetryProps);
             return;
         }
 
@@ -73,16 +91,22 @@ async function launch(context: vscode.ExtensionContext, launchUrl?: string, chro
 
     if (!target || !target.webSocketDebuggerUrl || target.webSocketDebuggerUrl == '') {
         vscode.window.showErrorMessage(`Could not find the launched Chrome tab: (${launchUrl}).`);
-        attach(context);
+        telemetryReporter.sendTelemetryEvent('launch/error/tab_not_found', telemetryProps);
+        attach(context, viaConfig);
     } else {
-        DevToolsPanel.createOrShow(context.extensionPath, target.webSocketDebuggerUrl);
+        DevToolsPanel.createOrShow(context, target.webSocketDebuggerUrl);
     }
 }
 
-async function attach(context: vscode.ExtensionContext) {
-    const responseArray = await getListOfTargets();
+async function attach(context: vscode.ExtensionContext, viaConfig: boolean) {
+    const telemetryProps = { viaConfig: `${viaConfig}` };
+    telemetryReporter.sendTelemetryEvent('attach', telemetryProps);
 
+    const { hostname, port } = getSettings();
+    const responseArray = await getListOfTargets(hostname, port);
     if (Array.isArray(responseArray)) {
+        telemetryReporter.sendTelemetryEvent('attach/list', telemetryProps, { targetCount: responseArray.length });
+
         const items: QuickPickItem[] = [];
 
         responseArray.forEach(i => {
@@ -92,56 +116,86 @@ async function attach(context: vscode.ExtensionContext) {
 
         vscode.window.showQuickPick(items).then((selection) => {
             if (selection) {
-                DevToolsPanel.createOrShow(context.extensionPath, selection.detail as string);
+                DevToolsPanel.createOrShow(context, selection.detail as string);
             }
         });
+    } else {
+        telemetryReporter.sendTelemetryEvent('attach/error/no_json_array', telemetryProps);
+    }
+}
+
+function getSettings(): { hostname: string, port: number } {
+    const settings = vscode.workspace.getConfiguration('vscode-devtools-for-chrome');
+    const hostname = settings.get('hostname') as string || 'localhost';
+    const port = settings.get('port') as number || 9222;
+
+    return { hostname, port };
+}
+
+function getPackageInfo(context: vscode.ExtensionContext): IPackageInfo {
+    const extensionPackage = require(context.asAbsolutePath('./package.json'));
+    if (extensionPackage) {
+        return {
+            name: extensionPackage.name,
+            version: extensionPackage.version,
+            aiKey: extensionPackage.aiKey
+        };
     }
+    return undefined;
 }
 
-async function getListOfTargets(): Promise<Array<any>> {
+async function getListOfTargets(hostname: string, port: number): Promise<Array<any>> {
     const checkDiscoveryEndpoint = (url: string) => {
         return utils.getURL(url, { headers: { Host: 'localhost' } });
     };
 
     const jsonResponse = await checkDiscoveryEndpoint(`http://${hostname}:${port}/json/list`)
         .catch(() => checkDiscoveryEndpoint(`http://${hostname}:${port}/json`));
 
-    return JSON.parse(jsonResponse);
+    let result: Array<string>;
+    try {
+        result = JSON.parse(jsonResponse);
+    } catch (ex) {
+        result = undefined;
+    }
+    return result;
 }
 
 class DevToolsPanel {
     private static currentPanel: DevToolsPanel;
     private readonly _panel: vscode.WebviewPanel;
+    private readonly _context: vscode.ExtensionContext;
     private readonly _extensionPath: string;
     private readonly _targetUrl: string;
     private _socket: WebSocket = undefined;
     private _isConnected: boolean = false;
     private _messages: any[] = [];
     private _disposables: vscode.Disposable[] = [];
 
-    public static createOrShow(extensionPath: string, targetUrl: string) {
-        const column = vscode.window.activeTextEditor ? vscode.window.activeTextEditor.viewColumn : undefined;
+    public static createOrShow(context: vscode.ExtensionContext, targetUrl: string) {
+        const column = vscode.ViewColumn.Beside;
 
         if (DevToolsPanel.currentPanel) {
             DevToolsPanel.currentPanel._panel.reveal(column);
         } else {
-            const panel = vscode.window.createWebviewPanel('devtools-for-chrome', 'DevTools', column || vscode.ViewColumn.Two, {
+            const panel = vscode.window.createWebviewPanel('devtools-for-chrome', 'DevTools', column, {
                 enableScripts: true,
                 enableCommandUris: true,
                 retainContextWhenHidden: true
             });
 
-            DevToolsPanel.currentPanel = new DevToolsPanel(panel, extensionPath, targetUrl);
+            DevToolsPanel.currentPanel = new DevToolsPanel(panel, context, targetUrl);
         }
     }
 
-    public static revive(panel: vscode.WebviewPanel, extensionPath: string, targetUrl: string) {
-        DevToolsPanel.currentPanel = new DevToolsPanel(panel, extensionPath, targetUrl);
+    public static revive(panel: vscode.WebviewPanel, context: vscode.ExtensionContext, targetUrl: string) {
+        DevToolsPanel.currentPanel = new DevToolsPanel(panel, context, targetUrl);
     }
 
-    private constructor(panel: vscode.WebviewPanel, extensionPath: string, targetUrl: string) {
+    private constructor(panel: vscode.WebviewPanel, context: vscode.ExtensionContext, targetUrl: string) {
         this._panel = panel;
-        this._extensionPath = extensionPath;
+        this._context = context;
+        this._extensionPath = context.extensionPath;
         this._targetUrl = targetUrl;
 
         this._update();
@@ -181,18 +235,28 @@ class DevToolsPanel {
     private _disposeSocket() {
         if (this._socket) {
             // Reset the socket since the devtools have been reloaded
-            this._socket.onerror = undefined;
+            telemetryReporter.sendTelemetryEvent('websocket/dispose');
             this._socket.onopen = undefined;
-            this._socket.onclose = undefined;
             this._socket.onmessage = undefined;
+            this._socket.onerror = undefined;
+            this._socket.onclose = undefined;
             this._socket.close();
             this._socket = undefined;
         }
     }
 
     private _onMessageFromWebview(message: string) {
         if (message === 'ready') {
+            if (this._socket) {
+                telemetryReporter.sendTelemetryEvent('websocket/reconnect');
+            }
             this._disposeSocket();
+        } else if (message.substr(0, 10) === 'telemetry:') {
+            return this._sendTelemetryMessage(message.substr(10));
+        } else if (message.substr(0, 9) === 'getState:') {
+            return this._getDevtoolsState();
+        } else if (message.substr(0, 9) === 'setState:') {
+            return this._setDevtoolsState(message.substr(9));
         }
 
         if (!this._socket) {
@@ -212,22 +276,16 @@ class DevToolsPanel {
 
         // Create the websocket
         this._socket = new WebSocket(url);
-        this._socket.onerror = this._onError.bind(this);
         this._socket.onopen = this._onOpen.bind(this);
         this._socket.onmessage = this._onMessage.bind(this);
+        this._socket.onerror = this._onError.bind(this);
         this._socket.onclose = this._onClose.bind(this);
     }
 
-    private _onError() {
-        if (this._isConnected) {
-            // Tell the devtools that there was a connection error
-            this._panel.webview.postMessage('error');
-        }
-    }
-
     private _onOpen() {
         this._isConnected = true;
         // Tell the devtools that the real websocket was opened
+        telemetryReporter.sendTelemetryEvent('websocket/open');
         this._panel.webview.postMessage('open');
 
         if (this._socket) {
@@ -246,14 +304,48 @@ class DevToolsPanel {
         }
     }
 
+    private _onError() {
+        if (this._isConnected) {
+            // Tell the devtools that there was a connection error
+            telemetryReporter.sendTelemetryEvent('websocket/error');
+            this._panel.webview.postMessage('error');
+        }
+    }
+
     private _onClose() {
         if (this._isConnected) {
             // Tell the devtools that the real websocket was closed
+            telemetryReporter.sendTelemetryEvent('websocket/close');
             this._panel.webview.postMessage('close');
         }
         this._isConnected = false;
     }
 
+    private _sendTelemetryMessage(message: string) {
+        const telemetry = JSON.parse(message);
+        telemetryReporter.sendTelemetryEvent(telemetry.name, telemetry.properties, telemetry.metrics);
+    }
+
+    private _getDevtoolsState() {
+        const allPrefsKey = 'devtools-preferences';
+        const allPrefs: any = this._context.workspaceState.get(allPrefsKey) ||
+        {
+            uiTheme: '"dark"',
+            screencastEnabled: false
+        };
+        this._panel.webview.postMessage(`preferences:${JSON.stringify(allPrefs)}`);
+    }
+
+    private _setDevtoolsState(state: string) {
+        // Parse the preference from the message and store it
+        const pref = JSON.parse(state) as { name: string, value: string };
+
+        const allPrefsKey = 'devtools-preferences';
+        const allPrefs: any = this._context.workspaceState.get(allPrefsKey) || {};
+        allPrefs[pref.name] = pref.value;
+        this._context.workspaceState.update(allPrefsKey, allPrefs);
+    }
+
     private _update() {
         this._panel.webview.html = this._getHtmlForWebview();
     }
@@ -271,9 +363,10 @@ class DevToolsPanel {
             <head>
                 <meta http-equiv="content-type" content="text/html; charset=utf-8">
                 <style>
-                    html, body {
+                    html, body, iframe {
                         height: 100%;
                         width: 100%;
+                        position: absolute;
                         padding: 0;
                         margin: 0;
                         overflow: hidden;
@@ -285,4 +378,18 @@ class DevToolsPanel {
             </html>
             `;
     }
+}
+
+class DebugTelemetryReporter extends TelemetryReporter {
+    constructor() {
+        super('extensionId', 'extensionVersion', 'key');
+    }
+
+    public sendTelemetryEvent(name: string, properties?: any, measurements?: any) {
+        console.log(`${name}: ${JSON.stringify(properties)}, ${JSON.stringify(properties)}`);
+    }
+
+    public dispose(): Promise<any> {
+        return Promise.resolve();
+    }
 }