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),
