Error:
TypeError: InspectorUtils.colorToRGBA(...) is null

React Component Stack:
in RequestListHeader
in VisibilityHandler
in Unknown
in Connect(Component)
in table
in div
in RequestListContent
in VisibilityHandler
in Unknown
in Connect(Component)
in div
in RequestList
in div
in div
in SplitBox
in div
in div
in SplitBox
in div
in MonitorPanel
in VisibilityHandler
in Unknown
in Connect(Component)
in div
in DropHarHandler
in AppErrorBoundary
in div
in App
in VisibilityHandler
in Unknown
in Connect(Component)
in Provider

Stacktrace:
getThemeColorAsRgba@resource://devtools/client/netmonitor/src/widgets/WaterfallBackground.js:158:43
draw@resource://devtools/client/netmonitor/src/widgets/WaterfallBackground.js:127:12
drawBackground@resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js:236:21
componentDidUpdate@resource://devtools/client/netmonitor/src/components/request-list/RequestListHeader.js:107:10
commitLifeCycles@resource://devtools/client/shared/vendor/react-dom.js:12958:22
commitAllLifeCycles@resource://devtools/client/shared/vendor/react-dom.js:14174:23
commitRoot@resource://devtools/client/shared/vendor/react-dom.js:14380:28
completeRoot/<@resource://devtools/client/shared/vendor/react-dom.js:15731:15
unstable_runWithPriority@resource://devtools/client/shared/vendor/react.js:617:12
completeRoot@resource://devtools/client/shared/vendor/react-dom.js:15730:27
performWorkOnRoot@resource://devtools/client/shared/vendor/react-dom.js:15659:21
performWork@resource://devtools/client/shared/vendor/react-dom.js:15567:24
performSyncWork@resource://devtools/client/shared/vendor/react-dom.js:15541:14
requestWork@resource://devtools/client/shared/vendor/react-dom.js:15410:5
scheduleWork@resource://devtools/client/shared/vendor/react-dom.js:15224:16
enqueueSetState@resource://devtools/client/shared/vendor/react-dom.js:8192:17
Component.prototype.setState@resource://devtools/client/shared/vendor/react.js:328:16
onStateChange@resource://devtools/client/shared/vendor/react-redux.js:1412:16
notify@resource://devtools/client/shared/vendor/react-redux.js:1159:21
notifyNestedSubs@resource://devtools/client/shared/vendor/react-redux.js:1198:20
onStateChange@resource://devtools/client/shared/vendor/react-redux.js:1409:16
notify@resource://devtools/client/shared/vendor/react-redux.js:1159:21
notifyNestedSubs@resource://devtools/client/shared/vendor/react-redux.js:1198:20
onStateChange@resource://devtools/client/shared/vendor/react-redux.js:1409:16
dispatch@resource://devtools/client/shared/vendor/redux.js:265:7
waitUntilService/</<@resource://devtools/client/shared/redux/middleware/wait-service.js:59:24
eventTelemetryMiddleware/</</<@resource://devtools/client/netmonitor/src/middleware/event-telemetry.js:29:21
throttlingMiddleware/</</<@resource://devtools/client/netmonitor/src/middleware/throttling.js:18:21
flushActions@resource://devtools/client/netmonitor/src/middleware/batching.js:88:11
DelayedTask/this._promise</this.runTask@resource://devtools/client/netmonitor/src/middleware/batching.js:107:9
notify@resource://gre/modules/Timer.sys.mjs:49:17

Took a quick look.
This is the draw code for the Waterfall background https://searchfox.org/mozilla-central/rev/3265b390bd5d08a5be520253ef71835bcb715f27/devtools/client/netmonitor/src/widgets/WaterfallBackground.js#158-159

I guess since colorStr https://searchfox.org/mozilla-central/rev/3265b390bd5d08a5be520253ef71835bcb715f27/devtools/client/netmonitor/src/widgets/WaterfallBackground.js#154 can be null based on https://searchfox.org/mozilla-central/rev/3265b390bd5d08a5be520253ef71835bcb715f27/devtools/client/shared/theme.js#55-58

It might cause colorToRGBA( https://searchfox.org/mozilla-central/rev/3265b390bd5d08a5be520253ef71835bcb715f27/layout/inspector/InspectorUtils.cpp#650 to return null??

Bomsy, can you check if any of the variables we use in WaterfallBackground might lead to a null value.

So yes, getCssVariableColor can in theory return null:

https://searchfox.org/mozilla-central/rev/ec342a3d481d9ac3324d1041e05eefa6b61392d2/devtools/client/shared/theme.js#51-58

const value = win
  .getComputedStyle(win.document.documentElement)
  .getPropertyValue(variableName);

if (!value) {
  console.warn("Unknown", variableName, "CSS variable");
  return null;
}

but from the Waterfall component, we're only calling it from 2 places:

https://searchfox.org/mozilla-central/rev/3265b390bd5d08a5be520253ef71835bcb715f27/devtools/client/netmonitor/src/widgets/WaterfallBackground.js#127,132

this.getThemeColorAsRgba(DOMCONTENTLOADED_TICKS_COLOR)
...
this.getThemeColorAsRgba(LOAD_TICKS_COLOR)

for those variables

https://searchfox.org/mozilla-central/rev/ec342a3d481d9ac3324d1041e05eefa6b61392d2/devtools/client/netmonitor/src/constants.js#459-461

// Colors for timing markers (theme colors, see variables.css)
DOMCONTENTLOADED_TICKS_COLOR: "--timing-marker-dom-content-loaded-color",
LOAD_TICKS_COLOR: "--timing-marker-load-color",

which are defined in the netmonitor CSS file

https://searchfox.org/mozilla-central/rev/ec342a3d481d9ac3324d1041e05eefa6b61392d2/devtools/client/netmonitor/src/assets/styles/variables.css#16-25

--timing-marker-dom-content-loaded-color:
  rgb(
    from var(--theme-highlight-blue) r g b /
    var(--timing-marker-color-opacity)
  );
--timing-marker-load-color:
  rgb(
    from var(--theme-highlight-red) r g b /
    var(--timing-marker-color-opacity)
  );

I'm wondering if it could somehow happen that the stylesheet isn't loaded yet when trying to render the ticks?
I couldn't reproduce the issue myself on x.com , and I'm not really seeing how that could happen.
Note that those ticks are only shown when you do have requests, so you'd have to be opening devtools when the page itself is loading to get in such a race condition.
We could put some default values just to make sure we don't crash the browser for this, but I'd really like to understand how this is failing

Eli, are you seeing this issue all the time? Do you have a slow machine? Or maybe you're seeing this when your computer is under heavy load? Does it happen with some specific settings (toolbox theme, detached toolbox, network throttling, …) ?

This shouldn't happen but we got report that it did.
Let's hotfix this first so we avoid crashes, and we'll
come up with a proper fix later.

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)

Eli, are you seeing this issue all the time? Do you have a slow machine? Or maybe you're seeing this when your computer is under heavy load? Does it happen with some specific settings (toolbox theme, detached toolbox, network throttling, …) ?

It doesn't happen all the time, I can't seem to reproduce it now either. My machine isn't the issue(Ryzen 9 5900X and 64GB of RAM), my best guess is that it was some funkyness with my network or one of my extensions(possibly LocalCDN) that caused the issue though, but it's impossible to say without being able to reproduce this. As for a fix, I agree that a default value, or some other null check, would be the right course of action here.

https://hg.mozilla.org/mozilla-central/rev/b242a74d26b0

This shouldn't happen but we got report that it did.
Let's hotfix this first so we avoid crashes, and we'll
come up with a proper fix later.

Original Revision: https://phabricator.services.mozilla.com/D226316

beta Uplift Approval Request

• User impact if declined: The DevTools Network Monitor might crash
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: no
• Steps to reproduce for manual QE testing: -
• Risk associated with taking this patch: low
• Explanation of risk level: devtools only, adding a fallback value for a variable that might be null
• String changes made/needed: -
• Is Android affected?: no

Comment on attachment 9432732 [details]
Bug 1924882 - [devtools] Use default color in getThemeColorAsRgba when getCssVariableColor returns null. r=#devtools-reviewers.

Fx132 is in RC now. Moving over the uplift request accordingly.