Consider truncating base64 encoded images and fonts. The encoded information is of little use to the developer, yet consumes a sizable amount of screen real estate. This is how Safari handles it: http://cl.ly/image/021W1M320l2b vs. Chrome: http://cl.ly/image/1w2X1p0b2P3k
I wonder if we should just truncate everything after "base64", I don't see how any of that could be of use to the developer in the sidebar, and Cmd+click would show the full string in the stylesheet.
(In reply to comment #1) > I wonder if we should just truncate everything after "base64", I don't see how any of that could be of use to the developer in the sidebar, and Cmd+click would show the full string in the stylesheet. Good idea! That sounds good to me.
I was thinking about this when it was brought to my attention on Twitter. Turing these URLs into a token (like addresses in Mail's address field) might be best — to make it look like an actionable item. CodeMirror has support for replaced ranges which would be useful for this. We can replace the whole URL with any DOM element we want. On entry into the range it can auto expand even. But likely just a single click to a context menu to edit the URL would be best.
In fact almost any long URL could be treated this way.
<rdar://problem/28228553>
Closing. This is being resolved in: <https://webkit.org/b/178176> Web Inspector: Styles Redesign: apply syntax highlighting to property values