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

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

browser/components/shell/content/setDesktopBackground.js

@@ -25,8 +25,10 @@ var gSetBackground = {
     if (AppConstants.platform == "macosx") {
       document.documentElement.getButton("accept").hidden = true;
     }
-    if (this._screenWidth / this._screenHeight >= 1.6)
-      document.getElementById("monitor").setAttribute("aspectratio", "16:10");
+    // Cap ratio to 4 so the dialog width doesn't get ridiculous. Highest
+    // regular screens seem to be 32:9 (3.56) according to Wikipedia.
+    let screenRatio = Math.min(this._screenWidth / this._screenHeight, 4);
+    this._canvas.width = this._canvas.height * screenRatio;
 
     if (AppConstants.platform == "win") {
       // Hide fill + fit options if < Win7 since they don't work.

browser/components/shell/content/setDesktopBackground.xul

@@ -63,11 +63,9 @@
 #endif
 
     <vbox align="center">
-      <stack>
-        <!-- if width and height are not present, they default to 300x150 and stretch the stack -->
-        <html:canvas id="screen" width="1" height="1" role="presentation"/>
-        <image id="monitor"/>
-      </stack>
+      <!-- default to 16:9, will be adjusted to match user's actual screen -->
+      <html:canvas id="screen" width="202" height="114" role="presentation"/>
+      <image id="monitor-base"/>
     </vbox>
 
 #ifdef XP_MACOSX

browser/components/shell/test/browser_setDesktopBackgroundPreview.js

@@ -39,19 +39,24 @@ 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");
+    const screenRatio = screen.width / screen.height;
+    const previewRatio = canvas.clientWidth / canvas.clientHeight;
 
-    Assert.equal(img.clientWidth, measure.naturalWidth, "Monitor image correct width");
-    Assert.equal(img.clientHeight, measure.naturalHeight, "Monitor image correct height");
+    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();
 

browser/themes/linux/jar.mn

@@ -9,12 +9,11 @@ browser.jar:
 * skin/classic/browser/syncedtabs/sidebar.css     (syncedtabs/sidebar.css)
 * skin/classic/browser/browser.css
 * skin/classic/browser/compacttheme.css
-  skin/classic/browser/monitor.png
-  skin/classic/browser/monitor_16-10.png
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
 * skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
 * skin/classic/browser/searchbar.css
-  skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css        (controlcenter/panel.css)

browser/themes/linux/setDesktopBackground.css

@@ -1,18 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-html|canvas#screen {
-  margin: 12px 11px 32px;
-}
-
-#monitor {
-  list-style-image: url("chrome://browser/skin/monitor.png");
-}
-
-#monitor[aspectratio="16:10"] {
-  list-style-image: url("chrome://browser/skin/monitor_16-10.png");
-}

browser/themes/osx/jar.mn

@@ -17,9 +17,8 @@ browser.jar:
 * skin/classic/browser/customizableui/panelUI.css    (customizableui/panelUI.css)
 * skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css)
 * skin/classic/browser/downloads/downloads.css              (downloads/downloads.css)
-  skin/classic/browser/setDesktopBackground.css
-  skin/classic/browser/monitor.png
-  skin/classic/browser/monitor_16-10.png
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
   skin/classic/browser/notification-icons/geo-blocked.svg  (notification-icons/geo-blocked.svg)
   skin/classic/browser/notification-icons/geo.svg          (notification-icons/geo.svg)
   skin/classic/browser/places/allBookmarks.png              (places/allBookmarks.png)

browser/themes/shared/jar.inc.mn

@@ -16,6 +16,7 @@
   skin/classic/browser/aboutLibrary.css                        (../shared/aboutLibrary.css)
   skin/classic/browser/aboutTabCrashed.css                     (../shared/aboutTabCrashed.css)
   skin/classic/browser/aboutWelcomeBack.css                    (../shared/aboutWelcomeBack.css)
+  skin/classic/browser/setDesktopBackground.css                (../shared/setDesktopBackground.css)
   skin/classic/browser/addons/addon-install-blocked.svg        (../shared/addons/addon-install-blocked.svg)
   skin/classic/browser/addons/addon-install-confirm.svg        (../shared/addons/addon-install-confirm.svg)
   skin/classic/browser/addons/addon-install-downloading.svg    (../shared/addons/addon-install-downloading.svg)

browser/themes/shared/setDesktopBackground.css

@@ -6,13 +6,11 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 html|canvas#screen {
-  margin: 12px 11px 38px;
+  border-style: solid;
+  border-width: 12px 11px;
+  border-image: url("chrome://browser/skin/monitor-border.png") 12 11 stretch;
 }
 
-#monitor {
-  list-style-image: url("chrome://browser/skin/monitor.png");
-}
-
-#monitor[aspectratio="16:10"] {
-  list-style-image: url("chrome://browser/skin/monitor_16-10.png");
+#monitor-base {
+  list-style-image: url("chrome://browser/skin/monitor-base.png");
 }

browser/themes/windows/jar.mn

@@ -9,12 +9,11 @@ browser.jar:
 * skin/classic/browser/syncedtabs/sidebar.css     (syncedtabs/sidebar.css)
 * skin/classic/browser/browser.css
 * skin/classic/browser/compacttheme.css
-  skin/classic/browser/monitor.png
-  skin/classic/browser/monitor_16-10.png
+  skin/classic/browser/monitor-base.png
+  skin/classic/browser/monitor-border.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
 * skin/classic/browser/searchbar.css
-  skin/classic/browser/setDesktopBackground.css
   skin/classic/browser/slowStartup-16.png
   skin/classic/browser/webRTC-indicator.css  (../shared/webRTC-indicator.css)
 * skin/classic/browser/controlcenter/panel.css                 (controlcenter/panel.css)

browser/themes/windows/setDesktopBackground.css

@@ -1,18 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-html|canvas#screen {
-  margin: 12px 11px 32px;
-}
-
-#monitor {
-  list-style-image: url("chrome://browser/skin/monitor.png");
-}
-
-#monitor[aspectratio="16:10"] {
-  list-style-image: url("chrome://browser/skin/monitor_16-10.png");
-}