Closed Bug 964014 Opened 11 years ago Closed 11 years ago

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

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 29

People

(Reporter: vporof, Assigned: pbro)

References

Details

Attachments

(1 file)

This is useful.
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: nobody → pbrosset
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+
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.
Whiteboard: [fixed-in-fx-team]
Status: NEW → RESOLVED
Closed: 11 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 29
I'm not sure how to translate "Copy Image Data-URL". How is it different from "Copy Image URL"?
(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.
> 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.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: