Bug 880281 - Make Marketplace more discoverable in about:apps. r=mfinkle

mobile/android/chrome/content/aboutApps.js

@@ -140,7 +140,7 @@ function onInstall(aEvent) {
     return;
 
   addApplication(aEvent.application);
-  document.getElementById("noapps").className = "hidden";
+  document.getElementById("main-container").classList.remove("hidden");
 }
 
 function onUninstall(aEvent) {
@@ -149,6 +149,6 @@ function onUninstall(aEvent) {
     let parent = node.parentNode;
     parent.removeChild(node);
     if (!parent.firstChild)
-      document.getElementById("noapps").className = "";
+      document.getElementById("main-container").classList.add("hidden");
   }
 }

mobile/android/chrome/content/aboutApps.xhtml

@@ -36,17 +36,22 @@
   
     <div class="header">
       <div>&aboutApps.header;</div>
-      <div id="header-button" role="button" aria-label="&aboutApps.noApps.middle3;" pref="app.marketplaceURL" onclick="openLink(this);"/>
+      <div id="header-button" role="button" aria-label="&aboutApps.browseMarketplace;" pref="app.marketplaceURL" onclick="openLink(this);"/>
     </div>
-    <div id="main-container" class="list">
-      <div id="noapps" class="hidden">
-        &aboutApps.noApps.pre;<a id="marketplaceURL" pref="app.marketplaceURL">&aboutApps.noApps.middle3;</a>&aboutApps.noApps.post;
-      </div>
+
+    <div id="main-container" class="list hidden">
       <div>
         <div class="spacer" id="spacer1"> </div>
         <div id="appgrid"/>
         <div class="spacer" id="spacer1"> </div>
       </div>
     </div>
+
+    <div class="list-item" role="button" pref="app.marketplaceURL" onclick="openLink(this);">
+      <img class="icon" src="chrome://browser/skin/images/marketplace-logo.png" />
+      <div class="inner">
+        <div id="browse-title" class="title">&aboutApps.browseMarketplace;</div>
+      </div>
+    </div>
   </body>
 </html>

mobile/android/locales/en-US/chrome/aboutApps.dtd

@@ -5,11 +5,6 @@
 <!ENTITY aboutApps.title2                          "Apps">
 <!ENTITY aboutApps.header                          "Your Apps">
 
-<!-- LOCALIZATION NOTE (aboutApps.noApps.pre): include a trailing space as needed -->
-<!-- LOCALIZATION NOTE (aboutApps.noApps.middle): avoid leading/trailing spaces, this text is a link -->
-<!-- LOCALIZATION NOTE (aboutApps.noApps.post): include a starting space as needed -->
-<!ENTITY aboutApps.noApps.pre "No web apps installed. Get some from the ">
-<!ENTITY aboutApps.noApps.middle3 "Firefox Marketplace">
-<!ENTITY aboutApps.noApps.post ".">
+<!ENTITY aboutApps.browseMarketplace "Browse the Firefox Marketplace">
 <!ENTITY aboutApps.uninstall "Uninstall">
 <!ENTITY aboutApps.addToHomescreen "Add to Home Screen">

mobile/android/themes/core/aboutAddons.css

@@ -2,15 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.inner {
-  background-color: #eef2f5;
-  min-height: 3.8em;
-  padding: 0.5em;
-
-  /* make room for the favicon */
-  -moz-margin-start: 4.5em;
-}
-
 .details {
   width: 100%;
 }
@@ -33,14 +24,6 @@
   bottom: -3px;
 }
 
-#browse-title {
-  margin-top: 1em;
-  background-image: url("chrome://browser/skin/images/chevron.png");
-  background-size: 8px 20px;
-  background-position: right;
-  background-repeat: no-repeat;
-}
-
 #header-button {
   background-image: url("chrome://browser/skin/images/amo-logo.png"), url("chrome://browser/skin/images/chevron.png");
   background-size: 20px 20px, 8px 20px;

mobile/android/themes/core/aboutApps.css

@@ -7,16 +7,20 @@
 }
 
 #header-button {
-  background-image: url("chrome://browser/skin/images/marketplace-logo.png");
+  background-image: url("chrome://browser/skin/images/marketplace-logo.png"), url("chrome://browser/skin/images/chevron.png");
+  background-size: 32px 32px, 8px 20px;
+  background-position: left, right 0.5em center;
+  -moz-padding-start: 2.5em;
 }
 
 #main-container {
-  margin: 1em;
-  padding: 1em;
-  border-radius: 10px;
-  border: 1px solid grey;
-  background-color: white;
-  width: calc(100% - 4em);
+  padding: 2em;
+  background-color: #EEF2F5;
+  border-bottom: 1px solid #BAC2AC;
+}
+
+.hidden {
+  display: none;
 }
 
 .spacer {
@@ -44,12 +48,3 @@
 .app div {
   pointer-events: none;
 }
-
-#noapps {
-  padding: 1em;
-  text-align: center;
-}
-
-.hidden {
-  display: none;
-}

mobile/android/themes/core/aboutBase.css

@@ -65,6 +65,15 @@ body {
   background-image: none;
 }
 
+.inner {
+  background-color: #eef2f5;
+  min-height: 3.8em;
+  padding: 0.5em;
+
+  /* make room for the favicon */
+  -moz-margin-start: 4.5em;
+}
+
 /* Icons */
 body[dir="ltr"] .icon {
   left: 1.35em;
@@ -132,3 +141,11 @@ body[dir="ltr"] .icon {
   overflow: hidden;
   flex: 1;
 }
+
+#browse-title {
+  margin-top: 1em;
+  background-image: url("chrome://browser/skin/images/chevron.png");
+  background-size: 8px 20px;
+  background-position: right;
+  background-repeat: no-repeat;
+}