development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-06 03:17:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid using dynamic stylesheet in FilesRenderer (#164104)

Browse source 
Avoid creating extra dynamic stylesheet in files renderer

The FilesRenderer currently create a dynamic stylesheet just to pass along one value. This ends up being expensive, as it forces a re-style when the stylesheet is updated

In this case, we can use a css variable to pass along this value instead
This commit is contained in:
Matt Bierner 2022-10-20 12:50:09 -07:00 committed by GitHub
parent bb39eb50fd
commit 2b8c21432e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/vs/workbench/contrib/files/browser/media/explorerviewlet.css
View file

@ -83,6 +83,10 @@
text-decoration: underline; text-decoration: underline;
} }
.explorer-viewlet .explorer-item.align-nest-icon-with-parent-icon {
margin-left: var(--vscode-explorer-align-offset-margin-left);
}
.monaco-workbench.linux .explorer-viewlet .explorer-item .monaco-inputbox, .monaco-workbench.linux .explorer-viewlet .explorer-item .monaco-inputbox,
.monaco-workbench.mac .explorer-viewlet .explorer-item .monaco-inputbox { .monaco-workbench.mac .explorer-viewlet .explorer-item .monaco-inputbox {
height: 22px; height: 22px;

2
src/vs/workbench/contrib/files/browser/views/explorerView.ts
View file

@ -392,7 +392,7 @@ export class ExplorerView extends ViewPane implements IExplorerView {
this._register(explorerLabels); this._register(explorerLabels);
const updateWidth = (stat: ExplorerItem) => this.tree.updateWidth(stat); const updateWidth = (stat: ExplorerItem) => this.tree.updateWidth(stat);
this.renderer = this.instantiationService.createInstance(FilesRenderer, explorerLabels, updateWidth); this.renderer = this.instantiationService.createInstance(FilesRenderer, container, explorerLabels, updateWidth);
this._register(this.renderer); this._register(this.renderer);
this._register(createFileIconThemableTreeContainerScope(container, this.themeService)); this._register(createFileIconThemableTreeContainerScope(container, this.themeService));

13
src/vs/workbench/contrib/files/browser/views/explorerViewer.ts
View file

@ -267,7 +267,6 @@ export interface IFileTemplateData {
export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, FuzzyScore, IFileTemplateData>, IListAccessibilityProvider<ExplorerItem>, IDisposable { export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, FuzzyScore, IFileTemplateData>, IListAccessibilityProvider<ExplorerItem>, IDisposable {
static readonly ID = 'file'; static readonly ID = 'file';
private styler: HTMLStyleElement;
private config: IFilesConfiguration; private config: IFilesConfiguration;
private configListener: IDisposable; private configListener: IDisposable;
private compressedNavigationControllers = new Map<ExplorerItem, CompressedNavigationController>(); private compressedNavigationControllers = new Map<ExplorerItem, CompressedNavigationController>();
@ -276,6 +275,7 @@ export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, Fu
readonly onDidChangeActiveDescendant = this._onDidChangeActiveDescendant.event; readonly onDidChangeActiveDescendant = this._onDidChangeActiveDescendant.event;
constructor( constructor(
container: HTMLElement,
private labels: ResourceLabels, private labels: ResourceLabels,
private updateWidth: (stat: ExplorerItem) => void, private updateWidth: (stat: ExplorerItem) => void,
@IContextViewService private readonly contextViewService: IContextViewService, @IContextViewService private readonly contextViewService: IContextViewService,
@ -287,12 +287,10 @@ export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, Fu
) { ) {
this.config = this.configurationService.getValue<IFilesConfiguration>(); this.config = this.configurationService.getValue<IFilesConfiguration>();
this.styler = DOM.createStyleSheet(); const updateOffsetStyles = () => {
const buildOffsetStyles = () => {
const indent = this.configurationService.getValue<number>('workbench.tree.indent'); const indent = this.configurationService.getValue<number>('workbench.tree.indent');
const offset = Math.max(22 - indent, 0); // derived via inspection const offset = Math.max(22 - indent, 0); // derived via inspection
const rule = `.explorer-viewlet .explorer-item.align-nest-icon-with-parent-icon { margin-left: ${offset}px }`; container.style.setProperty(`--vscode-explorer-align-offset-margin-left`, `${offset}px`);
if (this.styler.innerText !== rule) { this.styler.innerText = rule; }
}; };
this.configListener = this.configurationService.onDidChangeConfiguration(e => { this.configListener = this.configurationService.onDidChangeConfiguration(e => {
@ -300,11 +298,11 @@ export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, Fu
this.config = this.configurationService.getValue(); this.config = this.configurationService.getValue();
} }
if (e.affectsConfiguration('workbench.tree.indent')) { if (e.affectsConfiguration('workbench.tree.indent')) {
buildOffsetStyles(); updateOffsetStyles();
} }
}); });
buildOffsetStyles(); updateOffsetStyles();
} }
getWidgetAriaLabel(): string { getWidgetAriaLabel(): string {
@ -597,7 +595,6 @@ export class FilesRenderer implements ICompressibleTreeRenderer<ExplorerItem, Fu
dispose(): void { dispose(): void {
this.configListener.dispose(); this.configListener.dispose();
this.styler.innerText = '';
} }
} }