964014 - Add "Copy as data URI" for images in the Inspector

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Victor Porof [:vporof][:vp]]

This is useful.

Comment 1

[Patrick Brosset <:pbro>]

I wanted to file this bug at the same time :)
Indeed, useful, and easy.

- The inspector has a contextual menu (in inspector.xul): inspectorPopupSet. It's easy enough to add one item in there "copy as data-uri" that would be enabled only for image nodes.
- NodeActor objects have a handy method called getImageData() that returns the data-uri for any image node.
- We can import the nsIClipboardHelper service and use its copyString method to get the data-uri into the user's clipboard!

Comment 2

[Patrick Brosset <:pbro>]

Attachment: bug964014-Adds-copy-datauri-to-images-in-markupview v1.patch

This patch adds the following things:
- new menuitem in the inspector.xul menupopup
- logic in inspector-panel.js to switch that item on and off depending if the selected node is an image or canvas or not
- new function in markup-view.js to actually do the copy, this function sends a request to the NodeActor to get the image data (the getImageData actor method was already present)
- a new mochitest

Comment 3

[Patrick Brosset <:pbro>]

Thanks Heather for the review.
I forgot to paste the try build URL earlier: https://tbpl.mozilla.org/?tree=Try&rev=1583487f6118
It's all green.
So I'm going to check this in now.

Comment 4

[Patrick Brosset <:pbro>]

Fixed in fx-team: https://hg.mozilla.org/integration/fx-team/rev/16dbb9ba6d52

Comment 6

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/16dbb9ba6d52

Comment 7

[Eduardo Trápani]

I'm not sure how to translate "Copy Image Data-URL". How is it different from "Copy Image URL"?

Comment 8

[Patrick Brosset <:pbro>]

(In reply to Eduardo Trápani from comment #7)
> I'm not sure how to translate "Copy Image Data-URL". How is it different
> from "Copy Image URL"?

It is different because the image url points to the original resource on its server, whereas the image data-url contains the image itself.

A data-url looks like this: data:image/png;base64,iVBORw0KGgoAA....

Since it's a standard url, it can be used in the browser location bar, or as a background-image in a CSS stylesheet for example, but instead of pointing to a remote resource, it actually contains the data of the image (encoded in base64).

So clicking on "Copy Image Data-URL" will actually extract the data from the image, and turn it into a data-url.

Comment 9

[Eduardo Trápani]

> It is different because the image url points to the original resource on its
> server, whereas the image data-url contains the image itself.

Ok, now I get it, thanks.