Fix dark mode for perf_ui/flameChart.css
For hovering/selecting a node in the flame chart tree, we add a new
CSS variable to add some slight gradient. It also changes the
selection color of a node in the flamechart from blue to red (e.g.
the change from --accent-color to --accent-color-red).
[email protected],[email protected]
Bug: 1152736
Change-Id: I4a5e0da38dafd485adfedd1ed3a786e6ad62007c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2722440
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Tim van der Lippe <[email protected]>
diff --git a/front_end/perf_ui/FlameChart.js b/front_end/perf_ui/FlameChart.js
index 943e1ae..e160de0 100644
--- a/front_end/perf_ui/FlameChart.js
+++ b/front_end/perf_ui/FlameChart.js
@@ -108,7 +108,7 @@
*/
constructor(dataProvider, flameChartDelegate, groupExpansionSetting) {
super(true);
- this.registerRequiredCSS('perf_ui/flameChart.css', {enableLegacyPatching: true});
+ this.registerRequiredCSS('perf_ui/flameChart.css', {enableLegacyPatching: false});
this.contentElement.classList.add('flame-chart-main-pane');
this._groupExpansionSetting = groupExpansionSetting;
this._groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};
@@ -146,12 +146,8 @@
this._highlightElement = this._viewportElement.createChild('div', 'flame-chart-highlight-element');
this._selectedElement = this._viewportElement.createChild('div', 'flame-chart-selected-element');
this._canvas.addEventListener('focus', () => {
- this._selectedElement.classList.remove('flame-chart-unfocused-selected-element');
this.dispatchEventToListeners(Events.CanvasFocused);
}, false);
- this._canvas.addEventListener('blur', () => {
- this._selectedElement.classList.add('flame-chart-unfocused-selected-element');
- }, false);
UI.UIUtils.installDragHandle(
this._viewportElement, this._startDragging.bind(this), this._dragging.bind(this), this._endDragging.bind(this),
diff --git a/front_end/perf_ui/flameChart.css b/front_end/perf_ui/flameChart.css
index 8ca1a40..274feed 100644
--- a/front_end/perf_ui/flameChart.css
+++ b/front_end/perf_ui/flameChart.css
@@ -26,20 +26,14 @@
.flame-chart-highlight-element {
position: absolute;
pointer-events: none;
- background-color: rgb(56 121 217 / 10%); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
+ background-color: var(--color-background-hover-overlay);
}
.flame-chart-selected-element {
position: absolute;
pointer-events: none;
- outline: 2px solid var(--selection-bg-color);
- background-color: rgb(56 121 217 / 10%); /* stylelint-disable-line plugin/use_theme_colors */
- /* See: crbug.com/1152736 for color variable migration. */
-}
-
-.flame-chart-unfocused-selected-element {
- outline: 2px solid rgb(123 123 123 / 100%);
+ outline: 2px solid var(--color-accent-red);
+ background-color: var(--color-background-hover-overlay);
}
.chart-cursor-element {
