Merge pull request #14628 from timdream/splash-icon-size

Bug 904332 - Select the size of the icon in cold launch splash according to the spec, r=alive
mozilla-b2g · Dec 13, 2013 · f91da7c · f91da7c
2 parents 3330e45 + 3d71334
commit f91da7c
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 25 deletions.
diff --git a/apps/system/js/app_window.js b/apps/system/js/app_window.js
@@ -1039,6 +1039,17 @@
     }
   };
 
+  /**
+   * The preferred CSS size of the icon used for cold launch splash for phones.
+   */
+  AppWindow.prototype.SPLASH_ICON_SIZE_TINY = 60;
+
+  /**
+   * The preferred CSS size of the icon used for cold launch splash for
+   * other devices.
+   */
+  AppWindow.prototype.SPLASH_ICON_SIZE_NOT_TINY = 90;
+
   AppWindow.prototype.getIconForSplash =
     function aw_getIconForSplash(manifest) {
       var icons = this.manifest ?
@@ -1047,24 +1058,29 @@
         return null;
       }
 
-      var sizes = Object.keys(icons).map(function parse(str) {
-        return parseInt(str, 10);
-      });
+      var targetedPixelSize = 2 * (ScreenLayout.getCurrentLayout('tiny') ?
+        this.SPLASH_ICON_SIZE_TINY : this.SPLASH_ICON_SIZE_NOT_TINY) *
+        Math.ceil(window.devicePixelRatio || 1);
 
-      sizes.sort(function(x, y) { return y - x; });
+      var preferredSize = Number.MAX_VALUE;
+      var max = 0;
 
-      var index = 0;
-      var width = LayoutManager.clientWidth;
-      for (var i = 0; i < sizes.length; i++) {
-        if (sizes[i] < width) {
-          index = i;
-          break;
-        }
+      for (var size in icons) {
+        size = parseInt(size, 10);
+        if (size > max)
+          max = size;
+
+        if (size >= targetedPixelSize && size < preferredSize)
+          preferredSize = size;
       }
+      // If there is an icon matching the preferred size, we return the result,
+      // if there isn't, we will return the maximum available size.
+      if (preferredSize === Number.MAX_VALUE)
+        preferredSize = max;
 
-      this._splash = icons[sizes[index]];
+      this._splash = icons[preferredSize];
       this.preloadSplash();
-      return icons[sizes[index]];
+      return icons[preferredSize];
     };
 
   /**
@@ -1077,6 +1093,11 @@
           !this.loaded && !this.splashed && this.element && this._splash) {
         this.splashed = true;
         this.element.style.backgroundImage = 'url("' + this._splash + '")';
+
+        var iconCSSSize = 2 * (ScreenLayout.getCurrentLayout('tiny') ?
+        this.SPLASH_ICON_SIZE_TINY : this.SPLASH_ICON_SIZE_NOT_TINY);
+        this.element.style.backgroundSize =
+          iconCSSSize + 'px ' + iconCSSSize + 'px';
       }
     };
 

diff --git a/apps/system/test/unit/activity_window_test.js b/apps/system/test/unit/activity_window_test.js
@@ -11,9 +11,12 @@ requireApp('system/shared/test/unit/mocks/mock_settings_listener.js');
 requireApp('system/test/unit/mock_applications.js');
 requireApp('system/test/unit/mock_attention_screen.js');
 
+requireApp('system/shared/test/unit/mocks/mock_screen_layout.js');
+
 var mocksForActivityWindow = new MocksHelper([
   'OrientationManager', 'Applications', 'SettingsListener',
-  'ManifestHelper', 'LayoutManager', 'AttentionScreen'
+  'ManifestHelper', 'LayoutManager', 'AttentionScreen',
+  'ScreenLayout'
 ]).init();
 
 suite('system/ActivityWindow', function() {

diff --git a/apps/system/test/unit/app_window_test.js b/apps/system/test/unit/app_window_test.js
@@ -14,9 +14,12 @@ requireApp('system/shared/test/unit/mocks/mock_settings_listener.js');
 requireApp('system/test/unit/mock_applications.js');
 requireApp('system/test/unit/mock_layout_manager.js');
 
+requireApp('system/test/unit/mock_screen_layout.js');
+
 var mocksForAppWindow = new MocksHelper([
   'OrientationManager', 'Applications', 'SettingsListener',
-  'ManifestHelper', 'LayoutManager'
+  'ManifestHelper', 'LayoutManager',
+  'ScreenLayout'
 ]).init();
 
 suite('system/AppWindow', function() {
@@ -63,7 +66,7 @@ suite('system/AppWindow', function() {
     url: 'app://www.fake4/index.html',
     manifest: {
       icons: {
-        '100': 'xxxx.png'
+        '100': '/xxxx.png'
       }
     },
     manifestURL: 'app://wwww.fake4/ManifestURL',
@@ -74,10 +77,12 @@ suite('system/AppWindow', function() {
     url: 'app://www.fake4/index.html',
     manifest: {
       icons: {
-        '100': 'xxxx.png',
-        '200': 'yyyy.ico',
-        '300': 'lol.gif',
-        '400': 'xd.img'
+        '30': '/foo.jpg',
+        '60': '/bar.jpg',
+        '120': '/xxxx.png',
+        '240': '/yyyy.ico',
+        '300': '/lol.gif',
+        '400': '/xd.img'
       }
     },
     manifestURL: 'app://wwww.fake4/ManifestURL',
@@ -488,21 +493,68 @@ suite('system/AppWindow', function() {
   });
 
   test('setFrameBackground', function() {
+    ScreenLayout.setDefault({
+      tiny: true
+    });
+
     var app = new AppWindow(fakeAppConfigWithIcon);
-    var background = app.element.style.backgroundImage;
     this.sinon.clock.tick(0);
+    var background = app.element.style.backgroundImage;
+    var backgroundSize = app.element.style.backgroundSize;
     assert.isTrue(app.splashed);
     assert.isDefined(app._splash);
+    assert.equal(background, 'url("' + app._splash + '")');
+    assert.equal(backgroundSize, '120px 120px');
   });
 
-  test('get Icon Splash with Multi Icons', function() {
-    MockLayoutManager.clientWidth = 350;
+  test('get Icon Splash with Multi Icons, dppx=1', function() {
+    // Overwrite value for testing dppx
+    var _devicePixelRatio = window.devicePixelRatio;
+    Object.defineProperty(window, 'devicePixelRatio', {
+      configurable: true,
+      value: 1
+    });
+
+    ScreenLayout.setDefault({
+      tiny: true
+    });
+
     var app = new AppWindow(fakeAppConfigWithMultiIcon);
-    var background = app.element.style.backgroundImage;
+
+    this.sinon.clock.tick(0);
+    assert.isTrue(
+      app._splash.indexOf(fakeAppConfigWithMultiIcon.
+        manifest.icons['120']) >= 0);
+
+    Object.defineProperty(window, 'devicePixelRatio', {
+      configurable: true,
+      value: _devicePixelRatio
+    });
+  });
+
+  test('get Icon Splash with Multi Icons, dppx=2', function() {
+    // Overwrite value for testing dppx
+    var _devicePixelRatio = window.devicePixelRatio;
+    Object.defineProperty(window, 'devicePixelRatio', {
+      configurable: true,
+      value: 2
+    });
+
+    ScreenLayout.setDefault({
+      tiny: true
+    });
+
+    var app = new AppWindow(fakeAppConfigWithMultiIcon);
+
     this.sinon.clock.tick(0);
     assert.isTrue(
       app._splash.indexOf(fakeAppConfigWithMultiIcon.
-        manifest.icons['300']) >= 0);
+        manifest.icons['240']) >= 0);
+
+    Object.defineProperty(window, 'devicePixelRatio', {
+      configurable: true,
+      value: _devicePixelRatio
+    });
   });
 
   var fakeMozBrowserIframe = {