STRs:

• enable server side resources devtools.testing.enableServerWatcherSupport
• open any page (eg https://www.wikipedia.org/)
• open DevTools, select the inspector
• navigate to your test page, with a stylesheet (applied to the body preferably, easier to test). I used http://bgrins.github.io/devtools-demos/inspector/sourcemap.html

ER: The rule view should display the correct stylesheet name next to each rule. Clicking on the stylesheet should open the style editor.
AR: The rule view shows "inline" even for styles defined in a stylesheet. Clicking on "inline" doesn't do anything.

Note: This is even more broken without Bug 1664941, which is why I am filing this as a follow up work.

Tracking dt-fission-m3-mvp bugs for Fission MVP.

Moving some dt-fission-m3-mvp bugs from Fission MVP to M7 (blocking Beta experiment).

Tracking dt-fission-m3-mvp test and infrastructure bugs for Fission M8 (blocking Release experiment).

I did some investigation.

inline is shown because in devtools/client/inspector/rules/views/rule-editor.js#293 this.rule.sheet is null, and when we call devtools/client/inspector/rules/views/rule-editor.js#300 it returns inline if the href is null (devtools/shared/inspector/css-logic.js#133-136)

The rule sheet is retrieve from devtools/client/inspector/rules/models/rule.js#218, which calls devtools/client/fronts/style-rule.js#112-122
So we're trying to retrieve a resource from its id, but here, the this._form.parentStyleSheet property is undefined, which explains why we get a null stylesheet rule in the end

And the reason parentStyleSheet is undefined on the form is because we can find the pageStyle's styleSheetWatcher in devtools/server/actors/style-rule.js#331-335 , which is set in devtools/server/actors/page-style.js#115-118, but in our case it's not created yet (but is a bit later)

Here's the trace that leads to the pageStyle actor creation, after navigating:

devtools/server/actors/page-style.js 131 initialize
devtools/server/actors/inspector/inspector.js 162 getPageStyle
devtools/client/fronts/inspector.js initialize
devtools/client/inspector/inspector.js initInspectorFront
devtools/client/inspector/inspector.js _onTargetAvailable

In short:

• we're notified when a new FRAME target is created
• for which we initialize an inspector front
• which creates a pageStyleActor

The issue here being that we're not listening to STYLESHEET resource yet, so styleSheetWatcher isn't set on the pageStyleActor.
Here's the trace that leads to watching STYLESHEET resources, after navigating:

devtools/server/actors/resources/index.js 205 watchResources
devtools/server/actors/targets/target-actor-mixin.js 85 _watchTargetResources
devtools/server/actors/targets/target-actor-mixin.js 34 addWatcherDataEntry
devtools/server/connectors/js-window-actor/DevToolsFrameChild.jsm 411 _addWatcherDataEntry
devtools/server/connectors/js-window-actor/DevToolsFrameChild.jsm 353 receiveMessage
devtools/server/connectors/js-window-actor/DevToolsFrameParent.jsm 94 addWatcherDataEntry
devtools/server/actors/watcher/target-helpers/frame-helper.js 101 addWatcherDataEntry
devtools/server/actors/watcher.js 331 watchResources
[...]
devtools/shared/resources/resource-watcher.js 676 _startListening
devtools/shared/resources/resource-watcher.js 331 _onTargetAvailable/<
devtools/shared/resources/resource-watcher.js 330 _onTargetAvailable
[...]
devtools/shared/resources/target-list.js 197 _onTargetAvailable
devtools/shared/resources/target-list.js 572 switchToTarget
devtools/shared/resources/target-list.js 558 onLocalTabRemotenessChange
[...]
devtools/client/fronts/descriptors/tab.js 223 _onRemotenessChange
devtools/client/fronts/descriptors/tab.js 205 _handleTabEvent
browser/content/tabbrowser.js 5798 didChange
global/content/elements/browser-custom-element.js 1916 finishChangeRemoteness
global/content/customElements.js 696 getInterfaceProxy/get/<

In short:

• we do a target switch from the client
• this triggers the onTargetAvailable callback in the resource watcher, that will end up calling watchResources on the watcher actor
• we go through the DevToolsFrame JSWindowActor to propagate the resources we want to watch to all targets

Looking at the 2 paths, they're quite independent from each other. The only common thing is that they're initialized by an onTargetAvailable callback, but then, the JSWindowActor communication for watching the resource introduces some delay that will mean that the pageStyleActor gets created before the stylesheet resources are watched for a given target.

Tracking DevTools Post-M8 bugs for Fission MVP milestone. They don't block the Fission Release channel experiment, but we would like them to be completed before we roll out Fission by default.

Fixed in Bug 1685268 (demonstrated by browser_rules_style-editor-link.js)