Enhancement for Webview Theme and Icon (#177)

* Enhance theme for heap & system view tracing

* Added espressif icon for panels

src/coverage/coverageService.ts

@@ -14,7 +14,7 @@
 
 import { sep, join } from "path";
 import * as vscode from "vscode";
-import { appendIdfAndToolsToPath, spawn } from "../utils";
+import { appendIdfAndToolsToPath, extensionContext, spawn } from "../utils";
 import { OutputChannel } from "../logger/outputChannel";
 import { Logger } from "../logger/logger";
 import * as idfConf from "../idfConfiguration";
@@ -198,6 +198,9 @@ export async function previewReport(dirPath: string) {
       "Coverage report",
       column
     );
+    gcovHtmlPanel.iconPath = vscode.Uri.file(
+      join(extensionContext.extensionPath, "media", "espressif_icon.png")
+    );
     gcovHtmlPanel.webview.html = reportHtml;
     gcovHtmlPanel.onDidDispose(() => (gcovHtmlPanel = undefined));
   } catch (e) {

src/espIdf/menuconfig/MenuconfigPanel.ts

@@ -78,6 +78,9 @@ export class MenuConfigPanel {
         path.join(extensionPath, "dist", "views", "menuconfig-bundle.js")
       )
     );
+    this.panel.iconPath = vscode.Uri.file(
+      path.join(extensionPath, "media", "espressif_icon.png")
+    );
     this.panel.webview.html = this.createMenuconfigHtml(scriptPath);
 
     ConfserverProcess.registerListener(this.updateConfigValues);

src/espIdf/size/idfSizePanel.ts

@@ -83,6 +83,9 @@ export class IDFSizePanel {
     IDFSizePanel.currentPanel = undefined;
   }
   private initWebview() {
+    this._panel.iconPath = vscode.Uri.file(
+      path.join(this._extensionPath, "media", "espressif_icon.png")
+    );
     this._panel.webview.html = this.getHtmlContent();
     this._panel.webview.postMessage(this._webviewData);
     this._panel.onDidDispose(this.disposeWebview, null, this._disposables);

src/espIdf/tracing/appTracePanel.ts

@@ -93,6 +93,9 @@ export class AppTracePanel {
   }
 
   private initWebview() {
+    this._panel.iconPath = vscode.Uri.file(
+      path.join(this._extensionPath, "media", "espressif_icon.png")
+    );
     this._panel.webview.html = this.getHtmlContent();
     this.sendCommandToWebview("initialLoad", this._traceData);
     this._panel.onDidDispose(this.disposeWebview, null, this._disposables);

src/espIdf/tracing/system-view/panel.ts

@@ -66,6 +66,9 @@ export class SystemViewPanel {
       null,
       this.disposable
     );
+    this.panel.iconPath = Uri.file(
+      join(extensionPath, "media", "espressif_icon.png")
+    );
     this.initWebView();
     setTimeout(() => {
       this.sendCommandToWebview("initialLoad", this.traceData);

src/examples/ExamplesPanel.ts

@@ -75,6 +75,9 @@ export class ExamplesPlanel {
         path.join(extensionPath, "dist", "views", "examples-bundle.js")
       )
     );
+    this.panel.iconPath = vscode.Uri.file(
+      path.join(extensionPath, "media", "espressif_icon.png")
+    );
     this.panel.webview.html = createExamplesHtml(scriptPath);
 
     this.panel.onDidDispose(() => this.dispose(), null, this.disposables);

src/onboarding/OnboardingPanel.ts

@@ -103,6 +103,9 @@ export class OnBoardingPanel {
         path.join(extensionPath, "dist", "views", "onboarding-bundle.js")
       )
     );
+    this.panel.iconPath = vscode.Uri.file(
+      path.join(extensionPath, "media", "espressif_icon.png")
+    );
     this.panel.webview.html = createOnboardingHtml(scriptPath);
 
     this.panel.onDidDispose(() => this.dispose(), null, this.disposables);

src/views/system-view/App.vue

@@ -96,7 +96,8 @@ export default class App extends Vue {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import "../commons/espCommons.scss";
 html,
 body {
   height: 100vh;

src/views/tracing/components/Plot.vue

@@ -59,6 +59,17 @@ const Plot = Vue.extend({
     };
   },
   mounted() {
+    // Set theme color for plot
+    const style = window.getComputedStyle(document.documentElement);
+    const bgColor = style.getPropertyValue("--vscode-editor-background");
+    const fontColor = style.getPropertyValue("--vscode-editor-foreground");
+
+    this.layout.paper_bgcolor = bgColor;
+    this.layout.plot_bgcolor = bgColor;
+    this.layout.font = {
+      color: fontColor,
+    };
+
     Plotly.newPlot("plot", this.chart, this.layout, this.chartProp);
     const plot = document.getElementById("plot") as any;
     plot.on("plotly_click", (d) => {