Update query results to use VS Code's new web view API (#1111)

README.md

@@ -221,7 +221,8 @@ See [customize options] and [manage connection profiles] for more details.
     "mssql.format.placeCommasBeforeNextStatement": false,
     "mssql.format.placeSelectStatementReferencesOnNewLine": false,
     "mssql.applyLocalization": false,
-    "mssql.query.displayBitAsNumber": true
+    "mssql.query.displayBitAsNumber": true,
+    "mssql.persistQueryResultTabs": false
 }
 ```
 

appveyor.yml

@@ -1,7 +1,7 @@
 environment:
   nodejs_version: "6.9.1"
   # Temporary Code version due to https://github.com/Microsoft/vscode-extension-vscode/issues/64
-  CODE_VERSION: 1.17.0
+  CODE_VERSION: 1.23.0
 
 
 # safelist

localization/xliff/enu/localizedPackage.json.enu.xlf

@@ -200,6 +200,9 @@
         <trans-unit id="mssql.intelliSense.lowerCaseSuggestions">
             <source xml:lang="en">Should IntelliSense suggestions be lowercase</source>
         </trans-unit>
+        <trans-unit id="mssql.persistQueryResultTabs">
+            <source xml:lang="en">Should query result selections and scroll positions be saved when switching tabs (may impact performance)</source>
+        </trans-unit>
     </body>
   </file>
 </xliff>

package.json

@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/Microsoft/vscode-mssql/blob/master/README.md",
   "engines": {
-    "vscode": "^1.17.0"
+    "vscode": "^1.23.0"
   },
   "categories": [
     "Languages",
@@ -583,6 +583,12 @@
           "default": false,
           "description": "%mssql.intelliSense.lowerCaseSuggestions%",
           "scope": "window"
+        },
+        "mssql.persistQueryResultTabs": {
+          "type": "boolean",
+          "default": false,
+          "description": "%mssql.persistQueryResultTabs%",
+          "scope": "window"
         }
       }
     }

package.nls.json

@@ -64,5 +64,6 @@
 "mssql.intelliSense.enableErrorChecking":"Should IntelliSense error checking be enabled",
 "mssql.intelliSense.enableSuggestions":"Should IntelliSense suggestions be enabled",
 "mssql.intelliSense.enableQuickInfo":"Should IntelliSense quick info be enabled",
-"mssql.intelliSense.lowerCaseSuggestions":"Should IntelliSense suggestions be lowercase"
+"mssql.intelliSense.lowerCaseSuggestions":"Should IntelliSense suggestions be lowercase",
+"mssql.persistQueryResultTabs":"Should query result selections and scroll positions be saved when switching tabs (may impact performance)"
 }

src/constants/constants.ts

@@ -78,6 +78,7 @@ export const sqlToolsServiceDownloadUrlConfigKey = 'downloadUrl';
 export const extConfigResultFontFamily = 'resultsFontFamily';
 export const extConfigResultFontSize = 'resultsFontSize';
 export const configApplyLocalization = 'applyLocalization';
+export const configPersistQueryResultTabs = 'persistQueryResultTabs';
 
 // ToolsService Constants
 export const serviceInstallingTo = 'Installing SQL tools service to';

src/controllers/mainController.ts

@@ -155,8 +155,6 @@ export default class MainController implements vscode.Disposable {
 
                 // Init content provider for results pane
                 self._outputContentProvider = new SqlOutputContentProvider(self._context, self._statusview);
-                let registration = vscode.workspace.registerTextDocumentContentProvider(SqlOutputContentProvider.providerName, self._outputContentProvider);
-                self._context.subscriptions.push(registration);
 
                 // Init connection manager and connection MRU
                 self._connectionMgr = new ConnectionManager(self._context, self._statusview, self._prompter);

src/models/sqlOutputContentProvider.ts

@@ -30,7 +30,7 @@ class ResultsConfig implements Interfaces.IResultsConfig {
     messagesDefaultOpen: boolean;
 }
 
-export class SqlOutputContentProvider implements vscode.TextDocumentContentProvider {
+export class SqlOutputContentProvider {
     // CONSTANTS ///////////////////////////////////////////////////////////
     public static providerName = 'tsqloutput';
     public static providerUri = vscode.Uri.parse('tsqloutput://');
@@ -40,6 +40,7 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
     private _service: LocalWebService;
     private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
     private _vscodeWrapper: VscodeWrapper;
+    private _resultsPanes = new Map<string, vscode.WebviewPanel>();
 
     // CONSTRUCTOR /////////////////////////////////////////////////////////
     constructor(context: vscode.ExtensionContext, private _statusView: StatusView) {
@@ -339,33 +340,31 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         // Get the active text editor
         let activeTextEditor = this._vscodeWrapper.activeTextEditor;
 
-        // Check if the results window already exists
-        if (!this.doesResultPaneExist(resultsUri)) {
-            // Wrapper tells us where the new results pane should be placed
-            let resultPaneColumn = this.newResultPaneViewColumn(queryUri);
-
-            // Try and Open new window then reset focus back to the editor
-            vscode.commands.executeCommand('vscode.previewHtml', resultsUri, resultPaneColumn, paneTitle).then(() => {
-                // get the result pane text editor to determine which column it was shown in
-                let resultPaneTextEditor = this._vscodeWrapper.visibleEditors.find(
-                    editor => editor.document.uri.toString() === resultsUri);
-
-                // get the result pane column from the text editor
-                if (resultPaneTextEditor !== undefined) {
-                    resultPaneColumn = resultPaneTextEditor.viewColumn;
-                }
+        // Wrapper tells us where the new results pane should be placed
+        let resultPaneColumn = this.newResultPaneViewColumn(queryUri);
 
-                // only reset focus to the text editor if it's in a different column then the results window
-                if (resultPaneColumn !== undefined
-                    && resultPaneColumn !== activeTextEditor.viewColumn) {
-                    this._vscodeWrapper.showTextDocument(activeTextEditor.document, activeTextEditor.viewColumn);
-                }
-            }, err => {
-                // Output to console if an error occurs
-                Utils.logToOutputChannel(err);
+        let config = this._vscodeWrapper.getConfiguration(Constants.extensionConfigSectionName, queryUri);
+        let retainContextWhenHidden = config[Constants.configPersistQueryResultTabs];
+
+        // Check if the results window already exists
+        let panel = this._resultsPanes.get(resultsUri);
+        if (!panel) {
+            panel = vscode.window.createWebviewPanel(resultsUri, paneTitle, resultPaneColumn, {
+                retainContextWhenHidden: retainContextWhenHidden,
+                enableScripts: true
             });
+            this._resultsPanes.set(resultsUri, panel);
         }
-    };
+
+        // Update the results panel's content
+        panel.webview.html = this.provideTextDocumentContent(resultsUri);
+        panel.reveal(resultPaneColumn);
+
+        // Reset focus to the text editor if it's in a different column than the results window
+        if (resultPaneColumn !== activeTextEditor.viewColumn) {
+            this._vscodeWrapper.showTextDocument(activeTextEditor.document, activeTextEditor.viewColumn);
+        }
+    }
 
     public cancelQuery(input: QueryRunner | string): void {
         let self = this;
@@ -465,10 +464,10 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         }, deletionTimeoutTime);
     }
 
-    // Called by VS Code exactly once to load html content in the preview window
-    public provideTextDocumentContent(uri: vscode.Uri): string {
+    // Called exactly once to load html content in the webview
+    public provideTextDocumentContent(uri: string): string {
         // URI needs to be encoded as a component for proper inclusion in a url
-        let encodedUri = encodeURIComponent(uri.toString());
+        let encodedUri = encodeURIComponent(uri);
         console.log(`${LocalWebService.getEndpointUri(Interfaces.ContentType.Root)}?uri=${encodedUri}`);
 
         // Fix for issue #669 "Results Panel not Refreshing Automatically" - always include a unique time
@@ -575,17 +574,6 @@ export class SqlOutputContentProvider implements vscode.TextDocumentContentProvi
         return srcUri.startsWith(SqlOutputContentProvider.providerUri.toString());
     }
 
-    /**
-     * Returns whether or not a result pane with the same URI exists
-     * @param The string value of a Uri.
-     * @return boolean true if pane exists
-     * public for testing purposes
-     */
-    public doesResultPaneExist(resultsUri: string): boolean {
-        let resultPaneURIMatch = this._vscodeWrapper.textDocuments.find(tDoc => tDoc.uri.toString() === resultsUri);
-        return (resultPaneURIMatch !== undefined);
-    }
-
     /**
      * Returns which column should be used for a new result pane
      * @return ViewColumn to be used

test/stubs.ts

@@ -35,6 +35,7 @@ class TestTextEditor implements vscode.TextEditor {
     selections: vscode.Selection[];
     options: vscode.TextEditorOptions;
     viewColumn: vscode.ViewColumn;
+    visibleRanges: vscode.Range[];
 
     edit(callback: (editBuilder: vscode.TextEditorEdit) => void): Thenable<boolean> { return undefined; };
     setDecorations(decorationType: vscode.TextEditorDecorationType, rangesOrOptions: vscode.Range[] | vscode.DecorationOptions[]): void { return undefined; };