NTP: Bounce the app icon after it is installed.

This also has a small fix to the shrink wrap CSS for the launcher.

BUG=None
TEST=Install an app, the launcher should show up and the icon should bounce.

Review URL: http://codereview.chromium.org/2014001

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@46536 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 57 insertions, 24 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 69409f2..7a987aa 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -16,8 +16,8 @@ body {
   min-height: 100%;
 }
 
-html[mode=app-launcher] #container {
-  min-height: 0;
+html[mode=app-launcher] {
+  height: auto;
 }
 
 #promo-spacer {
@@ -477,28 +477,6 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   margin-left: 1em;
 }
 
-#apps-section a {
-  -webkit-box-sizing: border-box;
-  -webkit-transition: background-color .15s;
-  background: rgba(255, 255, 255, 0) /* transparent white */
-              no-repeat center 5px;
-  background-size: 98px 98px;
-  border-radius: 10px;
-  color: black;
-  display: inline-block;
-  font-weight: bold;
-  margin: 5px;
-  margin-right:5px;
-  overflow: hidden;
-  padding: 5px;
-  padding-top: 108px; /* 98 + 5 + 5 */
-  text-align: center;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 105px; /* 920 / 8 - margin * 2 */
-}
-
 #debug > h2 {
   color: red;
 }
@@ -589,3 +567,51 @@ html[dir=rtl] #option-menu > [command=hide]:before {
     max-width: 15ex;
   }
 }
+
+/* Apps */
+
+@-webkit-keyframes bounce {
+  0% {
+    -webkit-transform: scale(0, 0);
+  }
+
+  60% {
+    -webkit-transform: scale(1.2, 1.2);
+  }
+
+  100% {
+    -webkit-transform: scale(1, 1);
+  }
+}
+
+#apps-section a,
+#apps-section a[new=installed] {
+  -webkit-box-sizing: border-box;
+  -webkit-transition: background-color .15s;
+  background: rgba(255, 255, 255, 0) /* transparent white */
+              no-repeat center 5px;
+  background-size: 98px 98px;
+  border-radius: 10px;
+  color: black;
+  display: inline-block;
+  font-weight: bold;
+  margin: 5px;
+  margin-right:5px;
+  overflow: hidden;
+  padding: 5px;
+  padding-top: 108px; /* 98 + 5 + 5 */
+  text-align: center;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 105px; /* 920 / 8 - margin * 2 */
+}
+
+#apps-section a[new=new] {
+  opacity: 0;
+}
+
+#apps-section a[new=installed] {
+  -webkit-animation: bounce .5s ease-in-out;
+  -webkit-transition: opacity .5s;
+}
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 3af8a33..f5550f7 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -57,6 +57,13 @@ var apps = {
     a.id = app['id'];
     a.onclick = apps.handleClick_;
     a.style.backgroundImage = url(app['icon']);
+    if (hashParams['app-id'] == app['id']) {
+      a.setAttribute('new', 'new');
+      // Delay changing the attribute a bit to let the page settle down a bit.
+      setTimeout(function() {
+        a.setAttribute('new', 'installed');
+      }, 500);
+    }
     return a;
   }
 };