add: styled list like vscode debug

Author: ilnerdchuck

vscode-cpptools/Extension/src/nucleoweb.ts

@@ -113,38 +113,45 @@ export class NucleoInfo {
 		let processListJson = JSON.parse(this.process_list);
 		console.log(processListJson);
 		let source = `
-		<div>
-			<h3 id="process_title">Processi in esecuzione:</h3>
+		<div class="">
+			<h3 class="toggle">PROCESSI IN ESECUZIONE</h3>
+			<div class="toggable">
 				{{#each process}}
-					<h3 class="p-title"id="p-title-{{@key}}">Processo: {{@key}}</h3>
-					<ul class="p-dump" id="p-list-{{@key}}">
-						<li class="p-item" id="p-item-{{pid}}">Pid: {{pid}}</li>			
-						<li class="p-item" id="p-item-{{livello}}">Livello: {{livello}}</li>			
-						<li class="p-item" id="p-item-{{corpo}}">Corpo: {{corpo}}</li>			
-						<li class="p-item" id="p-item-{{rip}}">Rip: {{rip}}</li>
-						<li class="p-ca-dump-list toggle" >Campi Aggiuntivi: 
-							<ul id="p-ca-list-{{@key}}">
-								{{#each campi_aggiuntivi}}
-									<li class="p-dmp-item">{{@key}}: {{this}}</li>
-								{{/each}}
-							</ul>
-						</li>
-						<li class="p-dump-list toggle" >Pila Dump: 
-							<ul id="p-pd-list">
-								{{#each pila_dmp}}
-									<li class="p-dmp-item">{{@key}}: {{this}}</li>
-								{{/each}}
-							</ul>
-						</li>
-						<li class="p-dump-list toggle" >Registers Dump: 
-							<ul id="p-rd-list">
-								{{#each reg_dmp}}
-									<li class="p-dmp-item">{{@key}}: {{this}}</li>
-								{{/each}}
-							</ul>
-						</li>
-					</ul>
+					<div class="">
+						<h3 class="p-title toggle">[{{@key}}]</h3>
+						<ul class="p-dump toggable">
+							<li class="p-item"><span class="key"> pid = </span> <span class="value">{{pid}}</span></li>			
+							<li class="p-item"><span class="key"> livello = </span> <span class="value">{{livello}}</span></li>			
+							<li class="p-item"><span class="key"> corpo = </span> <span class="value">{{corpo}}</span></li>			
+							<li class="p-item"><span class="key"> rip = </span> <span class="value">{{rip}}</span></li>
+							<li class="p-ca-dump-list" >
+								<div class="toggle">Campi Aggiuntivi</div> 
+								<ul class="toggable">
+									{{#each campi_aggiuntivi}}
+										<li class="p-dmp-item"> <span class="key">{{@key}} =</span> <span class="value">{{this}}</span></li>
+									{{/each}}
+								</ul>
+							</li>
+							<li class="p-dump-list "> 
+								<div class="toggle">Pila Dump</div> 
+								<ul class="toggable">
+									{{#each pila_dmp}}
+										<li class="p-dmp-item"> <span class="key">{{@key}} =</span> <span class="value">{{this}}</span></li>
+									{{/each}}
+								</ul>
+							</li>
+							<li class="p-dump-list"> 
+								<div class="toggle">Registers Dump</div> 
+								<ul class="toggable">
+									{{#each reg_dmp}}
+										<li class="p-dmp-item"> <span class="key">{{@key}} =</span> <span class="value">{{this}}</span></li>
+									{{/each}}
+								</ul>
+							</li>
+						</ul>
+					</div>
 				{{/each}}
+			</div>
 		</div>
 		`;
 

vscode-cpptools/Extension/src/webview/main.js

@@ -5,12 +5,13 @@
 (function () {
     document.addEventListener('DOMContentLoaded', (event) => {
         // Toggle Campi Aggiuntivi
-        const pCaDumpLists = document.querySelectorAll('.toggle');
-        pCaDumpLists.forEach((pCaDumpList) => {
-            pCaDumpList.addEventListener('click', (event) => {
-                event.target.classList.toggle('toggled');
+        const toggles = document.querySelectorAll('.toggle');
+        toggles.forEach((button) => {
+            button.addEventListener('click', (event) => {
+                button.parentNode.classList.toggle('toggled');
             });
         });
     });
 
+    
 }());

vscode-cpptools/Extension/src/webview/reset.css

@@ -1,14 +1,13 @@
 html {
 	box-sizing: border-box;
 	font-size: 13px;
-	font-family: ;
 }
 
 *,
 *:before,
 *:after {
 	box-sizing: inherit;
-	color: white;
+	color: var(--vscode-foreground);
 }
 
 body,
@@ -26,7 +25,23 @@ ul {
 	font-weight: normal;
 }
 
-.toggle:not(.toggled) * {
+li{
+	list-style-type: none;
+}
+
+.key{
+	color: #c586c0;
+}
+
+.value{
+	color: #b5cea8;
+}
+
+.toggable {
+	margin-left: 0.5rem;
+}
+
+*:not(.toggled) > .toggable {
 	display: none;
 }
 
@@ -35,8 +50,8 @@ ul {
 	cursor: pointer; 
 }
 
-.toggle ** {
-    color: white;
+.toggle * {
+    color: var(--vscode-foreground);
 }
 
 img {

vscode-cpptools/Extension/src/webview/vscode.css

@@ -10,7 +10,7 @@ body {
 	padding: 0 var(--container-padding);
 	color: var(--vscode-foreground);
 	font-size: var(--vscode-font-size);
-	font-weight: 200;
+	font-weight: 300;
 	font-family: "monospace";
 	background-color: var(--vscode-editor-background);
 }