1166963 - Add autocompletion for selectors

Status: NEW

(DevTools :: Inspector: Rules, defect, P3)

Description

[Jeff Griffiths (:canuckistani) (:⚡︎)]

Attachment: 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.

Comment 1

[vkarande]

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

Comment 2

[Patrick Brosset <:pbro>]

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.

Comment 3

[Patrick Brosset <:pbro>]

Honza: see my question in the previous comment.

Comment 4

[vkarande]

Alright !

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Comment 6

[mj]

What about this ? It's one of the best feature on Firebug, I things all webmaster need that.

Comment 8

[Sebastian Zartner [:sebo]]

The needinfo request is lying around for almost a year now and vkarande wasn't active on Bugzilla for even longer.
Therefore I unassign him/her to give others the chance to pick this up.
I've also generalized the summary, because this feature should not only work when adding a new rule but generally when editing the CSS selectors.

To be a bit more precise on how this worked in Firebug, as far as I remember, its selector autocompletion was made up from all tag names, IDs, class names found in the DOM structure plus all pseudo-classes and pseudo-elements Gecko supports. And, as the GIF attached by Jeff shows, it allowed to toggle through the different values for a part of the selector by placing the text cursor within it and pressing Up/Down.

Example for how this should work (and how it did in Firebug):
Having a selector like 'div.foo::after', placing the text cursor within '.foo' and pressing Up/Down changes '.foo' to the previous/next class selector of the document, but keeps 'div' and '::after' unchanged. So, as a result you may have 'div.bar::after' then with '.bar' being selected.

Small things like this one made Firebug's UI the best among all browser devtools.

Sebastian

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

we could probably use some part of https://searchfox.org/mozilla-central/rev/28cc363411d2029aed04c969c8f98785cae110db/devtools/client/shared/sourceeditor/css-autocompleter.js
It would also motivate/force us to more actively maintain this module (for example I don't think it supports :is/:where,:has, …)