1454337 - Dev Toolbar - Data URL source links and their tooltips for CSS rules from Userstyle : Should be more useful

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P5)

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:

Using the Dev Toolbar, find Data URL source links of an Userstyles in the right htlm panel


Actual results:

But now if we can find the number line of the css easily, it could be better.

By example, actually it provide only :
"inline:74074


Expected results:


Should be more useful (specially when we test many Userstyle for one site) :
"(inline)Userstyles TableView+Enhancer - Dark-Grey v.105:74074"
or generally:
"USERSYTLE NAME" + CSS Line Number"

It's possible to have the userstyle name (Directly or on hover) from which 
the CSS rule come from + line number in it ??

Comment 1

[Timea Cernea [:tbabos][inactive]]

Hi decembre56,

The described issue seems more like and enhancement, thus I will assign it to a component in order to involve the development team for a proper review.

Comment 2

[decembre56]

;-)

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Hello decembre56,

I feel it is related to the inspector panel right ?
I am not sure what to do with the steps to reproduce, so could you: 
- give us an url to see the issue (a codepen/glitch would be perfect)
- give us the exact steps you take that lead to the issue

Thanks !

Comment 4

[decembre56]

well...
It's a little bit complicated for me :
I don't know how to make a codepen.

You can easily test if you use Userstyles, go to their site.

and install one of my Userstles for it (maybe not to good for you : i make t for a large screen):
https://userstyles.org/styles/56792/userstyles-tableview-enhancer-dark-grey-v-106 .

If you use the inspector , you can understand what i mean... i hope!

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Screenshot at Apr 19 17-03-07.png

Okay, I installed the extension and your style, and then inspected an element.
Are you talking about the links I circled in red ?

Comment 6

[decembre56]

perfectly!

Comment 7

[decembre56]

I return to test how work the inspector in Firefox Quantum and if it is better it always miss something to make it useful as Firebug before.

Before in firefox + firebug, we see the style name (truncated if too long) + the number line and on hover of it , the header of the userstyles used.

That's more comfortable!
I test many userstyles for the same site and it really a pain to not have these infos provided in Quantum.

Comment 8

[decembre56]

Attachment: Waterfox + Firebug - for BUGzilla - INSPECTOR ( show my userstyles name) - TXT - 2018-10-23_164351.png

Waterfox + Firebug - BUGzilla - INSPECTOR ( show my userstyles name)

Comment 9

[decembre56]

Attachment: FIR QUANTUM - for BUGzilla - INSPECTOR for Style (not show my userstyles name) - TXT - 2018-10-23_164351.png

FIR QUANTUM + Inspector - for BUGzilla - INSPECTOR Css selector don't display the userstyles name.

Comment 10

[decembre56]

Any new update about it ?
I think it should be useful not only for me :-)
I post about it in Reddit :
CSS - Firefox Quantum vs Waterfox and Dev Toolbar vs Firebug (need enhancement...)
https://www.reddit.com/r/waterfox/comments/c6wq21/css_firefox_quantum_vs_waterfox_and_dev_toolbar/

Comment 11

[Razvan Caliman [:rcaliman]]

Hi, decembre56!

This looks like an enhancement request to how stylesheets with content expressed from a data URI are represented in the Rules view. Right now, DevTools uses the inline stylesheet representation. As I understand it, the stylesheet links point right source for inspection in the Style Editor, so there's no blocker, just an inconvenience.

While I agree this would be a nice to have, we currently don't have something like this on our roadmap for work.
However, we will review a patch if anyone is interested in working on it.

Comment 12

[decembre56]

No one is interested by enhance this ?

I have read somewhere that you ask our advise about the New devtools (which normally include now some Firebugs "like" functions):
Yes, it seems better and better, offer a lot of interesting ways to inspect / observe / etc ...
But too, i think it should make infos useable and more readable, which help to adopt it .

Each time a new Quantum is lunched , i test it to see if some change are made to make my CSS and Style usage,
more easy...
But, for me, that's not the case:
It's very far of the combination Firebug+ Firpath provided before.

Comment 13

[decembre56]

I know, it's a 2 year old bug, but after reading:
GitHub - Stylus Addon: expose style name #1403
With the dev reply, i realize that Firefox Quantum:

Note that this PR is mostly useless for Firefox because it doesn't support names in the inspector.

Yes, it's:

an enhancement request to how stylesheets with content expressed from a data URI are represented in the Rules view.
It need to post an other request?
But it seems i can't find the right way to explain it.

Comment 14

[decembre56]

Other explanation by this dev (copy/ paste):
"I have limited it to Chrome now because FF's devtools doesn't support sourceURL comment in style elements,
so the only thing the PR did was adding a data-name attribute on style elements,
which is arguably entirely meaningless because devtools in FF doesn't link rules to elements."