Merge pull request #7 from CodeMooseUS/persist_settings

Persist devtools settings

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,7 +2,7 @@
   "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",

package.json

@@ -94,7 +94,7 @@ async function launch(context: vscode.ExtensionContext, launchUrl?: string, chro
         telemetryReporter.sendTelemetryEvent('launch/error/tab_not_found', telemetryProps);
         attach(context, viaConfig);
     } else {
-        DevToolsPanel.createOrShow(context.extensionPath, target.webSocketDebuggerUrl);
+        DevToolsPanel.createOrShow(context, target.webSocketDebuggerUrl);
     }
 }
 
@@ -116,7 +116,7 @@ async function attach(context: vscode.ExtensionContext, viaConfig: boolean) {
 
         vscode.window.showQuickPick(items).then((selection) => {
             if (selection) {
-                DevToolsPanel.createOrShow(context.extensionPath, selection.detail as string);
+                DevToolsPanel.createOrShow(context, selection.detail as string);
             }
         });
     } else {
@@ -164,36 +164,38 @@ async function getListOfTargets(hostname: string, port: number): Promise<Array<a
 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();
@@ -251,6 +253,10 @@ class DevToolsPanel {
             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) {
@@ -320,6 +326,26 @@ class DevToolsPanel {
         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();
     }

src/extension.ts

@@ -1,20 +1,18 @@
 class ToolsHost {
-    getPreferences(callback: (prefs: any) => void) {
-        // Set some default preferences
-        const prefs: any = {
-            uiTheme: '"dark"',
-            screencastEnabled: false
-        };
+    private _getStateCallback: (prefs: any) => void;
 
-        // TODO: load the preference via the extension and global/workspaceState
-        callback(prefs);
+    public getPreferences(callback: (prefs: any) => void) {
+        // Load the preference via the extension workspaceState
+        this._getStateCallback = callback;
+        window.parent.postMessage('getState:', '*');
     }
 
-    setPreference(name: string, value: string) {
-        // TODO: save the preference via the extension and global/workspaceState
+    public setPreference(name: string, value: string) {
+        // Save the preference via the extension workspaceState
+        window.parent.postMessage(`setState:${JSON.stringify({ name, value })}`, '*');
     }
 
-    recordEnumeratedHistogram(actionName: string, actionCode: number, bucketSize: number) {
+    public recordEnumeratedHistogram(actionName: string, actionCode: number, bucketSize: number) {
         // Inform the extension of the chrome telemetry event
         const telemetry = {
             name: `devtools/${actionName}`,
@@ -28,6 +26,11 @@ class ToolsHost {
         }
         window.parent.postMessage(`telemetry:${JSON.stringify(telemetry)}`, '*');
     }
+
+    public fireGetStateCallback(state: string) {
+        const prefs = JSON.parse(state);
+        this._getStateCallback(prefs);
+    }
 }
 
 class ToolsWebSocket {
@@ -58,7 +61,7 @@ class ToolsWebSocket {
         window.parent.postMessage('ready', '*');
     }
 
-    send(message: string) {
+    public send(message: string) {
         // Forward the message to the extension
         window.parent.postMessage(message, '*');
     }
@@ -89,6 +92,7 @@ devToolsFrame.onload = () => {
         }
     };
 
+    // Add unhandled exception listeners for telemetry
     const reportError = function (name: string, stack: string) {
         const telemetry = {
             name: `devtools/${name}`,
@@ -97,8 +101,6 @@ devToolsFrame.onload = () => {
         };
         dtWindow.parent.postMessage(`telemetry:${JSON.stringify(telemetry)}`, '*');
     };
-
-    // Add unhandled exception listeners for telemetry
     (dtWindow as any).addEventListener('error', (event: ErrorEvent) => {
         const stack = (event && event.error && event.error.stack ? event.error.stack : event.message);
         reportError('error', stack);
@@ -108,3 +110,10 @@ devToolsFrame.onload = () => {
         reportError('unhandledrejection', stack);
     });
 };
+
+// Listen for preferences from the extension
+window.addEventListener('message', (e) => {
+    if (e.data.substr(0, 12) === 'preferences:') {
+        (devToolsFrame.contentWindow as any).InspectorFrontendHost.fireGetStateCallback(e.data.substr(12));
+    }
+});