Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add theme detection for supported Devtools themes in frame hosted tools #455

Merged
merged 4 commits into from
Aug 16, 2021
Merged

Add theme detection for supported Devtools themes in frame hosted tools #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1be1b8
WIP: add theme detection support for themes that the devtools support…
bgoddar Aug 12, 2021
00f3a1e
Clean up function name, add comments
bgoddar Aug 13, 2021
f464a8f
gate update on isCdn
bgoddar Aug 13, 2021
8990825
gate update on isCdn
bgoddar Aug 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions src/common/settingsProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,25 @@ import * as vscode from 'vscode';
import { SETTINGS_STORE_NAME } from '../utils';
import { ThemeString } from './webviewEvents';

const SUPPORTED_THEMES = new Map<string, string>([
['Default Light+', 'light'],
['Visual Studio Light', 'light'],
['Default Dark+', 'dark'],
['Visual Studio Dark', 'dark'],
['Monokai', 'vscode-monokai'],
['Monokai Dimmed', 'vscode-monokai-dimmed'],
['Solarized Dark', 'vscode-solarized-dark'],
['Solarized Light', 'vscode-solarized-light'],
['Red', 'vscode-red'],
['Quiet Light', 'vscode-quietlight'],
['Abyss', 'vscode-abyss'],
['Kimbie Dark', 'vscode-kimbie-dark'],
['Tomorrow Night Blue', 'vscode-tomorrow-night-blue'],
// Legacy Theme string mappings
['Light', 'light'],
['Dark', 'dark'],
['System Preference', 'systemPreference'],
]);
export class SettingsProvider {

private static singletonInstance: SettingsProvider;
Expand All @@ -14,12 +33,23 @@ export class SettingsProvider {
return networkEnabled;
}

// Legacy only: this function returns the theme for the legacy bundled DevTools
getThemeSettings(): ThemeString {
const settings = vscode.workspace.getConfiguration(SETTINGS_STORE_NAME);
const themeString: ThemeString = settings.get('themes') || 'System preference';
return themeString;
}

// This function returns the theme for the new frame hosted DevTools by:
// 1. Fetching the User configured Global VSCode theme, return it if supported
// 2. Fall back to the extension Theme setting selector (light, dark, system preference)
// 3. Fall back to system preference
getThemeFromUserSetting(): string {
const themeSetting = vscode.workspace.getConfiguration().get('workbench.colorTheme');
const legacySetting = vscode.workspace.getConfiguration(SETTINGS_STORE_NAME).get('themes');
bgoddar marked this conversation as resolved.
Show resolved Hide resolved
return SUPPORTED_THEMES.get((themeSetting || legacySetting) as string) || 'systemPreference';
}

getWelcomeSettings(): boolean {
const settings = vscode.workspace.getConfiguration(SETTINGS_STORE_NAME);
const welcomeEnabled: boolean = settings.get('welcome') || false;
Expand Down
13 changes: 12 additions & 1 deletion src/devtoolsPanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,15 @@ export class DevToolsPanel {
this.panel.webview.onDidReceiveMessage(message => {
this.panelSocket.onMessageFromWebview(message);
}, this, this.disposables);

// Update DevTools theme if user changes global theme
vscode.workspace.onDidChangeConfiguration(e => {
if (this.config.isCdnHostedTools &&
e.affectsConfiguration('workbench.colorTheme') &&
this.panel.visible) {
this.update();
}
});
}

dispose(): void {
Expand Down Expand Up @@ -378,6 +387,8 @@ export class DevToolsPanel {
const stylesPath = vscode.Uri.file(path.join(this.extensionPath, 'out', 'common', 'styles.css'));
const stylesUri = this.panel.webview.asWebviewUri(stylesPath);

const theme = SettingsProvider.instance.getThemeFromUserSetting();

// the added fields for "Content-Security-Policy" allow resource loading for other file types
return `
<!doctype html>
Expand All @@ -397,7 +408,7 @@ export class DevToolsPanel {
">
</head>
<body>
<iframe id="devtools-frame" frameBorder="0" src="${cdnBaseUrl}?experiments=true&edgeThemes=true"></iframe>
<iframe id="devtools-frame" frameBorder="0" src="${cdnBaseUrl}?experiments=true&theme=${theme}"></iframe>
</body>
</html>
`;
Expand Down