Bug 879113 - Part 2: Start screen should handle error cases when missing favicons, thumbnails gracefully. r=sfoster

browser/metro/base/content/TopSites.js

@@ -307,7 +307,15 @@ TopSitesView.prototype = {
     });
 
     if (this._useThumbs) {
-      aSite.backgroundImage = 'url("'+PageThumbs.getThumbnailURL(aSite.url)+'")';
+      Task.spawn(function() {
+        let filepath = PageThumbsStorage.getFilePathForURL(aSite.url);
+        if (yield OS.File.exists(filepath)) {
+          aSite.backgroundImage = 'url("'+PageThumbs.getThumbnailURL(aSite.url)+'")';
+          if ("isBound" in aTileNode && aTileNode.isBound) {
+            aTileNode.backgroundImage = aSite.backgroundImage;
+          }
+        }
+      });
     } else {
       delete aSite.backgroundImage;
     }

browser/metro/base/content/bindings/grid.xml

@@ -568,11 +568,13 @@
             typeSizes = this.ownerDocument.defaultView._richgridTileSizes = {};
 
             let sheets = this.ownerDocument.styleSheets;
-            // the (first matching) rules that will give us tile type => width/height values
+            // The (first matching) rules that will give us tile type => width/height values
+            // The keys in this object are string-matched against the selectorText
+            // of rules in our stylesheet. Quoted values in a selector will always use " not '
             let typeSelectors = {
-              "richgriditem" : "default",
-              "richgriditem[customImage]": "thumbnail",
-              "richgriditem[compact]": "compact"
+              'richgriditem' : "default",
+              'richgriditem[tiletype="thumbnail"]': "thumbnail",
+              'richgriditem[compact]': "compact"
             };
             let rules, sheet;
             for (let i=0; (sheet=sheets[i]); i++) {
@@ -619,8 +621,12 @@
           <![CDATA[
             let item = this.ownerDocument.createElement("richgriditem");
             item.setAttribute("label", aLabel);
-            if (aValue)
+            if (aValue) {
               item.setAttribute("value", aValue);
+            }
+            if(this.hasAttribute("tiletype")) {
+              item.setAttribute("tiletype", this.getAttribute("tiletype"));
+            }
             return item;
           ]]>
         </body>

browser/metro/base/content/browser-scripts.js

@@ -33,9 +33,13 @@ XPCOMUtils.defineLazyModuleGetter(this, "Promise",
 
 XPCOMUtils.defineLazyModuleGetter(this, "Task",
                                   "resource://gre/modules/Task.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "CrossSlide",
                                   "resource:///modules/CrossSlide.jsm");
 
+XPCOMUtils.defineLazyGetter(this, "OS",
+                                  "resource://gre/modules/osfile.jsm");
+
 /*
  * Services
  */

browser/metro/theme/tiles.css

@@ -17,7 +17,7 @@ richgriditem {
   width: @grid_double_column_width@;
   height: @grid_row_height@;
 }
-richgriditem[customImage] {
+richgriditem[tiletype="thumbnail"] {
   width: @grid_double_column_width@;
   height: @grid_double_row_height@;
 }
@@ -131,7 +131,12 @@ richgriditem:active {
 }
 
 /* thumbnail variation */
-richgriditem[customImage] {
+
+richgriditem[tiletype="thumbnail"] .tile-start-container {
+  background-image: url("chrome://browser/skin/images/firefox-watermark.png");
+}
+
+richgriditem[tiletype="thumbnail"] {
   width: @grid_double_column_width@;
   height: @grid_double_row_height@;
   -moz-box-pack: end;
@@ -139,19 +144,19 @@ richgriditem[customImage] {
   color: #1a1a1a;
 }
 
-richgriditem[customImage] .tile-desc {
+richgriditem[tiletype="thumbnail"] .tile-desc {
   background: transparent;
   margin: 0px;
   left: 0;
 }
 
-richgriditem[customImage] > .tile-content > .tile-desc {
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-desc {
   /* ensure thumbnail labels get their color from the parent richgriditem element */
   color: inherit;
 }
 
 /* put the image in place of the icon if there is an image background */
-richgriditem[customImage] > .tile-content > .tile-start-container {
+richgriditem[tiletype="thumbnail"] > .tile-content > .tile-start-container {
   background-size: cover;
   background-position: top left;
   background-repeat: no-repeat;
@@ -162,7 +167,7 @@ richgriditem[customImage] > .tile-content > .tile-start-container {
   left: 0;
   background-color: hsla(0,2%,98%,.95);
 }
-richgriditem[customImage] .tile-icon-box {
+richgriditem[tiletype="thumbnail"] .tile-icon-box {
   visibility: collapse;
 }