css refactor for chrome web store field trial

BUG=106580
TEST=manual

Review URL: https://chromiumcodereview.appspot.com/9302023

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

3 files changed, 22 insertions, 27 deletions

diff --git a/chrome/browser/resources/ntp4/new_tab.css b/chrome/browser/resources/ntp4/new_tab.css
index 8ab01c6..df916ad 100644
--- a/chrome/browser/resources/ntp4/new_tab.css
+++ b/chrome/browser/resources/ntp4/new_tab.css
@@ -324,40 +324,37 @@ html[dir='rtl'] #footer.showing-trash-mode #trash.drag-target .lid {
 }
 
 #chrome-web-store-href {
+  -webkit-padding-end: 12px;
   /* Match transition delay of recently closed button. */
   -webkit-transition-delay: 100ms;
+  color: #7F7F7F;
   cursor: pointer;
   display: none;
   margin: 0;
-  padding: 0;
   text-decoration: none;
 }
 
 #chrome-web-store-title {
+  -webkit-padding-end: 26px;
   -webkit-padding-start: 16px;
-  color: #7F7F7F;
+  background: url('chrome://theme/IDR_WEBSTORE_ICON_24') right 50% no-repeat;
+  display: inline-block;
   font-weight: bold;
   font-size: 9pt;
-  padding-bottom: 17px;
-  padding-top: 17px;
+  line-height: 49px;
 }
 
-#chrome-web-store-title:hover {
+#chrome-web-store-href:hover {
   color: #666;
 }
 
-#chrome-web-store-icon {
-  -webkit-padding-end: 19px;
-  -webkit-padding-start: 2px;
-  height: 24px;
-  padding-bottom: 13px;
-  padding-top: 12px;
-  width: 24px;
+html[dir='rtl'] #chrome-web-store-title {
+  background-position-x: left;
 }
 
 /* Show the chrome-web-store button when the experiment is turned on. */
 .enable-cws-experiment #chrome-web-store-href {
-  display: inline;
+  display: inline-block;
 }
 
 /* Reserve space for the menu button even when it's hidden. */
diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html
index 8319627..a827bdb 100644
--- a/chrome/browser/resources/ntp4/new_tab.html
+++ b/chrome/browser/resources/ntp4/new_tab.html
@@ -110,9 +110,7 @@
       </button>
 
       <a id="chrome-web-store-href">
-        <div id="chrome-web-store-title" i18n-content="webStoreTitle"></div>
-        <img id="chrome-web-store-icon"
-            src="chrome://theme/IDR_WEBSTORE_ICON_24"></img>
+        <span id="chrome-web-store-title" i18n-content="webStoreTitle"></span>
       </a>
 
       <div id="trash" class="trash">
diff --git a/chrome/browser/resources/ntp4/recently_closed.css b/chrome/browser/resources/ntp4/recently_closed.css
index 60b7b8d..ae9fe98 100644
--- a/chrome/browser/resources/ntp4/recently_closed.css
+++ b/chrome/browser/resources/ntp4/recently_closed.css
@@ -3,8 +3,11 @@
  * found in the LICENSE file. */
 
 #recently-closed-menu-button {
+  -webkit-appearance: none;
   -webkit-padding-end: 15px;
   -webkit-padding-start: 9px;
+  -webkit-transition: opacity 200ms;
+  -webkit-transition-delay: 100ms;
   background: none;
   border: 0;
   color: #7F7F7F;
@@ -17,9 +20,6 @@
   /* The padding increases the clickable area. */
   padding-bottom: 0;
   padding-top: 0;
-  -webkit-appearance: none;
-  -webkit-transition: opacity 200ms;
-  -webkit-transition-delay: 100ms;
 }
 
 .enable-cws-experiment #recently-closed-menu-button {
@@ -55,6 +55,10 @@
   -webkit-transition-delay: 0;
 }
 
+#recently-closed-menu-button > * {
+  vertical-align: middle;
+}
+
 .recent-menu {
   padding: 6px 8px;
   /* Needs to be above #footer. */
@@ -111,6 +115,7 @@ html[dir='rtl'] .recent-menu-item {
   display: inline-block;
   height: 9px;
   width: 9px;
+  -webkit-margin-start: 2px;
   -webkit-mask-image: url('images/disclosure_triangle_mask.png');
 }
 
@@ -118,17 +123,12 @@ html[dir='rtl'] .recent-menu-item {
   background-color: #B2B2B2;
   display: none;
   height: 20px;
-  position: absolute;
-  right: 0;
-  top: 14px;
+  left: 15px;
+  position: relative;
+  right: 15px;
   width: 1px;
 }
 
-html[dir="rtl"] #vertical-separator {
-  left: 0;
-  right: auto;
-}
-
 .enable-cws-experiment #vertical-separator {
   display: inline-block;
 }