Improve list CSS in options

- less jiggle in autofill edit address lists (e.g. name list) when you select the item
- fix some broken css (hasElementFocus should be has-element-focus).
- Don't apply "new" list css to autofill edit address lists because it looks terrible (change list rules to .settings-list)

BUG=

Review URL: https://codereview.chromium.org/335113006

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

4 files changed, 30 insertions, 27 deletions

diff --git a/chrome/browser/resources/extensions/chromeos/kiosk_apps.css b/chrome/browser/resources/extensions/chromeos/kiosk_apps.css
index 47877d4..33c752b 100644
--- a/chrome/browser/resources/extensions/chromeos/kiosk_apps.css
+++ b/chrome/browser/resources/extensions/chromeos/kiosk_apps.css
@@ -36,7 +36,8 @@ list .row-delete-button {
 }
 
 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
-list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button,
+list:not([has-element-focus]) > *:not(:hover):not([selected])
+    .row-delete-button,
 list[disabled] .row-delete-button,
 list .row-delete-button[disabled] {
   opacity: 0;
diff --git a/chrome/browser/resources/options/autofill_edit_overlay.css b/chrome/browser/resources/options/autofill_edit_overlay.css
index 5a302fc..24500e6 100644
--- a/chrome/browser/resources/options/autofill_edit_overlay.css
+++ b/chrome/browser/resources/options/autofill_edit_overlay.css
@@ -40,14 +40,16 @@
   -webkit-padding-end: 4px;
   -webkit-padding-start: 4px;
   border: 1px solid darkGray;
+  /* Border should go "inside" the height. */
+  box-sizing: border-box;
   /* Set the line-height and min-height to match the height of an input element,
    * so that even empty cells renderer with the correct height. */
-  line-height: 1.75em;
-  min-height: 1.75em;
+  height: 2em;
+  line-height: 2em;
 }
 
 :-webkit-any(#autofill-edit-credit-card-overlay, #autofill-edit-address-overlay)
-    .settings-row div + :-webkit-any(input, select, textarea) {
+    .settings-row label > :-webkit-any(input, select, textarea, list) {
   margin-top: 4px;
 }
 
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index b4223ec..f8efff8 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -213,38 +213,38 @@ list:not([disabled]) > :hover {
  * these rules can be simplified (since they wont need to override other rules).
  */
 
-list:not([hasElementFocus]) > [selected],
-list:not([hasElementFocus]) > [lead][selected] {
+list:not([has-element-focus]) > [selected],
+list:not([has-element-focus]) > [lead][selected] {
   background-color: #d0d0d0;
   background-image: none;
 }
 
-list[hasElementFocus] > [selected],
-list[hasElementFocus] > [lead][selected],
-list:not([hasElementFocus]) > [selected]:hover,
-list:not([hasElementFocus]) > [selected][lead]:hover {
+list[has-element-focus] > [selected],
+list[has-element-focus] > [lead][selected],
+list:not([has-element-focus]) > [selected]:hover,
+list:not([has-element-focus]) > [selected][lead]:hover {
   background-color: rgb(187, 206, 233);
   background-image: none;
 }
 
-list[hasElementFocus] > [lead],
-list[hasElementFocus] > [lead][selected] {
+.settings-list[has-element-focus] > [lead],
+.settings-list[has-element-focus] > [lead][selected] {
   border-bottom: 1px solid rgb(120, 146, 180);
   border-top: 1px solid rgb(120, 146, 180);
 }
 
-list[hasElementFocus] > [lead]:nth-child(2),
-list[hasElementFocus] > [lead][selected]:nth-child(2) {
+.settings-list[has-element-focus] > [lead]:nth-child(2),
+.settings-list[has-element-focus] > [lead][selected]:nth-child(2) {
   border-top: 1px solid transparent;
 }
 
-list[hasElementFocus] > [lead]:nth-last-child(2),
-list[hasElementFocus] > [lead][selected]:nth-last-child(2) {
+.settings-list[has-element-focus] > [lead]:nth-last-child(2),
+.settings-list[has-element-focus] > [lead][selected]:nth-last-child(2) {
   border-bottom: 1px solid transparent;
 }
 
-list[disabled] > [lead][selected],
-list[disabled]:focus > [lead][selected] {
+.settings-list[disabled] > [lead][selected],
+.settings-list[disabled]:focus > [lead][selected] {
   border: none;
 }
 
@@ -287,7 +287,8 @@ list .row-delete-button {
 }
 
 list > *:not(:hover):not([selected]):not([lead]) .row-delete-button,
-list:not([hasElementFocus]) > *:not(:hover):not([selected]) .row-delete-button,
+list:not([has-element-focus]) > *:not(:hover):not([selected])
+    .row-delete-button,
 list[disabled] .row-delete-button,
 list .row-delete-button[disabled] {
   opacity: 0;
@@ -334,10 +335,9 @@ list > :not([editing]) [displaymode='edit'] {
 list > [editing] [displaymode='static'] {
   /* Don't use display:none because we need to keep an element focusable. */
   left: 0;
-  opacity: 0;
   pointer-events: none;
   position: absolute;
-  top: -10em;
+  visibility: hidden;
 }
 
 list > [editing] input:invalid {
@@ -404,7 +404,7 @@ html[enable-background-mode=false] #background-mode-section {
 /* UI Controls */
 
 /* LIST */
-list[hasElementFocus] {
+.settings-list[has-element-focus] {
 <if expr="not is_macosx">
   outline: 1px solid rgba(0, 128, 256, 0.5);
   outline-offset: -2px;
@@ -436,8 +436,8 @@ list.autocomplete-suggestions > div {
   height: auto;
 }
 
-list.autocomplete-suggestions:not([hasElementFocus]) > [selected],
-list.autocomplete-suggestions:not([hasElementFocus]) > [lead][selected] {
+list.autocomplete-suggestions:not([has-element-focus]) > [selected],
+list.autocomplete-suggestions:not([has-element-focus]) > [lead][selected] {
   background-color: rgb(187, 206, 233);
 }
 
diff --git a/ui/webui/resources/css/table.css b/ui/webui/resources/css/table.css
index 9258197..1d59b7a 100644
--- a/ui/webui/resources/css/table.css
+++ b/ui/webui/resources/css/table.css
@@ -6,17 +6,17 @@ html.col-resize * {
   cursor: col-resize !important;
 }
 
-.table[hasElementFocus] > list > [lead] {
+.table[has-element-focus] > list > [lead] {
   border-color: hsl(214, 91%, 65%);
   z-index: 2;
 }
 
-.table[hasElementFocus] > list > [selected] {
+.table[has-element-focus] > list > [selected] {
   background-color: hsl(214,91%,89%);
   border-color: hsl(214, 91%, 65%);
 }
 
-.table[hasElementFocus] > list > [lead][selected],
+.table[has-element-focus] > list > [lead][selected],
 list > [selected]:hover {
   background-color: hsl(214, 91%, 87%);
   border-color: hsl(214, 91%, 65%);