Merge pull request #17812 from EverythingMe/989731-icon-size

Bug 989731 - [E.me] Web app icon sizes and shadow are inconsistent

apps/homescreen/everything.me/js/Brain.js

@@ -741,20 +741,12 @@
         }
       }
 
-      // first resize the icon to the OS size
-      // this includes a 2px padding around the icon
-      Evme.Utils.padIconForOS({
+      // bookmark - add to homescreen
+      EvmeManager.addGridItem({
+        'originUrl': data.app.getFavLink(),
+        'name': data.data.name,
         'icon': data.app.getIcon(),
-        'resize': true,
-        'callback': function onIconResized(icon) {
-          // bookmark - add to homescreen
-          EvmeManager.addGridItem({
-            'originUrl': data.app.getFavLink(),
-            'name': data.data.name,
-            'icon': icon,
-            'useAsyncPanZoom': data.app.isExternal()
-          });
-        }
+        'useAsyncPanZoom': data.app.isExternal()
       });
 
       // display system banner

apps/homescreen/everything.me/js/helpers/Utils.js

@@ -38,10 +38,6 @@ Evme.Utils = new function Evme_Utils() {
       protocol = document.location.protocol,
       homescreenOrigin = protocol + '//homescreen.' + domain;
 
-  // reduce this from our icons that should be the same as the OS
-  // since OS icons have some transparent padding to them
-  this.OS_ICON_PADDING = 2;
-
   this.PIXEL_RATIO_NAMES = {
     NORMAL: 'normal',
     HIGH: 'high'
@@ -65,8 +61,8 @@ Evme.Utils = new function Evme_Utils() {
   this.APPS_FONT_SIZE = 13 * (window.devicePixelRatio || 1);
   this.APP_NAMES_SHADOW_OFFSET_X = 0;
   this.APP_NAMES_SHADOW_OFFSET_Y = 1;
-  this.APP_NAMES_SHADOW_BLUR = 4;
-  this.APP_NAMES_SHADOW_COLOR = 'rgba(0, 0, 0, 0.9)';
+  this.APP_NAMES_SHADOW_BLUR = 2;
+  this.APP_NAMES_SHADOW_COLOR = 'rgba(0, 0, 0, 1)';
 
   this.PIXEL_RATIO_NAME =
     (window.devicePixelRatio > 1) ?
@@ -322,40 +318,6 @@ Evme.Utils = new function Evme_Utils() {
     return arrayOrigin;
   };
 
-  // resize = false: use the icon's size, but pad it
-  // resize = true: resize the icon to the OS' size
-  this.padIconForOS = function padIconForOS(options) {
-    var icon = options.icon,
-      resize = !! options.resize,
-      callback = options.callback;
-
-    if (typeof icon === 'string') {
-      var src = icon;
-      icon = new Image();
-      icon.onload = handleIcon;
-      icon.src = src;
-    } else {
-      handleIcon();
-    }
-
-    function handleIcon() {
-      var padding = self.OS_ICON_PADDING,
-          width = resize ? OS_ICON_SIZE : icon.width,
-          height = resize ? OS_ICON_SIZE : icon.height,
-          newWidth = width - padding,
-          newHeight = height - padding,
-          elCanvas = document.createElement('canvas'),
-          context = elCanvas.getContext('2d');
-
-      elCanvas.width = width;
-      elCanvas.height = height;
-      context.drawImage(icon, (width - newWidth) / 2, (height - newHeight) / 2,
-        newWidth, newHeight);
-
-      callback(elCanvas.toDataURL());
-    }
-  };
-
   this.getRoundIcon = function getRoundIcon(options, callback) {
     var size = options.size || OS_ICON_SIZE,
         img = new Image();

apps/homescreen/everything.me/modules/Results/providers/CloudApps.js

@@ -5,8 +5,9 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) {
 
   this.type = Evme.RESULT_TYPE.CLOUD;
 
-  var SHADOW_OFFSET = 2 * window.devicePixelRatio,
-      SHADOW_BLUR = 2 * window.devicePixelRatio,
+  var SHADOW_OFFSET = Icon.prototype.SHADOW_OFFSET_Y,
+      SHADOW_BLUR = Icon.prototype.SHADOW_BLUR,
+      SHADOW_COLOR = Icon.prototype.SHADOW_COLOR,
 
       self = this;
 
@@ -37,26 +38,20 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) {
         var osIconSize = Evme.Utils.getOSIconSize(),
             width = osIconSize,
             height = osIconSize,
-            padding = Evme.Utils.OS_ICON_PADDING,
-            canvas = self.initIcon(height + padding),
+            padding = 0,
+            canvas = self.initIcon(height),
             context = canvas.getContext('2d'),
             canvasHeight = canvas.height,
             canvasWidth = canvas.width,
             SHADOW_SIZE = (SHADOW_OFFSET + SHADOW_BLUR);
 
-        // account for shadow - pad the canvas from the bottom,
-        // and move the name back up
-        canvas.height += SHADOW_SIZE;
-        self.elIcon.style.cssText += 'margin-bottom: ' + -SHADOW_SIZE + 'px;';
-
         // shadow
         context.shadowOffsetX = 0;
         context.shadowOffsetY = SHADOW_OFFSET;
         context.shadowBlur = SHADOW_BLUR;
-        context.shadowColor = 'rgba(0, 0, 0, 0.6)';
+        context.shadowColor = SHADOW_COLOR;
         context.drawImage(fixedImage,
-                          (canvasWidth - width + padding) / 2, padding,
-                          width - padding, height - padding);
+          (canvasWidth - width) / 2, 0, width, height);
 
         self.finalizeIcon(canvas);
       };
@@ -67,21 +62,13 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) {
 
   // @override
   this.launch = function launchCloudApp() {
-    // first resize the icon to the OS size
-    // this includes a 2px padding around the icon
-    Evme.Utils.padIconForOS({
+    EvmeManager.openCloudApp({
+      'url': self.cfg.appUrl,
+      'originUrl': self.getFavLink(),
+      'title': self.cfg.name,
       'icon': self.cfg.icon,
-      'resize': true,
-      'callback': function onIconResized(icon) {
-        EvmeManager.openCloudApp({
-          'url': self.cfg.appUrl,
-          'originUrl': self.getFavLink(),
-          'title': self.cfg.name,
-          'icon': icon,
-          'urlTitle': query,
-          'useAsyncPanZoom': self.cfg.isWeblink
-        });
-      }
+      'urlTitle': query,
+      'useAsyncPanZoom': self.cfg.isWeblink
     });
   };
 };