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

RESOLVED FIXED in Firefox 29

Status

defect
RESOLVED FIXED
5 years ago
11 months ago

People

(Reporter: vporof, Assigned: pbro)

Tracking

unspecified
Firefox 29
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

Reporter

Description

5 years ago
This is useful.
Assignee

Comment 1

5 years ago
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!
Assignee

Updated

5 years ago
Assignee: nobody → pbrosset
Assignee

Updated

5 years ago
See Also: → 964015
Assignee

Comment 2

5 years ago
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
Attachment #8367172 - Flags: review?(fayearthur)
Attachment #8367172 - Flags: review?(fayearthur) → review+
Assignee

Comment 3

5 years ago
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.
Assignee

Comment 4

5 years ago
Fixed in fx-team: https://hg.mozilla.org/integration/fx-team/rev/16dbb9ba6d52
Whiteboard: [fixed-in-fx-team]
Assignee

Updated

5 years ago
Duplicate of this bug: 943402
https://hg.mozilla.org/mozilla-central/rev/16dbb9ba6d52
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 29

Comment 7

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

Comment 8

5 years ago
(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

5 years ago
> 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.

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.