testing: better testing side bar retried color (#207949)

* Add missing css variable in vscode-known-variables.json

* Better highlight color for test explorer retired icon

* Add testingRetiredCorlor for different icon state

* Use derived value from non-retired color variable instead of string literals
This commit is contained in:
Connor Peet 2024-03-21 09:22:14 -07:00 committed by GitHub
commit 9202044397
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 64 additions and 6 deletions

View file

@ -721,6 +721,8 @@
"--vscode-testing-uncoveredBorder",
"--vscode-testing-uncoveredBranchBackground",
"--vscode-testing-uncoveredGutterBackground",
"--vscode-testing-uncoveredGutterBackground",
"--vscode-testing-coverage-lineHeight",
"--vscode-textBlockQuote-background",
"--vscode-textBlockQuote-border",
"--vscode-textCodeBlock-background",

View file

@ -8,7 +8,7 @@ import { localize } from 'vs/nls';
import { registerIcon, spinningLoading } from 'vs/platform/theme/common/iconRegistry';
import { registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { ThemeIcon } from 'vs/base/common/themables';
import { testingColorRunAction, testStatesToIconColors } from 'vs/workbench/contrib/testing/browser/theme';
import { testingColorRunAction, testStatesToIconColors, testStatesToRetiredIconColors } from 'vs/workbench/contrib/testing/browser/theme';
import { TestResultState } from 'vs/workbench/contrib/testing/common/testTypes';
export const testingViewIcon = registerIcon('test-view-icon', Codicon.beaker, localize('testViewIcon', 'View icon of the test view.'));
@ -52,12 +52,22 @@ export const testingStatesToIcons = new Map<TestResultState, ThemeIcon>([
registerThemingParticipant((theme, collector) => {
for (const [state, icon] of testingStatesToIcons.entries()) {
const color = testStatesToIconColors[state];
const retiredColor = testStatesToRetiredIconColors[state];
if (!color) {
continue;
}
collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icon)} {
color: ${theme.getColor(color)} !important;
}`);
if (!retiredColor) {
continue;
}
collector.addRule(`
.test-explorer .computed-state.retired${ThemeIcon.asCSSSelector(icon)},
.testing-run-glyph.retired${ThemeIcon.asCSSSelector(icon)}{
color: ${theme.getColor(retiredColor)} !important;
}
`);
}
collector.addRule(`

View file

@ -147,11 +147,6 @@
margin-right: 0.25em;
}
.test-explorer .computed-state.retired,
.testing-run-glyph.retired {
opacity: 0.7 !important;
}
.test-explorer .test-is-hidden {
opacity: 0.8;
}

View file

@ -190,6 +190,57 @@ export const testStatesToIconColors: { [K in TestResultState]?: string } = {
[TestResultState.Skipped]: testingColorIconSkipped,
};
export const testingRetiredColorIconErrored = registerColor('testing.iconErrored.retired', {
dark: transparent(testingColorIconErrored, 0.7),
light: transparent(testingColorIconErrored, 0.7),
hcDark: transparent(testingColorIconErrored, 0.7),
hcLight: transparent(testingColorIconErrored, 0.7)
}, localize('testing.iconErrored.retired', "Retired color for the 'Errored' icon in the test explorer."));
export const testingRetiredColorIconFailed = registerColor('testing.iconFailed.retired', {
dark: transparent(testingColorIconFailed, 0.7),
light: transparent(testingColorIconFailed, 0.7),
hcDark: transparent(testingColorIconFailed, 0.7),
hcLight: transparent(testingColorIconFailed, 0.7)
}, localize('testing.iconFailed.retired', "Retired color for the 'failed' icon in the test explorer."));
export const testingRetiredColorIconPassed = registerColor('testing.iconPassed.retired', {
dark: transparent(testingColorIconPassed, 0.7),
light: transparent(testingColorIconPassed, 0.7),
hcDark: transparent(testingColorIconPassed, 0.7),
hcLight: transparent(testingColorIconPassed, 0.7)
}, localize('testing.iconPassed.retired', "Retired color for the 'passed' icon in the test explorer."));
export const testingRetiredColorIconQueued = registerColor('testing.iconQueued.retired', {
dark: transparent(testingColorIconQueued, 0.7),
light: transparent(testingColorIconQueued, 0.7),
hcDark: transparent(testingColorIconQueued, 0.7),
hcLight: transparent(testingColorIconQueued, 0.7)
}, localize('testing.iconQueued.retired', "Retired color for the 'Queued' icon in the test explorer."));
export const testingRetiredColorIconUnset = registerColor('testing.iconUnset.retired', {
dark: transparent(testingColorIconUnset, 0.7),
light: transparent(testingColorIconUnset, 0.7),
hcDark: transparent(testingColorIconUnset, 0.7),
hcLight: transparent(testingColorIconUnset, 0.7)
}, localize('testing.iconUnset.retired', "Retired color for the 'Unset' icon in the test explorer."));
export const testingRetiredColorIconSkipped = registerColor('testing.iconSkipped.retired', {
dark: transparent(testingColorIconSkipped, 0.7),
light: transparent(testingColorIconSkipped, 0.7),
hcDark: transparent(testingColorIconSkipped, 0.7),
hcLight: transparent(testingColorIconSkipped, 0.7)
}, localize('testing.iconSkipped.retired', "Retired color for the 'Skipped' icon in the test explorer."));
export const testStatesToRetiredIconColors: { [K in TestResultState]?: string } = {
[TestResultState.Errored]: testingRetiredColorIconErrored,
[TestResultState.Failed]: testingRetiredColorIconFailed,
[TestResultState.Passed]: testingRetiredColorIconPassed,
[TestResultState.Queued]: testingRetiredColorIconQueued,
[TestResultState.Unset]: testingRetiredColorIconUnset,
[TestResultState.Skipped]: testingRetiredColorIconSkipped,
};
registerThemingParticipant((theme, collector) => {
const editorBg = theme.getColor(editorBackground);