Closed Bug 703383 Opened 13 years ago Closed 12 years ago

Add ability to select nodes within the Highlighter and then get back a CSS selector that will match the targeted node

Categories

(DevTools :: General, enhancement)

Product:
DevTools
Component:
General
Type:
enhancement
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 701419

People

(Reporter: jaws, Unassigned)

References

Details

(Whiteboard: [good first bug][mentor=paul][lang=js]) 

Users should be able to select n-nodes within the DOM tree, right click on one of them, and then get back a CSS selector that can match the targeted node.

Simple example:

<html>
<body>
 <div id="one"></div>
 <div id="two"></div> <!-- selected #two -->
</body>
</html>

Output: #two

Complex example:

<html>
<body>
 <div id="one"></div> <!-- selected one -->
 <div id="two"></div> <!-- selected two, targeted two -->
</body>
</html>

Output: #one + #two


Complex example 2:

<html>
<body>
 <div id="one"></div> <!-- selected one, targeted one -->
 <div id="two"></div> <!-- selected two -->
</body>
</html>

Output: A selector for this is not possible.
This would also be a cool way to teach people about more complex selectors like sibling selectors.
Blocks: 663830
Depends on: 653545
We already have code to do something like this (CssLogic.getShortName), however it concentrates on concise identification above being valid CSS.

(i.e. if you need to identify the third <li> which isn't identified by an #id or unique .class then it uses li[3] rather than li:nth-child(3))

It would probably be easy to make this work with nth-child or to see if a shortcut could be made using .class selectors too.
I guess the first step is to make this work as a command for the gcli.
Then expose the feature in the Node Menu (in the infobar).
Assignee: nobody → johan.charlez
Status: NEW → ASSIGNED
Does the scope of this bug include highlighting several nodes?
Unassigning myself from this bug due to lack of time.
Assignee: johan.charlez → nobody
Status: ASSIGNED → NEW
(In reply to Paul Rouget [:paul] from comment #4)
> Does the scope of this bug include highlighting several nodes?

I don't think this bug should include the ability to highlight several nodes. Selectors for a single node would be a good first step :)
Whiteboard: [good first bug][mentor=paul][lang=js]
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → DUPLICATE
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.