Can't search in multiple sources in the Style Editor

NEW
Unassigned

Status

P2
enhancement
6 years ago
12 days ago

People

(Reporter: shtetldik, Unassigned)

Tracking

(Blocks: 2 bugs)

22 Branch
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [polish-backlog][difficulty=hard])

(Reporter)

Description

6 years ago
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.
(Reporter)

Updated

6 years ago
Component: Untriaged → Developer Tools: Style Editor
(Reporter)

Updated

6 years ago
Severity: normal → enhancement
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?
Status: UNCONFIRMED → NEW
Ever confirmed: true
Flags: needinfo?(fayearthur)
OS: Linux → All
Priority: -- → P2
Hardware: x86_64 → All
(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.
Flags: needinfo?(fayearthur)
Duplicate of this bug: 719409
Duplicate of this bug: 986702
Duplicate of this bug: 932093
Duplicate of this bug: 1114934
Whiteboard: [devedition-40]
Whiteboard: [devedition-40] → [devedition-40][difficulty=hard]
Whiteboard: [devedition-40][difficulty=hard] → [polish-backlog][difficulty=hard]
Duplicate of this bug: 1330061
See Also: → bug 1362030

Updated

10 months ago
Product: Firefox → DevTools
Blocks: 1493094

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.
You need to log in before you can comment on or make changes to this bug.