1171857 - CSS rule-view: long stylesheet source URLS should use an ellipsis

Status: NEW

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

Description

[Patrick Brosset <:pbro>]

Attachment: Screenshot 2015-06-05 10.26.33.png

If the stylesheets on the page have very long names, the rule-view will sometimes have to wrap rules' selectors.

I think out of the information displayed inside the rule-view, there is an order of importance:

- property names and values are highly important
- selectors or very important
- stylesheet names are quite important

In the attached screenshot, you'll see that the particularly long stylesheet name forces the equally long selector to wrap and become harder to read.
I think it would make more sense if the stylesheet name would only occupy a maximum width of, say, 30% of the total rule-view width, and be shorten, with an ellipsis, if the name doesn't fit.
This would give more room to the more important selector to be displayed nicely.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: rule-view-data-uri.png

Another wrapping issue i noticed on https://soundcloud.com/ when inspecting the body element.  Notice that the borders don't extend to the end of the (long) string.  But I think we should also collapse the data URIs more aggressively.

Comment 2

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.

An easy option is to set a maxwidth on the container div (".ruleview-rule-source"). Of course if we have a very simple selector ("body") linked to a long source URL, the URL will be clipped while we still have a lot of empty space. 

=> If we go for this, maybe max-width: 50% would be a good compromise here.