I did a bit of research on this topic to help move it along. Here's my analysis so far:

• Writing the code to search for text inside stylesheets isn't particularly hard
• Writing it in a way that is usable is harder. We want results to come in as they are found, while continuing to search in the background since there may be many stylesheets and many matches.
  • I suggest implementing this on the server-side because this is where we have all of the StyleSheet actors and their CSS text (at least I think we do, unless we lazily fetch them only when needed).
  • The method that does this should probably immediately return and start searching for results while sending actor-to-front events as it finds matches
• Another technical problem to be solved is the fact that the style-editor auto-beautifies CSS with a custom CSS beautifier. Because we would search on the server, where text is as-authored, there'd be a mismatch between the line/col of matches and the line/col of the corresponding pieces of text we need to highlight in the UI
  • I suggest modifying the css beautifier so it also generates a source map while beautifying the code. DevTools already uses the mozilla/source-map library and, hence, has access to the SourceMapGenerator that could be used for this.
  • This, anyway, is a step that I think is needed for solving cases where users click on CSS warnings in the console and that doesn't lead to the right location (because the location of the reported error corresponds to the location in the authored stylesheet, at the time of parsing, while the style-editor shows a transformed/beautified version of the stylesheet where location are different).
  • The generated source map would be sent along with the search results and consumed in order to map back to the right results.

The new search tool in the Network panel just got enabled in Firefox Nightly! This is an amazing tool, and might be very interesting to people here since it allows to search through stylesheets too.
To try it out:

• Make sure you are running a recent Firefox Nightly build
• Open the network panel
• Load a webpage
• Click on the magnifying glass icon to open the search sidebar
• Type any piece of content and press enter

Thank you for the heads up on this, Patrick! It really helps to find things within the different resources. Can you post the bug where this was implemented as reference, please?

Though this feature is still somewhat of a workaround for a proper search feature within the Style Editor itself.

Sebastian

Bug 1454312 landed the MVP for Network Search.

Any progress on this ticket?

This has come up a couple times recently, it's very useful when doing compat analysis.

Nicolas, do you know how much work would this be? The debugger supports it and it's super helpful :)

Bomsy you were working on the Debugger search, do you also have some insights into how complext this would be?
Thank you.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #14)

This has come up a couple times recently, it's very useful when doing compat analysis.

Nicolas, do you know how much work would this be? The debugger supports it and it's super helpful :)

Oops, sorry for missing this.
I don't know how much work it would be, but we do have the text for all the stylesheet on the client IIRC, and as Honza said, we already have similar machinery for Debugger and Netmonitor, so it shouldn't be super hard.

One of the thing that could be a blocker is the UI. Ideally we'd do something similar as the other panels, which means changing how we're displaying the sidebars in the StyleEditor. This is reasonable so we're consistent overall, but this might be slightly challenging as the StyleEditor is still using XUL. This might be a good opportunity to migrate it to HTML, but I'm afraid it won't be straightforward.

So maybe we could at least try to put the machinery into place, and simply put the search in files in a dialog (kind of what we were doing before in the Debugger), so we're not blocked.