Add autocompletion for selectors

NEW
Unassigned

Status

defect
P3
normal
4 years ago
10 months ago

People

(Reporter: canuckistani, Unassigned)

Tracking

(Blocks 2 bugs)

41 Branch
Dependency tree / graph

Firefox Tracking Flags

(firefox41 wontfix)

Details

(Whiteboard: [btpp-backlog])

Attachments

(1 attachment)

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]

Comment 1

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

Comment 4

3 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 hidden (advocacy)

Updated

2 years ago
Blocks: firebug-gaps
Duplicate of this bug: 1411950
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
Assignee: vkarande → nobody
Flags: needinfo?(vkarande)
Summary: Clone Firebug's autocompletion behaviour when adding a new rule → Add autocompletion for selectors
Component: Developer Tools: Inspector → Developer Tools: CSS Rules Inspector

Updated

10 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.