diff --git a/src/espIdf/size/idfSize.ts b/src/espIdf/size/idfSize.ts index 34418fc6b..8becd00af 100644 --- 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 index a6e166445..4d15c290b 100644 --- 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 ` diff --git a/src/espIdf/size/types.ts b/src/espIdf/size/types.ts new file mode 100644 index 000000000..9cc6fa9fc --- /dev/null +++ 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 index 7a5f06b60..1a5c38f06 100644 --- 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 new file mode 100644 index 000000000..661b400bf --- /dev/null +++ b/src/views/newSize/App.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/views/newSize/components/ArchiveItem.vue b/src/views/newSize/components/ArchiveItem.vue new file mode 100644 index 000000000..68c9858c0 --- /dev/null +++ b/src/views/newSize/components/ArchiveItem.vue @@ -0,0 +1,76 @@ + + + diff --git a/src/views/newSize/components/ArchiveItemColumn.vue b/src/views/newSize/components/ArchiveItemColumn.vue new file mode 100644 index 000000000..b74862843 --- /dev/null +++ b/src/views/newSize/components/ArchiveItemColumn.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/views/newSize/components/FileTable.vue b/src/views/newSize/components/FileTable.vue new file mode 100644 index 000000000..842f0a6ba --- /dev/null +++ b/src/views/newSize/components/FileTable.vue @@ -0,0 +1,86 @@ + + + diff --git a/src/views/newSize/components/Header.vue b/src/views/newSize/components/Header.vue new file mode 100644 index 000000000..4059269c7 --- /dev/null +++ b/src/views/newSize/components/Header.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/views/newSize/components/Overview.vue b/src/views/newSize/components/Overview.vue new file mode 100644 index 000000000..91ac528c0 --- /dev/null +++ b/src/views/newSize/components/Overview.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/views/newSize/components/ProgressBar.vue b/src/views/newSize/components/ProgressBar.vue new file mode 100644 index 000000000..25540d3bf --- /dev/null +++ b/src/views/newSize/components/ProgressBar.vue @@ -0,0 +1,52 @@ + + + diff --git a/src/views/newSize/components/SizeFilter.vue b/src/views/newSize/components/SizeFilter.vue new file mode 100644 index 000000000..f2992148b --- /dev/null +++ b/src/views/newSize/components/SizeFilter.vue @@ -0,0 +1,37 @@ + + + diff --git a/src/views/newSize/main.ts b/src/views/newSize/main.ts new file mode 100644 index 000000000..1c635d67c --- /dev/null +++ b/src/views/newSize/main.ts @@ -0,0 +1,42 @@ +/* + * Project: ESP-IDF VSCode Extension + * File Created: Monday, 21st October 2024 3:23:05 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. + */ + +import { createApp } from "vue"; +import { createPinia } from "pinia"; +import App from "./App.vue"; +import { useNewSizeStore } from "./store"; + +const app = createApp(App); +const pinia = createPinia(); +app.use(pinia); +app.mount("#app"); + +const store = useNewSizeStore(); + +window.addEventListener("message", (m: any) => { + const msg = m.data; + switch (msg.command) { + case "initialLoad": + store.archives = msg.archives; + store.overviewData = msg.overview; + store.setFiles(msg.files); + break; + default: + break; + } +}); \ No newline at end of file diff --git a/src/views/newSize/store.ts b/src/views/newSize/store.ts new file mode 100644 index 000000000..ff5d57eab --- /dev/null +++ b/src/views/newSize/store.ts @@ -0,0 +1,97 @@ +/* + * Project: ESP-IDF VSCode Extension + * File Created: Monday, 21st October 2024 3:23:34 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. + */ + +import { defineStore } from "pinia"; +import { ref, Ref } from "vue"; +import { IDFSizeArchive, IDFSizeOverview } from "../../espIdf/size/types"; + +declare var acquireVsCodeApi: any; +let vscode: any; +try { + vscode = acquireVsCodeApi(); +} catch (error) { + console.error(error); +} + +const SEC = 1000; + +export const useNewSizeStore = defineStore("newSize", () => { + const archives: Ref<{ [key: string]: IDFSizeArchive }> = ref({}); + const isFlashing: Ref = ref(false); + const isOverviewEnabled: Ref = ref(true); + const overviewData: Ref = ref({ + version: "", + layout: [], + }); + const searchText: Ref = ref(""); + + function flashClicked() { + if (vscode) { + isFlashing.value = true; + setTimeout(() => { + isFlashing.value = false; + }, 10 * SEC); + vscode.postMessage({ + command: "flash", + }); + } + } + + function requestInitialValues() { + vscode.postMessage({ + command: "requestInitialValues", + }); + } + + function setFiles(files) { + Object.keys(files).forEach((file) => { + const lastColonIndex = file.lastIndexOf(":"); + const archiveName = file.substring(0, lastColonIndex); + const fileName = file.substring(lastColonIndex + 1); + if (archives.value[archiveName] && !archives.value[archiveName].files) { + archives.value[archiveName].files = {}; + } + archives.value[archiveName].files[fileName] = files[file]; + }); + Object.keys(archives.value).forEach((archive) => { + archives.value[archive].isFileInfoVisible = false; + }); + } + + function toggleArchiveFileInfoTable(archiveName: string) { + Object.keys(archives.value).forEach((archive) => { + let toggleVisibility = false; + if (archive === archiveName) { + toggleVisibility = !archives.value[archive].isFileInfoVisible; + } + archives.value[archive].isFileInfoVisible = toggleVisibility; + }); + } + + return { + archives, + isFlashing, + isOverviewEnabled, + overviewData, + searchText, + flashClicked, + setFiles, + toggleArchiveFileInfoTable, + requestInitialValues, + }; +}); diff --git a/webpack.config.js b/webpack.config.js index 820735d65..f4f658055 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -94,6 +94,7 @@ const webViewConfig = { ), examples: path.resolve(__dirname, "src", "views", "examples", "main.ts"), size: path.resolve(__dirname, "src", "views", "size", "main.ts"), + newSize: path.resolve(__dirname, "src", "views", "newSize", "main.ts"), tracing: path.resolve(__dirname, "src", "views", "tracing", "main.ts"), menuconfig: path.resolve( __dirname,