wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 945068 - Image preview tooltip displays correct image dimensions, r=harth

Browse Source
This commit is contained in:
Patrick Brosset 2013-12-12 09:31:23 +01:00
parent 21a2aeaf17
commit 6db192c364
3 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
browser/devtools/markupview/markup-view.js
View File

@ -1173,10 +1173,11 @@ MarkupContainer.prototype = {
this.node.getImageData(IMAGE_PREVIEW_MAX_DIM).then(data => {
if (data) {
data.data.string().then(str => {
let res = {data: str, size: data.size};
// Resolving the data promise and, to always keep tooltipData.data
// as a promise, create a new one that resolves immediately
def.resolve(str, data.size);
this.tooltipData.data = promise.resolve(str, data.size);
def.resolve(res);
this.tooltipData.data = promise.resolve(res);
});
}
});
@ -1186,7 +1187,7 @@ MarkupContainer.prototype = {
_buildTooltipContent: function(target, tooltip) {
if (this.tooltipData && target === this.tooltipData.target) {
this.tooltipData.data.then((data, size) => {
this.tooltipData.data.then(({data, size}) => {
tooltip.setImageContent(data, size);
});
return true;

20
browser/devtools/markupview/test/browser_inspector_markup_765105_tooltip.js
View File

@ -16,10 +16,10 @@ const PAGE_CONTENT = [
].join("\n");
const TEST_NODES = [
"img.local",
"img.data",
"img.remote",
".canvas"
{selector: "img.local", size: "192 x 192"},
{selector: "img.data", size: "64 x 64"},
{selector: "img.remote", size: "22 x 23"},
{selector: ".canvas", size: "600 x 600"}
];
function test() {
@ -77,8 +77,8 @@ function testImageTooltip(index) {
return endTests();
}
let node = contentDoc.querySelector(TEST_NODES[index]);
ok(node, "We have the [" + TEST_NODES[index] + "] image node to test for tooltip");
let node = contentDoc.querySelector(TEST_NODES[index].selector);
ok(node, "We have the [" + TEST_NODES[index].selector + "] image node to test for tooltip");
let isImg = node.tagName.toLowerCase() === "img";
let container = getContainerForRawNode(markup, node);
@ -90,10 +90,14 @@ function testImageTooltip(index) {
assertTooltipShownOn(target, () => {
let images = markup.tooltip.panel.getElementsByTagName("image");
is(images.length, 1, "Tooltip for [" + TEST_NODES[index] + "] contains an image");
is(images.length, 1,
"Tooltip for [" + TEST_NODES[index].selector + "] contains an image");
let label = markup.tooltip.panel.querySelector(".devtools-tooltip-caption");
is(label.textContent, TEST_NODES[index].size,
"Tooltip label for [" + TEST_NODES[index].selector + "] displays the right image size")
markup.tooltip.hide();
testImageTooltip(index + 1);
});
}

27
browser/devtools/shared/widgets/Tooltip.js
View File

@ -518,30 +518,33 @@ Tooltip.prototype = {
}
vbox.appendChild(image);
// Temporary label during image load
// Dimension label
let label = this.doc.createElement("label");
label.classList.add("devtools-tooltip-caption");
label.classList.add("theme-comment");
if (options.naturalWidth && options.naturalHeight) {
label.textContent = this._getImageDimensionLabel(options.naturalWidth,
options.naturalHeight);
this.setSize(vbox.width, vbox.height);
} else {
// If no dimensions were provided, load the image to get them
label.textContent = l10n.strings.GetStringFromName("previewTooltip.image.brokenImage");
vbox.appendChild(label);
this.content = vbox;
// Load the image to get dimensions and display it when done
let imgObj = new this.doc.defaultView.Image();
imgObj.src = imageUrl;
imgObj.onload = () => {
imgObj.onload = null;
// Display dimensions
let w = options.naturalWidth || imgObj.naturalWidth;
let h = options.naturalHeight || imgObj.naturalHeight;
label.textContent = w + " x " + h;
label.textContent = this._getImageDimensionLabel(imgObj.naturalWidth,
imgObj.naturalHeight);
this.setSize(vbox.width, vbox.height);
}
}
vbox.appendChild(label);
this.content = vbox;
},
_getImageDimensionLabel: (w, h) => w + " x " + h,
/**
* Exactly the same as the `image` function but takes a css background image
* value instead : url(....)