Clone Firebug's autocompletion behaviour when adding a new rule

Assigned to



Developer Tools: Inspector
3 years ago
4 months ago


(Reporter: canuckistani, Assigned: vkarande, NeedInfo)


(Blocks: 2 bugs)

41 Branch
Dependency tree / graph

Firefox Tracking Flags

(firefox41 affected)


(Whiteboard: [btpp-backlog])


(1 attachment)

Created attachment 8608380 [details]


"Bonus points go to Firebug because while editing a rule you have a super useful autocompleter based on the parent node names, ids and classes. No other tool has this."

See attached .gif.
Priority: -- → P3
Whiteboard: [btpp-backlog]

Comment 1

2 years ago

I am interested in this bug and  want to contribute. Could you please guide me and give me the correct steps to resolve this bug.

Thank you
Thanks for your interest. I'll assign the bug to you.
I think the firs step would be to take a look at what Firebug does for this feature.
@Honza: could you please give vkarande a link to the related section of Firebug's source code?

The second step would be to extract this, maybe even make this into an HTML/JS prototype you can work on separately from devtools, so it's easy to work on it and iterate without having to care about the integration in devtools and about building firefox.

Then, you'll have to find a way to include this in the CSS Rule View in FirefoxDevTools.
The first step here is to set your environment up, learn how to build and reload your changes:

Once you're comfortable doing this, the interesting files will be:
- This is the folder that contains all files that handle the CSS Rule View. That's for the UI only though. So this is where the selector editing takes place, and this is where you can add an auto-complete to it.
In terms of binding the auto-complete to the selector text editor, :jdescottes can help you.
- One complex part is that the page that is being inspected lives in another process than devtools, so you can't just access it to get information about parent elements for instance. So the actual logic that provides suggestions for the auto-complete drop-down will have to live on the "server-side", which is where the page runs, and which is where devtools code can access it freely.
For instance, the Rule View uses this module on the server-side:

Note that this isn't an easy bug, nor a "good first". So feel free to get started, but don't worry if it gets hard quickly :) 
We can provide other bugs if you want. Just let us know here.
Assignee: nobody → vkarande
Honza: see my question in the previous comment.
Flags: needinfo?(odvarko)

Comment 4

2 years ago
Alright !
Here is CSS selector inline-editor:

It's derived from InlineEditor and most of its implementation is related to autocompletion. This code is what you are probably looking for.

The AutoCompleter is instantiated in InlineEditor here:

The AutoCompleter itself is here:

You might be interested in how the autocompletion is integrated with inline-editor.

Flags: needinfo?(odvarko)

Comment 6

9 months ago
What about this ? It's one of the best feature on Firebug, I things all webmaster need that.
Flags: needinfo?(vkarande)


9 months ago
Blocks: 991806


7 months ago
Blocks: 1267303
You need to log in before you can comment on or make changes to this bug.