mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 945068 - Image preview tooltip displays correct image dimensions, r=harth
This commit is contained in:
parent
21a2aeaf17
commit
6db192c364
@ -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;
|
||||
|
@ -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);
|
||||
});
|
||||
}
|
||||
|
@ -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");
|
||||
label.textContent = l10n.strings.GetStringFromName("previewTooltip.image.brokenImage");
|
||||
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");
|
||||
let imgObj = new this.doc.defaultView.Image();
|
||||
imgObj.src = imageUrl;
|
||||
imgObj.onload = () => {
|
||||
imgObj.onload = null;
|
||||
label.textContent = this._getImageDimensionLabel(imgObj.naturalWidth,
|
||||
imgObj.naturalHeight);
|
||||
this.setSize(vbox.width, vbox.height);
|
||||
}
|
||||
}
|
||||
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;
|
||||
|
||||
this.setSize(vbox.width, vbox.height);
|
||||
}
|
||||
},
|
||||
|
||||
_getImageDimensionLabel: (w, h) => w + " x " + h,
|
||||
|
||||
/**
|
||||
* Exactly the same as the `image` function but takes a css background image
|
||||
* value instead : url(....)
|
||||
|
Loading…
Reference in New Issue
Block a user