Skip to content

Adapt time-slice selection in High Contrast Mode. #5259

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

Merged
julienw merged 3 commits into from
Jan 29, 2025
Merged

Adapt time-slice selection in High Contrast Mode. #5259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b3ea366
Adapt time-slice selection in High Contrast Mode.
nchevobbe Dec 11, 2024
a42f516
Add SVG filter to be able to control icons color in CSS
nchevobbe Dec 5, 2024
505a2a0
Merge branch 'main' into hcm-time-selection
julienw Jan 29, 2025
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
21 changes: 21 additions & 0 deletions res/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,19 @@ body {
color: var(--grey-90);
}

@media (forced-colors: active) {
:root {
/* The following properties are retrieved in index.js to create SVG filters that
* we can apply on icons to control their color.
* These variable can be declared in any rule, as long as their value is still
* a valid color (which means we can use `light-dark()` or any other color functions).
* The colors can be applied on SVG icons with `filter: url(#--var-name)` */
--button-icon-color: ButtonText;
--button-icon-hover-color: SelectedItem;
--button-icon-active-color: SelectedItem;
Comment on lines +50 to +51

@julienw julienw Jan 29, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW the same than usual still happens: SelectedItem is not great for me in light mode. But out of scope here...

@nchevobbe nchevobbe Jan 29, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I need to reach to the accessibility team to sort this out

}
}

.profileFilterNavigator {
height: 24px;
flex-shrink: 1;
Expand All @@ -49,3 +62,11 @@ body {
flex: 1;
flex-flow: column nowrap;
}

#svg-filters {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
inset-inline-start: -1000vw;
}
1 change: 1 addition & 0 deletions res/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<link rel="preload" href="locales/en-US/app.ftl" as="fetch" />
</head>
<body style="background-color: #363959; /* ink-70 */">
<svg id="svg-filters"></svg>
<div id="root"></div>
<div id="root-overlay"></div>
</body>
Expand Down
67 changes: 61 additions & 6 deletions src/components/timeline/Selection.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
100vw - var(--thread-label-column-width) -
var(--vertical-scrollbar-reserved-width)
);
--grippy-range-background-color: #aaa;
--grippy-range-border-color: white;
--grippy-range-hover-background-color: #888;
--selection-outbound-opacity: 0.1;

position: relative;
display: flex;
Expand Down Expand Up @@ -54,7 +58,8 @@
.timelineSelectionDimmerBefore,
.timelineSelectionDimmerAfter {
flex-shrink: 0;
background: rgb(12 12 13 / 0.1);
background: rgb(12 12 13 / var(--selection-outbound-opacity));
forced-color-adjust: none;
}

.timelineSelectionDimmerAfter {
Expand All @@ -79,10 +84,10 @@
z-index: 3;
width: 0;
padding: 3px;
border: 1px solid white;
border: 1px solid var(--grippy-range-border-color);
border-radius: 5px;
margin: 0 -4px;
background: #aaa;
background: var(--grippy-range-background-color);
cursor: ew-resize;
}

Expand All @@ -99,7 +104,7 @@
.timelineSelectionGrippyRangeEnd:hover,
.draggingEnd > .timelineSelectionGrippyRangeEnd,
:not(.draggingStart, .draggingEnd) > .timelineSelectionGrippyRangeEnd.dragging {
background: #888;
background: var(--grippy-range-hover-background-color);
}

.timelineSelectionGrippyMoveRange {
Expand Down Expand Up @@ -145,14 +150,21 @@
border: 1px solid rgb(0 0 0 / 0.2);
border-radius: 100%;
margin: -15px;
background: url(../../../res/img/svg/zoom-icon.svg) center center no-repeat
rgb(255 255 255 / 0.6);
background-color: rgb(255 255 255 / 0.6);
opacity: 0.5;
pointer-events: auto;
transition: opacity 200ms ease-in-out;
will-change: opacity;
}

.timelineSelectionOverlayZoomButton::before {
position: absolute;
display: grid;
content: url(firefox-profiler-res/img/svg/zoom-icon.svg);
inset: 0;
place-content: center;
}

.timelineSelectionOverlayZoomButton.hidden {
opacity: 0 !important;
pointer-events: none;
Expand Down Expand Up @@ -181,4 +193,47 @@
.timelineSelectionHoverLine {
background-color: CanvasText;
}

.timelineSelection {
--grippy-range-background-color: ButtonText;
--grippy-range-border-color: ButtonBorder;
--grippy-range-hover-background-color: SelectedItem;
--selection-outbound-opacity: 0.6;
}

.timelineSelectionDimmerBefore {
border-inline-end: 1px solid CanvasText;
}

.timelineSelectionDimmerAfter {
border-inline-start: 1px solid CanvasText;
}

.timelineSelectionOverlayZoomButton {
border-color: ButtonText;
background-color: ButtonFace;
opacity: 1;
}

.timelineSelectionOverlayZoomButton::before {
filter: url(#--button-icon-color);
}

.timelineSelectionOverlayZoomButton:hover {
border-color: SelectedItem;
background-color: SelectedItemText;
}

.timelineSelectionOverlayZoomButton:hover::before {
filter: url(#--button-icon-hover-color);
}

.timelineSelectionOverlayZoomButton:active:hover {
border-color: ButtonText;
background-color: ButtonFace;
}

.timelineSelectionOverlayZoomButton:hover:active::before {
filter: url(#--button-icon-active-color);
}
}
51 changes: 51 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,57 @@ window.geckoProfilerPromise = new Promise(function (resolve) {
window.connectToGeckoProfiler = resolve;
});

// We're using an <svg> element from the page to apply filter from CSS rules
// to be able to dynamically change the color of SVG icons (e.g. to adapt
// to light/dark/high contrast themes).
const svgFiltersElement = document.getElementById('svg-filters');
Comment thread
nchevobbe marked this conversation as resolved.
if (svgFiltersElement) {
const defineSvgFiltersForColors = () => {
const colors = [
'--button-icon-color',
'--button-icon-hover-color',
'--button-icon-active-color',
];
for (const cssVariable of colors) {
let filterEl = document.getElementById(cssVariable);
if (!filterEl) {
svgFiltersElement.insertAdjacentHTML(
'beforeend',
`<filter id="${cssVariable}" color-interpolation-filters="sRGB">
<feFlood />
<feComposite operator="in" in2="SourceAlpha" />
</filter>`
);
filterEl = document.getElementById(cssVariable);
}

if (!filterEl) {
continue;
}

const feFloodEl = filterEl.querySelector('feFlood');

if (!feFloodEl) {
continue;
}

const color = document.documentElement
? getComputedStyle(document.documentElement).getPropertyValue(
cssVariable
)
: '';
Comment thread
nchevobbe marked this conversation as resolved.

feFloodEl.setAttribute('flood-color', color);
}
};
defineSvgFiltersForColors();

const forcedColorsMql = window.matchMedia('(forced-colors: active)');
const darkSchemeMql = window.matchMedia('(prefers-color-scheme: dark)');
Comment thread
nchevobbe marked this conversation as resolved.
forcedColorsMql.addEventListener('change', defineSvgFiltersForColors);
darkSchemeMql.addEventListener('change', defineSvgFiltersForColors);
}

const store = createStore();
const root = createRoot(
ensureExists(
Expand Down
1 change: 1 addition & 0 deletions src/types/globals/Window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ declare class Window {
platform: string,
};
postMessage: (message: any, targetOrigin: string) => void;
matchMedia: (matchMedia: string) => MediaQueryList;
}

declare var window: Window;