Skip to content

Commit fe129b9

Browse files
brianignacio5brianignacio5
authored
[VSC-1472/1207] add new idf size format support (#1330)
* add new idf size format support * fix files under archive in windows
1 parent 120dd40 commit fe129b9

15 files changed

+680
-12
lines changed

‎src/espIdf/size/idfSize.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -60,8 +60,10 @@ export class IDFSize {
6060
) as string;
6161
const version = await utils.getEspIdfFromCMake(espIdfPath);
6262
const formatArgs =
63-
utils.compareVersion(version, "5.1.0") >= 0
64-
? ["--format", "json"]
63+
utils.compareVersion(version, "5.3.0") >= 0
64+
? ["--format", "json2"]
65+
: utils.compareVersion(version, "5.1.0") >= 0
66+
? ["--format", "json"]
6567
: ["--json"];
6668
const overview = await this.idfCommandInvoker([
6769
"idf_size.py",

‎src/espIdf/size/idfSizePanel.ts

+22-10
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,19 @@
22
* Project: ESP-IDF VSCode Extension
33
* File Created: Thursday, 20th June 2019 10:39:58 am
44
* Copyright 2019 Espressif Systems (Shanghai) CO LTD
5-
*
5+
*
66
* Licensed under the Apache License, Version 2.0 (the "License");
77
* you may not use this file except in compliance with the License.
88
* You may obtain a copy of the License at
9-
*
9+
*
1010
* http://www.apache.org/licenses/LICENSE-2.0
11-
*
11+
*
1212
* Unless required by applicable law or agreed to in writing, software
1313
* distributed under the License is distributed on an "AS IS" BASIS,
1414
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1515
* See the License for the specific language governing permissions and
1616
* limitations under the License.
1717
*/
18-
import * as fs from "fs";
1918
import * as path from "path";
2019
import * as vscode from "vscode";
2120
import { Logger } from "../../logger/logger";
@@ -76,14 +75,19 @@ export class IDFSizePanel {
7675
this._panel = panel;
7776
this._extensionPath = extensionPath;
7877
this._webviewData = webviewData;
79-
this.initWebview();
78+
const isNewIdfSize: boolean =
79+
webviewData["overview"] && webviewData["overview"].version;
80+
this.initWebview(isNewIdfSize);
8081
}
8182
private disposeWebview() {
8283
IDFSizePanel.currentPanel = undefined;
8384
}
84-
private initWebview() {
85+
private initWebview(isNewIdfSize: boolean) {
8586
this._panel.iconPath = getWebViewFavicon(this._extensionPath);
86-
this._panel.webview.html = this.getHtmlContent(this._panel.webview);
87+
this._panel.webview.html = this.getHtmlContent(
88+
this._panel.webview,
89+
isNewIdfSize
90+
);
8791
this._panel.onDidDispose(this.disposeWebview, null, this._disposables);
8892
this._panel.webview.onDidReceiveMessage(
8993
(msg) => {
@@ -94,7 +98,7 @@ export class IDFSizePanel {
9498
case "requestInitialValues":
9599
this._panel.webview.postMessage({
96100
command: "initialLoad",
97-
...this._webviewData
101+
...this._webviewData,
98102
});
99103
break;
100104
default:
@@ -110,10 +114,18 @@ export class IDFSizePanel {
110114
);
111115
}
112116

113-
private getHtmlContent(webview: vscode.Webview): string {
117+
private getHtmlContent(
118+
webview: vscode.Webview,
119+
isNewIdfSize: boolean
120+
): string {
114121
const scriptPath = webview.asWebviewUri(
115122
vscode.Uri.file(
116-
path.join(this._extensionPath, "dist", "views", "size-bundle.js")
123+
path.join(
124+
this._extensionPath,
125+
"dist",
126+
"views",
127+
isNewIdfSize ? "newSize-bundle.js" : "size-bundle.js"
128+
)
117129
)
118130
);
119131
return `<!DOCTYPE html>

‎src/espIdf/size/types.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*
2+
* Project: ESP-IDF VSCode Extension
3+
* File Created: Monday, 21st October 2024 3:24:53 pm
4+
* Copyright 2024 Espressif Systems (Shanghai) CO LTD
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
export interface IDFSizeOverviewSectionPart {
20+
size: number;
21+
}
22+
23+
export interface IDFSizeOverviewSection {
24+
name: string;
25+
total: number;
26+
used: number;
27+
free: number;
28+
parts: { [key: string]: IDFSizeOverviewSectionPart };
29+
}
30+
31+
// Archives or files
32+
33+
export interface IDFSizeSection {
34+
size: number;
35+
size_diff: number;
36+
abbrev_name: string;
37+
}
38+
39+
export interface IDFSizeMemoryType {
40+
size: number;
41+
size_diff: number;
42+
sections: { [key: string]: IDFSizeSection };
43+
}
44+
45+
export interface IDFSizeFile {
46+
abbrev_name: string;
47+
size: number;
48+
size_diff: number;
49+
memory_types: { [key: string]: IDFSizeMemoryType };
50+
}
51+
52+
export interface IDFSizeArchive extends IDFSizeFile {
53+
files: { [key: string]: IDFSizeFile };
54+
isFileInfoVisible: boolean;
55+
}
56+
57+
export interface IDFSizeOverview {
58+
version: string;
59+
layout: IDFSizeOverviewSection[];
60+
}

‎src/views/commons/espCommons.scss

+4
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ body.vscode-dark table.is-hoverable tbody tr:not(.is-selected):hover {
5454
background-color: var(--vscode-sideBar-dropBackground);
5555
}
5656

57+
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
58+
background-color: var(--vscode-badge-background);
59+
}
60+
5761
.button {
5862
background-color: var(--vscode-button-background);
5963
border-color: var(--vscode-button-background);

‎src/views/newSize/App.vue

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script setup lang="ts">
2+
import { computed, onMounted } from "vue";
3+
import { useNewSizeStore } from "./store";
4+
import { storeToRefs } from "pinia";
5+
import { IconSearch } from "@iconify-prerendered/vue-codicon";
6+
import Header from "./components/Header.vue";
7+
import Overview from "./components/Overview.vue";
8+
import ProgressBar from "./components/ProgressBar.vue";
9+
import ArchiveItem from "./components/ArchiveItem.vue";
10+
import FileTable from "./components/FileTable.vue";
11+
import SizeFilter from "./components/SizeFilter.vue";
12+
import { IDFSizeArchive } from "../../espIdf/size/types";
13+
14+
const store = useNewSizeStore();
15+
16+
const { archives, isOverviewEnabled, overviewData, searchText } = storeToRefs(
17+
store
18+
);
19+
20+
const filteredArchives = computed<{ [key: string]: IDFSizeArchive }>(() => {
21+
let filteredObj = archives.value;
22+
if (searchText.value !== "") {
23+
filteredObj = {};
24+
Object.keys(archives.value).forEach((archive) => {
25+
// tslint:disable-next-line: max-line-length
26+
if (
27+
archive.toLowerCase().match(searchText.value.toLowerCase()) ||
28+
(archives.value[archive].files &&
29+
Object.keys(archives.value[archive].files).filter((file) =>
30+
file.toLowerCase().match(searchText.value.toLowerCase())
31+
).length > 0)
32+
) {
33+
filteredObj[archive] = archives.value[archive];
34+
}
35+
});
36+
}
37+
return filteredObj;
38+
});
39+
40+
onMounted(() => {
41+
store.requestInitialValues();
42+
});
43+
</script>
44+
45+
<template>
46+
<div id="app">
47+
<Header />
48+
<div class="section no-padding-top">
49+
<div class="container is-mobile">
50+
<SizeFilter />
51+
<div v-if="isOverviewEnabled">
52+
<Overview />
53+
<ProgressBar
54+
v-for="section in overviewData.layout"
55+
:key="section.name"
56+
:name="section.name"
57+
:usedData="section.used"
58+
:totalData="section.total"
59+
/>
60+
</div>
61+
<div v-else>
62+
<div class="field">
63+
<p class="control has-icons-right">
64+
<input
65+
class="input"
66+
type="text"
67+
placeholder="Search"
68+
v-model="searchText"
69+
/>
70+
<span class="icon is-right">
71+
<IconSearch />
72+
</span>
73+
</p>
74+
</div>
75+
<div
76+
v-for="(archiveInfo, archiveName) in filteredArchives"
77+
:key="archiveName"
78+
class="notification is-clipped"
79+
>
80+
<ArchiveItem
81+
:archiveInfo="archiveInfo"
82+
:archiveName="archiveName.toString()"
83+
/>
84+
<div
85+
class="columns"
86+
style="overflow: auto;"
87+
v-if="archiveInfo.files && archiveInfo.isFileInfoVisible"
88+
>
89+
<div class="column">
90+
<FileTable :archiveInfo="archiveInfo" />
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</template>
99+
100+
<style lang="scss">
101+
@import "../commons/espCommons.scss";
102+
</style>

‎src/views/newSize/components/ArchiveItem.vue

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script setup lang="ts">
2+
import {
3+
IconChevronDown,
4+
IconChevronUp,
5+
IconChevronRight,
6+
IconFileZip,
7+
} from "@iconify-prerendered/vue-codicon";
8+
import { useNewSizeStore } from "../store";
9+
import ArchiveItemColumn from "./ArchiveItemColumn.vue";
10+
import { IDFSizeArchive } from "../../../espIdf/size/types";
11+
12+
const store = useNewSizeStore();
13+
14+
defineProps<{
15+
archiveInfo: IDFSizeArchive;
16+
archiveName: string;
17+
}>();
18+
19+
function toggleArchiveFileInfoTable(archiveName: string) {
20+
Object.keys(store.archives).forEach((archive) => {
21+
let toggleVisibility = false;
22+
if (archive === archiveName) {
23+
toggleVisibility = !store.archives[archive]["isFileInfoVisible"];
24+
}
25+
store.archives[archive]["isFileInfoVisible"] = toggleVisibility;
26+
});
27+
}
28+
</script>
29+
30+
<template>
31+
<div
32+
class="columns is-vcentered has-text-right is-mobile"
33+
v-on:click="toggleArchiveFileInfoTable(archiveName)"
34+
:title="archiveName"
35+
>
36+
<div class="column is-hidden-mobile">
37+
<div class="control">
38+
<span class="icon is-large">
39+
<IconFileZip class="is-size-4" />
40+
</span>
41+
</div>
42+
</div>
43+
<div class="column is-3 is-clipped">
44+
<p
45+
class="is-size-7-mobile is-size-6-tablet is-size-5-desktop has-text-weight-medium"
46+
>
47+
{{ archiveInfo.abbrev_name }}
48+
</p>
49+
</div>
50+
<ArchiveItemColumn
51+
v-for="(memType, propName) in archiveInfo.memory_types"
52+
:key="propName"
53+
:archiveMemoryType="memType"
54+
:propName="propName.toString()"
55+
/>
56+
57+
<div v-if="archiveInfo['files']" class="column">
58+
<div v-if="archiveInfo['isFileInfoVisible']">
59+
<span class="icon is-large is-hidden-mobile">
60+
<IconChevronDown />
61+
</span>
62+
<span class="icon is-small is-hidden-tablet">
63+
<IconChevronDown />
64+
</span>
65+
</div>
66+
<div v-else>
67+
<span class="icon is-large is-hidden-mobile">
68+
<IconChevronRight />
69+
</span>
70+
<span class="icon is-small is-hidden-tablet">
71+
<IconChevronRight />
72+
</span>
73+
</div>
74+
</div>
75+
</div>
76+
</template>

‎src/views/newSize/components/ArchiveItemColumn.vue

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
import { IDFSizeMemoryType } from '../../../espIdf/size/types';
3+
4+
defineProps<{
5+
archiveMemoryType: IDFSizeMemoryType;
6+
propName: string;
7+
}>();
8+
9+
function convertToKB(byte: number) {
10+
return typeof byte === "number" ? Math.round(byte / 1024) : 0;
11+
}
12+
</script>
13+
14+
<template>
15+
<div class="column">
16+
<p class="is-size-7-mobile is-size-6-tablet is-size-5-desktop">
17+
{{
18+
archiveMemoryType.size
19+
? convertToKB(archiveMemoryType.size)
20+
: convertToKB(0)
21+
}}<span class="has-text-weight-light is-uppercase">kb</span>
22+
</p>
23+
<p class="heading">{{ propName }}</p>
24+
</div>
25+
</template>

0 commit comments

Comments
 (0)