1062292 - Highlight main site URL in Storage Inspector left pane

Status: NEW

(DevTools :: Storage Inspector, enhancement, P3)

Description

[Dane MacMillan [:danemacmillan]]

Any given page on the Web can have multiple storage formats in use, across multiple domains. For example, given a domain, "example.com," it could be using analytics from Google, random widgets from Facebook or Twitter, comments by Disqus, etc. I think a distinction between the canonical or first-party URL, being the domain actually visited and displayed in the URL, and the non-canonical or third-party URLs, being remote-hosted assets like Google analytics or Disqus comments, should be made.

This distinction can be made in the Storage Inspector's left pane by changing the canonical URLs font color or highlighting it in some way, while all the other non-canonical URLs appear as usual. Optionally, instead of displaying all URLs in the pane as sort of first class citizens, when many of the vendor tools in use are really second class, they can be indented beneath the first class or canonical URL, in that way making the relationship clear, and indicating that the non-canonical storage data was set by the page located at the canonical URL.

Comment 1

[Girish Sharma [:Optimizer]]

This will be a good addition. UX input is needed though.

Comment 2

[Dane MacMillan [:danemacmillan]]

An addition to the opening report, should the second option (indenting beneath canonical URL) be chosen, could be to hint at the inclusion method (for lack of a better term) used by the non-canonical URLs to set their storage format. This means that if a non-canonical URL which sets storage is included on the canonical URL page, it should state whether the inclusion method was either by an iframe, like Disqus comments, or by an inline snippet of code, like Google analytics. Instead of displaying a globe next to their URL, they can display an icon that reflect the inclusion method. For example, an iframe inclusion method may have an icon that looks like a globe that is contained within a box; an inline inclusion method may have an icon that has two tiny globes next to each other. That is up to the designer. Ultimately, this can be a useful visual for developers when they open up the Storage Inspector, especially if they appear indented beneath the canonical URL.

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Helen: How do you think we could differentiate between URLs (see comment 1)