Bug 556601 - start page polish [r=mark.finkle]

mobile/chrome/content/aboutHome.xhtml

@@ -135,12 +135,13 @@
         let favicon = chromeWin.gFaviconService.getFaviconImageForPage(uri).spec;
 
         let outer = document.createElement("div");
+        outer.setAttribute("role", "button");
 
         let pageURL = url;
         outer.addEventListener("click", function() {
           openTabs(pageURL);
         }, false);
-        
+
         allPageURLs.push(pageURL);
 
         let img = document.createElement("img");
@@ -161,15 +162,20 @@
       }
       
       if (allPageURLs.length > 0) {
-        let outer = document.createElement("div");
-        outer.className = "openall";
-        outer.textContent = document.getElementById("text-openalltabs").textContent;
+        document.getElementById("loadingTabs").style.display = "none";
 
-        outer.addEventListener("click", function() {
-          openTabs(allPageURLs.join("|"));
-        }, false);
-
-        list.appendChild(outer);
+        if (allPageURLs.length > 1) {
+          let outer = document.createElement("div");
+          outer.className = "openall";
+          outer.textContent = document.getElementById("text-openalltabs").textContent;
+          outer.setAttribute("role", "button");
+  
+          outer.addEventListener("click", function() {
+            openTabs(allPageURLs.join("|"));
+          }, false);
+  
+          list.appendChild(outer);
+        }
       } else {
         list.style.display = "none";
       }
@@ -208,15 +214,18 @@
           return;
         }
 
+        document.getElementById("loadingAddons").style.display = "none";
+
         for (let i=0; i<aAddons.length; i++) {  
           let outer = document.createElement("div");
+          outer.setAttribute("role", "button");
           outer.setAttribute("addonID", aAddons[i].id);
   
           let addonName = aAddons[i].name;
           outer.addEventListener("click", function() {
             goToAddons(addonName);
           }, false)
-  
+
           let img = document.createElement("img");
           img.className = "favicon";
           img.setAttribute("src", aAddons[i].iconURL);
@@ -261,9 +270,12 @@
 
     <div id="recentTabs" class="section-box">
       <h1>&aboutHome.recentTabs;</h1>
+      <div id="loadingTabs" class="loading">
+        <img src="chrome://browser/skin/images/throbber.png"/>
+      </div>
     </div>
 
-    <div id="remoteTabs" class="section-row" onclick="openRemoteTabs();">
+    <div id="remoteTabs" class="section-row" onclick="openRemoteTabs();" role="button">
       <div>
         <img class="favicon" src="chrome://browser/skin/images/remotetabs-32.png"/>
         <div>&aboutHome.remoteTabs;</div>
@@ -272,10 +284,13 @@
 
     <div id="newAddons" class="section-box">
       <h1>&aboutHome.recommendedAddons2;</h1>
+      <div id="loadingAddons" class="loading">
+        <img src="chrome://browser/skin/images/throbber.png"/>
+      </div>
     </div>
 
     <div id="about">
-    	 <img src="http://mozilla.org/favicon.ico"/> <a href="http://www.mozilla.com/about/">&aboutHome.aboutMozilla;</a>
+    	 <img src="chrome://browser/skin/images/mozilla-32.png"/> <a href="http://www.mozilla.com/about/">&aboutHome.aboutMozilla;</a>
     </div>
   </div>
 

mobile/chrome/content/browser.js

@@ -1763,7 +1763,7 @@ ContentCustomClicker.prototype = {
 
     /** Returns a node if selecting this node causes a focus. */
     _getFocusable: function _getFocusable(node) {
-      if (node && node.mozMatchesSelector("*:link,*:visited,*:link *,*:visited *,button,input,option,select,textarea"))
+      if (node && node.mozMatchesSelector("*:link,*:visited,*:link *,*:visited *,*[role=button],button,input,option,select,textarea"))
         return node;
       return null;
     },

mobile/themes/hildon/aboutHome.css

@@ -125,6 +125,10 @@ html {
   color: gray;
 }
 
+.section-box .inner {
+  pointer-events: none;
+}
+
 .section-box .favicon {
   border: none;
   top: 8px;
@@ -132,11 +136,11 @@ html {
   width: 32px;
   height: 32px;
   position: absolute;
+  pointer-events: none;
 }
 
-#newAddons > div {
-  background: url("images/arrowright-16.png") right center no-repeat;
-  margin-right: 8px;
+#newAddons > div:not(.loading) {
+  background: url("images/arrowright-16.png") 99% center no-repeat;
 }
 
 .section-row {
@@ -155,6 +159,7 @@ html {
 
 .section-row > div {
   position: relative;
+  pointer-events: none;
 }
 
 .section-row .favicon {
@@ -166,8 +171,13 @@ html {
   position: absolute;
 }
 
+.loading > img {
+  display: block;
+  margin: 0 auto;
+}
+
 #about {
-  font-size: 12px;
+  font-size: 18px;
   text-align: center;
   margin-top: 24px;
 }

mobile/themes/hildon/jar.mn

@@ -64,6 +64,7 @@ chrome.jar:
   images/newtab-default-64.png         (images/newtab-default-64.png)
   images/newtab-active-64.png          (images/newtab-active-64.png)
   images/remotetabs-32.png             (images/remotetabs-32.png)
+  images/mozilla-32.png                (images/mozilla-32.png)
   images/leftcap-default-64.png        (images/leftcap-default-64.png)
   images/leftcap-active-64.png         (images/leftcap-active-64.png)
   images/leftcapEV-default-64.png      (images/leftcapEV-default-64.png)

mobile/themes/wince/aboutHome.css

@@ -125,6 +125,10 @@ html {
   color: gray;
 }
 
+.section-box .inner {
+  pointer-events: none;
+}
+
 .section-box .favicon {
   border: none;
   top: 8px;
@@ -132,11 +136,11 @@ html {
   width: 32px;
   height: 32px;
   position: absolute;
+  pointer-events: none;
 }
 
-#newAddons > div {
-  background: url("images/arrowright-16.png") right center no-repeat;
-  margin-right: 8px;
+#newAddons > div:not(.loading) {
+  background: url("images/arrowright-16.png") 99% center no-repeat;
 }
 
 .section-row {
@@ -155,6 +159,7 @@ html {
 
 .section-row > div {
   position: relative;
+  pointer-events: none;
 }
 
 .section-row .favicon {
@@ -166,8 +171,13 @@ html {
   position: absolute;
 }
 
+.loading > img {
+  display: block;
+  margin: 0 auto;
+}
+
 #about {
-  font-size: 12px;
+  font-size: 18px;
   text-align: center;
   margin-top: 24px;
 }

mobile/themes/wince/jar.mn

@@ -60,6 +60,7 @@ chrome.jar:
   images/newtab-default-64.png         (images/newtab-default-64.png)
   images/newtab-active-64.png          (images/newtab-active-64.png)
   images/remotetabs-32.png             (images/remotetabs-32.png)
+  images/mozilla-32.png                (images/mozilla-32.png)
   images/leftcap-default-64.png        (images/leftcap-default-64.png)
   images/leftcap-active-64.png         (images/leftcap-active-64.png)
   images/leftcapEV-default-64.png      (images/leftcapEV-default-64.png)