feat: Enhance ELF symbol handling and UI improvements

BernardXiong · BernardXiong · commit 09f122c4ef14 · 2025-09-06T15:25:18.000+08:00
- Updated symbol labels to use title case for consistency
- Added hexaddr property to symbols for better address representation
- Improved UI styles for better readability and consistency
- Introduced new CLAUDE.md documentation for ELF symbol processing library
diff --git a/src/cmds/index.ts b/src/cmds/index.ts
@@ -35,7 +35,7 @@ export let cmds: Object = {
         ],
         name: 'Build',
         iconId: 'github-action',
-        label: 'build',
+        label: 'Build',
         isExpanded: true
     },
     Settings : {
@@ -84,7 +84,7 @@ export let cmds: Object = {
         ],
         name: 'Settings',
         iconId: 'gear',
-        label: 'settings',
+        label: 'Settings',
         isExpanded: true
     },
     Packages : {
@@ -112,7 +112,7 @@ export let cmds: Object = {
         ],
         name: 'Packages',
         iconId: 'extensions',
-        label: 'packages',
+        label: 'Packages',
         isExpanded: false
     }
 };
diff --git a/src/dock.ts b/src/dock.ts
@@ -20,18 +20,18 @@ class CmdTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
 
         if (isRTThreadProject() !== true && isRTThreadWorksapce() !== true) {
             // only show Create Project and RT-Thread Setting command when not in RT-Thread project
-            let createProject = new vscode.TreeItem("create project", vscode.TreeItemCollapsibleState.None);
+            let createProject = new vscode.TreeItem("Create Project", vscode.TreeItemCollapsibleState.None);
             createProject.iconPath = new vscode.ThemeIcon("new-folder");
-            createProject.label = "create project";
+            createProject.label = "Create Project";
             createProject.command = {
                 command: "extension.showCreateProject",
                 title: "show create project page",
                 arguments: [],
             };
 
-            let rtSetting = new vscode.TreeItem("rt-thread setting", vscode.TreeItemCollapsibleState.None);
+            let rtSetting = new vscode.TreeItem("RT-Thread Setting", vscode.TreeItemCollapsibleState.None);
             rtSetting.iconPath = new vscode.ThemeIcon("settings-gear");
-            rtSetting.label = "rt-thread setting";
+            rtSetting.label = "RT-Thread Setting";
             rtSetting.command = {
                 command: "extension.showSetting",
                 title: "show rt-thread setting page",
@@ -47,35 +47,26 @@ class CmdTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
                 arguments: [],
             };
 
-            let analyze = new vscode.TreeItem("Analyze", vscode.TreeItemCollapsibleState.None);
-            analyze.iconPath = new vscode.ThemeIcon("search-fuzzy");
-            analyze.label = "Analyze";
-            analyze.command = {
-                command: "extension.showAnalyze",
-                title: "show Analyze page",
-                arguments: [],
-            };
-
-            return [analyze, createProject, rtSetting, about, ];
+            return [createProject, rtSetting, about];
         }
 
         if (!element) {
             let children = [];
             
             // 添加创建工程项
-            let createProject = new vscode.TreeItem("create project", vscode.TreeItemCollapsibleState.None);
+            let createProject = new vscode.TreeItem("Create Project", vscode.TreeItemCollapsibleState.None);
             createProject.iconPath = new vscode.ThemeIcon("new-folder");
-            createProject.label = "create project";
+            createProject.label = "Create Project";
             createProject.command = {
                 command: "extension.showCreateProject",
                 title: "show create project page",
                 arguments: [],
             };
             children.push(createProject);
 
-            let rtSetting = new vscode.TreeItem("rt-thread setting", vscode.TreeItemCollapsibleState.None);
+            let rtSetting = new vscode.TreeItem("RT-Thread Setting", vscode.TreeItemCollapsibleState.None);
             rtSetting.iconPath = new vscode.ThemeIcon("settings-gear");
-            rtSetting.label = "rt-thread setting";
+            rtSetting.label = "RT-Thread Setting";
             rtSetting.command = {
                 command: "extension.showSetting",
                 title: "show rt-thread setting page",
@@ -91,6 +82,16 @@ class CmdTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
                 children.push(item);
             };
 
+            let analyze = new vscode.TreeItem("Symbolic Analysis", vscode.TreeItemCollapsibleState.None);
+            analyze.iconPath = new vscode.ThemeIcon("search-fuzzy");
+            analyze.label = "Symbolic Analysis";
+            analyze.command = {
+                command: "extension.showAnalyze",
+                title: "show symbolic analysis page",
+                arguments: [],
+            };
+            children.push(analyze);
+
             let about = new vscode.TreeItem("About", vscode.TreeItemCollapsibleState.None);
             about.iconPath = new vscode.ThemeIcon("info");
             about.label = "About";
@@ -101,15 +102,6 @@ class CmdTreeDataProvider implements vscode.TreeDataProvider<vscode.TreeItem> {
             };
             children.push(about);
 
-            let analyze = new vscode.TreeItem("Analyze", vscode.TreeItemCollapsibleState.None);
-            analyze.iconPath = new vscode.ThemeIcon("info");
-            analyze.label = "Analyze";
-            analyze.command = {
-                command: "extension.showAnalyze",
-                title: "show analyze page",
-                arguments: [],
-            };
-            children.push(analyze);
 
             return children;
         } else {
diff --git a/src/utils/elf/CLAUDE.md b/src/utils/elf/CLAUDE.md
@@ -0,0 +1 @@
+- 这是一个elf符号处理的库，使用typescript方式编写，分析rtthread.elf，rtthread.map文件，并返回相关符号信息。
diff --git a/src/utils/elf/elf-analyzer.test.ts b/src/utils/elf/elf-analyzer.test.ts
@@ -73,11 +73,13 @@ describe('ElfAnalyzer', () => {
         expect(symbol).toHaveProperty('name');
         expect(symbol).toHaveProperty('type');
         expect(symbol).toHaveProperty('address');
+        expect(symbol).toHaveProperty('hexaddr');
         expect(symbol).toHaveProperty('size');
         
         expect(typeof symbol.name).toBe('string');
         expect(typeof symbol.type).toBe('string');
         expect(typeof symbol.address).toBe('number');
+        expect(typeof symbol.hexaddr).toBe('string');
         expect(typeof symbol.size).toBe('number');
       });
     });
@@ -140,6 +142,7 @@ describe('ElfAnalyzer', () => {
       symbols.forEach(symbol => {
         expect(symbol.address).toBeGreaterThanOrEqual(0);
         expect(Number.isInteger(symbol.address)).toBe(true);
+        expect(symbol.hexaddr).toMatch(/^0x[0-9a-f]+$/i);
       });
     });
   });
diff --git a/src/utils/elf/elf-parser.ts b/src/utils/elf/elf-parser.ts
@@ -214,10 +214,12 @@ export class ElfParser {
       const type = this.getSymbolType(entry.info);
       const sectionName = this.getSectionNameByIndex(entry.shndx);
 
+      const address = Number(entry.value);
       symbols.push({
         name,
         type,
-        address: Number(entry.value),
+        address,
+        hexaddr: '0x' + address.toString(16),
         size,
         section: sectionName
       });
diff --git a/src/utils/elf/handleElf.ts b/src/utils/elf/handleElf.ts
@@ -10,86 +10,86 @@ const SYMBOLS_BY_SECTION_FROM_ELF = "symbolsBySectionFromElf";
 // Test the analyzer with local files
 export async function handleElf(context: vscode.ExtensionContext, panel: vscode.WebviewPanel) {
 
-  // 1. 先判断是否存在工作区
-  if (!vscode.workspace.workspaceFolders) {
-    // 提示用户打开工作区
-    vscode.window.showErrorMessage('请先打开一个项目文件夹或工作区！');
-    return;
-  }
-  const projectPath = vscode.workspace.workspaceFolders![0].uri.fsPath;
-  const elfPath = path.join(projectPath, 'rtthread.elf');
-  const mapPath = path.join(projectPath, 'rtthread.map');
+    // 1. 先判断是否存在工作区
+    if (!vscode.workspace.workspaceFolders) {
+        // 提示用户打开工作区
+        vscode.window.showErrorMessage('请先打开一个项目文件夹或工作区！');
+        return;
+    }
+    const projectPath = vscode.workspace.workspaceFolders![0].uri.fsPath;
+    const elfPath = path.join(projectPath, 'rtthread.elf');
+    const mapPath = path.join(projectPath, 'rtthread.map');
 
-  // Check if files exist
-  const elfExists = fs.existsSync(elfPath);
-  const mapExists = fs.existsSync(mapPath);
+    // Check if files exist
+    const elfExists = fs.existsSync(elfPath);
+    const mapExists = fs.existsSync(mapPath);
 
-  if (!elfExists && !mapExists) {
-    console.log('\nPlease place rtthread.elf and/or rtthread.map in the current directory to test.');
-    vscode.window.showInformationMessage('ELF 或 MAP 文件不存在！请检查当前目录下是否存在 rtthread.elf 和 rtthread.map 文件');
-    return;
-  }
+    if (!elfExists && !mapExists) {
+        console.log('\nPlease place rtthread.elf and/or rtthread.map in the current directory to test.');
+        vscode.window.showInformationMessage('ELF 或 MAP 文件不存在！请检查当前目录下是否存在 rtthread.elf 和 rtthread.map 文件');
+        return;
+    }
 
-  try {
-    const analyzer = new ElfAnalyzer(
-      elfExists ? elfPath : undefined,
-      mapExists ? mapPath : undefined
-    );
+    try {
+        const analyzer = new ElfAnalyzer(
+            elfExists ? elfPath : undefined,
+            mapExists ? mapPath : undefined
+        );
 
-    // Test getSections
-    const sections = analyzer.getSections();
-    const postSections = [];
-    for(let i = 0; i < sections.length; i++) {
-      const section = sections[i];
-      const symbols = analyzer.getSymbolsBySection(section.name);
-      if(symbols.length > 0) {
-        postSections.push(section);
-      }
-    }
-    console.log('\n=== Sections (Top 5) ===', postSections);
-    panel.webview.postMessage({ eventName: SECTIONS, data: postSections, from: 'extension' });
+        // Test getSections
+        const sections = analyzer.getSections();
+        const postSections = [];
+        for (let i = 0; i < sections.length; i++) {
+            const section = sections[i];
+            const symbols = analyzer.getSymbolsBySection(section.name);
+            if (symbols.length > 0) {
+                postSections.push(section);
+            }
+        }
+        console.log('\n=== Sections (Top 5) ===', postSections);
+        panel.webview.postMessage({ eventName: SECTIONS, data: postSections, from: 'extension' });
 
-    // 监听 Webview 发送的消息
-    panel.webview.onDidReceiveMessage(
-      (message) => {
-        // 根据消息中的 command 处理不同逻辑
-        switch (message.eventName) {
-          case SYMBOLS_BY_SECTION:
-            const symbols = analyzer.getSymbolsBySection(message.sectionName);
-            panel.webview.postMessage({ eventName: SYMBOLS_BY_SECTION_FROM_ELF, data: symbols, from: 'extension' });
-          default:
-            break;
+        // 监听 Webview 发送的消息
+        panel.webview.onDidReceiveMessage(
+            (message) => {
+                // 根据消息中的 command 处理不同逻辑
+                switch (message.eventName) {
+                    case SYMBOLS_BY_SECTION:
+                        const symbols = analyzer.getSymbolsBySection(message.sectionName);
+                        panel.webview.postMessage({ eventName: SYMBOLS_BY_SECTION_FROM_ELF, data: symbols, from: 'extension' });
+                    default:
+                        break;
+                }
+            },
+            undefined, // 可选的错误处理
+        );
+
+        // Test getSymbolsBySection
+        if (elfExists) {
+            const sections = analyzer.getSections();
+            const textSection = sections.find(s => s.name === '.text');
+            if (textSection) {
+                const textSymbols = analyzer.getSymbolsBySection('.text');
+            }
         }
-      },
-      undefined, // 可选的错误处理
-    );
 
-    // Test getSymbolsBySection
-    if (elfExists) {
-      const sections = analyzer.getSections();
-      const textSection = sections.find(s => s.name === '.text');
-      if (textSection) {
-        const textSymbols = analyzer.getSymbolsBySection('.text');
-      }
-    }
+        // Test getSymbols by object (if MAP file available)
+        if (mapExists) {
+            const allSymbols = analyzer.getAllSymbols();
+            const uniqueObjects = new Set(allSymbols.map(s => s.object).filter(o => o));
+            const firstObject = Array.from(uniqueObjects)[0];
 
-    // Test getSymbols by object (if MAP file available)
-    if (mapExists) {
-      const allSymbols = analyzer.getAllSymbols();
-      const uniqueObjects = new Set(allSymbols.map(s => s.object).filter(o => o));
-      const firstObject = Array.from(uniqueObjects)[0];
+            if (firstObject) {
+                console.log(`\n=== Symbols in ${firstObject} (Top 5) ===`);
+                const objectSymbols = analyzer.getSymbols(firstObject);
+                console.log(`Found ${objectSymbols.length} symbols:`);
+                objectSymbols.slice(0, 5).forEach(symbol => {
+                    console.log(`  ${symbol.name}: size=${symbol.size}, addr=${symbol.hexaddr}`);
+                });
+            }
+        }
 
-      if (firstObject) {
-        console.log(`\n=== Symbols in ${firstObject} (Top 5) ===`);
-        const objectSymbols = analyzer.getSymbols(firstObject);
-        console.log(`Found ${objectSymbols.length} symbols:`);
-        objectSymbols.slice(0, 5).forEach(symbol => {
-          console.log(`  ${symbol.name}: size=${symbol.size}, addr=0x${symbol.address.toString(16)}`);
-        });
-      }
+    } catch (error) {
+        console.error('Error during analysis:', error);
     }
-
-  } catch (error) {
-    console.error('Error during analysis:', error);
-  }
 }
diff --git a/src/utils/elf/map-parser.ts b/src/utils/elf/map-parser.ts
@@ -45,6 +45,7 @@ export class MapParser {
               name,
               type: 'UNKNOWN',
               address,
+              hexaddr: '0x' + address.toString(16),
               size,
               object: currentObject || undefined
             });
@@ -66,6 +67,7 @@ export class MapParser {
               name,
               type: 'UNKNOWN',
               address,
+              hexaddr: '0x' + address.toString(16),
               size,
               object: currentObject || undefined
             });
diff --git a/src/utils/elf/types.ts b/src/utils/elf/types.ts
@@ -9,6 +9,7 @@ export interface Symbol {
   name: string;
   type: string;
   address: number;
+  hexaddr: string;
   size: number;
   section?: string;
   object?: string;
diff --git a/src/vue/analyze/App.vue b/src/vue/analyze/App.vue
diff --git a/src/vue/analyze/index.html b/src/vue/analyze/index.html

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+- 这是一个elf符号处理的库，使用typescript方式编写，分析rtthread.elf，rtthread.map文件，并返回相关符号信息。`