From 18cd19249be0822224b4a7303d2f03630dc54d9c Mon Sep 17 00:00:00 2001
From: Soumesh Banerjee <soumeshbanerjee@live.com>
Date: Thu, 24 Sep 2020 21:21:50 +0530
Subject: [PATCH] Enhancement for Webview Theme and Icon (#177)

* Enhance theme for heap & system view tracing

* Added espressif icon for panels
---
 src/coverage/coverageService.ts          |  5 ++++-
 src/espIdf/menuconfig/MenuconfigPanel.ts |  3 +++
 src/espIdf/size/idfSizePanel.ts          |  3 +++
 src/espIdf/tracing/appTracePanel.ts      |  3 +++
 src/espIdf/tracing/system-view/panel.ts  |  3 +++
 src/examples/ExamplesPanel.ts            |  3 +++
 src/onboarding/OnboardingPanel.ts        |  3 +++
 src/views/system-view/App.vue            |  3 ++-
 src/views/tracing/components/Plot.vue    | 11 +++++++++++
 9 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/coverage/coverageService.ts b/src/coverage/coverageService.ts
index 014b4e1f2..7a8cbcb68 100644
--- a/src/coverage/coverageService.ts
+++ b/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) {
diff --git a/src/espIdf/menuconfig/MenuconfigPanel.ts b/src/espIdf/menuconfig/MenuconfigPanel.ts
index 9e053f488..741051cf2 100644
--- a/src/espIdf/menuconfig/MenuconfigPanel.ts
+++ b/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);
diff --git a/src/espIdf/size/idfSizePanel.ts b/src/espIdf/size/idfSizePanel.ts
index dbef98854..e93127181 100644
--- a/src/espIdf/size/idfSizePanel.ts
+++ b/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);
diff --git a/src/espIdf/tracing/appTracePanel.ts b/src/espIdf/tracing/appTracePanel.ts
index 447afd5d5..356476102 100644
--- a/src/espIdf/tracing/appTracePanel.ts
+++ b/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);
diff --git a/src/espIdf/tracing/system-view/panel.ts b/src/espIdf/tracing/system-view/panel.ts
index f83bd594f..a5d6def4a 100644
--- a/src/espIdf/tracing/system-view/panel.ts
+++ b/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);
diff --git a/src/examples/ExamplesPanel.ts b/src/examples/ExamplesPanel.ts
index 90d471009..dafc5c6fb 100644
--- a/src/examples/ExamplesPanel.ts
+++ b/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);
diff --git a/src/onboarding/OnboardingPanel.ts b/src/onboarding/OnboardingPanel.ts
index 234dc8a50..f4e24fb54 100644
--- a/src/onboarding/OnboardingPanel.ts
+++ b/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);
diff --git a/src/views/system-view/App.vue b/src/views/system-view/App.vue
index 7b67d3da4..88d7af59f 100644
--- a/src/views/system-view/App.vue
+++ b/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;
diff --git a/src/views/tracing/components/Plot.vue b/src/views/tracing/components/Plot.vue
index ebdf23556..f2ee677d1 100644
--- a/src/views/tracing/components/Plot.vue
+++ b/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) => {