996370 - Give the possibility to display SVG images in an atomic way to inspect them

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: svg-inspect.png

(Not sure it is totally related to the inspector, but let's see. Move it elsewhere if you think it would be better.)

The page there has a long image.
http://apps.washingtonpost.com/g/page/world/the-depth-of-the-problem/931/

1. Ctrl-Click on the image to be able to access the image location and/or the view image and/or copy image
2. Inspect Element and realizing that is an SVG image included in HTML source

(see screenshot)

Here there are a few things I would love to be able to do at this stage.

* Copy the image (having the full markup starting with <svg… until </svg>) to be able to paste it somewhere else
* Isolate the image to be able to view it by itself as I would be able in the context of a JPEG/PNG, etc. with a 100% size or less.
* Inspect and debug the image isolated outside of the surrounding HTML.

Comment 1

[Patrick Brosset <:pbro>]

Thanks for reporting this bug, there are a couple of things we can probably do to help:

- consider SVG nodes as images in the inspector so that they get both a preview when hovering over in the markup-view, and the copy-as-data-url item in the context menu,
- auto-expand nodes when copying selected text in the markup-view: today you can already select text in the markup-view and copy that text, possibly answering your usecase, but the thing is that if nodes aren't expanded yet, their content won't be copied.

That's the 2 things I can see right now. Brian might have other ideas (cc'd).
I think these should live in 2 different bugs.

Comment 2

[Paul Rouget [:paul]]

How do we access the inner DOM of the image? Afaict, there's no child-docshell for the image.

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #1)

> - consider SVG nodes as images in the inspector so that they get both a preview when hovering over in the > markup-view, and the copy-as-data-url item in the context menu,

The tricky part about this (and the 'isolate the image to be able to view it by itself') is that element could be affected by the CSS on the page.  So we would need to somehow include the related CSS on the page while opening in a popup or new tab.  For instance, in http://jsfiddle.net/bgrins/jR39B/ we would need to include the external CSS when exporting in order to get an accurate reproduction of what you see on the page.  That said, adding 'open in new tab' that uses a data URI of the svg should be an easy way to handle this without including external CSS.

Related - need to enable right clicking on *all* links in markup view and add 'open in new tab'.  This would help with the case where an svg file is referenced from an img tag (and all sorts of other use cases in the markup view).

> - auto-expand nodes when copying selected text in the markup-view: today you
> can already select text in the markup-view and copy that text, possibly
> answering your usecase, but the thing is that if nodes aren't expanded yet,
> their content won't be copied.

You can already right click the root svg node and "Copy Outer HTML", which will put the full markup (plus <svg></svg>) on your clipboard.

Comment 4

[Gabriel Luong [:gl] (ΦωΦ)]

Filter on CLIMBING SHOES