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);