1454235 - FirePath alternative to find/test CSS selector easily ?

Status: RESOLVED INVALID

(DevTools :: Inspector, defect)

Description

[decembre56]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20180324220229

Steps to reproduce:

I want test CSS selector easily....


Actual results:

I can't find more efficient method than the old Firepath (in conjunction with the defunct Firebug).
That's the first thing i miss with Quantum.

Firepath (As i can see, seems like its dev is not on the web now....):
https://addons.mozilla.org/en-US/firefox/addon/firepath/


Expected results:

- Right click on an element 
- Choose in menu:
Open a CSS selector in a dev tab
- Modify it directly here to test it.

Simple !

Comment 1

[decembre56]

Related bug , but more about Xpath slector than CSS selector:
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=963933">Search for elements by XPath selectors</a>

Comment 2

[Gingerbread Man]

(In reply to decembre56 from comment #0)
> Expected results:
> 
> - Right click on an element 
> - Choose in menu:
> Open a CSS selector in a dev tab
> - Modify it directly here to test it.

If you want to affect a particular element:
1. Right-click and choose "Inspect Element (Q)"
2. On the right side of the developer tools pane, click the Rules tab.
3. Left-click a property or value to edit it, or left click after the } to add a new property:value pair.

If you want to modify a particular rule:
1. Right-click and choose "Inspect Element (Q)"
2. On the right side of the developer tools pane, click the Rules tab.
3. Left-click the filename:line next to the rule in question to open the Style editor, scrolled to that position.
4. Make your changes in the Style editor. They take effect immediately.

https://developer.mozilla.org/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

Comment 3

[decembre56]

Thanks for the answer, but i think that's not solved...
Maybe my explanation is not good :-)

I want not edit in dev toolbar (i edit it with an other addon more easily).

I want simply / quickly find the good selector which match for my style (That the goal of Firepath):
- past/type in a search field a CSS selector
- hint enter and see what it match
- modify it if not good etc ...

Example (on that forum):

With Firepath , by simply type or copy/paste my code in its search field, find 3 match for:
.change-set
And i can modify it by trying some others combinations:
#c0.change-set
or by copy directly the code in need from the orignal code displaying:
.skin-standard.bug_modal  #c0.change-set + #c1


In Dev Toolbar.
The menu to copy CSS selector menu provide 2 options:

- copy the CSS selector (very short):
#c2
- Copy the path of the CSS selector:
html body.bugzilla-mozilla-org.skin-standard.bug_modal.yui-skin-sam.platform-Win64 div#wrapper main#bugzilla-body div#main-inner form#changeform div#c2.change-set
It is very detailed , maybe too much , i prefer without all these "div": 
html body.bugzilla-mozilla-org.skin-standard.bug_modal.yui-skin-sam.platform-Win64 #wrapper main#bugzilla-body #main-inner form#changeform #c2.change-set

We can't copy the code we want simply by selecting it, we need type it (with possible errors if complex):
body.bugzilla-mozilla-org.skin-standard.bug_modal   main#bugzilla-body #c0.change-set + #c1

To test a css selector, the search field on the top/right pane is not so useful.
When i am on the element(in the left pane).
If i type :
.change-set 
it provide/filter the rule applied on it, that's all

I can't test an other CSS selector on the whole page.

Maybe i forget or understand something again but

Comment 4

[Gingerbread Man]

(In reply to decembre56 from comment #3)
> Example (on that forum):

What forum? Please provide exact steps to reproduce the issue.

> With Firepath , by simply type or copy/paste my code in its search field,
> find 3 match for:
> .change-set

(In reply to Gingerbread Man from comment #2)
> If you want to modify a particular rule:
> 1. Right-click and choose "Inspect Element (Q)"
> 2. On the right side of the developer tools pane, click the Rules tab.
> 3. Left-click the filename:line next to the rule in question to open the
> Style editor, scrolled to that position.
> 4. Make your changes in the Style editor. They take effect immediately.

Using this page as an example,
2. With <div class="change-set" id="c0"> selected in the Inspector's HTML view, click the Rules tab.
3. Next to .change-set left-click bug_modal.css:535. The Style editor opens, scrolled to that position, with all instances of .change-set highlighted.

> And i can modify it by trying some others combinations:
> #c0.change-set

It's already possible to modify the selectors in either the Inspector's Rules tab or the Style editor. It's not clear what you're asking.

> or by copy directly the code in need from the orignal code displaying:
> .skin-standard.bug_modal  #c0.change-set + #c1

I don't know what you mean by this.


Gabriel, I see no reason to reopen this. Double-checking with you.

Comment 5

[decembre56]

Thanks for your time lost here :
Ok , my explanation seems bad...
Last test to try to be clear.

- I don't want use the Style Editor to edit CSS rules...

- My problem it's only related to find and test CSS selectors .

I try (by example in this page):

1 -
Typing ".change-set" in the search field on top of the right panel:
It highlight only the first match of 10 possible results which it notice.
How / it is possible to have all occurrences highlighted ?
At least, it should be great if all results should be highlighted at once.

And this search field is too short:
In it, try to work with (to add/delete something in the selector) "html body.bugzilla-mozilla-org.skin-standard.bug_modal.yui-skin-sam.platform-Win64 div#wrapper main#bugzilla-body div#main-inner form#changeform div#c1.change-set"

2 - 
Using the Inspector's Rules tab to find / modify the selectors is not usable:
"2. With <div class="change-set" id="c0"> selected in the Inspector's HTML view, click the Rules tab."
Type ".change-set" in its search field provide only the rule applied to this selector.
If it is "html" which is selected and searching ".change-set" find noting.


- We can't select any part of code in the left panel and Copy it.

Anyway if you have used Firepath i am certain you can understand how this addon simplify this work....

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

I believe this is actually a duplicate of Bug 963933 and I can see decembre56 also posted there a year ago. We don't currently have any plans to offer this feature, but we do believe this could be a potential enhancement to our devtools in the future. 

sebo also mentions some potential alternatives in https://bugzilla.mozilla.org/show_bug.cgi?id=963933#c25.