NTP: Adds a context menu to the apps section

This uses the cr Menu system and replaces the old options menu with a cr Menu.

BUG=52446
TEST=Start chrome with enable-apps. Install some apps.
Right clicking on an app should show a context menu.
Clicking the wrench should show the same menu.


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

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

1 files changed, 9 insertions, 68 deletions

diff --git a/chrome/browser/resources/ntp/apps.css b/chrome/browser/resources/ntp/apps.css
index 1527d9b..9c51f44 100644
--- a/chrome/browser/resources/ntp/apps.css
+++ b/chrome/browser/resources/ntp/apps.css
@@ -13,8 +13,6 @@
   width: 124px; /* 920 / 7 - margin * 2 */
 }
 
-.app > .front,
-.app > .back,
 .app a {
   border-radius: 10px;
   bottom: 0;
@@ -24,12 +22,6 @@
   top: 0;
 }
 
-.app > .front,
-.app > .back {
-  -webkit-backface-visibility: hidden;
-  -webkit-transition: -webkit-transform .15s;
-}
-
 .app a {
   -webkit-transition: background-color .5s;
   background: rgba(255, 255, 255, 0) /* transparent white */
@@ -45,8 +37,9 @@
   white-space: nowrap;
 }
 
-.app .flip {
+.app .app-settings {
   background-color: transparent;
+  background-position: center center;
   border: 0;
   height: 14px;
   padding: 0;
@@ -56,49 +49,24 @@
   width: 14px;
 }
 
-.app > .front > .flip {
+.app > .app-settings {
   -webkit-transition: opacity .3s;
   -webkit-transition-delay: 0;
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH);
   opacity: 0;
 }
 
-.app > .front > .flip:hover {
+.app > .app-settings:hover {
   -webkit-transition: none;
   background-image: url(chrome://theme/IDR_BALLOON_WRENCH_H);
 }
 
-.app:hover > .front > .flip,
-.app > .front > .flip:focus {
+.app:hover > .app-settings,
+.app > .app-settings:focus {
   -webkit-transition-delay: .5s;
   opacity: .9;
 }
 
-.app > .back > .flip {
-  background-image: url(chrome://theme/IDR_BALLOON_CLOSE);
-  opacity: .9;
-}
-
-.app > .back > .flip:hover {
-  background-image: url(chrome://theme/IDR_BALLOON_CLOSE_HOVER);
-}
-
-.app > .back {
-  padding: 10px;
-}
-
-.app > .back > h2 {
-  font-size: 100%;
-  margin: 10px 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.app > .back > button:not(.flip) {
-  width: 100%;
-}
-
 @-webkit-keyframes bounce {
   0% {
     -webkit-transform: scale(0, 0);
@@ -122,37 +90,10 @@
   -webkit-transition: opacity .5s;
 }
 
-a[app_id=web-store-entry] {
+a[app-id=web-store-entry] {
   background-image: url("web_store_icon.png");
 }
 
-/* Make items on the wrong side non focusable by hiding them. */
-.app:not(.config) > .back button,
-.app.config > .front button,
-.app.config > .front a {
-  display: none;
-}
-
-html[has_3d=true] .app.config > .front {
-  -webkit-transform: rotateY(180deg);
-}
-
-html[has_3d=true] .app > .back {
-  -webkit-transform: rotateY(-180deg);
-}
-
-html[has_3d=true] .app.config > .back {
-  -webkit-transform: rotateY(0deg);
-}
-
-html[has_3d=false] .app.config > .front {
-  display: none;
-}
-
-html[has_3d=false] .app > .back {
-  display: none;
-}
-
-html[has_3d=false] .app.config > .back {
-  display: block;
+menu > button.default {
+  font-weight: bold;
 }