diff --git a/src/vs/code/electron-sandbox/processExplorer/media/collapsed.svg b/src/vs/code/electron-sandbox/processExplorer/media/collapsed.svg
deleted file mode 100644
index 3a63808c3585c9c2a36f929e356095ea1cb288ae..0000000000000000000000000000000000000000
--- a/src/vs/code/electron-sandbox/processExplorer/media/collapsed.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/vs/code/electron-sandbox/processExplorer/media/expanded.svg b/src/vs/code/electron-sandbox/processExplorer/media/expanded.svg
deleted file mode 100644
index 75f73adbb02cac2b51267b89dc090015fb9023a2..0000000000000000000000000000000000000000
--- a/src/vs/code/electron-sandbox/processExplorer/media/expanded.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/vs/code/electron-sandbox/processExplorer/media/processExplorer.css b/src/vs/code/electron-sandbox/processExplorer/media/processExplorer.css
index fbb637e83cd352e207351cd12082592f5131c258..add9cdae262e229213bccfd94603fac1897f3572 100644
--- a/src/vs/code/electron-sandbox/processExplorer/media/processExplorer.css
+++ b/src/vs/code/electron-sandbox/processExplorer/media/processExplorer.css
@@ -58,6 +58,7 @@ table {
width: 100%;
table-layout: fixed;
}
+
th[scope='col'] {
vertical-align: bottom;
border-bottom: 1px solid #cccccc;
@@ -65,6 +66,7 @@ th[scope='col'] {
border-top: 1px solid #cccccc;
cursor: default;
}
+
td {
padding: .25rem;
vertical-align: top;
@@ -100,7 +102,6 @@ tbody > tr:hover {
display: none;
}
-img {
- width: 16px;
- margin-right: 4px;
+.header {
+ display: flex;
}
diff --git a/src/vs/code/electron-sandbox/processExplorer/processExplorerMain.ts b/src/vs/code/electron-sandbox/processExplorer/processExplorerMain.ts
index b921e461ca926b5f7579b2771334f7adfb7461c1..1abe745c1d092107c0b9527661d11966c0fb19c3 100644
--- a/src/vs/code/electron-sandbox/processExplorer/processExplorerMain.ts
+++ b/src/vs/code/electron-sandbox/processExplorer/processExplorerMain.ts
@@ -4,6 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/processExplorer';
+import 'vs/base/browser/ui/codicons/codiconStyles'; // make sure codicon css is loaded
import { ElectronService, IElectronService } from 'vs/platform/electron/electron-sandbox/electron';
import { ipcRenderer } from 'vs/base/parts/sandbox/electron-sandbox/globals';
import { localize } from 'vs/nls';
@@ -16,6 +17,7 @@ import { addDisposableListener, addClass } from 'vs/base/browser/dom';
import { DisposableStore } from 'vs/base/common/lifecycle';
import { isRemoteDiagnosticError, IRemoteDiagnosticError } from 'vs/platform/diagnostics/common/diagnostics';
import { MainProcessService } from 'vs/platform/ipc/electron-sandbox/mainProcessService';
+import { CodiconLabel } from 'vs/base/browser/ui/codicons/codiconLabel';
const DEBUG_FLAGS_PATTERN = /\s--(inspect|debug)(-brk|port)?=(\d+)?/;
const DEBUG_PORT_PATTERN = /\s--(inspect|debug)-port=(\d+)/;
@@ -156,15 +158,15 @@ class ProcessExplorer {
return maxProcessId;
}
- private updateSectionCollapsedState(shouldExpand: boolean, body: HTMLElement, twistie: HTMLImageElement, sectionName: string) {
+ private updateSectionCollapsedState(shouldExpand: boolean, body: HTMLElement, twistie: CodiconLabel, sectionName: string) {
if (shouldExpand) {
body.classList.remove('hidden');
this.collapsedStateCache.set(sectionName, false);
- twistie.src = './media/expanded.svg';
+ twistie.text = '$(chevron-down)';
} else {
body.classList.add('hidden');
this.collapsedStateCache.set(sectionName, true);
- twistie.src = './media/collapsed.svg';
+ twistie.text = '$(chevron-right)';
}
}
@@ -191,18 +193,27 @@ class ProcessExplorer {
private renderProcessGroupHeader(sectionName: string, body: HTMLElement, container: HTMLElement) {
const headerRow = document.createElement('tr');
- const data = document.createElement('td');
- data.textContent = sectionName;
- data.colSpan = 4;
- headerRow.appendChild(data);
- const twistie = document.createElement('img');
- this.updateSectionCollapsedState(!this.collapsedStateCache.get(sectionName), body, twistie, sectionName);
- data.prepend(twistie);
+ const headerData = document.createElement('td');
+ headerData.colSpan = 4;
+ headerRow.appendChild(headerData);
+
+ const headerContainer = document.createElement('div');
+ headerContainer.className = 'header';
+ headerData.appendChild(headerContainer);
+
+ const twistieContainer = document.createElement('div');
+ const twistieCodicon = new CodiconLabel(twistieContainer);
+ this.updateSectionCollapsedState(!this.collapsedStateCache.get(sectionName), body, twistieCodicon, sectionName);
+ headerContainer.appendChild(twistieContainer);
+
+ const headerLabel = document.createElement('span');
+ headerLabel.textContent = sectionName;
+ headerContainer.appendChild(headerLabel);
- this.listeners.add(addDisposableListener(data, 'click', (e) => {
+ this.listeners.add(addDisposableListener(headerData, 'click', (e) => {
const isHidden = body.classList.contains('hidden');
- this.updateSectionCollapsedState(isHidden, body, twistie, sectionName);
+ this.updateSectionCollapsedState(isHidden, body, twistieCodicon, sectionName);
}));
container.appendChild(headerRow);