corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1534475 - Use a responsive monitor frame in "Set As Desktop Background" preview. r=Gijs

Browse Source 
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
This commit is contained in:
Ian Moody
2019-03-13 16:24:40 +00:00
parent 9b20e93a2c
commit ba5a4b004d
22 changed files with 26 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
browser/components/shell/test/browser_setDesktopBackgroundPreview.js
View File

@@ -39,19 +39,16 @@ add_task(async function() {
const win = await dialogLoad;
/* setDesktopBackground.js does a setTimeout to wait for correct
dimensions. If we don't wait here we could read the monitor image
URL before it's changed to the widescreen version */
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 img = win.document.getElementById("monitor");
const measure = new Image();
const measureLoad = BrowserTestUtils.waitForEvent(measure, "load");
measure.src =
getComputedStyle(img).listStyleImage.slice(4, -1).replace(/"/g, "");
await measureLoad;
const canvas = win.document.getElementById("screen");
// Only test to two decimal places
const screenRatio = Math.floor((screen.width / screen.height) * 100);
const previewRatio = Math.floor((canvas.clientWidth / canvas.clientHeight) * 100);
Assert.equal(img.clientWidth, measure.naturalWidth, "Monitor image correct width");
Assert.equal(img.clientHeight, measure.naturalHeight, "Monitor image correct height");
Assert.equal(previewRatio, screenRatio, "Preview's aspect ratio matches screen's");
win.close();