NTP: use the shared menu.css for the options menu.

BUG=None
TEST=Manual

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

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

4 files changed, 11 insertions, 34 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 7efc811..87b18f3 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -181,12 +181,6 @@ html[dir=rtl] .item {
   border-radius: 4px;
 }
 
-.window-menu > hr {
-  border: 0;
-  border-top: 1px solid rgb(153, 153, 153);
-  margin: 2px 0;
-}
-
 /* Made to look like a tooltip using vista/win7 look and feel.
    TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed
  */
@@ -322,15 +316,8 @@ html[dir=rtl] .item {
 }
 
 #option-menu {
-  -webkit-user-select: none;
-  position: absolute;
   right: 0;
   left: auto;
-  top: 33px; /* Position this below the option button. The option button
-                is positioned 15px from the top and has a height of 17px. We add
-                one to get some spacing there as well: 15 + 17 + 1 = 33 */
-  cursor: default;
-  pointer-events: all;
   min-width: 175px;
 }
 
@@ -339,24 +326,19 @@ html[dir=rtl] #option-menu {
   left: 0;
 }
 
-#option-menu > div {
-  padding: 3px 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#option-menu > [selected] {
-  background-color: hsl(213, 66%, 57%);
-  color: white;
+#option-menu > * {
+  /* Work around rendering bug. */
+  outline: 1px solid transparent;
 }
 
 #option-menu > [command=show]:before,
 #option-menu > [command=hide]:before {
-  display: inline-block;
-  width: 12px;
+  -webkit-margin-start: -14px;
   content: '\00a0'; /* non breaking space */
+  display: inline-block;
   background-position: 0 50%;
   background-repeat: no-repeat;
+  width: 14px;
 }
 
 html[dir=rtl] #option-menu > [command=show]:before,
@@ -368,7 +350,7 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   background-image: url(chrome://theme/newtab_checkbox_black);
 }
 
-#option-menu > [selected][command=hide]:before {
+#option-menu > [selected][command=hide]:active:before {
   background-image: url(chrome://theme/newtab_checkbox_white);
 }
 
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index a96464b..43b8b70 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -58,6 +58,7 @@ registerCallback('getAppsCallback');
 <!-- template data placeholder -->
 <link rel="stylesheet" href="new_new_tab.css">
 <link rel="stylesheet" href="ntp/most_visited.css">
+<link rel="stylesheet" href="shared/css/menu.css">
 <script>
 
 /**
@@ -132,14 +133,14 @@ if ('mode' in hashParams) {
         i18n-values="title:pagedisplaytooltip">
   </div>
 
-  <div id="option-menu" class="window-menu">
+  <menu id="option-menu">
     <div command="hide" section="TIPS" i18n-content="tips"></div>
     <div command="hide" section="THUMB" i18n-content="mostvisited"></div>
     <div command="hide" section="RECENT" i18n-content="recentlyclosed"></div>
     <hr>
     <div command="clear-all-blacklisted"
          i18n-content="restorethumbnails"></div>
-  </div>
+  </menu>
 
   <div id="notification">
     <span>&nbsp;</span>
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 669a5d4..1242936 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -73,11 +73,6 @@ body {
   -webkit-mask-image: url(chrome://theme/newtab_menu_mask);
 }
 
-#option-menu > [selected] {
-  background-color: $7; /* color_header_gradient_light */
-  color: white;
-}
-
 #recently-closed {
   color: $8; /* COLOR_NTP_TEXT */
 }
diff --git a/chrome/browser/resources/shared/css/menu.css b/chrome/browser/resources/shared/css/menu.css
index 1025628..9ee83e6 100644
--- a/chrome/browser/resources/shared/css/menu.css
+++ b/chrome/browser/resources/shared/css/menu.css
@@ -1,4 +1,3 @@
-
 menu {
   display: none;
   position: absolute;
@@ -15,8 +14,8 @@ menu {
   border-radius: 3px;
 }
 
-
 menu > * {
+  -webkit-box-sizing: border-box;
   display: block;
   margin: 0;
   width: 100%;