1997274 - Style editor loads extremely slow on Github

Status: NEW

(DevTools :: Style Editor, defect, P2)

Description

[eight04]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Steps to reproduce:

1. Go to https://github.com/openstyles/stylus/issues/2021
2. Press F12 to open devtools.
3. Switch to the "Style Editor" tab.

Actual results:

It takes more than 60 seconds before the editor is shown on my laptop.

Expected results:

It loads instantly in older version.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[:glob ✱]

Opening the Style Editor results in 600+ requests for original source, blocking until all requests are complete (most/all appear to be 404).
On a high latency connection this is quite noticeable (about 45 seconds for me).

14:32:24.131 Error while fetching an original source: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9
Source URL: https://github.githubassets.com/assets/app/assets/stylesheets/bundles/github/index.scss
...

Comment 3

[Julian Descottes [:jdescottes]]

Styleeditor is fetching all stylesheet text for all the stylesheets listed in the StyleEditor, with no lazy loading.

Comment 4

[Alexandre Poirot [:ochameau]]

Profiler is easily crashing with various native stacks:
https://crash-stats.mozilla.org/report/index/bp-0fa55896-a237-444d-ac1d-cf4690251105
https://crash-stats.mozilla.org/report/index/bp-07d795f6-46f3-4c73-836e-e2b4d0251105

This doesn't help record a full profile, but I was able to record part of style editor initialization:
https://share.firefox.dev/3Jy2LZm

I suspect the styleeditor is processing source mapped CSS very slowly, processing each individual oririnal SASS file with a 404, sequentialy, and ultimately taking a little while to process them all.
It takes a while, but there is no freeze, just lots of small long-running tasks.

I suspect we are blocking styleeditor opening around these lines:
https://searchfox.org/firefox-main/rev/cb52781342cc905eda923d009fc0b678f3a8c8c6/devtools/client/styleeditor/StyleEditorUI.sys.mjs#217-225

await this.#toolbox.resourceCommand.watchResources(
  [this.#toolbox.resourceCommand.TYPES.STYLESHEET],
  {
    onAvailable: this.#onResourceAvailable,
    onUpdated: this.#onResourceUpdated,
    onDestroyed: this.#onResourceDestroyed,
  }
);
await this.#waitForLoadingStyleSheets();

Comment 5

[Julian Descottes [:jdescottes]]

Previous bug for the similar root issue: Bug 1783885, where I only updated the styleeditor to lazily prettify sources.