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