From 5494920ccb35961b6ed2136f249ba51292e5a194 Mon Sep 17 00:00:00 2001
From: Alexander Moses
Date: Tue, 27 Jan 2026 14:13:21 +0000
Subject: [PATCH 1/3] Bug-1915777: Make test tags theme aware
This change updates the TestHeader and SubtestsRevisionHeader by making tag options aware of light. The changes made are:
* Import theme hook in both TestHeader and SubtestsRevisionHeader
* Update `styles` object in both TestHeader and SubtestsRevisionHeader to choose background color of span based on theme
* Update color of tag based on theme
* Add new colors to `styles/Colors.ts`
---
.../OverTimeResultsView.test.tsx.snap | 10 +-
.../__snapshots__/ResultsTable.test.tsx.snap | 2578 ++++++++++++++++-
.../__snapshots__/ResultsView.test.tsx.snap | 10 +-
.../SubtestsResultsView.test.tsx.snap | 50 +-
.../SubtestsRevisionHeader.tsx | 101 +-
src/components/CompareResults/TestHeader.tsx | 115 +-
src/styles/Colors.ts | 10 +
7 files changed, 2728 insertions(+), 146 deletions(-)
diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
index 2ddec09b0..8d9f068d8 100644
--- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
@@ -640,27 +640,27 @@ exports[`Results View The table should match snapshot and other elements should
class="fexjzun"
>
opt
e10s
fission
stylo
webrender
diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
index 4d75dfad9..23f8e4b71 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
@@ -84,6 +84,2552 @@ exports[`Results Table Should match snapshot 1`] = `
d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
/>
+
-
@@ -6666,27 +4120,27 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
class="fexjzun"
>
opt
e10s
fission
stylo
webrender
@@ -7362,7 +4816,7 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
class="fexjzun"
>
opt
diff --git a/src/__tests__/helpers.test.ts b/src/__tests__/helpers.test.ts
index 37edcde91..6e9fd24dd 100644
--- a/src/__tests__/helpers.test.ts
+++ b/src/__tests__/helpers.test.ts
@@ -7,8 +7,11 @@ import {
getDocsURL,
getModeInterpretation,
capitalize,
+ getOptionTagTextColor,
+ getOptionTagBackgroundColor,
} from '../utils/helpers';
import getTestData from './utils/fixtures';
+import { Colors } from '../styles/Colors';
describe('getDocsURL Helper', () => {
it('should return the correct URL for a supported perfdocs framework', () => {
@@ -211,3 +214,35 @@ describe('capitalize', () => {
expect(capializedString3).toBe('');
});
});
+
+describe('getOptionTagTextColor', () => {
+ it('should return correct text color for light theme', () => {
+ const textColor = getOptionTagTextColor('light');
+ expect(textColor).toBe(Colors.InvertedText);
+ });
+
+ it('should return correct text color for dark theme', () => {
+ const textColor = getOptionTagTextColor('dark');
+ expect(textColor).toBe(Colors.InvertedTextDark);
+ });
+});
+
+describe('getOptionTagBackgroundColor', () => {
+ it('should return correct background color for light theme', () => {
+ const backgroundColors = getOptionTagBackgroundColor('light');
+ expect(backgroundColors).toEqual([
+ Colors.TagOptionBackground3n,
+ Colors.TagOptionBackground3n1,
+ Colors.TagOptionBackground3n2,
+ ]);
+ });
+
+ it('should return correct background color for dark theme', () => {
+ const backgroundColors = getOptionTagBackgroundColor('dark');
+ expect(backgroundColors).toEqual([
+ Colors.TagOptionBackground3nDark,
+ Colors.TagOptionBackground3n1Dark,
+ Colors.TagOptionBackground3n2Dark,
+ ]);
+ });
+});
diff --git a/src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx b/src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx
index 66a1925cb..7bf7df854 100644
--- a/src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx
+++ b/src/components/CompareResults/SubtestsResults/SubtestsRevisionHeader.tsx
@@ -14,7 +14,7 @@ import {
} from '../../../common/constants';
import { useAppSelector } from '../../../hooks/app';
import { Strings } from '../../../resources/Strings';
-import { Colors, Spacing } from '../../../styles';
+import { Spacing } from '../../../styles';
import type {
SubtestsRevisionsHeader,
PlatformShortName,
@@ -24,6 +24,8 @@ import {
getTreeherderURL,
truncateHash,
getDocsURL,
+ getOptionTagTextColor,
+ getOptionTagBackgroundColor,
} from '../../../utils/helpers';
import {
getPlatformAndVersion,
@@ -113,6 +115,11 @@ function SubtestsRevisionHeader(props: SubtestsRevisionHeaderProps) {
: getTimeRange(header.base_repo);
const themeMode = useAppSelector((state) => state.theme.mode);
+ const [
+ optionTagBackground3n,
+ optionTagBackground3n1,
+ optionTagBackground3n2,
+ ] = getOptionTagBackgroundColor(themeMode);
const styles = {
revisionHeader: style({
@@ -125,29 +132,19 @@ function SubtestsRevisionHeader(props: SubtestsRevisionHeaderProps) {
textAlign: 'right',
$nest: {
'span:nth-child(3n)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n
- : Colors.TagOptionBackground3nDark,
+ background: optionTagBackground3n,
},
'span:nth-child(3n+1)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n1
- : Colors.TagOptionBackground3n1Dark,
+ background: optionTagBackground3n1,
},
'span:nth-child(3n+2)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n2
- : Colors.TagOptionBackground3n2Dark,
+ background: optionTagBackground3n2,
},
},
}),
chip: style({
borderRadius: '4px',
- color:
- themeMode === 'light' ? Colors.InvertedText : Colors.InvertedTextDark,
+ color: getOptionTagTextColor(themeMode),
fontFamily: 'SF Pro',
fontStyle: 'normal',
fontWeight: 700,
diff --git a/src/components/CompareResults/TestHeader.tsx b/src/components/CompareResults/TestHeader.tsx
index 1372b4336..0efbfe834 100644
--- a/src/components/CompareResults/TestHeader.tsx
+++ b/src/components/CompareResults/TestHeader.tsx
@@ -6,7 +6,11 @@ import { useAppSelector } from '../../hooks/app';
import { Strings } from '../../resources/Strings';
import { Colors, Spacing } from '../../styles';
import type { CompareResultsItem } from '../../types/state';
-import { getDocsURL } from '../../utils/helpers';
+import {
+ getDocsURL,
+ getOptionTagTextColor,
+ getOptionTagBackgroundColor,
+} from '../../utils/helpers';
type HeaderProperties = Pick<
CompareResultsItem,
@@ -59,6 +63,12 @@ export default function TestHeader(props: TestHeaderProps) {
const extraOptions = getExtraOptions(result.extra_options);
const themeMode = useAppSelector((state) => state.theme.mode);
+ const [
+ optionTagBackground3n,
+ optionTagBackground3n1,
+ optionTagBackground3n2,
+ ] = getOptionTagBackgroundColor(themeMode);
+
const styles = {
revisionHeader: style({
borderBottom: `0.5px solid ${Colors.BorderDropdownMenu}`,
@@ -76,29 +86,19 @@ export default function TestHeader(props: TestHeaderProps) {
textAlign: 'right',
$nest: {
'span:nth-child(3n)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n
- : Colors.TagOptionBackground3nDark,
+ background: optionTagBackground3n,
},
'span:nth-child(3n+1)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n1
- : Colors.TagOptionBackground3n1Dark,
+ background: optionTagBackground3n1,
},
'span:nth-child(3n+2)': {
- background:
- themeMode === 'light'
- ? Colors.TagOptionBackground3n2
- : Colors.TagOptionBackground3n2Dark,
+ background: optionTagBackground3n2,
},
},
}),
chip: style({
borderRadius: '4px',
- color:
- themeMode === 'light' ? Colors.InvertedText : Colors.InvertedTextDark,
+ color: getOptionTagTextColor(themeMode),
// To be removed
fontFamily: 'SF Pro',
fontStyle: 'normal',
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 682dc8876..a04e80240 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -6,6 +6,7 @@ import {
nonDocumentedTestsDevTools,
supportedPerfdocsFrameworks,
} from '../common/constants';
+import { Colors } from '../styles/Colors';
import type { Repository, Changeset } from '../types/state';
import type { Framework, SupportedPerfdocsFramework } from '../types/types';
@@ -154,6 +155,32 @@ const capitalize = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1);
};
+// Get the Option Tag background for the given theme (light or dark)
+const getOptionTagBackgroundColor = (theme: string) => {
+ if (theme === 'light') {
+ return [
+ Colors.TagOptionBackground3n,
+ Colors.TagOptionBackground3n1,
+ Colors.TagOptionBackground3n2,
+ ];
+ } else {
+ return [
+ Colors.TagOptionBackground3nDark,
+ Colors.TagOptionBackground3n1Dark,
+ Colors.TagOptionBackground3n2Dark,
+ ];
+ }
+};
+
+// Get the Option Tag text color for the given theme (light or dark)
+const getOptionTagTextColor = (theme: string) => {
+ if (theme === 'light') {
+ return Colors.InvertedText;
+ } else {
+ return Colors.InvertedTextDark;
+ }
+};
+
export {
formatDate,
getLatestCommitMessage,
@@ -164,4 +191,6 @@ export {
getDocsURL,
getModeInterpretation,
capitalize,
+ getOptionTagBackgroundColor,
+ getOptionTagTextColor,
};
From f08c5371c7c5d8fb4b501b582ff47d335061b63e Mon Sep 17 00:00:00 2001
From: Alexander Moses
Date: Wed, 18 Feb 2026 10:30:45 +0000
Subject: [PATCH 3/3] Bug-1915777: Use Mui's theme aware element
Implemented review comment and used Mui's theme aware `` element.
Added the required options to `protocolTheme.ts`.
Also, removed implementation added in previous commits as well as the tests
and regenerated the spanshots by running `npm run fix-all`
---
.../OverTimeResultsView.test.tsx.snap | 12 +-
.../__snapshots__/ResultsTable.test.tsx.snap | 56 +++----
.../__snapshots__/ResultsView.test.tsx.snap | 12 +-
.../SubtestsResultsView.test.tsx.snap | 60 ++++----
src/__tests__/helpers.test.ts | 35 -----
.../SubtestsRevisionHeader.tsx | 126 ++++++++-------
src/components/CompareResults/TestHeader.tsx | 143 +++++++++---------
src/theme/protocolTheme.ts | 12 ++
src/utils/helpers.ts | 29 ----
9 files changed, 225 insertions(+), 260 deletions(-)
diff --git a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
index 8d9f068d8..f3bdc9916 100644
--- a/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/OverTimeResultsView.test.tsx.snap
@@ -637,30 +637,30 @@ exports[`Results View The table should match snapshot and other elements should
opt
e10s
fission
stylo
webrender
diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
index 887c1320b..1ff02f552 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsTable.test.tsx.snap
@@ -1479,30 +1479,30 @@ exports[`Results Table Should match snapshot 1`] = `
opt
e10s
fission
stylo
webrender
@@ -2149,10 +2149,10 @@ exports[`Results Table Should match snapshot 1`] = `
opt
@@ -4117,30 +4117,30 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
opt
e10s
fission
stylo
webrender
@@ -4813,10 +4813,10 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
opt
@@ -5402,30 +5402,30 @@ exports[`Results Table for MannWhitneyResultsItem for mann-whitney-u testVersion
opt
e10s
fission
stylo
webrender
@@ -5943,30 +5943,30 @@ exports[`Results Table should render different blocks when rendering several rev
opt
e10s
fission
stylo
webrender
diff --git a/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
index 3d49026cd..1153dc1d9 100644
--- a/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/ResultsView.test.tsx.snap
@@ -1488,30 +1488,30 @@ exports[`Results View The table should match snapshot and other elements should
opt
e10s
fission
stylo
webrender
diff --git a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
index 349138ea4..40178effb 100644
--- a/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
+++ b/src/__tests__/CompareResults/__snapshots__/SubtestsResultsView.test.tsx.snap
@@ -619,30 +619,30 @@ exports[`SubtestsResultsView Component Tests should render the subtests results