Feedback about the Style Editor wanted

Do you use the Style Editor panel in Firefox DevTools?
If so what problems are you trying to solve with it?

For information the Style Editor is the panel that lists all of your stylesheets and allows to edit the text in each of them. Here’s a screenshot of it:

We would love your input in this 3-questions survey:

Or feel free to answer here directly!

I already gave some general feedback through the survey, but wanted to outline some major issues the Style Editor currently has, which cause me to not use it as often as I’d like to.

  1. Linking between the Styles side panel of the Inspector and the Style Editor does not work for inline and minified style sheets.

  2. The search UX is very poor. It closes everytime you hit Enter (I know you can navigate through the matches via Ctrl+G, but that’s not discoverable at all) and it misses basic options like case sensitivity, regex and whole word search and also doesn’t tell you the number of search matches.
    Furthermore, it’s not possible to search within multiple files.
    If possible, the search of the Debugger should be reused, which provides all those features.

  3. There is no pretty-print option to make it easier to navigate through a style sheet.

  4. Auto-completion is quite broken. It basically only works when you enter a new value, in all other cases it incorrectly adds the name or value of a property instead of replacing it.

  5. There’s no option to automatically reapply saved style sheets. That makes it cumbersome to tweak your layout to perfection.

I think, there are already bugs filed for each of those points. If you want me to search for them, let me know.

Sebastian

Thanks Sebastian for your feedback.
We’ve received quite a lot of feedback through the survey, and many people share your thoughts.
We’ll be working on establishing a plan for this panel that addresses those issues.
Patrick