Can't search in multiple sources in the Style Editor
Categories
(DevTools :: Style Editor, enhancement, P2)
Tracking
(Not tracked)
People
(Reporter: shtetldik, Unassigned, NeedInfo)
References
(Blocks 3 open bugs)
Details
(Whiteboard: [polish-backlog][difficulty=hard])
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release) Build ID: 20130618035212 Steps to reproduce: - Opened a page which contians many CSS sources. - Opened Style Editor from developer tools and tried to search for some element class or id in the styles. Actual results: - No easy way for jumping to the next found element even within the same style source (except for pressing Ctrl+F and searching again). - The search works only for the selected style, forcing one to go over each style one by one to perform the search. Expected results: - Search should iterate through all CSS sources without manual switching between them. - There should be some easier way to jump to the next matching substring.
Comment 1•10 years ago
|
||
This request makes a lot of sense. In fact having the same kind of search tool that we have over in the debugger would help a lot. The debugger's search allows to: - open a file (cmd/ctrl+P) - search within a file (cmd/ctrl+F) - search across files (cmd/ctrl+alt+F) (and a couple others). Heather? Do we already have a bug for this? Could you comment on how feasible this would be?
Comment 2•10 years ago
|
||
(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #1) > This request makes a lot of sense. In fact having the same kind of search > tool that we have over in the debugger would help a lot. The debugger's > search allows to: > - open a file (cmd/ctrl+P) > - search within a file (cmd/ctrl+F) > - search across files (cmd/ctrl+alt+F) > (and a couple others). > > Heather? Do we already have a bug for this? > Could you comment on how feasible this would be? I think this is the bug for it (= The debugger is a bit different in that it also searches symbols and has JS-specific options. I would say this would take a non-trivial amount of time.
Comment hidden (obsolete) |
Updated•9 years ago
|
Updated•9 years ago
|
Updated•7 years ago
|
Updated•6 years ago
|
Updated•6 years ago
|
Comment 9•5 years ago
|
||
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.
- 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
Comment 10•5 years ago
|
||
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
Comment 11•5 years ago
|
||
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
Comment 12•5 years ago
|
||
Bug 1454312 landed the MVP for Network Search.
Comment 13•4 years ago
|
||
Any progress on this ticket?
Updated•2 years ago
|
Comment 14•5 months ago
|
||
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 :)
Comment 15•5 months ago
|
||
Bomsy you were working on the Debugger search, do you also have some insights into how complext this would be?
Thank you.
Description
•