From 43273a5ed2a6641988aafa55d67b8979897e36d5 Mon Sep 17 00:00:00 2001
From: Margaret Leibovic <margaret.leibovic@gmail.com>
Date: Wed, 23 Oct 2013 11:14:11 +0100
Subject: [PATCH] Bug 880281 - Make Marketplace more discoverable in
 about:apps. r=mfinkle

---
 mobile/android/chrome/content/aboutApps.js    |  4 +--
 mobile/android/chrome/content/aboutApps.xhtml | 15 +++++++----
 .../locales/en-US/chrome/aboutApps.dtd        |  7 +----
 mobile/android/themes/core/aboutAddons.css    | 17 ------------
 mobile/android/themes/core/aboutApps.css      | 27 ++++++++-----------
 mobile/android/themes/core/aboutBase.css      | 17 ++++++++++++
 6 files changed, 41 insertions(+), 46 deletions(-)

diff --git a/mobile/android/chrome/content/aboutApps.js b/mobile/android/chrome/content/aboutApps.js
index 1482f0cc0c8..fce02de7a66 100644
--- a/mobile/android/chrome/content/aboutApps.js
+++ b/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");
   }
 }
diff --git a/mobile/android/chrome/content/aboutApps.xhtml b/mobile/android/chrome/content/aboutApps.xhtml
index f1937ea3d66..03bb27225d0 100644
--- a/mobile/android/chrome/content/aboutApps.xhtml
+++ b/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>
diff --git a/mobile/android/locales/en-US/chrome/aboutApps.dtd b/mobile/android/locales/en-US/chrome/aboutApps.dtd
index f5d09a6b93c..4f8859d7c64 100644
--- a/mobile/android/locales/en-US/chrome/aboutApps.dtd
+++ b/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">
diff --git a/mobile/android/themes/core/aboutAddons.css b/mobile/android/themes/core/aboutAddons.css
index a14d32366cb..6f7fc2d20dd 100644
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/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;
diff --git a/mobile/android/themes/core/aboutApps.css b/mobile/android/themes/core/aboutApps.css
index d4bf7be269f..b4e55bc0027 100644
--- a/mobile/android/themes/core/aboutApps.css
+++ b/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;
-}
diff --git a/mobile/android/themes/core/aboutBase.css b/mobile/android/themes/core/aboutBase.css
index 7881dad2499..b7b71856b58 100644
--- a/mobile/android/themes/core/aboutBase.css
+++ b/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;
+}