Clone Firebug's autocompletion behaviour when adding a new rule

NEW
Assigned to

Status

()

Firefox
Developer Tools: Inspector
P3
normal
3 years ago
4 months ago

People

(Reporter: canuckistani, Assigned: vkarande, NeedInfo)

Tracking

(Blocks: 2 bugs)

41 Branch
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox41 affected)

Details

(Whiteboard: [btpp-backlog])

Attachments

(1 attachment)

Created attachment 8608380 [details]
fb-selector-completion.gif

From: http://alfonsoml.blogspot.com.es/2015/05/firefox-devtools-long-way-to-go.html

"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]
(Assignee)

Comment 1

2 years ago
Hi,

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: https://developer.mozilla.org/en-US/docs/Tools/Contributing

Once you're comfortable doing this, the interesting files will be:
- https://dxr.mozilla.org/mozilla-central/source/devtools/client/inspector/rules/ 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: https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/styles.js

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)
(Assignee)

Comment 4

2 years ago
Alright !
Here is CSS selector inline-editor:
https://github.com/firebug/firebug/blob/master/extension/content/firebug/css/selectorEditor.js

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:
https://github.com/firebug/firebug/blob/master/extension/content/firebug/editor/inlineEditor.js#L246


The AutoCompleter itself is here:
https://github.com/firebug/firebug/blob/master/extension/content/firebug/editor/editor.js#L517

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


Honza
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)

Updated

9 months ago
Blocks: 991806

Updated

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