forked from jupyterlab/jupyterlab
/
thememanager.ts
488 lines (416 loc) · 12.8 KB
/
thememanager.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
// Copyright (c) Jupyter Development Team.
// Distributed under the terms of the Modified BSD License.
import { IChangedArgs, URLExt } from '@jupyterlab/coreutils';
import { ISettingRegistry } from '@jupyterlab/settingregistry';
import { each } from '@lumino/algorithm';
import { DisposableDelegate, IDisposable } from '@lumino/disposable';
import { Widget } from '@lumino/widgets';
import { ISignal, Signal } from '@lumino/signaling';
import { Dialog, showDialog } from './dialog';
import { ISplashScreen } from './splash';
import { IThemeManager } from './tokens';
/**
* The number of milliseconds between theme loading attempts.
*/
const REQUEST_INTERVAL = 75;
/**
* The number of times to attempt to load a theme before giving up.
*/
const REQUEST_THRESHOLD = 20;
type Dict<T> = { [key: string]: T };
/**
* A class that provides theme management.
*/
export class ThemeManager implements IThemeManager {
/**
* Construct a new theme manager.
*/
constructor(options: ThemeManager.IOptions) {
const { host, key, splash, url } = options;
const registry = options.settings;
this._base = url;
this._host = host;
this._splash = splash || null;
void registry.load(key).then(settings => {
this._settings = settings;
this._settings.changed.connect(this._loadSettings, this);
this._loadSettings();
this._initOverrideProps();
});
}
/**
* Get the name of the current theme.
*/
get theme(): string | null {
return this._current;
}
/**
* The names of the registered themes.
*/
get themes(): ReadonlyArray<string> {
return Object.keys(this._themes);
}
/**
* A signal fired when the application theme changes.
*/
get themeChanged(): ISignal<this, IChangedArgs<string, string | null>> {
return this._themeChanged;
}
/**
* Get the value of a CSS variable from its key.
*
* @param key - A Jupyterlab CSS variable, without the leading '--jp-'.
*
* @return value - The current value of the Jupyterlab CSS variable
*/
getCSS(key: string): string {
return getComputedStyle(document.documentElement).getPropertyValue(
`--jp-${key}`
);
}
/**
* Load a theme CSS file by path.
*
* @param path - The path of the file to load.
*/
loadCSS(path: string): Promise<void> {
const base = this._base;
const href = URLExt.isLocal(path) ? URLExt.join(base, path) : path;
const links = this._links;
return new Promise((resolve, reject) => {
const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', href);
link.addEventListener('load', () => {
resolve(undefined);
});
link.addEventListener('error', () => {
reject(`Stylesheet failed to load: ${href}`);
});
document.body.appendChild(link);
links.push(link);
});
}
/**
* Loads all current CSS overrides from settings. If an override has been
* removed or is invalid, this function unloads it instead.
*/
loadCSSOverrides(): void {
const newOverrides =
(this._settings.user['overrides'] as Dict<string>) || {};
// iterate over the union of current and new CSS override keys
Object.keys({ ...this._overrides, ...newOverrides }).forEach(key => {
const val = newOverrides[key];
if (val && this.validateCSS(key, val)) {
// validation succeeded, set the override
document.documentElement.style.setProperty(`--jp-${key}`, val);
} else {
// if key is not present or validation failed, the override will be removed
document.documentElement.style.removeProperty(`--jp-${key}`);
}
});
// replace the current overrides with the new ones
this._overrides = newOverrides;
}
/**
* Validate a CSS value w.r.t. a key
*
* @param key - A Jupyterlab CSS variable, without the leading '--jp-'.
*
* @param val - A candidate CSS value
*/
validateCSS(key: string, val: string): boolean {
// determine the css property corresponding to the key
const prop = this._overrideProps[key];
if (!prop) {
console.warn(
'CSS validation failed: could not find property corresponding to key.\n' +
`key: '${key}', val: '${val}'`
);
return false;
}
// use built-in validation once we have the corresponding property
if (CSS.supports(prop, val)) {
return true;
} else {
console.warn(
'CSS validation failed: invalid value.\n' +
`key: '${key}', val: '${val}', prop: '${prop}'`
);
return false;
}
}
/**
* Register a theme with the theme manager.
*
* @param theme - The theme to register.
*
* @returns A disposable that can be used to unregister the theme.
*/
register(theme: IThemeManager.ITheme): IDisposable {
const { name } = theme;
const themes = this._themes;
if (themes[name]) {
throw new Error(`Theme already registered for ${name}`);
}
themes[name] = theme;
return new DisposableDelegate(() => {
delete themes[name];
});
}
/**
* Add a CSS override to the settings.
*/
setCSSOverride(key: string, value: string): Promise<void> {
this._overrides[key] = value;
return this._settings.set('overrides', this._overrides);
}
/**
* Set the current theme.
*/
setTheme(name: string): Promise<void> {
return this._settings.set('theme', name);
}
/**
* Test whether a given theme is light.
*/
isLight(name: string): boolean {
return this._themes[name].isLight;
}
/**
* Increase a font size w.r.t. its current setting or its value in the
* current theme.
*
* @param key - A Jupyterlab font size CSS variable, without the leading '--jp-'.
*/
incrFontSize(key: string): Promise<void> {
return this._incrFontSize(key, true);
}
/**
* Decrease a font size w.r.t. its current setting or its value in the
* current theme.
*
* @param key - A Jupyterlab font size CSS variable, without the leading '--jp-'.
*/
decrFontSize(key: string): Promise<void> {
return this._incrFontSize(key, false);
}
/**
* Test whether a given theme styles scrollbars,
* and if the user has scrollbar styling enabled.
*/
themeScrollbars(name: string): boolean {
return (
!!this._settings.composite['theme-scrollbars'] &&
!!this._themes[name].themeScrollbars
);
}
/**
* Test if the user has scrollbar styling enabled.
*/
isToggledThemeScrollbars(): boolean {
return !!this._settings.composite['theme-scrollbars'];
}
/**
* Toggle the `theme-scrollbbars` setting.
*/
toggleThemeScrollbars(): Promise<void> {
return this._settings.set(
'theme-scrollbars',
!this._settings.composite['theme-scrollbars']
);
}
/**
* Change a font size by a positive or negative increment.
*/
private _incrFontSize(key: string, add: boolean = true): Promise<void> {
// get the numeric and unit parts of the current font size
const parts = (this.getCSS(key) || '13px').split(/([a-zA-Z]+)/);
// determine the increment
const incr = (add ? 1 : -1) * (parts[1] === 'em' ? 0.1 : 1);
// increment the font size and set it as an override
return this.setCSSOverride(key, `${Number(parts[0]) + incr}${parts[1]}`);
}
/**
* Initialize the key -> property dict for the overrides
*/
private _initOverrideProps(): void {
const definitions = this._settings.schema.definitions as any;
// workaround for 1.0.x versions of Jlab pulling in 1.1.x versions of apputils
// TODO: delete workaround in v2.0.0
if (definitions && definitions.cssOverrides) {
const oSchema = definitions.cssOverrides.properties;
// the description field of each item in the overrides schema stores a
// CSS property that will be used to validate that override's values
Object.keys(oSchema).forEach(key => {
this._overrideProps[key] = oSchema[key].description;
});
}
}
/**
* Handle the current settings.
*/
private _loadSettings(): void {
const outstanding = this._outstanding;
const pending = this._pending;
const requests = this._requests;
// If another request is pending, cancel it.
if (pending) {
window.clearTimeout(pending);
this._pending = 0;
}
const settings = this._settings;
const themes = this._themes;
const theme = settings.composite['theme'] as string;
// If another promise is outstanding, wait until it finishes before
// attempting to load the settings. Because outstanding promises cannot
// be aborted, the order in which they occur must be enforced.
if (outstanding) {
outstanding
.then(() => {
this._loadSettings();
})
.catch(() => {
this._loadSettings();
});
this._outstanding = null;
return;
}
// Increment the request counter.
requests[theme] = requests[theme] ? requests[theme] + 1 : 1;
// If the theme exists, load it right away.
if (themes[theme]) {
this._outstanding = this._loadTheme(theme);
delete requests[theme];
return;
}
// If the request has taken too long, give up.
if (requests[theme] > REQUEST_THRESHOLD) {
const fallback = settings.default('theme') as string;
// Stop tracking the requests for this theme.
delete requests[theme];
if (!themes[fallback]) {
this._onError(`Neither theme ${theme} nor default ${fallback} loaded.`);
return;
}
console.warn(`Could not load theme ${theme}, using default ${fallback}.`);
this._outstanding = this._loadTheme(fallback);
return;
}
// If the theme does not yet exist, attempt to wait for it.
this._pending = window.setTimeout(() => {
this._loadSettings();
}, REQUEST_INTERVAL);
}
/**
* Load the theme.
*
* #### Notes
* This method assumes that the `theme` exists.
*/
private _loadTheme(theme: string): Promise<void> {
const current = this._current;
const links = this._links;
const themes = this._themes;
const splash = this._splash
? this._splash.show(themes[theme].isLight)
: new DisposableDelegate(() => undefined);
// Unload any CSS files that have been loaded.
links.forEach(link => {
if (link.parentElement) {
link.parentElement.removeChild(link);
}
});
links.length = 0;
// Unload the previously loaded theme.
const old = current ? themes[current].unload() : Promise.resolve();
return Promise.all([old, themes[theme].load()])
.then(() => {
this._current = theme;
this._themeChanged.emit({
name: 'theme',
oldValue: current,
newValue: theme
});
// Need to force a redraw of the app here to avoid a Chrome rendering
// bug that can leave the scrollbars in an invalid state
this._host.hide();
// If we hide/show the widget too quickly, no redraw will happen.
// requestAnimationFrame delays until after the next frame render.
requestAnimationFrame(() => {
this._host.show();
Private.fitAll(this._host);
splash.dispose();
});
})
.catch(reason => {
this._onError(reason);
splash.dispose();
});
}
/**
* Handle a theme error.
*/
private _onError(reason: any): void {
void showDialog({
title: 'Error Loading Theme',
body: String(reason),
buttons: [Dialog.okButton({ label: 'OK' })]
});
}
private _base: string;
private _current: string | null = null;
private _host: Widget;
private _links: HTMLLinkElement[] = [];
private _overrides: Dict<string> = {};
private _overrideProps: Dict<string> = {};
private _outstanding: Promise<void> | null = null;
private _pending = 0;
private _requests: { [theme: string]: number } = {};
private _settings: ISettingRegistry.ISettings;
private _splash: ISplashScreen | null;
private _themes: { [key: string]: IThemeManager.ITheme } = {};
private _themeChanged = new Signal<this, IChangedArgs<string, string | null>>(
this
);
}
export namespace ThemeManager {
/**
* The options used to create a theme manager.
*/
export interface IOptions {
/**
* The host widget for the theme manager.
*/
host: Widget;
/**
* The setting registry key that holds theme setting data.
*/
key: string;
/**
* The settings registry.
*/
settings: ISettingRegistry;
/**
* The splash screen to show when loading themes.
*/
splash?: ISplashScreen;
/**
* The url for local theme loading.
*/
url: string;
}
}
/**
* A namespace for module private data.
*/
namespace Private {
/**
* Fit a widget and all of its children, recursively.
*/
export function fitAll(widget: Widget): void {
each(widget.children(), fitAll);
widget.fit();
}
}