espressif · brianignacio5 · Oct 29, 2024 · Oct 23, 2024 · Oct 28, 2024
diff --git a/src/espIdf/size/idfSize.ts b/src/espIdf/size/idfSize.ts
@@ -60,8 +60,10 @@ export class IDFSize {
       ) as string;
       const version = await utils.getEspIdfFromCMake(espIdfPath);
       const formatArgs =
-        utils.compareVersion(version, "5.1.0") >= 0
-          ? ["--format", "json"]
+        utils.compareVersion(version, "5.3.0") >= 0
+          ? ["--format", "json2"]
+          : utils.compareVersion(version, "5.1.0") >= 0
+          ? ["--format", "json"] 
           : ["--json"];
       const overview = await this.idfCommandInvoker([
         "idf_size.py",

diff --git a/src/espIdf/size/idfSizePanel.ts b/src/espIdf/size/idfSizePanel.ts
@@ -2,20 +2,19 @@
  * Project: ESP-IDF VSCode Extension
  * File Created: Thursday, 20th June 2019 10:39:58 am
  * Copyright 2019 Espressif Systems (Shanghai) CO LTD
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *    http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as fs from "fs";
 import * as path from "path";
 import * as vscode from "vscode";
 import { Logger } from "../../logger/logger";
@@ -76,14 +75,19 @@ export class IDFSizePanel {
     this._panel = panel;
     this._extensionPath = extensionPath;
     this._webviewData = webviewData;
-    this.initWebview();
+    const isNewIdfSize: boolean =
+      webviewData["overview"] && webviewData["overview"].version;
+    this.initWebview(isNewIdfSize);
   }
   private disposeWebview() {
     IDFSizePanel.currentPanel = undefined;
   }
-  private initWebview() {
+  private initWebview(isNewIdfSize: boolean) {
     this._panel.iconPath = getWebViewFavicon(this._extensionPath);
-    this._panel.webview.html = this.getHtmlContent(this._panel.webview);
+    this._panel.webview.html = this.getHtmlContent(
+      this._panel.webview,
+      isNewIdfSize
+    );
     this._panel.onDidDispose(this.disposeWebview, null, this._disposables);
     this._panel.webview.onDidReceiveMessage(
       (msg) => {
@@ -94,7 +98,7 @@ export class IDFSizePanel {
           case "requestInitialValues":
             this._panel.webview.postMessage({
               command: "initialLoad",
-              ...this._webviewData
+              ...this._webviewData,
             });
             break;
           default:
@@ -110,10 +114,18 @@ export class IDFSizePanel {
     );
   }
 
-  private getHtmlContent(webview: vscode.Webview): string {
+  private getHtmlContent(
+    webview: vscode.Webview,
+    isNewIdfSize: boolean
+  ): string {
     const scriptPath = webview.asWebviewUri(
       vscode.Uri.file(
-        path.join(this._extensionPath, "dist", "views", "size-bundle.js")
+        path.join(
+          this._extensionPath,
+          "dist",
+          "views",
+          isNewIdfSize ? "newSize-bundle.js" : "size-bundle.js"
+        )
       )
     );
     return `<!DOCTYPE html>

diff --git a/src/espIdf/size/types.ts b/src/espIdf/size/types.ts
@@ -0,0 +1,60 @@
+/*
+ * Project: ESP-IDF VSCode Extension
+ * File Created: Monday, 21st October 2024 3:24:53 pm
+ * Copyright 2024 Espressif Systems (Shanghai) CO LTD
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface IDFSizeOverviewSectionPart {
+  size: number;
+}
+
+export interface IDFSizeOverviewSection {
+  name: string;
+  total: number;
+  used: number;
+  free: number;
+  parts: { [key: string]: IDFSizeOverviewSectionPart };
+}
+
+// Archives or files
+
+export interface IDFSizeSection {
+  size: number;
+  size_diff: number;
+  abbrev_name: string;
+}
+
+export interface IDFSizeMemoryType {
+  size: number;
+  size_diff: number;
+  sections: { [key: string]: IDFSizeSection };
+}
+
+export interface IDFSizeFile {
+  abbrev_name: string;
+  size: number;
+  size_diff: number;
+  memory_types: { [key: string]: IDFSizeMemoryType };
+}
+
+export interface IDFSizeArchive extends IDFSizeFile {
+  files: { [key: string]: IDFSizeFile };
+  isFileInfoVisible: boolean;
+}
+
+export interface IDFSizeOverview {
+  version: string;
+  layout: IDFSizeOverviewSection[];
+}
diff --git a/src/views/commons/espCommons.scss b/src/views/commons/espCommons.scss
@@ -54,6 +54,10 @@ body.vscode-dark table.is-hoverable tbody tr:not(.is-selected):hover {
   background-color: var(--vscode-sideBar-dropBackground);
 }
 
+.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
+  background-color: var(--vscode-badge-background);
+}
+
 .button {
   background-color: var(--vscode-button-background);
   border-color: var(--vscode-button-background);

diff --git a/src/views/newSize/App.vue b/src/views/newSize/App.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, onMounted } from "vue";
+import { useNewSizeStore } from "./store";
+import { storeToRefs } from "pinia";
+import { IconSearch } from "@iconify-prerendered/vue-codicon";
+import Header from "./components/Header.vue";
+import Overview from "./components/Overview.vue";
+import ProgressBar from "./components/ProgressBar.vue";
+import ArchiveItem from "./components/ArchiveItem.vue";
+import FileTable from "./components/FileTable.vue";
+import SizeFilter from "./components/SizeFilter.vue";
+import { IDFSizeArchive } from "../../espIdf/size/types";
+
+const store = useNewSizeStore();
+
+const { archives, isOverviewEnabled, overviewData, searchText } = storeToRefs(
+  store
+);
+
+const filteredArchives = computed<{ [key: string]: IDFSizeArchive }>(() => {
+  let filteredObj = archives.value;
+  if (searchText.value !== "") {
+    filteredObj = {};
+    Object.keys(archives.value).forEach((archive) => {
+      // tslint:disable-next-line: max-line-length
+      if (
+        archive.toLowerCase().match(searchText.value.toLowerCase()) ||
+        (archives.value[archive].files &&
+          Object.keys(archives.value[archive].files).filter((file) =>
+            file.toLowerCase().match(searchText.value.toLowerCase())
+          ).length > 0)
+      ) {
+        filteredObj[archive] = archives.value[archive];
+      }
+    });
+  }
+  return filteredObj;
+});
+
+onMounted(() => {
+  store.requestInitialValues();
+});
+</script>
+
+<template>
+  <div id="app">
+    <Header />
+    <div class="section no-padding-top">
+      <div class="container is-mobile">
+        <SizeFilter />
+        <div v-if="isOverviewEnabled">
+          <Overview />
+          <ProgressBar
+            v-for="section in overviewData.layout"
+            :key="section.name"
+            :name="section.name"
+            :usedData="section.used"
+            :totalData="section.total"
+          />
+        </div>
+        <div v-else>
+          <div class="field">
+            <p class="control has-icons-right">
+              <input
+                class="input"
+                type="text"
+                placeholder="Search"
+                v-model="searchText"
+              />
+              <span class="icon is-right">
+                <IconSearch />
+              </span>
+            </p>
+          </div>
+          <div
+            v-for="(archiveInfo, archiveName) in filteredArchives"
+            :key="archiveName"
+            class="notification is-clipped"
+          >
+            <ArchiveItem
+              :archiveInfo="archiveInfo"
+              :archiveName="archiveName.toString()"
+            />
+            <div
+              class="columns"
+              style="overflow: auto;"
+              v-if="archiveInfo.files && archiveInfo.isFileInfoVisible"
+            >
+              <div class="column">
+                <FileTable :archiveInfo="archiveInfo" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import "../commons/espCommons.scss";
+</style>
diff --git a/src/views/newSize/components/ArchiveItem.vue b/src/views/newSize/components/ArchiveItem.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconChevronRight,
+  IconFileZip,
+} from "@iconify-prerendered/vue-codicon";
+import { useNewSizeStore } from "../store";
+import ArchiveItemColumn from "./ArchiveItemColumn.vue";
+import { IDFSizeArchive } from "../../../espIdf/size/types";
+
+const store = useNewSizeStore();
+
+defineProps<{
+  archiveInfo: IDFSizeArchive;
+  archiveName: string;
+}>();
+
+function toggleArchiveFileInfoTable(archiveName: string) {
+  Object.keys(store.archives).forEach((archive) => {
+    let toggleVisibility = false;
+    if (archive === archiveName) {
+      toggleVisibility = !store.archives[archive]["isFileInfoVisible"];
+    }
+    store.archives[archive]["isFileInfoVisible"] = toggleVisibility;
+  });
+}
+</script>
+
+<template>
+  <div
+    class="columns is-vcentered has-text-right is-mobile"
+    v-on:click="toggleArchiveFileInfoTable(archiveName)"
+    :title="archiveName"
+  >
+    <div class="column is-hidden-mobile">
+      <div class="control">
+        <span class="icon is-large">
+          <IconFileZip class="is-size-4" />
+        </span>
+      </div>
+    </div>
+    <div class="column is-3 is-clipped">
+      <p
+        class="is-size-7-mobile is-size-6-tablet is-size-5-desktop has-text-weight-medium"
+      >
+        {{ archiveInfo.abbrev_name }}
+      </p>
+    </div>
+    <ArchiveItemColumn
+      v-for="(memType, propName) in archiveInfo.memory_types"
+      :key="propName"
+      :archiveMemoryType="memType"
+      :propName="propName.toString()"
+    />
+
+    <div v-if="archiveInfo['files']" class="column">
+      <div v-if="archiveInfo['isFileInfoVisible']">
+        <span class="icon is-large is-hidden-mobile">
+          <IconChevronDown />
+        </span>
+        <span class="icon is-small is-hidden-tablet">
+          <IconChevronDown />
+        </span>
+      </div>
+      <div v-else>
+        <span class="icon is-large is-hidden-mobile">
+          <IconChevronRight />
+        </span>
+        <span class="icon is-small is-hidden-tablet">
+          <IconChevronRight />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/views/newSize/components/ArchiveItemColumn.vue b/src/views/newSize/components/ArchiveItemColumn.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { IDFSizeMemoryType } from '../../../espIdf/size/types';
+
+defineProps<{
+  archiveMemoryType: IDFSizeMemoryType;
+  propName: string;
+}>();
+
+function convertToKB(byte: number) {
+  return typeof byte === "number" ? Math.round(byte / 1024) : 0;
+}
+</script>
+
+<template>
+  <div class="column">
+    <p class="is-size-7-mobile is-size-6-tablet is-size-5-desktop">
+      {{
+        archiveMemoryType.size
+          ? convertToKB(archiveMemoryType.size)
+          : convertToKB(0)
+      }}<span class="has-text-weight-light is-uppercase">kb</span>
+    </p>
+    <p class="heading">{{ propName }}</p>
+  </div>
+</template>