forked from mirrors/gecko-dev
971debae6e
Currently for any screen with a ratio 1.6 or above, the preview uses a 16:10 image. However, the majority of Fx users have a screen that is 16:9[0], so for most users the preview shows images distorted (compressed horizontally). Originally I just added a new 16:9 version of the monitor image, but then I realised I could save on filesize _and_ make it responsive to whatever the user's screen actually is, rather than using arbitrary presets, by using border-image. The new image files are just sliced up versions of the original monitor.png files, zopfli compressed to match (though with the power indicator dropped from the Linux/Windows version to avoid distorting it). The combined filesize savings seem to be 8.5KiB on macOS and 6.5KiB on Linux/Windows. With the removal of the use of margins on the canvas we no longer need the platform-specific setDesktopBackground.css file. [0] https://data.firefox.com/dashboard/hardware As of 3rd March 2019 the top three resolutions, 1366x768, 1080p, & 1600x900, are all 16:9 and make up 67% of the userbase. Differential Revision: https://phabricator.services.mozilla.com/D23114 --HG-- rename : browser/themes/linux/setDesktopBackground.css => browser/themes/shared/setDesktopBackground.css extra : moz-landing-system : lando
65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
* http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
/**
|
|
* Check whether the preview image for setDesktopBackground is rendered
|
|
* correctly, without stretching
|
|
*/
|
|
|
|
add_task(async function() {
|
|
await BrowserTestUtils.withNewTab({
|
|
gBrowser,
|
|
url: "about:logo",
|
|
}, async (browser) => {
|
|
const dialogLoad = BrowserTestUtils.domWindowOpened(
|
|
null,
|
|
async win => {
|
|
await BrowserTestUtils.waitForEvent(win, "load");
|
|
Assert.equal(
|
|
win.document.documentElement.getAttribute("windowtype"),
|
|
"Shell:SetDesktopBackground",
|
|
"Opened correct window"
|
|
);
|
|
return true;
|
|
}
|
|
);
|
|
|
|
const image = content.document.images[0];
|
|
EventUtils.synthesizeMouseAtCenter(image, { type: "contextmenu" });
|
|
|
|
const menu = document.getElementById("contentAreaContextMenu");
|
|
await BrowserTestUtils.waitForPopupEvent(menu, "shown");
|
|
document.getElementById("context-setDesktopBackground").click();
|
|
|
|
// Need to explicitly close the menu (and wait for it), otherwise it fails
|
|
// verify/later tests
|
|
const menuClosed = BrowserTestUtils.waitForPopupEvent(menu, "hidden");
|
|
menu.hidePopup();
|
|
|
|
const win = await dialogLoad;
|
|
|
|
/* setDesktopBackground.js does a setTimeout to wait for correct
|
|
dimensions. If we don't wait here we could read the preview dimensions
|
|
before they're changed to match the screen */
|
|
await TestUtils.waitForTick();
|
|
|
|
const canvas = win.document.getElementById("screen");
|
|
const screenRatio = screen.width / screen.height;
|
|
const previewRatio = canvas.clientWidth / canvas.clientHeight;
|
|
|
|
info(`Screen dimensions are ${screen.width}x${screen.height}`);
|
|
info(`Screen's raw ratio is ${screenRatio}`);
|
|
info(`Preview dimensions are ${canvas.clientWidth}x${canvas.clientHeight}`);
|
|
info(`Preview's raw ratio is ${previewRatio}`);
|
|
|
|
Assert.ok(
|
|
(previewRatio < screenRatio + .01) &&
|
|
(previewRatio > screenRatio - .01),
|
|
"Preview's aspect ratio is within ±.01 of screen's"
|
|
);
|
|
|
|
win.close();
|
|
|
|
await menuClosed;
|
|
});
|
|
});
|