settings - share inline list button style between different list types

BUG=117643,117638 (#2)
TEST=visual

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

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

chrome/browser/resources/options2/autofill_options.css

@@ -20,7 +20,7 @@
 
 .autofill-list-item + img {
   -webkit-padding-end: 20px;
-  vertical-align: middle;
+  vertical-align: top;
 }
 
 #autofill-options > div:last-child {
@@ -37,15 +37,11 @@
   margin: 5px 5px;
 }
 
-.autofill-list-item + button,
-.autofill-list-item + img + button {
-  /* Gets overwritten by raw-button:hover */
-  background: rgb(138, 170, 237) !important;
-  color: #fff;
+#autofill-options .list-inline-button {
   margin-top: 0;
+  vertical-align: top;
 }
 
-#address-list > div:not(:hover) * button,
-#creditcard-list > div:not(:hover) * button {
+#autofill-options div[role='listitem']:not(:hover) .list-inline-button {
   display: none;
 }

chrome/browser/resources/options2/autofill_options_list.js

@@ -10,9 +10,8 @@ cr.define('options.autofillOptions', function() {
 
   function AutofillEditProfileButton(guid, edit) {
     var editButtonEl = document.createElement('button');
-    editButtonEl.className = 'raw-button custom-appearance';
-    editButtonEl.textContent =
-        templateData.autofillEditProfileButton;
+    editButtonEl.className = 'list-inline-button custom-appearance';
+    editButtonEl.textContent = templateData.autofillEditProfileButton;
     editButtonEl.onclick = function(e) { edit(guid); };
 
     // Don't select the row when clicking the button.

chrome/browser/resources/options2/options.html

@@ -13,8 +13,8 @@
 <link rel="stylesheet" href="../uber/uber_shared.css">
 <link rel="stylesheet" href="options_page.css">
 <link rel="stylesheet" href="alert_overlay.css">
+<link rel="stylesheet" href="autofill_edit_overlay.css">
 <link rel="stylesheet" href="autofill_options.css">
-<link rel="stylesheet" href="autofill_overlay.css">
 <link rel="stylesheet" href="browser_options.css">
 <link rel="stylesheet" href="clear_browser_data_overlay.css">
 <link rel="stylesheet" href="content_settings.css">

chrome/browser/resources/options2/options_page.css

@@ -362,6 +362,21 @@ list > [editing] input:invalid {
   background-color: pink;
 }
 
+.list-inline-button {
+  -webkit-appearance: none;
+  -webkit-transition: opacity 150ms;
+  background: rgb(138, 170, 237);
+  border: none;
+  border-radius: 2px;
+  color: white;
+  font-weight: bold;
+  opacity: 0.7;
+}
+
+.list-inline-button:hover {
+  opacity: 1;
+}
+
 .option-name {
   padding-right: 5px;
 }

chrome/browser/resources/options2/password_manager_list.css

@@ -2,32 +2,21 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-button.password-button {
+#saved-passwords-list .list-inline-button {
   -webkit-transition: opacity 150ms;
   background: rgb(138, 170, 237);
-  border: 0;
-  border-radius: 2px;
-  color: #fff;
-  display: inline;
   font-size: 0.9em;
-  font-weight: bold;
   height: 18px;
-  opacity: 0.7;
   padding: 0 2px;
   position: absolute;
   top: 3px;
 }
 
-button.password-button:hover {
-  -webkit-transition: opacity 150ms;
-  opacity: 1;
-}
-
-html[dir='ltr'] button.password-button {
+html[dir='ltr'] #saved-passwords-list .list-inline-button {
   right: 2px;
 }
 
-html[dir='rtl'] button.password-button {
+html[dir='rtl'] #saved-passwords-list .list-inline-button {
   left: 2px;
 }
 

chrome/browser/resources/options2/password_manager_list.js

@@ -63,7 +63,7 @@ cr.define('options.passwordManager', function() {
       if (showPasswords) {
         var button = this.ownerDocument.createElement('button');
         button.hidden = true;
-        button.className = 'password-button custom-appearance';
+        button.className = 'list-inline-button custom-appearance';
         button.textContent = localStrings.getString('passwordShowButton');
         button.addEventListener('click', this.onClick_, true);
         passwordInputDiv.appendChild(button);

chrome/browser/resources/options2/search_engine_manager.css

@@ -63,14 +63,13 @@
   -webkit-box-flex: 1;
 }
 
-.search-engine-list .url-column button {
-  -webkit-margin-start: 3px;
-  background: rgb(138, 170, 237);
-  color: #fff;
+.search-engine-list .url-column .list-inline-button {
   margin-top: 0;
+  padding: 1px 6px;
 }
 
-.search-engine-list > :not(:hover):not([editing]) .url-column button {
+.search-engine-list > :not(:hover):not([editing]) .url-column
+    .list-inline-button {
   display: none;
 }
 

chrome/browser/resources/options2/search_engine_manager_engine_list.js

@@ -122,7 +122,7 @@ cr.define('options.search_engines', function() {
       // is implemented. When this is removed, remove the extra div above.
       if (engine['canBeDefault']) {
         var makeDefaultButtonEl = this.ownerDocument.createElement('button');
-        makeDefaultButtonEl.className = 'raw-button custom-appearance';
+        makeDefaultButtonEl.className = 'custom-appearance list-inline-button';
         makeDefaultButtonEl.textContent =
             templateData.makeDefaultSearchEngineButton;
         makeDefaultButtonEl.onclick = function(e) {