Skip to content

Commit 0707a19

Browse files
alexdimaalexdima
committed
Fixes microsoft/monaco-editor#2140: Do not create a global style sheet unless needed
1 parent 2aa5b9f commit 0707a19

3 files changed

Lines changed: 40 additions & 23 deletions

File tree

‎src/vs/base/browser/ui/codicons/codiconStyles.ts‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,17 @@ import 'vs/css!./codicon/codicon-modifications';
88
import 'vs/css!./codicon/codicon-animations';
99

1010
import { Codicon, iconRegistry } from 'vs/base/common/codicons';
11-
import { createStyleSheet } from 'vs/base/browser/dom';
12-
import { RunOnceScheduler } from 'vs/base/common/async';
1311

14-
function initialize() {
15-
let codiconStyleSheet = createStyleSheet();
16-
codiconStyleSheet.id = 'codiconStyles';
17-
18-
function updateAll() {
12+
export const CodiconStyles = new class {
13+
onDidChange = iconRegistry.onDidRegister;
14+
public getCSS(): string {
1915
const rules = [];
2016
for (let c of iconRegistry.all) {
2117
rules.push(formatRule(c));
2218
}
23-
codiconStyleSheet.textContent = rules.join('\n');
19+
return rules.join('\n');
2420
}
25-
26-
const delayer = new RunOnceScheduler(updateAll, 0);
27-
iconRegistry.onDidRegister(() => delayer.schedule());
28-
delayer.schedule();
29-
}
21+
};
3022

3123
export function formatRule(c: Codicon) {
3224
let def = c.definition;
@@ -35,5 +27,3 @@ export function formatRule(c: Codicon) {
3527
}
3628
return `.codicon-${c.id}:before { content: '${def.character}'; }`;
3729
}
38-
39-
initialize();

‎src/vs/editor/standalone/browser/standaloneThemeServiceImpl.ts‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ColorIdentifier, Extensions, IColorRegistry } from 'vs/platform/theme/c
1616
import { Extensions as ThemingExtensions, ICssStyleCollector, IFileIconTheme, IThemingRegistry, ITokenStyle } from 'vs/platform/theme/common/themeService';
1717
import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
1818
import { ColorScheme } from 'vs/platform/theme/common/theme';
19+
import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles';
1920

2021
const VS_THEME_NAME = 'vs';
2122
const VS_DARK_THEME_NAME = 'vs-dark';
@@ -193,7 +194,9 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
193194

194195
private readonly _environment: IEnvironmentService = Object.create(null);
195196
private readonly _knownThemes: Map<string, StandaloneTheme>;
196-
private _css: string;
197+
private _codiconCSS: string;
198+
private _themeCSS: string;
199+
private _allCSS: string;
197200
private _globalStyleElement: HTMLStyleElement | null;
198201
private _styleElements: HTMLStyleElement[];
199202
private _theme!: IStandaloneTheme;
@@ -205,10 +208,17 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
205208
this._knownThemes.set(VS_THEME_NAME, newBuiltInTheme(VS_THEME_NAME));
206209
this._knownThemes.set(VS_DARK_THEME_NAME, newBuiltInTheme(VS_DARK_THEME_NAME));
207210
this._knownThemes.set(HC_BLACK_THEME_NAME, newBuiltInTheme(HC_BLACK_THEME_NAME));
208-
this._css = '';
211+
this._codiconCSS = CodiconStyles.getCSS();
212+
this._themeCSS = '';
213+
this._allCSS = `${this._codiconCSS}\n${this._themeCSS}`;
209214
this._globalStyleElement = null;
210215
this._styleElements = [];
211216
this.setTheme(VS_THEME_NAME);
217+
218+
CodiconStyles.onDidChange(() => {
219+
this._codiconCSS = CodiconStyles.getCSS();
220+
this._updateCSS();
221+
});
212222
}
213223

214224
public registerEditorContainer(domNode: HTMLElement): IDisposable {
@@ -222,7 +232,7 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
222232
if (!this._globalStyleElement) {
223233
this._globalStyleElement = dom.createStyleSheet();
224234
this._globalStyleElement.className = 'monaco-colors';
225-
this._globalStyleElement.innerHTML = this._css;
235+
this._globalStyleElement.innerHTML = this._allCSS;
226236
this._styleElements.push(this._globalStyleElement);
227237
}
228238
return Disposable.None;
@@ -231,7 +241,7 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
231241
private _registerShadowDomContainer(domNode: HTMLElement): IDisposable {
232242
const styleElement = dom.createStyleSheet(domNode);
233243
styleElement.className = 'monaco-colors';
234-
styleElement.innerHTML = this._css;
244+
styleElement.innerHTML = this._allCSS;
235245
this._styleElements.push(styleElement);
236246
return {
237247
dispose: () => {
@@ -300,15 +310,20 @@ export class StandaloneThemeServiceImpl extends Disposable implements IStandalon
300310
let colorMap = tokenTheme.getColorMap();
301311
ruleCollector.addRule(generateTokensCSSForColorMap(colorMap));
302312

303-
this._css = cssRules.join('\n');
304-
this._styleElements.forEach(styleElement => styleElement.innerHTML = this._css);
313+
this._themeCSS = cssRules.join('\n');
314+
this._updateCSS();
305315

306316
TokenizationRegistry.setColorMap(colorMap);
307317
this._onColorThemeChange.fire(theme);
308318

309319
return theme.id;
310320
}
311321

322+
private _updateCSS(): void {
323+
this._allCSS = `${this._codiconCSS}\n${this._themeCSS}`;
324+
this._styleElements.forEach(styleElement => styleElement.innerHTML = this._allCSS);
325+
}
326+
312327
public getFileIconTheme(): IFileIconTheme {
313328
return {
314329
hasFileIcons: false,

‎src/vs/workbench/services/themes/browser/workbenchThemeService.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { Event, Emitter } from 'vs/base/common/event';
1818
import { registerFileIconThemeSchemas } from 'vs/workbench/services/themes/common/fileIconThemeSchema';
1919
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
2020
import { FileIconThemeData } from 'vs/workbench/services/themes/browser/fileIconThemeData';
21-
import { removeClasses, addClasses } from 'vs/base/browser/dom';
21+
import { removeClasses, addClasses, createStyleSheet } from 'vs/base/browser/dom';
2222
import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
2323
import { IFileService, FileChangeType } from 'vs/platform/files/common/files';
2424
import { URI } from 'vs/base/common/uri';
@@ -36,7 +36,8 @@ import { ILogService } from 'vs/platform/log/common/log';
3636
import { isWeb } from 'vs/base/common/platform';
3737
import { ColorScheme } from 'vs/platform/theme/common/theme';
3838
import { IHostColorSchemeService } from 'vs/workbench/services/themes/common/hostColorSchemeService';
39-
39+
import { CodiconStyles } from 'vs/base/browser/ui/codicons/codiconStyles';
40+
import { RunOnceScheduler } from 'vs/base/common/async';
4041

4142
// implementation
4243

@@ -164,6 +165,17 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
164165
this.installPreferredSchemeListener();
165166
this.installRegistryListeners();
166167
});
168+
169+
const codiconStyleSheet = createStyleSheet();
170+
codiconStyleSheet.id = 'codiconStyles';
171+
172+
function updateAll() {
173+
codiconStyleSheet.textContent = CodiconStyles.getCSS();
174+
}
175+
176+
const delayer = new RunOnceScheduler(updateAll, 0);
177+
CodiconStyles.onDidChange(() => delayer.schedule());
178+
delayer.schedule();
167179
}
168180

169181
private initialize(): Promise<[IWorkbenchColorTheme | null, IWorkbenchFileIconTheme | null, IWorkbenchProductIconTheme | null]> {

0 commit comments

Comments
 (0)