Bug 124779 – Web Inspector: Styles: Truncate long URLs (e.g. base64)

• Status: RESOLVED
• Resolution: MOVED
• Component: Web Inspector

[Andrew Theroux]

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

[Antoine Quint]

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.

[Joseph Pecoraro]

(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.

[Timothy Hatcher]

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.

[Timothy Hatcher]

In fact almost any long URL could be treated this way.

[David Kilzer (:ddkilzer)]

<rdar://problem/28228553>

[Matt Baker]

Closing. This is being resolved in:

<https://webkit.org/b/178176> Web Inspector: Styles Redesign: apply syntax highlighting to property values