Using webview instead of open a file to show the result (#89)

Author: jdneo

src/commands/submit.ts

@@ -4,7 +4,8 @@
 import * as vscode from "vscode";
 import { leetCodeExecutor } from "../leetCodeExecutor";
 import { leetCodeManager } from "../leetCodeManager";
-import { DialogType, promptForOpenOutputChannel, promptForSignIn, showResultFile } from "../utils/uiUtils";
+import { leetCodeResultProvider } from "../leetCodeResultProvider";
+import { DialogType, promptForOpenOutputChannel, promptForSignIn } from "../utils/uiUtils";
 import { getActivefilePath } from "../utils/workspaceUtils";
 
 export async function submitSolution(uri?: vscode.Uri): Promise<void> {
@@ -20,7 +21,7 @@ export async function submitSolution(uri?: vscode.Uri): Promise<void> {
 
     try {
         const result: string = await leetCodeExecutor.submitSolution(filePath);
-        await showResultFile(result);
+        await leetCodeResultProvider.show(result);
     } catch (error) {
         await promptForOpenOutputChannel("Failed to submit the solution. Please open the output channel for details.", DialogType.error);
     }

src/commands/test.ts

@@ -5,8 +5,9 @@ import * as fse from "fs-extra";
 import * as vscode from "vscode";
 import { leetCodeExecutor } from "../leetCodeExecutor";
 import { leetCodeManager } from "../leetCodeManager";
+import { leetCodeResultProvider } from "../leetCodeResultProvider";
 import { IQuickItemEx, UserStatus } from "../shared";
-import { DialogType, promptForOpenOutputChannel, showFileSelectDialog, showResultFile } from "../utils/uiUtils";
+import { DialogType, promptForOpenOutputChannel, showFileSelectDialog } from "../utils/uiUtils";
 import { getActivefilePath } from "../utils/workspaceUtils";
 
 export async function testSolution(uri?: vscode.Uri): Promise<void> {
@@ -78,7 +79,7 @@ export async function testSolution(uri?: vscode.Uri): Promise<void> {
         if (!result) {
             return;
         }
-        await showResultFile(result);
+        await leetCodeResultProvider.show(result);
     } catch (error) {
         await promptForOpenOutputChannel("Failed to test the solution. Please open the output channel for details.", DialogType.error);
     }

src/extension.ts

@@ -13,6 +13,7 @@ import { leetCodeChannel } from "./leetCodeChannel";
 import { leetCodeExecutor } from "./leetCodeExecutor";
 import { LeetCodeNode, LeetCodeTreeDataProvider } from "./leetCodeExplorer";
 import { leetCodeManager } from "./leetCodeManager";
+import { leetCodeResultProvider } from "./leetCodeResultProvider";
 import { leetCodeStatusBarItem } from "./leetCodeStatusBarItem";
 
 export async function activate(context: vscode.ExtensionContext): Promise<void> {
@@ -26,10 +27,12 @@ export async function activate(context: vscode.ExtensionContext): Promise<void>
     });
 
     const leetCodeTreeDataProvider: LeetCodeTreeDataProvider = new LeetCodeTreeDataProvider(context);
+    leetCodeResultProvider.initialize(context);
 
     context.subscriptions.push(
         leetCodeStatusBarItem,
         leetCodeChannel,
+        leetCodeResultProvider,
         vscode.window.registerTreeDataProvider("leetCodeExplorer", leetCodeTreeDataProvider),
         vscode.languages.registerCodeLensProvider({ scheme: "file" }, codeLensProvider),
         vscode.commands.registerCommand("leetcode.deleteCache", () => cache.deleteCache()),

src/leetCodeResultProvider.ts

@@ -0,0 +1,52 @@
+// Copyright (c) jdneo. All rights reserved.
+// Licensed under the MIT license.
+
+import { Disposable, ExtensionContext, ViewColumn, WebviewPanel, window } from "vscode";
+
+class LeetCodeResultProvider implements Disposable {
+
+    private context: ExtensionContext;
+    private panel: WebviewPanel | undefined;
+
+    public initialize(context: ExtensionContext): void {
+        this.context = context;
+    }
+
+    public async show(result: string): Promise<void> {
+        if (!this.panel) {
+            this.panel = window.createWebviewPanel("leetCode", "LeetCode Results", ViewColumn.Active, {
+                retainContextWhenHidden: true,
+                enableFindWidget: true,
+            });
+
+            this.panel.onDidDispose(() => {
+                this.panel = undefined;
+            }, null, this.context.subscriptions);
+        }
+
+        this.panel.webview.html = await this.provideHtmlContent(result);
+        this.panel.reveal(ViewColumn.Active);
+    }
+
+    public dispose(): void {
+        if (this.panel) {
+            this.panel.dispose();
+        }
+    }
+
+    private async provideHtmlContent(result: string): Promise<string> {
+        return `<!DOCTYPE html>
+            <html lang="en">
+            <head>
+                <meta charset="UTF-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                <title>LeetCode Results</title>
+            </head>
+            <body>
+                <pre>${result.trim()}</pre>
+            </body>
+            </html>`;
+    }
+}
+
+export const leetCodeResultProvider: LeetCodeResultProvider = new LeetCodeResultProvider();

src/utils/uiUtils.ts

@@ -1,10 +1,7 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
-import * as fse from "fs-extra";
 import * as opn from "opn";
-import * as os from "os";
-import * as path from "path";
 import * as vscode from "vscode";
 import { isLeetCodeCnEnabled } from "../commands/plugin";
 import { leetCodeChannel } from "../leetCodeChannel";
@@ -73,13 +70,6 @@ export async function showFileSelectDialog(): Promise<vscode.Uri[] | undefined>
     return await vscode.window.showOpenDialog(options);
 }
 
-export async function showResultFile(result: string): Promise<void> {
-    const resultPath: string = path.join(os.homedir(), ".leetcode", "Result");
-    await fse.ensureFile(resultPath);
-    await fse.writeFile(resultPath, result);
-    await vscode.window.showTextDocument(vscode.Uri.file(resultPath));
-}
-
 export enum DialogType {
     info = "info",
     warning = "warning",