Merge pull request #14252 from EverythingMe/944026-installed-size-shadow

[Bug 944026] Fix icon size and shadow [r=amirn]

apps/homescreen/everything.me/modules/Results/Result.js

@@ -1,6 +1,7 @@
 'use strict';
 
 (function() {
+  var INSTALLED_APPS_SHADOW_OFFSET = Icon.prototype.SHADOW_OFFSET_Y;
 
   Evme.RESULT_TYPE = {
     CONTACT: 'contact',
@@ -83,7 +84,6 @@
           Evme.Utils.blobToDataURI(iconObj, function onDataReady(src) {
             setImageSrc(src);
           });
-
         } else {
           var src = Evme.Utils.formatImageData(iconObj);
           setImageSrc(src);
@@ -107,13 +107,22 @@
 
     // @default
     this.onAppIconLoad = function onAppIconLoad() {
-      // use OS icon rendering
-      var iconCanvas = Icon.prototype.createCanvas(image),
-          canvas = self.initIcon(iconCanvas.height),
-          context = canvas.getContext('2d');
+      var canvas = self.initIcon(Evme.Utils.getOSIconSize()),
+          context = canvas.getContext('2d'),
+          width = canvas.width,
+          height = canvas.height,
+          // hard coded since it's from page.js, which is a homescreen file
+          SHADOW = INSTALLED_APPS_SHADOW_OFFSET;
+
+      // account for shadow - pad the canvas from the bottom,
+      // and move the name back up
+      canvas.height += SHADOW;
+      self.elIcon.style.cssText += '; margin-bottom: ' + -SHADOW + 'px;';
+
+      context.drawImage(image,
+          (width - image.width) / 2,
+          (height - image.height) / 2);
 
-      context.drawImage(iconCanvas, (TEXT_WIDTH - iconCanvas.width) / 2, 0);
-      self.iconPostRendering(iconCanvas);
       self.finalizeIcon(canvas);
       self.setIconSrc(image.src);
     };
@@ -129,11 +138,6 @@
       return canvas;
     };
 
-    // @default
-    this.iconPostRendering = function iconPostRendering(iconCanvas) {
-      // do nothing
-    };
-
     // @default
     this.finalizeIcon = function finalizeIcon(canvas) {
       var icon = self.elIcon,

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

@@ -39,15 +39,23 @@ Evme.CloudAppResult = function Evme_CloudAppsResult(query) {
             height = osIconSize,
             padding = Evme.Utils.OS_ICON_PADDING,
             canvas = self.initIcon(height + padding),
-            context = canvas.getContext('2d');
+            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.drawImage(fixedImage,
-                          (canvas.width - width + padding) / 2, padding,
+                          (canvasWidth - width + padding) / 2, padding,
                           width - padding, height - padding);
 
         self.finalizeIcon(canvas);

apps/homescreen/js/page.js

@@ -41,6 +41,11 @@ Icon.prototype = {
   CANCELED_ICON_URL: window.location.protocol + '//' + window.location.host +
                     '/style/images/app_paused.png',
 
+  // App icons shadow settings
+  SHADOW_BLUR: 5,
+  SHADOW_OFFSET_Y: 2,
+  SHADOW_COLOR: 'rgba(0,0,0,0.15)',
+
   // These properties will be copied from the descriptor onto the icon's HTML
   // element dataset and allow us to uniquely look up the Icon object from
   // the HTML element.
@@ -296,9 +301,9 @@ Icon.prototype = {
     var background = new Image();
     background.src = 'style/images/default_background.png';
     background.onload = function icon_loadBackgroundSuccess() {
-      ctx.shadowColor = 'rgba(0,0,0,0.15)';
-      ctx.shadowBlur = 5;
-      ctx.shadowOffsetY = 2;
+      ctx.shadowColor = self.SHADOW_COLOR;
+      ctx.shadowBlur = self.SHADOW_BLUR;
+      ctx.shadowOffsetY = self.SHADOW_OFFSET_Y;
       ctx.drawImage(background, 2 * SCALE_RATIO, 2 * SCALE_RATIO,
                     MAX_ICON_SIZE * SCALE_RATIO, MAX_ICON_SIZE * SCALE_RATIO);
       // Disable smoothing on icon resize
@@ -331,9 +336,9 @@ Icon.prototype = {
 
     // Collection icons are self contained and should NOT be manipulated
     if (type !== GridItemsFactory.TYPE.COLLECTION) {
-      ctx.shadowColor = 'rgba(0,0,0,0.15)';
-      ctx.shadowBlur = 5;
-      ctx.shadowOffsetY = 2;
+      ctx.shadowColor = this.SHADOW_COLOR;
+      ctx.shadowBlur = this.SHADOW_BLUR;
+      ctx.shadowOffsetY = this.SHADOW_OFFSET_Y;
     }
 
     // Deal with very small or very large icons