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.
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.
Honza: see my question in the previous comment.
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
What about this ? It's one of the best feature on Firebug, I things all webmaster need that.