Make autofill popup similar to clear browsing data

js/components/autofillAddressPanel.js

@@ -93,53 +93,53 @@ class AutofillAddressPanel extends ImmutableComponent {
       <div className='genericForm manageAutofillData' onClick={this.onClick}>
         <div className='formRow manageAutofillDataTitle' data-l10n-id='editAddress' />
         <div className='genericFormTable'>
-          <div id='nameOnAddress' className='formRow'>
+          <div id='nameOnAddress' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='name' htmlFor='nameOnAddress' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
               value={this.props.currentDetail.get('name')}
               ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
           </div>
-          <div id='organization' className='formRow'>
+          <div id='organization' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='organization' htmlFor='organization' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
               value={this.props.currentDetail.get('organization')} />
           </div>
-          <div id='streetAddress' className='formRow'>
+          <div id='streetAddress' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='streetAddress' htmlFor='streetAddress' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
               value={this.props.currentDetail.get('streetAddress')} />
           </div>
-          <div id='city' className='formRow'>
+          <div id='city' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='city' htmlFor='city' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
               value={this.props.currentDetail.get('city')} />
           </div>
-          <div id='state' className='formRow'>
+          <div id='state' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='state' htmlFor='state' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
               value={this.props.currentDetail.get('state')} />
           </div>
-          <div id='postalCode' className='formRow'>
+          <div id='postalCode' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='postalCode' htmlFor='postalCode' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
               value={this.props.currentDetail.get('postalCode')} />
           </div>
-          <div id='country' className='formRow'>
+          <div id='country' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='country' htmlFor='country' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
               value={this.props.currentDetail.get('country')} />
           </div>
-          <div id='phone' className='formRow'>
+          <div id='phone' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='phone' htmlFor='phone' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
               value={this.props.currentDetail.get('phone')} />
           </div>
-          <div id='email' className='formRow'>
+          <div id='email' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='email' htmlFor='email' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
               value={this.props.currentDetail.get('email')} />
           </div>
-          <div className='formRow'>
+          <div className='formRow manageAutofillDataButtons'>
             <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveAddressButton' onClick={this.onSave} />
           </div>

js/components/autofillCreditCardPanel.js

@@ -75,28 +75,28 @@ class AutofillCreditCardPanel extends ImmutableComponent {
       <div className='genericForm manageAutofillData' onClick={this.onClick}>
         <div className='formRow manageAutofillDataTitle' data-l10n-id='editCreditCard' />
         <div className='genericFormTable'>
-          <div id='nameOnCard' className='formRow'>
+          <div id='nameOnCard' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='name' htmlFor='nameOnCard' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
               value={this.props.currentDetail.get('name')} ref={(nameOnCard) => { this.nameOnCard = nameOnCard }} />
           </div>
-          <div id='creditCardNumber' className='formRow'>
+          <div id='creditCardNumber' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='creditCardNumber' htmlFor='creditCardNumber' />
             <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCardChange}
               value={this.props.currentDetail.get('card')} />
           </div>
-          <div id='expirationDate' className='formRow'>
+          <div id='expirationDate' className='formRow manageAutofillDataOptions'>
             <label data-l10n-id='expirationDate' htmlFor='expirationDate' />
             <select value={this.props.currentDetail.get('month')}
-              onChange={this.onExpMonthChange} className='formSelect expMonthSelect' >
+              onChange={this.onExpMonthChange} className='expMonthSelect' >
               {ExpMonth}
             </select>
             <select value={this.props.currentDetail.get('year')}
-              onChange={this.onExpYearChange} className='formSelect expYearSelect' >
+              onChange={this.onExpYearChange} className='expYearSelect' >
               {ExpYear}
             </select>
           </div>
-          <div className='formRow'>
+          <div className='formRow manageAutofillDataButtons'>
             <Button l10nId='cancel' className='secondaryAltButton' onClick={this.props.onHide} />
             <Button l10nId='save' className='primaryButton saveCreditCardButton' onClick={this.onSave} />
           </div>

less/forms.less

@@ -105,7 +105,7 @@
     background-color: #f7f7f7;
     border-radius: @borderRadius;
     max-width: 450px;
-    padding: 10px;
+    padding: 0;
     text-align: left;
     width: 473px;
     -webkit-user-select: none;
@@ -114,20 +114,37 @@
     overflow-y: auto;
     max-height: 100%;
 
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
+    .formRow {
+      padding: 16px 30px;
+      &.manageAutofillDataTitle {
+        color: #ff5000;
+        font-size: 1.2em;
       }
-    }
 
-    .manageAutofillDataTitle {
-      color: #ff5000;
-      font-size: 1.2em;
-    }
+      &.manageAutofillDataOptions {
+        padding: 0 30px;
 
-    .formSelect {
-      width: 5.5em
+        > label {
+          padding-right: 2px;
+          width: 100px;
+          text-align: left;
+        }
+
+        > input {
+          padding: 2px;
+          margin: 0;
+          width: 300px;
+        }
+
+        > select {
+          width: 6em;
+        }
+      }
+
+      &.manageAutofillDataButtons {
+        text-align: right;
+        padding: 16px 10px;
+      }
     }
   }
 }