Add side mode to webview

src/commands/show.ts

@@ -12,6 +12,7 @@ import { IProblem, IQuickItemEx, languages, ProblemState } from "../shared";
 import { DialogOptions, DialogType, promptForOpenOutputChannel, promptForSignIn } from "../utils/uiUtils";
 import { selectWorkspaceFolder } from "../utils/workspaceUtils";
 import * as wsl from "../utils/wslUtils";
+import { leetCodePreviewProvider } from "../webview/leetCodePreviewProvider";
 import { leetCodeSolutionProvider } from "../webview/leetCodeSolutionProvider";
 import * as list from "./list";
 
@@ -111,7 +112,10 @@ async function showProblemInternal(node: IProblem): Promise<void> {
 
         const originFilePath: string = await leetCodeExecutor.showProblem(node, language, outDir);
         const filePath: string = wsl.useWsl() ? await wsl.toWinPath(originFilePath) : originFilePath;
-        await vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false, viewColumn: vscode.ViewColumn.One });
+        await Promise.all([
+            vscode.window.showTextDocument(vscode.Uri.file(filePath), { preview: false, viewColumn: vscode.ViewColumn.One }),
+            leetCodePreviewProvider.show(node, true),
+        ]);
     } catch (error) {
         await promptForOpenOutputChannel("Failed to show the problem. Please open the output channel for details.", DialogType.error);
     }

src/webview/LeetCodeWebview.ts

@@ -1,7 +1,7 @@
 // Copyright (c) jdneo. All rights reserved.
 // Licensed under the MIT license.
 
-import { ConfigurationChangeEvent, Disposable, ViewColumn, WebviewPanel, window, workspace } from "vscode";
+import { commands, ConfigurationChangeEvent, Disposable, ViewColumn, WebviewPanel, window, workspace } from "vscode";
 import { markdownEngine } from "./markdownEngine";
 
 export abstract class LeetCodeWebview implements Disposable {
@@ -30,7 +30,14 @@ export abstract class LeetCodeWebview implements Disposable {
             workspace.onDidChangeConfiguration(this.onDidChangeConfiguration, this, this.listeners);
         } else {
             this.panel.title = title;
-            this.panel.reveal(viewColumn, preserveFocus);
+            if (viewColumn === ViewColumn.Two) {
+                // Make sure second group exists. See vscode#71608 issue
+                commands.executeCommand("workbench.action.focusSecondEditorGroup").then(() => {
+                    this.panel!.reveal(viewColumn, preserveFocus);
+                });
+            } else {
+                this.panel.reveal(viewColumn, preserveFocus);
+            }
         }
         this.panel.webview.html = this.getWebviewContent();
     }

src/webview/leetCodePreviewProvider.ts

@@ -11,19 +11,40 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
 
     private node: IProblem;
     private description: IDescription;
+    private sideMode: boolean = false;
 
-    public async show(node: IProblem): Promise<void> {
+    public isSideMode(): boolean {
+        return this.sideMode;
+    }
+
+    public async show(node: IProblem, isSideMode: boolean = false): Promise<void> {
         this.description = this.parseDescription(await leetCodeExecutor.getDescription(node), node);
         this.node = node;
+        this.sideMode = isSideMode;
         this.showWebviewInternal();
+        if (this.sideMode) {
+            // Hide the side bar for better view area
+            commands.executeCommand("workbench.action.focusSideBar").then(() => {
+                commands.executeCommand("workbench.action.toggleSidebarVisibility");
+            });
+        }
     }
 
     protected getWebviewOption(): ILeetCodeWebviewOption {
-        return {
-            viewType: "leetcode.preview",
-            title: `${this.node.name}: Preview`,
-            viewColumn: ViewColumn.One,
-        };
+        if (!this.sideMode) {
+            return {
+                viewType: "leetcode.preview",
+                title: `${this.node.name}: Preview`,
+                viewColumn: ViewColumn.One,
+            };
+        } else {
+            return {
+                viewType: "leetcode.preview",
+                title: "Description",
+                viewColumn: ViewColumn.Two,
+                preserveFocus: true,
+            };
+        }
     }
 
     protected getWebviewContent(): string {
@@ -84,18 +105,18 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
             <html>
             <head>
                 ${markdownEngine.getStyles()}
-                ${button.style}
+                ${!this.sideMode ? button.style : ""}
             </head>
             <body>
                 ${head}
                 ${info}
                 ${tags}
                 ${companies}
                 ${body}
-                ${button.element}
+                ${!this.sideMode ? button.element : ""}
                 <script>
                     const vscode = acquireVsCodeApi();
-                    ${button.script}
+                    ${!this.sideMode ? button.script : ""}
                 </script>
             </body>
             </html>
@@ -106,6 +127,7 @@ class LeetCodePreviewProvider extends LeetCodeWebview {
         super.onDidDisposeWebview();
         delete this.node;
         delete this.description;
+        this.sideMode = false;
     }
 
     protected async onDidReceiveMessage(message: IWebViewMessage): Promise<void> {

src/webview/leetCodeSolutionProvider.ts

@@ -3,24 +3,36 @@
 
 import { ViewColumn } from "vscode";
 import { IProblem } from "../shared";
+import { leetCodePreviewProvider } from "./leetCodePreviewProvider";
 import { ILeetCodeWebviewOption, LeetCodeWebview } from "./LeetCodeWebview";
 import { markdownEngine } from "./markdownEngine";
 
 class LeetCodeSolutionProvider extends LeetCodeWebview {
 
     private solution: Solution;
+    private sideMode: boolean = false;
 
     public async show(solutionString: string, problem: IProblem): Promise<void> {
         this.solution = this.parseSolution(solutionString, problem);
+        this.sideMode = leetCodePreviewProvider.isSideMode();
         this.showWebviewInternal();
     }
 
     protected getWebviewOption(): ILeetCodeWebviewOption {
-        return {
-            viewType: "leetcode.solution",
-            title: `${this.solution.problem}: Solution`,
-            viewColumn: ViewColumn.One,
-        };
+        if (!this.sideMode) {
+            return {
+                viewType: "leetcode.solution",
+                title: `${this.solution.problem}: Solution`,
+                viewColumn: ViewColumn.One,
+            };
+        } else {
+            return {
+                viewType: "leetcode.solution",
+                title: "Solution",
+                viewColumn: ViewColumn.Two,
+                preserveFocus: true,
+            };
+        }
     }
 
     protected getWebviewContent(): string {
@@ -55,6 +67,7 @@ class LeetCodeSolutionProvider extends LeetCodeWebview {
     protected onDidDisposeWebview(): void {
         super.onDidDisposeWebview();
         delete this.solution;
+        this.sideMode = false;
     }
 
     private parseSolution(raw: string, problem: IProblem): Solution {