Auto-apply css classes when selecting them

Developer Tools
#1

Due to work related circumstances, I need to move from Chrome to Firefox. But there’s one thing that’s driving me nuts.

How do I make Firefox apply css classes only when selecting them?

r/firefox - Moving from Chrome to Firefox, developer tools drive me nuts

On Chrome if you do the same thing, it applies the css class without hitting enter.
On Firefox I need to select it, hit enter, unckeck if it’s not ok and try again…

It’s very useful when searching for the appropriate bg-*, margin/padding-* or other tweaks like this.

I found this topic: CSS class autocompletion but it’s only for CSS autocomplete, not autocomplete and autoapply.

@zbraniecki thank you for the suggestion :wave:

LE: this topic is a follow-up of this reddit post https://www.reddit.com/r/firefox/comments/r9evul/moving_from_chrome_to_firefox_developer_tools/

2 Likes
#2

Hi!

That’s being worked on at https://bugzilla.mozilla.org/show_bug.cgi?id=1654731

It’s a quite difficult part of the codebase, but thankfully a brave contributor who already added a preview of the class “as you type” is currently writing a patch to add this feature. Feel free to follow the progress on Bugzilla. I don’t think this will make it in time for 96, but 97 should be ok.

1 Like
#3

When is this coming? Its 2024 and its still missing

#4

This was added in Firefox 101: the selected element in the autocomplete is added into the selected node classList.
Isn’t it working for you? Can you describe what you’d expect from it?