From fc349716ee7ebe79ce01411884ed7ebce7c7e1b7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 6 Apr 2017 16:13:40 +0900
Subject: [PATCH 01/17] Refactor loginRequired.js with Aphrodite and commonForm

- textbox and textbox__outlineable were copied from textbox.js to commonStyles.js

Since FormTextbox cannot be used for the input elements, I copied the styles applied for that element and applied to them. See: https://github.com/brave/browser-laptop/pull/7164#discussion_r100586892

The labels and input forms were grouped and placed with display:flex and justify-content:space-between. Also the elements inside each wrapper were aligned equally to make the length of the input forms always equal (l10n friendly).

Also colons in the label were removed to make the style consistent.

Closes #8009
Addresses #8010

Auditors:

Test Plan:
1. Visit http://browserspy.dk/password.php
2. Click "password-ok.php" link
3. Make sure you can log in successfully with the given credential
4. Change the lang setting on about:preferences
5. Try the same steps above and make sure the length of the input forms is equal
---
 .../brave/locales/en-US/app.properties        |   4 +-
 .../components/styles/commonStyles.js         |  14 +++
 js/components/loginRequired.js                | 101 ++++++++++++++----
 3 files changed, 97 insertions(+), 22 deletions(-)

diff --git a/app/extensions/brave/locales/en-US/app.properties b/app/extensions/brave/locales/en-US/app.properties
index 5c40df199fd..f231798bd6d 100644
--- a/app/extensions/brave/locales/en-US/app.properties
+++ b/app/extensions/brave/locales/en-US/app.properties
@@ -80,8 +80,8 @@ moreBookmarks=More bookmarks…
 fullScreenModeWarning={{host}} entered full screen mode, press ESC to exit.
 braveMenuTotalReplacements=Total Replacements: {{count}}
 basicAuthRequired=Authentication Required
-basicAuthUsernameLabel=Username:
-basicAuthPasswordLabel=Password:
+basicAuthUsernameLabel=Username
+basicAuthPasswordLabel=Password
 basicAuthMessage={{host}} requires a username and password.
 crashScreenHeader=Something went wrong =(
 crashScreenText=An error occurred while displaying this webpage. To continue, reload or navigate to another page.
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index e236134ac51..9ff64232c89 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -21,6 +21,20 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
+  // Textbox -- copied from textbox.js
+  textbox: {
+    boxSizing: 'border-box',
+    width: 'auto'
+  },
+  textbox__outlineable: {
+    ':focus': {
+      outlineColor: globalStyles.color.statsBlue,
+      outlineOffset: '-4px',
+      outlineStyle: 'solid',
+      outlineWidth: '1px'
+    }
+  },
+
   // Dialogs
   flyoutDialog: {
     background: globalStyles.color.toolbarBackground,
diff --git a/js/components/loginRequired.js b/js/components/loginRequired.js
index f5f0a2fce78..3effecf24b5 100644
--- a/js/components/loginRequired.js
+++ b/js/components/loginRequired.js
@@ -10,6 +10,17 @@ const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
+const {
+  CommonForm,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormButtonWrapper
+} = require('../../app/renderer/components/commonForm')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 class LoginRequired extends React.Component {
   constructor () {
     super()
@@ -74,31 +85,81 @@ class LoginRequired extends React.Component {
       host: urlResolve(this.detail.getIn(['request', 'url']), '/')
     }
     return <Dialog onHide={this.onClose} isClickDismiss>
-      <div className='genericForm' onClick={this.onClick.bind(this)}>
-        <h2 data-l10n-id='basicAuthRequired' />
-        <div className='genericFormSubtitle' data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
-        <div className='genericFormTable'>
-          <div id='loginUsername' className='formRow'>
-            <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
-            <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onUsernameChange} value={this.state.username} ref={(loginUsername) => { this.loginUsername = loginUsername }} />
-          </div>
-          {
-            !this.isFolder
-            ? <div id='loginPassword' className='formRow'>
-              <label data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
-              <input spellCheck='false' type='password' onKeyDown={this.onKeyDown} onChange={this.onPasswordChange} value={this.state.password} />
+      <CommonForm onClick={this.onClick.bind(this)}>
+        <CommonFormTitle data-l10n-id='basicAuthRequired' />
+        <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
+        <CommonFormSection>
+          <div className={css(styles.sectionWrapper)}>
+            <div data-test-id='loginLabel' className={css(styles.inputWrapper, styles.inputWrapper__label)}>
+              <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
+              <label className={css(styles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
             </div>
-            : null
-          }
-          <div className='formRow'>
-            <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
-            <Button l10nId='ok' className='primaryButton' onClick={this.onSave.bind(this)} />
+            {
+              !this.isFolder
+              ? <div id='loginInput' className={css(styles.inputWrapper, styles.inputWrapper__input)}>
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  styles.input__box
+                )}
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onUsernameChange}
+                  value={this.state.username}
+                  ref={(loginUsername) => { this.loginUsername = loginUsername }}
+                />
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  styles.input__box,
+                  styles.input__bottomRow
+                )}
+                  spellCheck='false'
+                  type='password'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onPasswordChange}
+                  value={this.state.password}
+                />
+              </div>
+              : null
+            }
           </div>
-        </div>
-      </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button l10nId='cancel' className='whiteButton' onClick={this.onClose} />
+          <Button l10nId='ok' className='primaryButton' onClick={this.onSave.bind(this)} />
+        </CommonFormButtonWrapper>
+      </CommonForm>
     </Dialog>
   }
 }
 
 LoginRequired.propTypes = { frameProps: PropTypes.object }
+
+const styles = StyleSheet.create({
+  sectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'space-around'
+  },
+  inputWrapper__label: {
+    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+  inputWrapper__input: {
+    flexGrow: 1
+  },
+  input__bottomRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__box: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  }
+})
+
 module.exports = LoginRequired

From 608389c04c9c528aec4be0faf82d94a848d12382 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 6 Apr 2017 16:14:38 +0900
Subject: [PATCH 02/17] Added CommonFormTextbox and commonFormStyles to
 commonForm.js

Also:
- Replaced aphrodite with aphrodite/no-important on textbox.js
- Moved the styles from loginRequired.js to commonForm.js

Auditors:

Test Plan: n/a
---
 app/renderer/components/commonForm.js | 39 +++++++++++++++-
 app/renderer/components/textbox.js    | 10 ++++-
 js/components/loginRequired.js        | 64 +++++++++++----------------
 3 files changed, 71 insertions(+), 42 deletions(-)

diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index b3bef6a68de..d3e9ba49d18 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -10,6 +10,7 @@ const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
 const {FormDropdown} = require('./dropdown')
+const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
@@ -23,6 +24,12 @@ class CommonFormDropdown extends ImmutableComponent {
   }
 }
 
+class CommonFormTextbox extends ImmutableComponent {
+  render () {
+    return <FormTextbox data-isCommonForm='true' {...this.props} />
+  }
+}
+
 class CommonFormClickable extends ImmutableComponent {
   render () {
     return <div className={css(styles.CommonFormClickable)} {...this.props} />
@@ -71,6 +78,7 @@ const styles = StyleSheet.create({
     padding: 0,
     top: '40px',
     cursor: 'default',
+    width: '100%',
     maxWidth: '422px',
     userSelect: 'none'
 
@@ -109,13 +117,42 @@ const styles = StyleSheet.create({
   }
 })
 
+const commonFormStyles = StyleSheet.create({
+  sectionWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  inputWrapper: {
+    display: 'flex',
+    flexFlow: 'column',
+    justifyContent: 'space-around'
+  },
+  inputWrapper__label: {
+    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+  inputWrapper__input: {
+    flexGrow: 1
+  },
+  input__bottomRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__marginRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  input__box: {
+    fontSize: globalStyles.fontSize.flyoutDialog
+  }
+})
+
 module.exports = {
   CommonForm,
   CommonFormDropdown,
+  CommonFormTextbox,
   CommonFormClickable,
   CommonFormSection,
   CommonFormTitle,
   CommonFormSubSection,
   CommonFormButtonWrapper,
-  CommonFormBottomWrapper
+  CommonFormBottomWrapper,
+  commonFormStyles
 }
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/textbox.js
index 1ef48f9b4b5..1f44becc51f 100644
--- a/app/renderer/components/textbox.js
+++ b/app/renderer/components/textbox.js
@@ -4,7 +4,8 @@
 
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
 
@@ -14,8 +15,9 @@ class Textbox extends ImmutableComponent {
     const className = css(
       this.props['data-isFormControl'] && commonStyles.formControl,
       styles.textbox,
-      this.props['data-isSettings'] && styles.isSettings,
       (this.props.readonly || this.props.readOnly) ? styles.readOnly : styles.outlineable,
+      this.props['data-isCommonForm'] && styles.isCommonForm,
+      this.props['data-isSettings'] && styles.isSettings,
       this.props['data-isRecoveryKeyTextbox'] && styles.recoveryKeys
     )
 
@@ -73,6 +75,10 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+  isCommonForm: {
+    fontSize: globalStyles.fontSize.flyoutDialog,
+    width: '100%'
+  },
   isSettings: {
     width: '280px'
   },
diff --git a/js/components/loginRequired.js b/js/components/loginRequired.js
index 3effecf24b5..d6ed288667e 100644
--- a/js/components/loginRequired.js
+++ b/js/components/loginRequired.js
@@ -10,17 +10,18 @@ const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
 const {
   CommonForm,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormButtonWrapper
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
 } = require('../../app/renderer/components/commonForm')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../../app/renderer/components/styles/global')
-const commonStyles = require('../../app/renderer/components/styles/commonStyles')
-
 class LoginRequired extends React.Component {
   constructor () {
     super()
@@ -90,18 +91,24 @@ class LoginRequired extends React.Component {
         <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
         <CommonFormSection>
           <div className={css(styles.sectionWrapper)}>
-            <div data-test-id='loginLabel' className={css(styles.inputWrapper, styles.inputWrapper__label)}>
+            <div data-test-id='loginLabel'
+              className={css(commonFormStyles.inputWrapper,
+              commonFormStyles.inputWrapper__label
+            )}>
               <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
-              <label className={css(styles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
+              <label className={css(commonFormStyles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
             </div>
             {
               !this.isFolder
-              ? <div id='loginInput' className={css(styles.inputWrapper, styles.inputWrapper__input)}>
+              ? <div id='loginInput' className={css(
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
                 <input className={css(
                   commonStyles.formControl,
                   commonStyles.textbox,
                   commonStyles.textbox__outlineable,
-                  styles.input__box
+                  commonFormStyles.input__box
                 )}
                   spellCheck='false'
                   onKeyDown={this.onKeyDown}
@@ -109,19 +116,15 @@ class LoginRequired extends React.Component {
                   value={this.state.username}
                   ref={(loginUsername) => { this.loginUsername = loginUsername }}
                 />
-                <input className={css(
-                  commonStyles.formControl,
-                  commonStyles.textbox,
-                  commonStyles.textbox__outlineable,
-                  styles.input__box,
-                  styles.input__bottomRow
-                )}
-                  spellCheck='false'
-                  type='password'
-                  onKeyDown={this.onKeyDown}
-                  onChange={this.onPasswordChange}
-                  value={this.state.password}
-                />
+                <div className={css(commonFormStyles.input__marginRow)}>
+                  <CommonFormTextbox
+                    spellCheck='false'
+                    type='password'
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onPasswordChange}
+                    value={this.state.password}
+                  />
+                </div>
               </div>
               : null
             }
@@ -142,23 +145,6 @@ const styles = StyleSheet.create({
   sectionWrapper: {
     display: 'flex',
     justifyContent: 'space-between'
-  },
-  inputWrapper: {
-    display: 'flex',
-    flexFlow: 'column',
-    justifyContent: 'space-around'
-  },
-  inputWrapper__label: {
-    marginRight: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
-  },
-  inputWrapper__input: {
-    flexGrow: 1
-  },
-  input__bottomRow: {
-    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
-  },
-  input__box: {
-    fontSize: globalStyles.fontSize.flyoutDialog
   }
 })
 

From 83c08eea47d1b9edf3c2e60fe604903a4be28da9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Tue, 18 Apr 2017 02:47:44 +0900
Subject: [PATCH 03/17] Refactor widevinePanel.js and widevineInfo.js

Closes #8028
Addresses #7989

- Removed isClickDismiss from the dialog
  Installing Widevine influences globally, not specific to a tab which opens the page which requires Widevine. Removing isClickDismiss would clarify to the users that the third party software which we discourage from using is going to be installed on the browser right now.

- Applied commonForm.js to them in order to make styling consistent
- Added CommonFormLarge to commonForm.js
- Added globalStyles.dialogWidth and globalStyles.LargeWidth to global.js
- Added noMargin and noPadding to commonStyles.js
- Added margin-top to the bottom text block on widevineInfo.js
- Added testIds to the buttons and the dialog, modifying dialog.js
  - data-test-id as testId
  - data-test2-id as test2Id
- Added widevinePanelDialog as a testId
- Set cursor:pointer

Auditors:

Test Plan:
1. Visit netflix.com
2. Click outside of the dialog
3. Make sure the dialog is not closed
4. Click "Install and Allow"
5. Log in to the account
6. Make sure movies can be played
---
 app/renderer/components/commonForm.js         | 13 +++-
 .../components/styles/commonStyles.js         |  6 ++
 app/renderer/components/styles/global.js      |  2 +
 app/renderer/components/widevineInfo.js       | 35 ++++++++---
 app/renderer/components/widevinePanel.js      | 59 ++++++++++++++-----
 js/components/dialog.js                       |  2 +
 less/forms.less                               |  4 --
 7 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index d3e9ba49d18..a9999108095 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -18,6 +18,12 @@ class CommonForm extends ImmutableComponent {
   }
 }
 
+class CommonFormLarge extends ImmutableComponent {
+  render () {
+    return <div className={css(commonStyles.flyoutDialog, styles.CommonForm, styles.CommonFormLarge)} {...this.props} />
+  }
+}
+
 class CommonFormDropdown extends ImmutableComponent {
   render () {
     return <FormDropdown data-isCommonForm='true' {...this.props} />
@@ -79,7 +85,7 @@ const styles = StyleSheet.create({
     top: '40px',
     cursor: 'default',
     width: '100%',
-    maxWidth: '422px',
+    maxWidth: globalStyles.spacing.dialogWidth,
     userSelect: 'none'
 
     // Need a general solution
@@ -88,6 +94,10 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
+  CommonFormLarge: {
+    maxWidth: globalStyles.spacing.dialogLargeWidth
+  },
+
   CommonFormClickable: {
     color: '#5b5b5b',
 
@@ -146,6 +156,7 @@ const commonFormStyles = StyleSheet.create({
 
 module.exports = {
   CommonForm,
+  CommonFormLarge,
   CommonFormDropdown,
   CommonFormTextbox,
   CommonFormClickable,
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 9ff64232c89..fbb29e1729f 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -146,6 +146,9 @@ const styles = StyleSheet.create({
   },
 
   // margin/padding
+  noMargin: {
+    margin: 0
+  },
   noMarginTop: {
     marginTop: 0
   },
@@ -158,6 +161,9 @@ const styles = StyleSheet.create({
   noMarginRight: {
     marginRight: 0
   },
+  noPadding: {
+    padding: 0
+  },
   noPaddingTop: {
     paddingTop: 0
   },
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 56a2413500e..7bfc0a2c67d 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -132,6 +132,8 @@ const globalStyles = {
     iconSize: '16px',
     closeIconSize: '13px',
     narrowIconSize: '12px',
+    dialogWidth: '422px',
+    dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
     paymentsMargin: '20px',
diff --git a/app/renderer/components/widevineInfo.js b/app/renderer/components/widevineInfo.js
index 1b9915e8990..d12cdb1afbd 100644
--- a/app/renderer/components/widevineInfo.js
+++ b/app/renderer/components/widevineInfo.js
@@ -11,6 +11,11 @@
 const React = require('react')
 const ImmutableComponent = require('./immutableComponent')
 const appConfig = require('../../../js/constants/appConfig')
+const cx = require('../../../js/lib/classSet')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+const {CommonFormSection} = require('./commonForm')
 
 class WidevineInfo extends ImmutableComponent {
   constructor () {
@@ -29,23 +34,39 @@ class WidevineInfo extends ImmutableComponent {
     })
   }
   render () {
-    return <div className='widevineInfo'>
-      <div className='subtext'>
+    return <div data-test-id='widevineInfo'>
+      <CommonFormSection>
         <span data-l10n-id='enableWidevineSubtext' />
-        <span className='fa fa-info-circle'
+        <span className={cx({
+          fa: true,
+          'fa-info-circle': true,
+          [css(styles.cursor)]: true
+        })}
+          data-test-id='onMoreInfo'
           onClick={this.onMoreInfo}
           title={appConfig.widevine.moreInfoUrl}
         />
-      </div>
-      <div className='subtext'>
+      </CommonFormSection>
+      <CommonFormSection>
         <span data-l10n-id='enableWidevineSubtext2' />
-        <span className='fa fa-info-circle'
+        <span className={cx({
+          fa: true,
+          'fa-info-circle': true,
+          [css(styles.cursor)]: true
+        })}
+          data-test-id='onViewLicense'
           onClick={this.onViewLicense}
           title={appConfig.widevine.licenseUrl}
         />
-      </div>
+      </CommonFormSection>
     </div>
   }
 }
 
+const styles = StyleSheet.create({
+  cursor: {
+    cursor: 'pointer'
+  }
+})
+
 module.exports = WidevineInfo
diff --git a/app/renderer/components/widevinePanel.js b/app/renderer/components/widevinePanel.js
index d8737b9db8f..b4434542859 100644
--- a/app/renderer/components/widevinePanel.js
+++ b/app/renderer/components/widevinePanel.js
@@ -13,6 +13,16 @@ const windowActions = require('../../../js/actions/windowActions')
 const appActions = require('../../../js/actions/appActions')
 const siteUtil = require('../../../js/state/siteUtil')
 
+const {
+  CommonFormLarge,
+  CommonFormTitle,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
+} = require('./commonForm')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('./styles/commonStyles')
+
 class ImportBrowserDataPanel extends ImmutableComponent {
   constructor () {
     super()
@@ -38,28 +48,49 @@ class ImportBrowserDataPanel extends ImmutableComponent {
     if (isLinux) {
       return null
     }
-    return <Dialog onHide={this.props.onHide} className='commonDialog' isClickDismiss>
-      <div className='commonForm' onClick={(e) => e.stopPropagation()}>
-        <h2 className='formSection commonFormTitle' data-l10n-id='widevinePanelTitle' />
-        <div className='formSection'>
-          <WidevineInfo createTabRequestedAction={appActions.createTabRequested} />
-        </div>
-        <div className='formSection commonFormButtons'>
-          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
-          <Button l10nId='installAndAllow' className='primaryButton' onClick={this.onInstallAndAllow} />
-        </div>
-        <div className='formSection commonFormBottom'>
-          <div className='commonFormButtonGroup'>
+    /*
+       Removed 'isClickDismiss' from Dialog.
+       Installing Widevine influences globally, not specific to a tab,
+       like Adobe Flash. Removing isClickDismiss would make it clear that
+       the third party software which we discourage from using is going
+       to be installed on the computer.
+    */
+    return <Dialog onHide={this.props.onHide} testId='widevinePanelDialog'>
+      <CommonFormLarge onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle data-l10n-id='widevinePanelTitle' />
+        <WidevineInfo createTabRequestedAction={appActions.createTabRequested} />
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='cancel'
+            testId='cancelButton'
+            onClick={this.props.onHide}
+          />
+          <Button className='primaryButton'
+            l10nId='installAndAllow'
+            testId='installAndAllowButton'
+            onClick={this.onInstallAndAllow} />
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper>
+          <div className={css(styles.flexJustifyCenter)}>
+            {/* TODO: refactor switchControl.js to remove commonStyles.noPadding */}
             <SwitchControl id={this.props.prefKey}
+              className={css(commonStyles.noPadding)}
               rightl10nId='rememberThisDecision'
               rightl10nArgs={JSON.stringify({origin: this.origin})}
               onClick={this.onClickRememberForNetflix}
               checkedOn={this.props.widevinePanelDetail.get('alsoAddRememberSiteSetting')} />
           </div>
-        </div>
-      </div>
+        </CommonFormBottomWrapper>
+      </CommonFormLarge>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  flexJustifyCenter: {
+    display: 'flex',
+    justifyContent: 'center'
+  }
+})
+
 module.exports = ImportBrowserDataPanel
diff --git a/js/components/dialog.js b/js/components/dialog.js
index 5bb5770ef21..59a5b6ed8ed 100644
--- a/js/components/dialog.js
+++ b/js/components/dialog.js
@@ -33,6 +33,8 @@ class Dialog extends ImmutableComponent {
   render () {
     return <div className={'dialog ' + (this.props.className || '')}
       tabIndex='-1'
+      data-test-id={this.props.testId}
+      data-test2-id={this.props.test2Id}
       ref={(node) => { this.dialog = node }}
       onKeyDown={this.onKeyDown.bind(this)}
       onClick={this.onClick.bind(this)}>
diff --git a/less/forms.less b/less/forms.less
index ba759d09f1a..f930476b602 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -98,10 +98,6 @@ select {
         background-color: #dddee0;
         text-align: center;
       }
-      .commonFormButtonGroup {
-        margin: 0 auto;
-        display: inline-block;
-      }
     }
   }
 }

From 9afa06c0b81171af23cfc5a74a1935d5805b3f25 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 18 Apr 2017 19:09:47 +0900
Subject: [PATCH 04/17] Refactor autofillAddressPanel.js and
 autofillCreditCardPanel.js

Closes #8099
Closes #8100
Addresses #7989

- Refactored with commonForm, replacing it with genericForm
  Aligned labels to the left and input textboxes to the right by applying display:flex

- Added CommonFormLarge
- Added cx to dialog.js for more readability
- Removed .manageAutofillDataPanel from form.less

Also:
- Added testIds
- Edited autofillTest.js and autofill.js
  TODO: refactor autofill.js with Aphrodite
- Edited selectors.js

Auditors:

Test Plan:
1. Automated tests should pass
2. Open about:autofill
3. Add an address
4. Add a credit card
5. Visit https://www.roboform.com/filling-test-all-fields
6. Make sure the input forms can be filled
---
 app/renderer/components/commonForm.js         |   6 +-
 .../components/importBrowserDataPanel.js      |   2 +-
 js/about/autofill.js                          |  83 ++++++---
 js/components/autofillAddressPanel.js         | 159 ++++++++++------
 js/components/autofillCreditCardPanel.js      | 145 ++++++++++++---
 js/components/dialog.js                       |  11 +-
 less/forms.less                               |  51 -----
 test/contents/autofillTest.js                 | 176 +++++++++---------
 test/lib/selectors.js                         |   4 +-
 9 files changed, 381 insertions(+), 256 deletions(-)

diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index a9999108095..e40cabcc1fe 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -20,7 +20,11 @@ class CommonForm extends ImmutableComponent {
 
 class CommonFormLarge extends ImmutableComponent {
   render () {
-    return <div className={css(commonStyles.flyoutDialog, styles.CommonForm, styles.CommonFormLarge)} {...this.props} />
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.CommonForm,
+      styles.CommonFormLarge
+    )} {...this.props} />
   }
 }
 
diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
index 2bdfee948d0..2312484303a 100644
--- a/app/renderer/components/importBrowserDataPanel.js
+++ b/app/renderer/components/importBrowserDataPanel.js
@@ -123,7 +123,7 @@ class ImportBrowserDataPanel extends ImmutableComponent {
         browsers.push(<option value={browser.index}>{browser.name}</option>)
       })
     }
-    return <Dialog onHide={this.props.onHide} data-test-id='importBrowserDataPanel' isClickDismiss>
+    return <Dialog onHide={this.props.onHide} testId='importBrowserDataPanel' isClickDismiss>
       <CommonForm data-test-id='importBrowserData' onClick={(e) => e.stopPropagation()}>
         <CommonFormTitle
           data-test-id='importBrowserDataTitle'
diff --git a/js/about/autofill.js b/js/about/autofill.js
index 19ae4f93d6c..93bde3eb379 100644
--- a/js/about/autofill.js
+++ b/js/about/autofill.js
@@ -6,6 +6,7 @@ const React = require('react')
 const messages = require('../constants/messages')
 const Immutable = require('immutable')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
+const cx = require('../lib/classSet')
 const aboutActions = require('./aboutActions')
 const Button = require('../components/button')
 
@@ -33,20 +34,32 @@ class AddressItem extends ImmutableComponent {
     const address = this.props.address
     return <tr className='autofillItem'>
       <td className='autofillActions'>
-        <span className='autofillAction fa fa-times' title='Delete address'
+        <span className={cx({
+          fa: true,
+          'fa-times': true,
+          autofillAction: true
+        })}
+          data-test-id='DeleteAddress'
+          title='Delete address'
           onClick={this.onDelete} />
       </td>
-      <td className='addressName'>{address.get('name')}</td>
-      <td className='organization'>{address.get('organization')}</td>
-      <td className='streetAddress'>{address.get('streetAddress')}</td>
-      <td className='city'>{address.get('city')}</td>
-      <td className='state'>{address.get('state')}</td>
-      <td className='postalCode'>{address.get('postalCode')}</td>
-      <td className='country'>{address.get('country')}</td>
-      <td className='phone'>{address.get('phone')}</td>
-      <td className='email'>{address.get('email')}</td>
-      <td className='autofillActions'>
-        <span className='autofillAction fa fa-pencil-square-o' title='Edit address'
+      <td data-test-id='addressName'>{address.get('name')}</td>
+      <td data-test-id='organization'>{address.get('organization')}</td>
+      <td data-test-id='streetAddress'>{address.get('streetAddress')}</td>
+      <td data-test-id='city'>{address.get('city')}</td>
+      <td data-test-id='state'>{address.get('state')}</td>
+      <td data-test-id='postalCode'>{address.get('postalCode')}</td>
+      <td data-test-id='country'>{address.get('country')}</td>
+      <td data-test-id='phone'>{address.get('phone')}</td>
+      <td data-test-id='email'>{address.get('email')}</td>
+      <td className='autofillActions' data-test-id='autofillActions'>
+        <span className={cx({
+          fa: true,
+          'fa-pencil-square-o': true,
+          autofillAction: true
+        })}
+          data-test-id='EditAddress'
+          title='Edit address'
           onClick={this.onEdit} />
       </td>
     </tr>
@@ -72,18 +85,32 @@ class CreditCardItem extends ImmutableComponent {
     const creditCard = this.props.creditCard
     return <tr className='autofillItem'>
       <td className='autofillActions'>
-        <span className='autofillAction fa fa-times' title='Delete creditCard'
+        <span className={cx({
+          fa: true,
+          'fa-times': true,
+          autofillAction: true
+        })}
+          data-test-id='DeleteCreditCard'
+          title='Delete creditCard'
           onClick={this.onDelete} />
       </td>
-      <td className='creditCardName'>{creditCard.get('name')}</td>
-      <td className='creditCardNumber'>{
-        creditCard.get('card') !== undefined ? '***' + creditCard.get('card').slice(-4) : null
-      }</td>
-      <td className='creditCardPExpirationDate'>
+      <td data-test-id='creditCardName'>
+        {creditCard.get('name')}
+      </td>
+      <td data-test-id='creditCardNumber'>
+        {creditCard.get('card') !== undefined ? '***' + creditCard.get('card').slice(-4) : null}
+      </td>
+      <td data-test-id='creditCardPExpirationDate'>
         {creditCard.get('month') + '/' + creditCard.get('year')}
       </td>
       <td className='autofillActions'>
-        <span className='autofillAction fa fa-pencil-square-o' title='Edit creditCard'
+        <span className={cx({
+          fa: true,
+          'fa-pencil-square-o': true,
+          autofillAction: true
+        })}
+          data-test-id='EditCreditCard'
+          title='Edit creditCard'
           onClick={this.onEdit} />
       </td>
     </tr>
@@ -133,7 +160,7 @@ class AboutAutofill extends React.Component {
 
   render () {
     var savedAddresssPage = this.isAddresssEmpty
-    ? <div><span className='notSaved' data-l10n-id='noAddressesSaved' /></div>
+    ? <div><span className='notSaved' data-l10n-id='noAddressesSaved' data-test-id='noAddressesSaved' /></div>
     : <div>
       <table className='autofillList'>
         <thead>
@@ -162,7 +189,7 @@ class AboutAutofill extends React.Component {
     </div>
 
     var savedCreditCardsPage = this.isCreditCardsEmpty
-    ? <div><span className='notSaved' data-l10n-id='noCreditCardsSaved' /></div>
+    ? <div><span className='notSaved' data-l10n-id='noCreditCardsSaved' data-test-id='noCreditCardsSaved' /></div>
     : <div>
       <table className='autofillList'>
         <thead>
@@ -183,20 +210,28 @@ class AboutAutofill extends React.Component {
         </tbody>
       </table>
     </div>
-    return <div className='autofillPage'>
+    return <div className='autofillPage' data-test-id='autofillPage'>
       <h1 data-l10n-id='autofillTitle' />
       <div className='autofillPageContent'>
         <div className='autofillPageFooter' />
         <h2 data-l10n-id='addresses' />
         <div className='autofillPageContent'>
           {savedAddresssPage}
-          <Button l10nId='addAddress' className='primaryButton addAddressButton' onClick={this.onAddAddress} />
+          <Button className='primaryButton'
+            l10nId='addAddress'
+            testId='addAddressButton'
+            onClick={this.onAddAddress}
+          />
         </div>
         <div className='autofillPageFooter' />
         <h2 data-l10n-id='creditCards' />
         <div className='autofillPageContent'>
           {savedCreditCardsPage}
-          <Button l10nId='addCreditCard' className='primaryButton addCreditCardButton' onClick={this.onAddCreditCard} />
+          <Button className='primaryButton'
+            l10nId='addCreditCard'
+            testId='addCreditCardButton'
+            onClick={this.onAddCreditCard}
+          />
         </div>
       </div>
     </div>
diff --git a/js/components/autofillAddressPanel.js b/js/components/autofillAddressPanel.js
index 4bfab7c39ea..ec8c88332eb 100644
--- a/js/components/autofillAddressPanel.js
+++ b/js/components/autofillAddressPanel.js
@@ -10,6 +10,18 @@ const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 
+const {css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+
+const {
+  CommonFormLarge,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
+} = require('../../app/renderer/components/commonForm')
+
 class AutofillAddressPanel extends ImmutableComponent {
   constructor () {
     super()
@@ -99,63 +111,98 @@ class AutofillAddressPanel extends ImmutableComponent {
   }
 
   render () {
-    return <Dialog onHide={this.props.onHide} className='manageAutofillDataPanel autofillAddressPanel' isClickDismiss>
-      <div className='genericForm manageAutofillData' onClick={this.onClick}>
-        <div className='formRow manageAutofillDataTitle' data-l10n-id='editAddress' />
-        <div className='genericFormTable'>
-          <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 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 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 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 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 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 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 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 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 manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
-            <Button l10nId='save' className='primaryButton saveAddressButton' onClick={this.onSave}
-              disabled={this.disableSaveButton} />
+    return <Dialog onHide={this.props.onHide} testId='autofillAddressPanel' isClickDismiss>
+      <CommonFormLarge onClick={this.onClick}>
+        <CommonFormTitle data-l10n-id='editAddress' />
+        <CommonFormSection>
+          <div className={css(commonFormStyles.sectionWrapper)}>
+            <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__label)}>
+              <label data-l10n-id='name' htmlFor='nameOnAddress' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='organization' htmlFor='organization' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='streetAddress' htmlFor='streetAddress' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='city' htmlFor='city' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='state' htmlFor='state' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='postalCode' htmlFor='postalCode' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='country' htmlFor='country' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='phone' htmlFor='phone' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='email' htmlFor='email' />
+            </div>
+            <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__input)}>
+              <input className={css(
+                commonStyles.formControl,
+                commonStyles.textbox,
+                commonStyles.textbox__outlineable,
+                commonFormStyles.input__box
+              )}
+                data-test-id='nameOnAddress'
+                spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange}
+                value={this.props.currentDetail.get('name')}
+                ref={(nameOnAddress) => { this.nameOnAddress = nameOnAddress }} />
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='organization'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onOrganizationChange}
+                  value={this.props.currentDetail.get('organization')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='streetAddress'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStreetAddressChange}
+                  value={this.props.currentDetail.get('streetAddress')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='city'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCityChange}
+                  value={this.props.currentDetail.get('city')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='state'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onStateChange}
+                  value={this.props.currentDetail.get('state')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='postalCode'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPostalCodeChange}
+                  value={this.props.currentDetail.get('postalCode')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='country'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onCountryChange}
+                  value={this.props.currentDetail.get('country')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='phone'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onPhoneChange}
+                  value={this.props.currentDetail.get('phone')} />
+              </div>
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormTextbox
+                  data-test-id='email'
+                  spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onEmailChange}
+                  value={this.props.currentDetail.get('email')} />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='cancel'
+            testId='cancelAddressButton'
+            onClick={this.props.onHide}
+          />
+          <Button className='primaryButton'
+            disabled={this.disableSaveButton}
+            l10nId='save'
+            testId='saveAddressButton'
+            onClick={this.onSave}
+          />
+        </CommonFormButtonWrapper>
+      </CommonFormLarge>
     </Dialog>
   }
 }
diff --git a/js/components/autofillCreditCardPanel.js b/js/components/autofillCreditCardPanel.js
index a8216f2fbdd..a65d18981d2 100644
--- a/js/components/autofillCreditCardPanel.js
+++ b/js/components/autofillCreditCardPanel.js
@@ -10,6 +10,20 @@ const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const KeyCodes = require('../../app/common/constants/keyCodes')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+const globalStyles = require('../../app/renderer/components/styles/global')
+
+const {
+  CommonForm,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormDropdown,
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  commonFormStyles
+} = require('../../app/renderer/components/commonForm')
+
 class AutofillCreditCardPanel extends ImmutableComponent {
   constructor () {
     super()
@@ -77,40 +91,111 @@ class AutofillCreditCardPanel extends ImmutableComponent {
       ExpYear.push(<option value={i}>{i}</option>)
     }
 
-    return <Dialog onHide={this.props.onHide} className='manageAutofillDataPanel autofillCreditCardPanel' isClickDismiss>
-      <div className='genericForm manageAutofillData' onClick={this.onClick}>
-        <div className='formRow manageAutofillDataTitle' data-l10n-id='editCreditCard' />
-        <div className='genericFormTable'>
-          <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 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 manageAutofillDataOptions'>
-            <label data-l10n-id='expirationDate' htmlFor='expirationDate' />
-            <select value={this.props.currentDetail.get('month')}
-              onChange={this.onExpMonthChange} className='expMonthSelect' >
-              {ExpMonth}
-            </select>
-            <select value={this.props.currentDetail.get('year')}
-              onChange={this.onExpYearChange} className='expYearSelect' >
-              {ExpYear}
-            </select>
+    return <Dialog onHide={this.props.onHide} testId='autofillCreditCardPanel' isClickDismiss>
+      <CommonForm onClick={this.onClick}>
+        <CommonFormTitle
+          data-test-id='manageAutofillDataTitle'
+          data-l10n-id='editCreditCard'
+        />
+        <CommonFormSection>
+          <div className={css(commonFormStyles.sectionWrapper)}>
+            <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__label)}>
+              <label data-l10n-id='name' htmlFor='nameOnCard' />
+              <label className={css(commonFormStyles.input__marginRow)} data-l10n-id='creditCardNumber' htmlFor='creditCardNumber' />
+            </div>
+            <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__input)}>
+              <div data-test-id='creditCardNameWrapper'>
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  commonFormStyles.input__box,
+                  styles.input
+                )}
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onNameChange}
+                  value={this.props.currentDetail.get('name')}
+                  ref={(nameOnCard) => { this.nameOnCard = nameOnCard }}
+                />
+              </div>
+              <div data-test-id='creditCardNumberWrapper'
+                className={css(commonFormStyles.input__marginRow)
+              }>
+                <CommonFormTextbox
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onCardChange}
+                  value={this.props.currentDetail.get('card')}
+                />
+              </div>
+            </div>
           </div>
-          <div className='formRow manageAutofillDataButtons'>
-            <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
-            <Button l10nId='save' className='primaryButton saveCreditCardButton' onClick={this.onSave}
-              disabled={this.disableSaveButton} />
+          <div className={css(
+            commonFormStyles.sectionWrapper,
+            styles.sectionWrapper__expirationDate
+          )}>
+            <div className={css(
+              commonFormStyles.inputWrapper__label,
+              commonFormStyles.input__marginRow
+            )}>
+              <label data-l10n-id='expirationDate' htmlFor='expirationDate' />
+            </div>
+            <div className={css(
+              commonFormStyles.input__marginRow,
+              styles.expirationDate__dropdowns
+            )}>
+              <CommonFormDropdown
+                value={this.props.currentDetail.get('month')}
+                onChange={this.onExpMonthChange}
+                data-test-id='expMonthSelect'>
+                {ExpMonth}
+              </CommonFormDropdown>
+              <div className={css(styles.dropdown__right)}>
+                <CommonFormDropdown
+                  value={this.props.currentDetail.get('year')}
+                  onChange={this.onExpYearChange}
+                  data-test-id='expYearSelect'>
+                  {ExpYear}
+                </CommonFormDropdown>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='cancel'
+            testId='cancelCreditCardButton'
+            onClick={this.props.onHide}
+          />
+          <Button className='primaryButton'
+            disabled={this.disableSaveButton}
+            l10nId='save'
+            testId='saveCreditCardButton'
+            onClick={this.onSave}
+          />
+        </CommonFormButtonWrapper>
+      </CommonForm>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  // Copied from textbox.js
+  input: {
+    width: '100%'
+  },
+
+  sectionWrapper__expirationDate: {
+    alignItems: 'center',
+    justifyContent: 'flex-end'
+  },
+  expirationDate__dropdowns: {
+    display: 'flex'
+  },
+  dropdown__right: {
+    marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  }
+})
+
 module.exports = AutofillCreditCardPanel
diff --git a/js/components/dialog.js b/js/components/dialog.js
index 59a5b6ed8ed..6284365cc90 100644
--- a/js/components/dialog.js
+++ b/js/components/dialog.js
@@ -6,6 +6,7 @@ const React = require('react')
 const PropTypes = require('prop-types')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const KeyCodes = require('../../app/common/constants/keyCodes')
+const cx = require('../lib/classSet')
 
 /**
  * Represents a popup dialog
@@ -31,13 +32,17 @@ class Dialog extends ImmutableComponent {
   }
 
   render () {
-    return <div className={'dialog ' + (this.props.className || '')}
-      tabIndex='-1'
+    return <div className={cx({
+      dialog: true,
+      [this.props.className]: !!this.props.className
+    })}
       data-test-id={this.props.testId}
       data-test2-id={this.props.test2Id}
+      tabIndex='-1'
       ref={(node) => { this.dialog = node }}
       onKeyDown={this.onKeyDown.bind(this)}
-      onClick={this.onClick.bind(this)}>
+      onClick={this.onClick.bind(this)}
+    >
       {this.props.children}
     </div>
   }
diff --git a/less/forms.less b/less/forms.less
index f930476b602..2004b5fd675 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -102,57 +102,6 @@ select {
   }
 }
 
-// TODO: Make this use commonDialog
-.manageAutofillDataPanel {
-  .manageAutofillData {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    border-radius: @borderRadius;
-    max-width: 450px;
-    padding: 0;
-    text-align: left;
-    width: 473px;
-    user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-y: auto;
-    max-height: 100%;
-
-    .formRow {
-      padding: 16px 30px;
-      &.manageAutofillDataTitle {
-        color: #ff5000;
-        font-size: 1.2em;
-      }
-
-      &.manageAutofillDataOptions {
-        padding: 0 30px;
-
-        > 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;
-      }
-    }
-  }
-}
-
 // TODO: Make this use commonDialog
 .checkDefaultBrowserDialog {
   .checkDefaultBrowser {
diff --git a/test/contents/autofillTest.js b/test/contents/autofillTest.js
index 1074d6d99a7..5a79446f42d 100644
--- a/test/contents/autofillTest.js
+++ b/test/contents/autofillTest.js
@@ -4,10 +4,10 @@ const Brave = require('../lib/brave')
 const {urlInput, autofillAddressPanel, autofillCreditCardPanel, clearBrowsingDataButton, securityTab} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 
-const addAddressButton = '.addAddressButton'
-const saveAddressButton = '.saveAddressButton'
-const addCreditCardButton = '.addCreditCardButton'
-const saveCreditCardButton = '.saveCreditCardButton'
+const addAddressButton = '[data-test-id="addAddressButton"]'
+const saveAddressButton = '[data-test-id="saveAddressButton"]'
+const addCreditCardButton = '[data-test-id="addCreditCardButton"]'
+const saveCreditCardButton = '[data-test-id="saveCreditCardButton"]'
 const name = 'Brave Lion'
 const organization = 'Brave'
 const streetAddress = '1161 Mission Street, #401'
@@ -44,23 +44,23 @@ describe('Autofill', function () {
         .click(addAddressButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillAddressPanel)
-        .click('#nameOnAddress')
+        .click('[data-test-id="nameOnAddress"]')
         .keys(name)
-        .click('#organization')
+        .click('[data-test-id="organization"]')
         .keys(organization)
-        .click('#streetAddress')
+        .click('[data-test-id="streetAddress"]')
         .keys(streetAddress)
-        .click('#city')
+        .click('[data-test-id="city"]')
         .keys(city)
-        .click('#state')
+        .click('[data-test-id="state"]')
         .keys(state)
-        .click('#postalCode')
+        .click('[data-test-id="postalCode"]')
         .keys(postalCode)
-        .click('#country')
+        .click('[data-test-id="country"]')
         .keys(country)
-        .click('#phone')
+        .click('[data-test-id="phone"]')
         .keys(phone)
-        .click('#email')
+        .click('[data-test-id="email"]')
         .keys(email)
         .click(saveAddressButton)
         .waitUntil(function () {
@@ -73,16 +73,16 @@ describe('Autofill', function () {
     })
     it('adds an autofill address', function * () {
       yield this.app.client
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.addressName', name)
-        .waitForTextValue('.organization', organization)
-        .waitForTextValue('.streetAddress', streetAddress)
-        .waitForTextValue('.city', city)
-        .waitForTextValue('.state', state)
-        .waitForTextValue('.postalCode', postalCode)
-        .waitForTextValue('.country', country)
-        .waitForTextValue('.phone', phone)
-        .waitForTextValue('.email', email)
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="addressName"]', name)
+        .waitForTextValue('[data-test-id="organization"]', organization)
+        .waitForTextValue('[data-test-id="streetAddress"]', streetAddress)
+        .waitForTextValue('[data-test-id="city"]', city)
+        .waitForTextValue('[data-test-id="state"]', state)
+        .waitForTextValue('[data-test-id="postalCode"]', postalCode)
+        .waitForTextValue('[data-test-id="country"]', country)
+        .waitForTextValue('[data-test-id="phone"]', phone)
+        .waitForTextValue('[data-test-id="email"]', email)
     })
     it('autofills the address', function * () {
       yield this.app.client
@@ -122,14 +122,14 @@ describe('Autofill', function () {
         // update the address
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('[title="Edit address"]')
-        .click('[title="Edit address"]')
+        .waitForVisible('[data-test-id="EditAddress"]')
+        .click('[data-test-id="EditAddress"]')
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillAddressPanel)
-        .click('#phone')
+        .click('[data-test-id="phone"]')
         .keys(Brave.keys.END)
         .keys('123')
-        .click('#email')
+        .click('[data-test-id="email"]')
         .keys(Brave.keys.END)
         .keys('mm')
         .click(saveAddressButton)
@@ -140,16 +140,16 @@ describe('Autofill', function () {
         })
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.addressName', name)
-        .waitForTextValue('.organization', organization)
-        .waitForTextValue('.streetAddress', streetAddress)
-        .waitForTextValue('.city', city)
-        .waitForTextValue('.state', state)
-        .waitForTextValue('.postalCode', postalCode)
-        .waitForTextValue('.country', country)
-        .waitForTextValue('.phone', phone + '123')
-        .waitForTextValue('.email', email + 'mm')
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="addressName"]', name)
+        .waitForTextValue('[data-test-id="organization"]', organization)
+        .waitForTextValue('[data-test-id="streetAddress"]', streetAddress)
+        .waitForTextValue('[data-test-id="city"]', city)
+        .waitForTextValue('[data-test-id="state"]', state)
+        .waitForTextValue('[data-test-id="postalCode"]', postalCode)
+        .waitForTextValue('[data-test-id="country"]', country)
+        .waitForTextValue('[data-test-id="phone"]', phone + '123')
+        .waitForTextValue('[data-test-id="email"]', email + 'mm')
         // fill out the form
         .loadUrl(this.formfill)
         .waitForVisible('<form>')
@@ -168,10 +168,10 @@ describe('Autofill', function () {
       yield this.app.client
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('[title="Delete address"]')
-        .click('[title="Delete address"]')
+        .waitForVisible('[data-test-id="DeleteAddress"]')
+        .click('[data-test-id="DeleteAddress"]')
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('[data-l10n-id=noAddressesSaved]')
+        .waitForVisible('[data-test-id="noAddressesSaved"]')
     })
   })
 
@@ -189,12 +189,12 @@ describe('Autofill', function () {
         .click(addCreditCardButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('#nameOnCard')
+        .click('[data-test-id="creditCardNameWrapper"]')
         .keys(cardName)
-        .click('#creditCardNumber')
+        .click('[data-test-id="creditCardNumberWrapper"]')
         .keys(cardNumber)
-        .selectByValue('.expMonthSelect', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
-        .selectByValue('.expYearSelect', expYear.toString())
+        .selectByValue('[data-test-id="expMonthSelect"]', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
+        .selectByValue('[data-test-id="expYearSelect"]', expYear.toString())
         .click(saveCreditCardButton)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -206,10 +206,10 @@ describe('Autofill', function () {
     })
     it('adds an autofill credit card', function * () {
       yield this.app.client
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.creditCardName', cardName)
-        .waitForTextValue('.creditCardNumber', '***' + cardNumber.slice(-4))
-        .waitForTextValue('.creditCardPExpirationDate',
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="creditCardName"]', cardName)
+        .waitForTextValue('[data-test-id="creditCardNumber"]', '***' + cardNumber.slice(-4))
+        .waitForTextValue('[data-test-id="creditCardPExpirationDate"]',
           (expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString()) + '/' + expYear.toString())
     })
     it.skip('autofills the credit card', function * () {
@@ -248,18 +248,18 @@ describe('Autofill', function () {
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
         .url(getTargetAboutUrl(this.autofillPreferences))
-        .waitForVisible('[title="Edit creditCard"]')
-        .click('[title="Edit creditCard"]')
+        .waitForVisible('[data-test-id="EditCreditCard"]')
+        .click('[data-test-id="EditCreditCard"]')
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('#nameOnCard')
+        .click('[data-test-id="creditCardNameWrapper"]')
         .keys(Brave.keys.END)
         .keys('123')
-        .click('#creditCardNumber')
+        .click('[data-test-id="creditCardNumberWrapper"]')
         .keys(Brave.keys.END)
         .keys('123')
-        .selectByValue('.expMonthSelect', (expMonth + 1).toString())
-        .selectByValue('.expYearSelect', (expYear + 1).toString())
+        .selectByValue('[data-test-id="expMonthSelect"]', (expMonth + 1).toString())
+        .selectByValue('[data-test-id="expYearSelect"]', (expYear + 1).toString())
         .click(saveCreditCardButton)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -268,10 +268,10 @@ describe('Autofill', function () {
         })
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.creditCardName', cardName + 123)
-        .waitForTextValue('.creditCardNumber', '***' + (cardNumber + 123).slice(-4))
-        .waitForTextValue('.creditCardPExpirationDate', (expMonth + 1).toString() + '/' + (expYear + 1).toString())
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="creditCardName"]', cardName + 123)
+        .waitForTextValue('[data-test-id="creditCardNumber"]', '***' + (cardNumber + 123).slice(-4))
+        .waitForTextValue('[data-test-id="creditCardPExpirationDate"]', (expMonth + 1).toString() + '/' + (expYear + 1).toString())
         .tabByIndex(0)
         .loadUrl(this.formfill)
         .waitForVisible('<form>')
@@ -290,10 +290,10 @@ describe('Autofill', function () {
       yield this.app.client
         .tabByIndex(0)
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('[title="Delete creditCard"]')
-        .click('[title="Delete creditCard"]')
+        .waitForVisible('[data-test-id="DeleteCreditCard"]')
+        .click('[data-test-id="DeleteCreditCard"]')
         .loadUrl(this.autofillPreferences)
-        .waitForVisible('[data-l10n-id=noCreditCardsSaved]')
+        .waitForVisible('[data-test-id="noCreditCardsSaved"]')
     })
   })
 
@@ -311,23 +311,23 @@ describe('Autofill', function () {
         .click(addAddressButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillAddressPanel)
-        .click('#nameOnAddress')
+        .click('[data-test-id="nameOnAddress"]')
         .keys(name)
-        .click('#organization')
+        .click('[data-test-id="organization"]')
         .keys(organization)
-        .click('#streetAddress')
+        .click('[data-test-id="streetAddress"]')
         .keys(streetAddress)
-        .click('#city')
+        .click('[data-test-id="city"]')
         .keys(city)
-        .click('#state')
+        .click('[data-test-id="state"]')
         .keys(state)
-        .click('#postalCode')
+        .click('[data-test-id="postalCode"]')
         .keys(postalCode)
-        .click('#country')
+        .click('[data-test-id="country"]')
         .keys(country)
-        .click('#phone')
+        .click('[data-test-id="phone"]')
         .keys(phone)
-        .click('#email')
+        .click('[data-test-id="email"]')
         .keys(email)
         .click(saveAddressButton)
         .waitUntil(function () {
@@ -341,12 +341,12 @@ describe('Autofill', function () {
         .click(addCreditCardButton)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForVisible(autofillCreditCardPanel)
-        .click('#nameOnCard')
+        .click('[data-test-id="creditCardNameWrapper"]')
         .keys(cardName)
-        .click('#creditCardNumber')
+        .click('[data-test-id="creditCardNumberWrapper"]')
         .keys(cardNumber)
-        .selectByValue('.expMonthSelect', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
-        .selectByValue('.expYearSelect', expYear.toString())
+        .selectByValue('[data-test-id="expMonthSelect"]', expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString())
+        .selectByValue('[data-test-id="expYearSelect"]', expYear.toString())
         .click(saveCreditCardButton)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -358,23 +358,23 @@ describe('Autofill', function () {
     })
     it('adds an autofill address', function * () {
       yield this.app.client
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.addressName', name)
-        .waitForTextValue('.organization', organization)
-        .waitForTextValue('.streetAddress', streetAddress)
-        .waitForTextValue('.city', city)
-        .waitForTextValue('.state', state)
-        .waitForTextValue('.postalCode', postalCode)
-        .waitForTextValue('.country', country)
-        .waitForTextValue('.phone', phone)
-        .waitForTextValue('.email', email)
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="addressName"]', name)
+        .waitForTextValue('[data-test-id="organization"]', organization)
+        .waitForTextValue('[data-test-id="streetAddress"]', streetAddress)
+        .waitForTextValue('[data-test-id="city"]', city)
+        .waitForTextValue('[data-test-id="state"]', state)
+        .waitForTextValue('[data-test-id="postalCode"]', postalCode)
+        .waitForTextValue('[data-test-id="country"]', country)
+        .waitForTextValue('[data-test-id="phone"]', phone)
+        .waitForTextValue('[data-test-id="email"]', email)
     })
     it('adds an autofill credit card', function * () {
       yield this.app.client
-        .waitForVisible('.autofillPage')
-        .waitForTextValue('.creditCardName', cardName)
-        .waitForTextValue('.creditCardNumber', '***' + cardNumber.slice(-4))
-        .waitForTextValue('.creditCardPExpirationDate',
+        .waitForVisible('[data-test-id="autofillPage"]')
+        .waitForTextValue('[data-test-id="creditCardName"]', cardName)
+        .waitForTextValue('[data-test-id="creditCardNumber"]', '***' + cardNumber.slice(-4))
+        .waitForTextValue('[data-test-id="creditCardPExpirationDate"]',
           (expMonth < 10 ? '0' + expMonth.toString() : expMonth.toString()) + '/' + expYear.toString())
     })
     it('autofills the address', function * () {
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index b053edf5617..b992cbc4741 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -89,8 +89,8 @@ module.exports = {
   removeButton: '[data-l10n-id="remove"]',
   paymentHistoryButton: '[data-test-id="paymentHistoryButton"]',
   paymentsWelcomePage: '[data-test-id="paymentsMessage"]',
-  autofillAddressPanel: '.autofillAddressPanel',
-  autofillCreditCardPanel: '.autofillCreditCardPanel',
+  autofillAddressPanel: '[data-test-id="autofillAddressPanel"]',
+  autofillCreditCardPanel: '[data-test-id="autofillCreditCardPanel"]',
   allowRunInsecureContentButton: '[data-test-id="allowRunInsecureContentButton"]',
   dismissAllowRunInsecureContentButton: '[data-test-id="dismissAllowRunInsecureContentButton"]',
   denyRunInsecureContentButton: '[data-test-id="denyRunInsecureContentButton"]',

From d4a5588ab6c02b0b3f309667435be98d6fc53fc6 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 20 Apr 2017 11:19:24 +0900
Subject: [PATCH 05/17] Refactor addEditBookmarkHanger.js with commonForm

Closes #6040
Addresses #7989

- Added CommonFormBookmarkHanger to commonForm.js
- Added globalStyles.spacing.bookmarkHangerMaxWidth to global.js
  Max-width of the bookmark hanger was set to 350px. Also, setting white-space:normal makes it possible for lines to be wrapped.

- Moved Dialog from addEditBookmark.js to addEditBookmarkHanger.js
- Added cancel button with this.onClose as 'fa fa-close' was removed

- Added const arrowUp and dialogHanger
- Added box-shadow to arrowUp

- Added styles.bookmarkHanger which is applied if !this.props.isModal
- Copied CommonFormSection and CommonFormTitle from commonForm.js, adding CommonFormBookmarkHangerTitle to addEditBookmarkHanger.js
  The margin-top of the title should be reduced if this.props.isModal.

- Changed backgroundColor of commonForm to #fff

- Add zindex to elements on navigation bar to let tests pass
  The value was set to higher than that of dialog, which is 3000.

- Updated test code

Also:
- Replaced divs with sections
- Removed styles from form.less
- Removed wideButton from buttons
- Added testIds to buttons (bookmarkHangerRemoveButton, bookmarkHangerCancelButton, bookmarkHangerDoneButton)
- Fixed camel cases

Auditors:

Test Plan 1:
1. Open about:preferences
2. Disable Home button
3. Click the star icon on the URL bar
4. Make sure the arrow up appears exactly under the star
5. Make sure the button appears under the icon
6. Open about:preferences
7. Enable Home button
8. Click the star icon again
9. Make sure th arrow up appears exactly under the star

Test Plan 2:
1. Open about:bookmarks
2. Click the star icon on the URL bar
3. Click "Done"
4. Click the star icon again
5. Click "Remove"
6. Make sure the bookmark is successfully removed

Test Plan 3:
1. Click "Add Folder" icon on about:bookmarks
2. Click "Cancel"
3. Make sure the dialog is closed

Test Plan 4:
1. Create a bookmark folder on about:bookmarks
2. Edit the folder via context menu on about:bookmarks
3. Click "Remove"
4. Make sure the folder is successfully removed

Test Plan 5:
1. Click the star icon on about:bookmarks
2. Click "Cancel"
3. Make sure the dialog is closed
4. Click the star icon again
5. Create a bookmark
6. Edit the bookmark via context menu
7. Click "Remove"
8. Make sure the bookmark is successfully removed
---
 .../components/bookmarks/addEditBookmark.js   |  21 +-
 .../bookmarks/addEditBookmarkHanger.js        | 215 ++++++++++++++----
 app/renderer/components/commonForm.js         |  67 ++++--
 app/renderer/components/dropdown.js           |   1 +
 app/renderer/components/styles/global.js      |   4 +-
 less/forms.less                               | 109 ---------
 less/navigationBar.less                       |   1 +
 less/variables.less                           |   1 +
 test/bookmark-components/bookmarksTest.js     |  42 ++--
 .../bookmarksToolbarTest.js                   |   6 +-
 test/lib/selectors.js                         |   2 +
 test/misc-components/syncTest.js              |  34 +--
 12 files changed, 281 insertions(+), 222 deletions(-)

diff --git a/app/renderer/components/bookmarks/addEditBookmark.js b/app/renderer/components/bookmarks/addEditBookmark.js
index 09a44f49189..575bee7c917 100644
--- a/app/renderer/components/bookmarks/addEditBookmark.js
+++ b/app/renderer/components/bookmarks/addEditBookmark.js
@@ -6,7 +6,6 @@ const React = require('react')
 
 // Components
 const ImmutableComponent = require('../immutableComponent')
-const Dialog = require('../../../../js/components/dialog')
 const AddEditBookmarkHanger = require('./addEditBookmarkHanger')
 
 // Actions
@@ -24,17 +23,15 @@ class AddEditBookmark extends ImmutableComponent {
     this.refs.bookmarkHanger.setDefaultFocus()
   }
   render () {
-    return <Dialog onHide={this.onClose} isClickDismiss>
-      <AddEditBookmarkHanger
-        ref='bookmarkHanger'
-        isModal
-        sites={this.props.sites}
-        currentDetail={this.props.currentDetail}
-        originalDetail={this.props.originalDetail}
-        destinationDetail={this.props.destinationDetail}
-        shouldShowLocation={this.props.shouldShowLocation}
-      />
-    </Dialog>
+    return <AddEditBookmarkHanger
+      ref='bookmarkHanger'
+      isModal
+      sites={this.props.sites}
+      currentDetail={this.props.currentDetail}
+      originalDetail={this.props.originalDetail}
+      destinationDetail={this.props.destinationDetail}
+      shouldShowLocation={this.props.shouldShowLocation}
+    />
   }
 }
 
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index 0cf0c4e6e08..2cab513360b 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -6,6 +6,7 @@ const React = require('react')
 
 // Components
 const ImmutableComponent = require('../immutableComponent')
+const Dialog = require('../../../../js/components/dialog')
 const Button = require('../../../../js/components/button')
 
 // Actions
@@ -23,6 +24,20 @@ const siteUtil = require('../../../../js/state/siteUtil')
 const UrlUtil = require('../../../../js/lib/urlutil')
 const getSetting = require('../../../../js/settings').getSetting
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+const {
+  CommonFormBookmarkHanger,
+  CommonFormSection,
+  CommonFormDropdown,
+  CommonFormTextbox,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper,
+  commonFormStyles
+} = require('../commonForm')
+
 class AddEditBookmarkHanger extends ImmutableComponent {
   constructor () {
     super()
@@ -170,71 +185,187 @@ class AddEditBookmarkHanger extends ImmutableComponent {
     appActions.createTabRequested({url: 'about:bookmarks'})
   }
   render () {
-    const props = this.props.isModal
-      ? {
-        className: 'fa fa-close',
-        onClick: this.onClose
-      }
+    const arrowUp = this.props.isModal
+      ? null
       : {
         className: cx({
-          arrowUp: true,
+          [css(styles.bookmarkHanger__arrowUp)]: true,
+          [css(styles.bookmarkHanger__withHomeButton)]: this.props.withHomeButton,
           withStopButton: this.props.withStopButton,
-          withHomeButton: this.props.withHomeButton,
           withoutButtons: this.props.withoutButtons
         })
       }
-    return <div className={cx({
+
+    return <Dialog className={cx({
       bookmarkDialog: this.props.isModal,
-      bookmarkHanger: !this.props.isModal
-    })}>
-      <div className='bookmarkForm' onClick={this.onClick}>
-        <div {...props} />
-
-        <div className='bookmarkFormInner'>
-          <h2 data-l10n-id={this.heading} />
-          <div className='bookmarkFormTable'>
-            <div id='bookmarkName' className='bookmarkFormRow'>
-              <label data-l10n-id='nameField' htmlFor='bookmarkName' />
-              <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onNameChange} value={this.displayBookmarkName} ref={(bookmarkName) => { this.bookmarkName = bookmarkName }} />
-            </div>
+      bookmarkHanger: !this.props.isModal,
+      [css(styles.bookmarkHanger)]: !this.props.isModal
+    })} onHide={this.onClose} isClickDismiss>
+      <CommonFormBookmarkHanger onClick={this.onClick}>
+        <div {...arrowUp} />
+        <div className={cx({
+          [css(styles.commonFormSection)]: true,
+          [css(styles.commonFormTitle)]: true
+        })} data-l10n-id={this.heading} />
+        <CommonFormSection>
+          <div className={css(styles.bookmark__sectionWrapper)}>
+            <section>
+              <label className={css(styles.bookmarkHanger__label)}
+                data-l10n-id='nameField' htmlFor='bookmarkName' />
+              <div className={css(
+                commonFormStyles.inputWrapper,
+                commonFormStyles.inputWrapper__input
+              )}>
+                <input className={css(
+                  commonStyles.formControl,
+                  commonStyles.textbox,
+                  commonStyles.textbox__outlineable,
+                  commonFormStyles.input__box,
+                )}
+                  data-test-id='bookmarkNameInput'
+                  spellCheck='false'
+                  onKeyDown={this.onKeyDown}
+                  onChange={this.onNameChange}
+                  value={this.displayBookmarkName}
+                  ref={(bookmarkName) => { this.bookmarkName = bookmarkName }}
+                />
+              </div>
+            </section>
             {
               !this.isFolder && this.props.shouldShowLocation
-              ? <div id='bookmarkLocation' className='bookmarkFormRow'>
-                <label data-l10n-id='locationField' htmlFor='bookmarkLocation' />
-                <input spellCheck='false' onKeyDown={this.onKeyDown} onChange={this.onLocationChange} value={this.props.currentDetail.get('location')} />
-              </div>
+              ? <section className={css(styles.bookmarkHanger__marginRow)}>
+                <div className={css(
+                  commonFormStyles.inputWrapper,
+                  commonFormStyles.inputWrapper__input
+                )}>
+                  <label className={css(styles.bookmarkHanger__label)}
+                    data-l10n-id='locationField' htmlFor='bookmarkLocation' />
+                  <CommonFormTextbox
+                    data-test-id='bookmarkLocationInput'
+                    spellCheck='false'
+                    onKeyDown={this.onKeyDown}
+                    onChange={this.onLocationChange}
+                    value={this.props.currentDetail.get('location')}
+                  />
+                </div>
+              </section>
               : null
             }
-            <div id='bookmarkParentFolder' className='bookmarkFormRow'>
-              <label data-l10n-id='parentFolderField' htmlFor='bookmarkParentFolder' />
-              <select value={this.props.currentDetail.get('parentFolderId')}
+            <div className={css(
+              commonFormStyles.inputWrapper,
+              commonFormStyles.inputWrapper__input,
+              styles.bookmarkHanger__marginRow,
+            )}>
+              <label className={css(styles.bookmarkHanger__label)}
+                data-l10n-id='parentFolderField' htmlFor='bookmarkParentFolder' />
+              <CommonFormDropdown
+                data-test-id='bookmarkParentFolder'
+                value={this.props.currentDetail.get('parentFolderId')}
                 onChange={this.onParentFolderChange} >
                 <option value='0' data-l10n-id='bookmarksToolbar' />
                 {
                   this.folders.map((folder) => <option value={folder.folderId}>{folder.label}</option>)
                 }
-              </select>
-            </div>
-            <div className='bookmarkButtons'>
-              {
-                this.props.originalDetail
-                ? <Button l10nId='remove' className='whiteButton wideButton' onClick={this.onRemoveBookmark} />
-                : null
-              }
-              <Button l10nId='done' disabled={!this.bookmarkNameValid} className='primaryButton wideButton' onClick={this.onSave} />
+              </CommonFormDropdown>
             </div>
           </div>
-        </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          {
+            this.props.originalDetail
+            ? <Button className='whiteButton'
+              l10nId='remove'
+              testId='bookmarkHangerRemoveButton'
+              onClick={this.onRemoveBookmark}
+            />
+            : <Button className='whiteButton'
+              l10nId='cancel'
+              testId='bookmarkHangerCancelButton'
+              onClick={this.onClose}
+            />
+          }
+          <Button className='primaryButton'
+            l10nId='done'
+            testId='bookmarkHangerDoneButton'
+            disabled={!this.bookmarkNameValid}
+            onClick={this.onSave}
+          />
+        </CommonFormButtonWrapper>
         {
           !this.props.isModal
-            ? <div className='bookmarkFormFooter'>
-              <Button l10nId='viewBookmarks' onClick={this.onViewBookmarks} />
-            </div>
+            ? <CommonFormBottomWrapper>
+              <div className={css(styles.bookmark__bottomWrapper, styles.bottomWrapper__cursor)}
+                data-test-id='viewBookmarks'
+                data-l10n-id='viewBookmarks'
+                onClick={this.onViewBookmarks} />
+            </CommonFormBottomWrapper>
             : null
         }
-      </div>
-    </div>
+      </CommonFormBookmarkHanger>
+    </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  // Copied from commonForm.js
+  commonFormSection: {
+    // PR #7985
+    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
+  },
+  commonFormTitle: {
+    color: globalStyles.color.braveOrange,
+    fontSize: '1.2em'
+  },
+
+  bookmarkHanger: {
+    justifyContent: 'flex-start',
+    background: 'none',
+
+    // TODO: refactor navigationBar.less to remove !important
+    animation: 'none !important',
+    zIndex: `${globalStyles.zindex.zindexDialogs} !important`,
+
+    ':focus': {
+      outline: 'none'
+    }
+  },
+  bookmarkHanger__arrowUp: {
+    position: 'relative',
+    left: '54px',
+
+    '::after': {
+      content: '""',
+      position: 'absolute',
+      width: 0,
+      height: 0,
+      border: `8px solid ${globalStyles.color.commonFormBackgroundColor}`,
+      boxShadow: globalStyles.shadow.bookmarkHangerArrowUpShadow,
+      transformOrigin: '0 0',
+      transform: 'rotate(135deg)'
+    }
+  },
+  bookmarkHanger__withHomeButton: {
+    left: '83px'
+  },
+  bookmarkHanger__label: {
+    display: 'block',
+    marginBottom: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
+  },
+  bookmarkHanger__marginRow: {
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  },
+
+  bookmark__sectionWrapper: {
+    display: 'flex',
+    flexFlow: 'column nowrap'
+  },
+  bookmark__bottomWrapper: {
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  bottomWrapper__cursor: {
+    cursor: 'pointer'
+  }
+})
+
 module.exports = AddEditBookmarkHanger
diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index e40cabcc1fe..b6709b4228b 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -14,7 +14,10 @@ const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
-    return <div className={css(commonStyles.flyoutDialog, styles.CommonForm)} {...this.props} />
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm
+    )} {...this.props} />
   }
 }
 
@@ -22,8 +25,18 @@ class CommonFormLarge extends ImmutableComponent {
   render () {
     return <div className={css(
       commonStyles.flyoutDialog,
-      styles.CommonForm,
-      styles.CommonFormLarge
+      styles.commonForm,
+      styles.commonFormLarge
+    )} {...this.props} />
+  }
+}
+
+class CommonFormBookmarkHanger extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormBookmarkHanger
     )} {...this.props} />
   }
 }
@@ -42,37 +55,49 @@ class CommonFormTextbox extends ImmutableComponent {
 
 class CommonFormClickable extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormClickable)} {...this.props} />
+    return <div className={css(styles.commonFormClickable)} {...this.props} />
   }
 }
 
 class CommonFormSection extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormSection)} {...this.props} />
+    return <div className={css(styles.commonFormSection)} {...this.props} />
   }
 }
 
 class CommonFormTitle extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormSection, styles.CommonFormTitle)} {...this.props} />
+    return <div className={css(
+      styles.commonFormSection,
+      styles.commonFormTitle
+    )} {...this.props} />
   }
 }
 
 class CommonFormSubSection extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormSection, styles.CommonFormSubSection)} {...this.props} />
+    return <div className={css(
+      styles.commonFormSection,
+      styles.commonFormSubSection
+    )} {...this.props} />
   }
 }
 
 class CommonFormButtonWrapper extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormSection, styles.flexJustifyEnd)} {...this.props} />
+    return <div className={css(
+      styles.commonFormSection,
+      styles.flexJustifyEnd
+    )} {...this.props} />
   }
 }
 
 class CommonFormBottomWrapper extends ImmutableComponent {
   render () {
-    return <div className={css(styles.CommonFormSection, styles.CommonFormBottomWrapper)} {...this.props} />
+    return <div className={css(
+      styles.commonFormSection,
+      styles.commonFormBottomWrapper
+    )} {...this.props} />
   }
 }
 
@@ -82,9 +107,9 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end'
   },
 
-  CommonForm: {
+  commonForm: {
     background: globalStyles.color.commonFormBackgroundColor,
-    color: '#3b3b3b',
+    color: globalStyles.color.commonTextColor,
     padding: 0,
     top: '40px',
     cursor: 'default',
@@ -98,11 +123,18 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
-  CommonFormLarge: {
+  commonFormLarge: {
     maxWidth: globalStyles.spacing.dialogLargeWidth
   },
 
-  CommonFormClickable: {
+  commonFormBookmarkHanger: {
+    maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
+
+    // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
+    whiteSpace: 'normal'
+  },
+
+  commonFormClickable: {
     color: '#5b5b5b',
 
     ':hover': {
@@ -110,21 +142,21 @@ const styles = StyleSheet.create({
     }
   },
 
-  CommonFormTitle: {
+  commonFormTitle: {
     color: globalStyles.color.braveOrange,
     fontSize: '1.2em'
   },
 
-  CommonFormSection: {
+  commonFormSection: {
     // PR #7985
     margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
   },
 
-  CommonFormSubSection: {
+  commonFormSubSection: {
     margin: `0 0 ${globalStyles.spacing.dialogInsideMargin} ${globalStyles.spacing.dialogInsideMargin}`
   },
 
-  CommonFormBottomWrapper: {
+  commonFormBottomWrapper: {
     margin: 0,
     padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
     background: globalStyles.color.commonFormBottomWrapperBackground
@@ -161,6 +193,7 @@ const commonFormStyles = StyleSheet.create({
 module.exports = {
   CommonForm,
   CommonFormLarge,
+  CommonFormBookmarkHanger,
   CommonFormDropdown,
   CommonFormTextbox,
   CommonFormClickable,
diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/dropdown.js
index d9c39a7f275..1a1619032cf 100644
--- a/app/renderer/components/dropdown.js
+++ b/app/renderer/components/dropdown.js
@@ -61,6 +61,7 @@ const styles = StyleSheet.create({
     }
   },
   commonForm: {
+    backgroundColor: '#fff',
     fontSize: globalStyles.fontSize.flyoutDialog
   },
   settings: {
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 7bfc0a2c67d..75e0a81829c 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -113,6 +113,7 @@ const globalStyles = {
     downloadsBarHeight: '50px',
     tabsToolbarHeight: '26px',
     tabPagesHeight: '7px',
+    bookmarkHangerMaxWidth: '350px',
     bookmarksToolbarHeight: '24px',
     bookmarksToolbarWithFaviconsHeight: '24px',
     bookmarksFileIconSize: '13px',
@@ -150,7 +151,8 @@ const globalStyles = {
     softBoxShadow: '0 4px 8px lightGray',
     lightBoxShadow: '0 2px 2px lightGray',
     insetShadow: 'inset -5px 0 15px rgba(0, 0, 0, 0.25)',
-    orangeButtonShadow: '0 2px 0 braveDarkOrange'
+    orangeButtonShadow: '0 2px 0 braveDarkOrange',
+    bookmarkHangerArrowUpShadow: '-2px 2px 3px 0px rgba(0, 0, 0, 0.1)'
   },
   transition: {
     transitionDuration: '100ms',
diff --git a/less/forms.less b/less/forms.less
index 2004b5fd675..be2b48147fa 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -400,115 +400,6 @@ select {
   text-overflow: ellipsis;
 }
 
-.dialog > .bookmarkDialog {
-  width: 350px;
-  position: absolute;
-  top: 30px;
-}
-
-.dialog > .bookmarkDialog > .bookmarkForm {
-  width: 350px;
-}
-
-.dialog > .bookmarkDialog .fa-close {
-  color: @buttonColor;
-  font-size: 16px;
-  float: right;
-  margin-top: 7px;
-  margin-right: 10px;
-  &:hover {
-    color: #000;
-  }
-}
-
-.bookmarkForm {
-  .genericForm;
-  background: linear-gradient(#FFFFFF, #DEDEDE);
-  margin-top: 10px;
-  padding: 0;
-  min-width: 310px;
-
-  .arrowUp {
-    width: 0;
-    height: 0;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid #FFFFFF;
-    position: relative;
-    bottom: 10px;
-    left: 37px;
-
-    &.withHomeButton {
-      left: 61px;
-    }
-  }
-
-  .bookmarkFormRow {
-    margin-bottom: 10px;
-  }
-
-  .bookmarkButtons {
-    display: flex;
-    justify-content: flex-end;
-    margin: 20px 0 10px;
-  }
-
-  .bookmarkFormInner {
-    padding: 10px 30px;
-
-    h2 {
-      user-select: none;
-      cursor: default;
-        min-width: 250px;
-    }
-  }
-
-  label {
-    color: @darkGray;
-    margin-left: 5px;
-  }
-
-  h2 {
-    color: @braveOrange;
-    font-weight: normal;
-    font-size: 16px;
-  }
-
-  input,
-  select {
-    display: block;
-    width: 100%;
-    max-width: 250px;
-    height: 25px;
-    border-radius: 5px;
-    padding: 0 5px;
-    margin: 5px 0 5px 0;
-    font-size: 0.9em;
-    border: solid 1px #ececec;
-    background: white;
-    color: #444444;
-    outline: none;
-  }
-
-  input {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  }
-
-  select {
-    box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.8);
-  }
-}
-
-.bookmarkFormFooter {
-  background: @black10;
-  padding: 10px 30px;
-
-  span {
-    font-size: 12px;
-    text-align: left;
-  }
-}
-
 .genericForm {
   .flyoutDialog;
   display: table;
diff --git a/less/navigationBar.less b/less/navigationBar.less
index fdaf995e285..26dd7ce8c86 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -710,6 +710,7 @@
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
+      z-index: @zindexNavigationBarElements;
     }
 
     .urlbarForm {
diff --git a/less/variables.less b/less/variables.less
index fff60dc5173..7e0074c006f 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -147,6 +147,7 @@
 @zindexDialogs: 3000;
 @zindexPopupWindow: 3000;
 @zindexForms: 3000;
+@zindexNavigationBarElements: 3100;
 @zindexSuggestionText: 3100;
 
 @zindexWindowFullScreen: 4000;
diff --git a/test/bookmark-components/bookmarksTest.js b/test/bookmark-components/bookmarksTest.js
index 4a290392a12..79f2a2f694c 100644
--- a/test/bookmark-components/bookmarksTest.js
+++ b/test/bookmark-components/bookmarksTest.js
@@ -2,7 +2,7 @@
 
 const Brave = require('../lib/brave')
 const Immutable = require('immutable')
-const {urlInput, navigator, navigatorBookmarked, navigatorNotBookmarked, doneButton, removeButton} = require('../lib/selectors')
+const {urlInput, navigator, navigatorBookmarked, navigatorNotBookmarked, doneButton, removeButton, bookmarkNameInput, bookmarkLocationInput} = require('../lib/selectors')
 const siteTags = require('../../js/constants/siteTags')
 
 describe('bookmark tests', function () {
@@ -38,14 +38,14 @@ describe('bookmark tests', function () {
 
       it('fills in the url field', function * () {
         yield this.app.client
-          .waitForExist('#bookmarkLocation input')
+          .waitForExist(bookmarkLocationInput)
           .waitForBookmarkDetail(this.page1Url, 'Page 1')
       })
       it('add custom title', function * () {
         yield this.app.client
-          .waitForExist('#bookmarkName input')
+          .waitForExist(bookmarkNameInput)
           .waitForBookmarkDetail(this.page1Url, 'Page 1')
-          .setValue('#bookmarkName input', 'Custom Page 1')
+          .setValue(bookmarkNameInput, 'Custom Page 1')
           .waitForEnabled(doneButton)
           .click(doneButton)
       })
@@ -55,7 +55,7 @@ describe('bookmark tests', function () {
           .waitForVisible(navigatorBookmarked)
           .click(navigatorBookmarked)
           .waitForVisible(doneButton)
-          .waitForInputText('#bookmarkName input', 'Custom Page 1')
+          .waitForInputText(bookmarkNameInput, 'Custom Page 1')
           .click(doneButton)
       })
       it('can delete custom title', function * () {
@@ -65,7 +65,7 @@ describe('bookmark tests', function () {
           .click(navigatorBookmarked)
           .waitForVisible(doneButton)
           .keys(Brave.keys.BACKSPACE)
-          .waitForInputText('#bookmarkName input', '')
+          .waitForInputText(bookmarkNameInput, '')
       })
       it('display punycode custom title and location', function * () {
         yield this.app.client
@@ -73,14 +73,14 @@ describe('bookmark tests', function () {
           .waitForVisible(navigatorBookmarked)
           .click(navigatorBookmarked)
           .waitForVisible(doneButton)
-          .setValue('#bookmarkName input', 'https://www.brave.com')
+          .setValue(bookmarkNameInput, 'https://www.brave.com')
           .keys(Brave.keys.END)
           .keys('а')
-          .waitForInputText('#bookmarkName input', 'https://www.brave.xn--com-8cd/')
-          .setValue('#bookmarkLocation input', 'https://www.brave.com')
+          .waitForInputText(bookmarkNameInput, 'https://www.brave.xn--com-8cd/')
+          .setValue(bookmarkLocationInput, 'https://www.brave.com')
           .keys(Brave.keys.END)
           .keys('а')
-          .waitForInputText('#bookmarkLocation input', 'https://www.brave.xn--com-8cd/')
+          .waitForInputText(bookmarkLocationInput, 'https://www.brave.xn--com-8cd/')
           .click(removeButton)
       })
       it('custom title and location can be backspaced', function * () {
@@ -89,18 +89,18 @@ describe('bookmark tests', function () {
           .waitForVisible(navigatorBookmarked)
           .click(navigatorBookmarked)
           .waitForVisible(doneButton)
-          .setValue('#bookmarkName input', 'https://www.brave.com/1')
+          .setValue(bookmarkNameInput, 'https://www.brave.com/1')
           .keys(Brave.keys.END)
           .keys(Brave.keys.BACKSPACE)
           .keys(Brave.keys.BACKSPACE)
           .keys(Brave.keys.BACKSPACE)
-          .waitForInputText('#bookmarkName input', 'https://www.brave.co')
-          .setValue('#bookmarkLocation input', 'https://www.brave.com/1')
+          .waitForInputText(bookmarkNameInput, 'https://www.brave.co')
+          .setValue(bookmarkLocationInput, 'https://www.brave.com/1')
           .keys(Brave.keys.END)
           .keys(Brave.keys.BACKSPACE)
           .keys(Brave.keys.BACKSPACE)
           .keys(Brave.keys.BACKSPACE)
-          .waitForInputText('#bookmarkLocation input', 'https://www.brave.co')
+          .waitForInputText(bookmarkLocationInput, 'https://www.brave.co')
           .click(removeButton)
       })
     })
@@ -126,15 +126,15 @@ describe('bookmark tests', function () {
 
       it('fills in the title field', function * () {
         yield this.app.client
-          .waitForExist('#bookmarkName input')
+          .waitForExist(bookmarkNameInput)
           .waitForBookmarkDetail(this.page1Url, 'Page 1')
           .waitForEnabled(doneButton)
-          .waitForInputText('#bookmarkName input', 'Page 1')
+          .waitForInputText(bookmarkNameInput, 'Page 1')
       })
 
       it('does not show the url field', function * () {
         yield this.app.client
-          .waitForElementCount('#bookmarkLocation input', 0)
+          .waitForElementCount(bookmarkLocationInput, 0)
       })
 
       describe('saved with a title', function () {
@@ -189,13 +189,13 @@ describe('bookmark tests', function () {
 
       it('leaves the title field blank', function * () {
         yield this.app.client
-          .waitForExist('#bookmarkName input')
-          .waitForInputText('#bookmarkName input', '')
+          .waitForExist(bookmarkNameInput)
+          .waitForInputText(bookmarkNameInput, '')
       })
 
       it('does not show the url field', function * () {
         yield this.app.client
-          .waitForElementCount('#bookmarkLocation input', 0)
+          .waitForElementCount(bookmarkLocationInput, 0)
       })
 
       describe('saved without a title', function () {
@@ -266,7 +266,7 @@ describe('bookmark tests', function () {
           .waitForVisible(navigatorBookmarked)
           .click(navigatorBookmarked)
           .waitForVisible(doneButton)
-          .waitForInputText('#bookmarkLocation input', page1Url)
+          .waitForInputText(bookmarkLocationInput, page1Url)
       })
     })
   })
diff --git a/test/bookmark-components/bookmarksToolbarTest.js b/test/bookmark-components/bookmarksToolbarTest.js
index db7af8a552a..3fdd0971ed6 100644
--- a/test/bookmark-components/bookmarksToolbarTest.js
+++ b/test/bookmark-components/bookmarksToolbarTest.js
@@ -1,7 +1,7 @@
 /* global describe, it, beforeEach */
 
 const Brave = require('../lib/brave')
-const {urlInput, bookmarksToolbar, navigator, navigatorNotBookmarked, doneButton} = require('../lib/selectors')
+const {urlInput, bookmarksToolbar, navigator, navigatorNotBookmarked, doneButton, bookmarkNameInput} = require('../lib/selectors')
 const settings = require('../../js/constants/settings')
 const siteTags = require('../../js/constants/siteTags')
 
@@ -111,7 +111,7 @@ describe('bookmarksToolbar', function () {
         .waitForVisible(doneButton)
         .waitForBookmarkDetail(this.page1Url, 'Page 1')
         .waitForEnabled(doneButton)
-        .selectByValue('#bookmarkParentFolder select', folderId2)
+        .selectByValue('[data-test-id="bookmarkParentFolder"]', folderId2)
         .click(doneButton)
         .click('[data-test-id="bookmarkToolbarButton"][title=demo1]')
         .moveToObject('[data-test-id="bookmarkToolbarButton"][title=demo2]')
@@ -144,7 +144,7 @@ describe('bookmarksToolbar', function () {
         .click(navigatorNotBookmarked)
         .waitForVisible(doneButton)
         .waitForBookmarkDetail(this.page1Url, 'Page 1')
-        .setInputText('#bookmarkName input', 'test1')
+        .setInputText(bookmarkNameInput, 'test1')
         .waitForBookmarkDetail(this.page1Url, 'test1')
         .waitForEnabled(doneButton)
         .click(doneButton)
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index b992cbc4741..89387429081 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -22,6 +22,8 @@ module.exports = {
   navigatorBookmarked: '#navigator .removeBookmarkButton',
   navigatorNotBookmarked: '#navigator .bookmarkButton',
   bookmarksToolbar: '[data-test-id="bookmarksToolbar"]',
+  bookmarkNameInput: '[data-test-id="bookmarkNameInput"]',
+  bookmarkLocationInput: '[data-test-id="bookmarkLocationInput"]',
   notificationBar: '[data-test-id="notificationBar"]',
   errorContent: '.errorContent',
   errorUrl: '.errorUrl',
diff --git a/test/misc-components/syncTest.js b/test/misc-components/syncTest.js
index 49fc35f813e..03a4e0db920 100644
--- a/test/misc-components/syncTest.js
+++ b/test/misc-components/syncTest.js
@@ -6,7 +6,7 @@ const {newTabMode} = require('../../app/common/constants/settingsEnums')
 const siteTags = require('../../js/constants/siteTags')
 const Brave = require('../lib/brave')
 const Immutable = require('immutable')
-const {adsBlockedControl, allowAllCookiesOption, bookmarksToolbar, braveMenu, braveryPanel, cookieControl, doneButton, fpSwitch, httpsEverywhereSwitch, navigatorBookmarked, navigatorNotBookmarked, noScriptSwitch, urlInput, removeButton, safeBrowsingSwitch, showAdsOption, syncTab, syncSwitch} = require('../lib/selectors')
+const {adsBlockedControl, allowAllCookiesOption, bookmarksToolbar, braveMenu, braveryPanel, cookieControl, doneButton, fpSwitch, httpsEverywhereSwitch, navigatorBookmarked, navigatorNotBookmarked, noScriptSwitch, urlInput, removeButton, safeBrowsingSwitch, showAdsOption, syncTab, syncSwitch, bookmarkNameInput} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 const aboutBookmarksUrl = getTargetAboutUrl('about:bookmarks')
 const aboutHistoryUrl = getTargetAboutUrl('about:history')
@@ -96,14 +96,14 @@ function * bookmarkUrl (url, title, folderId) {
     .waitForVisible(navigatorNotBookmarked)
     .click(navigatorNotBookmarked)
     .waitForVisible(doneButton)
-    .waitForVisible('#bookmarkName input')
-    .setInputText('#bookmarkName input', title)
+    .waitForVisible(bookmarkNameInput)
+    .setInputText(bookmarkNameInput, title)
     .waitForBookmarkDetail(url, title)
   if (folderId) {
-    const folderOption = `#bookmarkParentFolder select option[value="${folderId}"`
+    const folderOption = `[data-test-id="bookmarkParentFolder"] option[value="${folderId}"`
     yield Brave.app.client
-      .waitForVisible('#bookmarkParentFolder select')
-      .click('#bookmarkParentFolder select')
+      .waitForVisible('[data-test-id="bookmarkParentFolder"]')
+      .click('[data-test-id="bookmarkParentFolder"]')
       .waitForVisible(folderOption)
       .click(folderOption)
   }
@@ -119,8 +119,8 @@ function * addBookmarkFolder (title) {
     .waitForVisible('.addBookmarkFolder')
     .click('.addBookmarkFolder')
     .windowParentByUrl(aboutBookmarksUrl)
-    .waitForExist('#bookmarkName input')
-    .setInputText('#bookmarkName input', title)
+    .waitForExist(bookmarkNameInput)
+    .setInputText(bookmarkNameInput, title)
     .waitForEnabled(doneButton)
     .click(doneButton)
 }
@@ -349,8 +349,8 @@ describe('Syncing bookmarks', function () {
       .waitForVisible(navigatorBookmarked)
       .click(navigatorBookmarked)
       .waitForVisible(doneButton)
-      .waitForExist('#bookmarkName input')
-      .setInputText('#bookmarkName input', this.page2TitleUpdated)
+      .waitForExist(bookmarkNameInput)
+      .setInputText(bookmarkNameInput, this.page2TitleUpdated)
       .waitForBookmarkDetail(this.page2Url, this.page2TitleUpdated)
       .waitForEnabled(doneButton)
       .click(doneButton)
@@ -377,13 +377,13 @@ describe('Syncing bookmarks', function () {
       .tabByIndex(0)
       .waitForUrl(this.folder1Page1Url)
     yield bookmarkUrl(this.folder1Page2Url, this.folder1Page2Title)
-    const folder1Option = `#bookmarkParentFolder select option[value="${folder1Id}"`
+    const folder1Option = `[data-test-id="bookmarkParentFolder"] option[value="${folder1Id}"`
     yield Brave.app.client
       .activateURLMode()
       .waitForVisible(navigatorBookmarked)
       .click(navigatorBookmarked)
       .waitForVisible(doneButton)
-      .click('#bookmarkParentFolder select')
+      .click('[data-test-id="bookmarkParentFolder"]')
       .waitForVisible(folder1Option)
       .click(folder1Option)
       .click(doneButton)
@@ -516,8 +516,8 @@ describe('Syncing bookmarks from an existing profile', function () {
       .waitForVisible(navigatorBookmarked)
       .click(navigatorBookmarked)
       .waitForVisible(doneButton)
-      .waitForVisible('#bookmarkName input')
-      .setInputText('#bookmarkName input', this.page2TitleUpdated)
+      .waitForVisible(bookmarkNameInput)
+      .setInputText(bookmarkNameInput, this.page2TitleUpdated)
       .waitForBookmarkDetail(this.page2Url, this.page2TitleUpdated)
       .waitForEnabled(doneButton)
       .click(doneButton)
@@ -532,15 +532,15 @@ describe('Syncing bookmarks from an existing profile', function () {
       .tabByIndex(0)
       .waitForUrl(this.folder1Page1Url)
     yield bookmarkUrl(this.folder1Page2Url, this.folder1Page2Title)
-    const folder1Option = `#bookmarkParentFolder select option[value="${folder1Id}"`
+    const folder1Option = `[data-test-id="bookmarkParentFolder"] option[value="${folder1Id}"`
     yield Brave.app.client
       .waitForBrowserWindow()
       .activateURLMode()
       .waitForVisible(navigatorBookmarked)
       .click(navigatorBookmarked)
       .waitForVisible(doneButton)
-      .waitForVisible('#bookmarkParentFolder select')
-      .click('#bookmarkParentFolder select')
+      .waitForVisible('[data-test-id="bookmarkParentFolder"]')
+      .click('[data-test-id="bookmarkParentFolder"]')
       .waitForVisible(folder1Option)
       .click(folder1Option)
       .waitForEnabled(doneButton)

From e8a9c6c3f12540b36356ba80a41b64c67d94535f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 20 Apr 2017 11:33:55 +0900
Subject: [PATCH 06/17] Refactor checkDefaultBrowserDialog.js with commonForm

Closes #8137
Addresses #7989

- Added CommonFormMedium
- Removed styles under checkDefaultBrowserDialog in forms.less

Auditors:

Test Plan:
1. Change your default browser to other than Brave
2. Start Brave
---
 .../components/checkDefaultBrowserDialog.js   | 78 ++++++++++++++++---
 app/renderer/components/commonForm.js         | 17 ++++
 app/renderer/components/styles/global.js      |  1 +
 less/forms.less                               | 59 --------------
 4 files changed, 85 insertions(+), 70 deletions(-)

diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
index 911d1cb9563..9cb9d5efc02 100644
--- a/app/renderer/components/checkDefaultBrowserDialog.js
+++ b/app/renderer/components/checkDefaultBrowserDialog.js
@@ -3,14 +3,31 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+
+// Components
 const ImmutableComponent = require('./immutableComponent')
 const Dialog = require('../../../js/components/dialog')
 const Button = require('../../../js/components/button')
 const SwitchControl = require('../../../js/components/switchControl')
+
+// Actions
 const appActions = require('../../../js/actions/appActions')
 const windowActions = require('../../../js/actions/windowActions')
+
+// Constants
 const settings = require('../../../js/constants/settings')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('./styles/global')
+
+const braveAbout = require('../../extensions/brave/img/braveAbout.png')
+
+const {
+  CommonFormMedium,
+  CommonFormSection,
+  CommonFormButtonWrapper
+} = require('./commonForm')
+
 class CheckDefaultBrowserDialog extends ImmutableComponent {
   constructor () {
     super()
@@ -35,19 +52,58 @@ class CheckDefaultBrowserDialog extends ImmutableComponent {
     this.props.onHide()
   }
   render () {
-    return <Dialog className='checkDefaultBrowserDialog' >
-      <div className='checkDefaultBrowser' onClick={(e) => e.stopPropagation()}>
-        <div className='braveIcon' />
-        <div className='makeBraveDefault' data-l10n-id='makeBraveDefault' />
-        <SwitchControl className='checkDefaultOnStartup' rightl10nId='checkDefaultOnStartup'
-          checkedOn={this.props.checkDefaultOnStartup} onClick={this.onCheckDefaultOnStartup} />
-        <div className='checkDefaultBrowserButtons'>
-          <Button l10nId='notNow' className='whiteButton' onClick={this.onNotNow} />
-          <Button l10nId='useBrave' className='primaryButton' onClick={this.onUseBrave} />
-        </div>
-      </div>
+    return <Dialog className='checkDefaultBrowserDialog'>
+      <CommonFormMedium onClick={(e) => e.stopPropagation()}>
+        <CommonFormSection>
+          <div className={css(styles.flexAlignCenter)}>
+            <div className={css(styles.section__braveIcon)} />
+            <div>
+              <div className={css(styles.section__title)} data-l10n-id='makeBraveDefault' />
+              <SwitchControl className={css(styles.section__switchControl)}
+                rightl10nId='checkDefaultOnStartup'
+                checkedOn={this.props.checkDefaultOnStartup}
+                onClick={this.onCheckDefaultOnStartup} />
+            </div>
+          </div>
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='notNow'
+            testId='notNowButton'
+            onClick={this.onNotNow}
+          />
+          <Button className='primaryButton'
+            l10nId='useBrave'
+            testId='useBraveButton'
+            onClick={this.onUseBrave}
+          />
+        </CommonFormButtonWrapper>
+      </CommonFormMedium>
     </Dialog>
   }
 }
 
+const styles = StyleSheet.create({
+  flexAlignCenter: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+
+  section__braveIcon: {
+    backgroundImage: `image-set(url(${braveAbout}) 2x)`,
+    backgroundRepeat: 'no-repeat',
+    height: '64px',
+    width: '64px',
+    minWidth: '64px',
+    marginRight: globalStyles.spacing.dialogInsideMargin
+  },
+  section__title: {
+    fontWeight: 'bold'
+  },
+  section__switchControl: {
+    paddingLeft: 0,
+    marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 2)`
+  }
+})
+
 module.exports = CheckDefaultBrowserDialog
diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index b6709b4228b..ed5b8c54fb6 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -21,6 +21,16 @@ class CommonForm extends ImmutableComponent {
   }
 }
 
+class CommonFormMedium extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormMedium,
+    )} {...this.props} />
+  }
+}
+
 class CommonFormLarge extends ImmutableComponent {
   render () {
     return <div className={css(
@@ -123,6 +133,10 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
+  commonFormMedium: {
+    maxWidth: globalStyles.spacing.dialogMediumWidth
+  },
+
   commonFormLarge: {
     maxWidth: globalStyles.spacing.dialogLargeWidth
   },
@@ -168,6 +182,7 @@ const commonFormStyles = StyleSheet.create({
     display: 'flex',
     justifyContent: 'space-between'
   },
+
   inputWrapper: {
     display: 'flex',
     flexFlow: 'column',
@@ -179,6 +194,7 @@ const commonFormStyles = StyleSheet.create({
   inputWrapper__input: {
     flexGrow: 1
   },
+
   input__bottomRow: {
     marginTop: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
   },
@@ -192,6 +208,7 @@ const commonFormStyles = StyleSheet.create({
 
 module.exports = {
   CommonForm,
+  CommonFormMedium,
   CommonFormLarge,
   CommonFormBookmarkHanger,
   CommonFormDropdown,
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 75e0a81829c..011fcec56fa 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -134,6 +134,7 @@ const globalStyles = {
     closeIconSize: '13px',
     narrowIconSize: '12px',
     dialogWidth: '422px',
+    dialogMediumWidth: '500px',
     dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
     dialogInsideMargin: '18px',
diff --git a/less/forms.less b/less/forms.less
index be2b48147fa..1865ba462d0 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -102,65 +102,6 @@ select {
   }
 }
 
-// TODO: Make this use commonDialog
-.checkDefaultBrowserDialog {
-  .checkDefaultBrowser {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    border-radius: @borderRadius;
-    max-width: 422px;
-    padding: 1;
-    text-align: left;
-    width: 614px;
-    height: 120px;
-    user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    max-height: 100%;
-
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
-      }
-    }
-
-    .checkDefaultBrowserButtons {
-      text-align: right;
-      padding: 16px 10px;
-      position: relative;
-      top: -30px;
-    }
-
-    .makeBraveDefault {
-      font-weight: bold;
-      display: inline-block;
-      position: relative;
-      top: -35px;
-      margin-left: 15px;
-    }
-
-    .braveIcon {
-      background-image: -webkit-image-set(url(../app/extensions/brave/img/braveAbout.png) 2x);
-      background-repeat: no-repeat;
-      height: 64px;
-      width: 64px;
-      display: inline-block;
-      position: relative;
-      top: 10px;
-    }
-
-    .checkDefaultOnStartup {
-      left: 75px;
-      position: relative;
-      top: -25px;
-    }
-  }
-}
-
-
 .braveryPanelContainer {
   .braveryPanel {
     .flyoutDialog;

From f578f2355ae3567369461abf987d1e548066bdf9 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Fri, 21 Apr 2017 17:52:05 +0900
Subject: [PATCH 07/17] Remove .genericForm and .commonDialog from forms.less

Closes #8010
Addresses #7989

Auditors:

Test Plan: n/a
---
 less/forms.less | 83 -------------------------------------------------
 1 file changed, 83 deletions(-)

diff --git a/less/forms.less b/less/forms.less
index 1865ba462d0..9900d7e2a35 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -63,45 +63,6 @@ select {
   }
 }
 
-.commonDialog {
-  .commonForm {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    max-width: 422px;
-    padding: 0;
-    text-align: left;
-    max-width: 600px;
-    user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-y: auto;
-    max-height: 100%;
-
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
-      }
-    }
-
-    .formSection {
-      padding: 16px 30px;
-
-      &.commonFormTitle {
-        color: #ff5000;
-        font-size: 1.2em;
-      }
-      &.commonFormButtons {
-        text-align: center;
-      }
-      &.commonFormBottom {
-        background-color: #dddee0;
-        text-align: center;
-      }
-    }
-  }
-}
-
 .braveryPanelContainer {
   .braveryPanel {
     .flyoutDialog;
@@ -341,50 +302,6 @@ select {
   text-overflow: ellipsis;
 }
 
-.genericForm {
-  .flyoutDialog;
-  display: table;
-  text-align: left;
-  width: auto;
-
-  .genericFormSubtitle {
-    margin-bottom: 6px;
-  }
-
-  h2 {
-    font-size: 14px;
-    margin-bottom: 8px;
-  }
-
-  .genericFormTable {
-    display: flex;
-    flex-flow: column nowrap;
-    min-width: 350px;
-
-    > div {
-      &:not(.formHeader) {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        margin: 2px;
-      }
-
-      > label {
-        padding-right: 4px;
-        width: 20%;
-        text-align: right;
-      }
-
-      > input, select {
-        padding: 2px;
-        margin: 0;
-        width: 80%;
-      }
-
-    }
-  }
-}
-
 #navigator {
   .urlBarSuggestions {
     .flyoutDialog;

From bbf14573649b9cda879844b7ed24ad6b87293e0b Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 22 Apr 2017 14:16:57 +0900
Subject: [PATCH 08/17] Refactor clearBrowsingDataPanel.js with commonForm

Closes #8192
Addresses #7989

- Added CommonFormSmall to commonForm.js
- Added data-test-id and testIds
- Removed clearBrowsingDataPanel from forms.less
- Updated test code

Auditors:

Test Plan:
1. Open Clear browsing data panel from the menu
2. Test the cancel button works
3. Reopen the panel
4. Test the clear button works
---
 app/renderer/components/commonForm.js         | 15 ++++
 app/renderer/components/styles/global.js      |  1 +
 js/about/history.js                           |  6 +-
 js/about/preferences.js                       |  6 +-
 js/components/clearBrowsingDataPanel.js       | 84 ++++++++++++++-----
 js/components/loginRequired.js                |  6 +-
 js/components/switchControl.js                |  1 +
 less/forms.less                               | 45 ----------
 .../clearBrowsingDataPanelTest.js             | 23 +++--
 test/contents/autofillTest.js                 | 18 ++--
 test/lib/selectors.js                         |  6 +-
 11 files changed, 117 insertions(+), 94 deletions(-)

diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/commonForm.js
index ed5b8c54fb6..6ad0a676ffc 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/commonForm.js
@@ -31,6 +31,16 @@ class CommonFormMedium extends ImmutableComponent {
   }
 }
 
+class CommonFormSmall extends ImmutableComponent {
+  render () {
+    return <div className={css(
+      commonStyles.flyoutDialog,
+      styles.commonForm,
+      styles.commonFormSmall
+    )} {...this.props} />
+  }
+}
+
 class CommonFormLarge extends ImmutableComponent {
   render () {
     return <div className={css(
@@ -133,6 +143,10 @@ const styles = StyleSheet.create({
     // maxHeight: '100%'
   },
 
+  commonFormSmall: {
+    maxWidth: globalStyles.spacing.dialogSmallWidth
+  },
+
   commonFormMedium: {
     maxWidth: globalStyles.spacing.dialogMediumWidth
   },
@@ -208,6 +222,7 @@ const commonFormStyles = StyleSheet.create({
 
 module.exports = {
   CommonForm,
+  CommonFormSmall,
   CommonFormMedium,
   CommonFormLarge,
   CommonFormBookmarkHanger,
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 011fcec56fa..60ff144b3e3 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -134,6 +134,7 @@ const globalStyles = {
     closeIconSize: '13px',
     narrowIconSize: '12px',
     dialogWidth: '422px',
+    dialogSmallWidth: '350px',
     dialogMediumWidth: '500px',
     dialogLargeWidth: '600px',
     dialogTopOffset: '30px',
diff --git a/js/about/history.js b/js/about/history.js
index 6b9ac7e5a8c..34a145d8e22 100644
--- a/js/about/history.js
+++ b/js/about/history.js
@@ -216,7 +216,11 @@ class AboutHistory extends React.Component {
               : <span className='fa fa-search searchInputPlaceholder' />
             }
           </div>
-          <Button l10nId='clearBrowsingDataNow' className='primaryButton clearBrowsingDataButton' onClick={this.clearBrowsingDataNow} />
+          <Button className='primaryButton'
+            l10nId='clearBrowsingDataNow'
+            testId='clearBrowsingDataButton'
+            onClick={this.clearBrowsingDataNow}
+          />
         </div>
       </div>
 
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 4f4bb67aab8..424bcefe9ae 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -590,7 +590,11 @@ class SecurityTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='autocompleteData' prefKey={settings.SHUTDOWN_CLEAR_AUTOCOMPLETE_DATA} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='autofillData' prefKey={settings.SHUTDOWN_CLEAR_AUTOFILL_DATA} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='savedSiteSettings' prefKey={settings.SHUTDOWN_CLEAR_SITE_SETTINGS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
-        <Button l10nId='clearBrowsingDataNow' className='primaryButton clearBrowsingDataButton' onClick={this.clearBrowsingDataNow} />
+        <Button className='primaryButton'
+          l10nId='clearBrowsingDataNow'
+          testId='clearBrowsingDataButton'
+          onClick={this.clearBrowsingDataNow}
+        />
       </SettingsList>
       <DefaultSectionTitle data-l10n-id='passwordsAndForms' />
       <SettingsList>
diff --git a/js/components/clearBrowsingDataPanel.js b/js/components/clearBrowsingDataPanel.js
index 9ed61871053..4bc48458ccd 100644
--- a/js/components/clearBrowsingDataPanel.js
+++ b/js/components/clearBrowsingDataPanel.js
@@ -11,6 +11,14 @@ const appActions = require('../actions/appActions')
 const ipc = require('electron').ipcRenderer
 const messages = require('../constants/messages')
 
+const {
+  CommonFormSmall,
+  CommonFormSection,
+  CommonFormTitle,
+  CommonFormButtonWrapper,
+  CommonFormBottomWrapper
+} = require('../../app/renderer/components/commonForm')
+
 class ClearBrowsingDataPanel extends React.Component {
   constructor (props) {
     super()
@@ -42,27 +50,63 @@ class ClearBrowsingDataPanel extends React.Component {
     }
   }
   render () {
-    return <Dialog onHide={this.props.onHide} className='clearBrowsingDataPanel' isClickDismiss>
-      <div className='clearBrowsingData' onClick={(e) => e.stopPropagation()}>
-        <div className='formSection clearBrowsingDataTitle' data-l10n-id='clearBrowsingData' />
-        <div className='formSection clearBrowsingDataOptions'>
-          <SwitchControl className='browserHistorySwitch' rightl10nId='browserHistory' checkedOn={this.state.clearBrowsingDataDetail.get('browserHistory')} onClick={this.onToggleBrowserHistory} />
-          <SwitchControl rightl10nId='downloadHistory' checkedOn={this.state.clearBrowsingDataDetail.get('downloadHistory')} onClick={this.onToggleDownloadHistory} />
-          <SwitchControl rightl10nId='cachedImagesAndFiles' checkedOn={this.state.clearBrowsingDataDetail.get('cachedImagesAndFiles')} onClick={this.onToggleCachedImagesAndFiles} />
-          <SwitchControl rightl10nId='savedPasswords' checkedOn={this.state.clearBrowsingDataDetail.get('savedPasswords')} onClick={this.onToggleSavedPasswords} />
-          <SwitchControl rightl10nId='allSiteCookies' checkedOn={this.state.clearBrowsingDataDetail.get('allSiteCookies')} onClick={this.onToggleAllSiteCookies} />
-          <SwitchControl className='autocompleteDataSwitch' rightl10nId='autocompleteData' checkedOn={this.state.clearBrowsingDataDetail.get('autocompleteData')} onClick={this.onToggleAutocompleteData} />
-          <SwitchControl className='autofillDataSwitch' rightl10nId='autofillData' checkedOn={this.state.clearBrowsingDataDetail.get('autofillData')} onClick={this.onToggleAutofillData} />
-          <SwitchControl className='siteSettingsSwitch' rightl10nId='savedSiteSettings' checkedOn={this.state.clearBrowsingDataDetail.get('savedSiteSettings')} onClick={this.onToggleSavedSiteSettings} />
-        </div>
-        <div className='formSection clearBrowsingDataButtons'>
-          <Button l10nId='cancel' className='whiteButton' onClick={this.props.onHide} />
-          <Button l10nId='clear' className='primaryButton clearDataButton' onClick={this.onClear} />
-        </div>
-        <div className='formSection clearBrowsingDataWarning'>
+    return <Dialog onHide={this.props.onHide} testId='clearBrowsingDataPanel' isClickDismiss>
+      <CommonFormSmall onClick={(e) => e.stopPropagation()}>
+        <CommonFormTitle data-l10n-id='clearBrowsingData' />
+        <CommonFormSection>
+          <SwitchControl
+            rightl10nId='browserHistory'
+            testId='browserHistorySwitch'
+            checkedOn={this.state.clearBrowsingDataDetail.get('browserHistory')}
+            onClick={this.onToggleBrowserHistory} />
+          <SwitchControl
+            rightl10nId='downloadHistory'
+            checkedOn={this.state.clearBrowsingDataDetail.get('downloadHistory')}
+            onClick={this.onToggleDownloadHistory} />
+          <SwitchControl
+            rightl10nId='cachedImagesAndFiles'
+            checkedOn={this.state.clearBrowsingDataDetail.get('cachedImagesAndFiles')}
+            onClick={this.onToggleCachedImagesAndFiles} />
+          <SwitchControl
+            rightl10nId='savedPasswords'
+            checkedOn={this.state.clearBrowsingDataDetail.get('savedPasswords')}
+            onClick={this.onToggleSavedPasswords} />
+          <SwitchControl
+            rightl10nId='allSiteCookies'
+            checkedOn={this.state.clearBrowsingDataDetail.get('allSiteCookies')}
+            onClick={this.onToggleAllSiteCookies} />
+          <SwitchControl
+            rightl10nId='autocompleteData'
+            testId='autocompleteDataSwitch'
+            checkedOn={this.state.clearBrowsingDataDetail.get('autocompleteData')}
+            onClick={this.onToggleAutocompleteData} />
+          <SwitchControl
+            rightl10nId='autofillData'
+            testId='autofillDataSwitch'
+            checkedOn={this.state.clearBrowsingDataDetail.get('autofillData')}
+            onClick={this.onToggleAutofillData} />
+          <SwitchControl
+            rightl10nId='savedSiteSettings'
+            testId='siteSettingsSwitch'
+            checkedOn={this.state.clearBrowsingDataDetail.get('savedSiteSettings')}
+            onClick={this.onToggleSavedSiteSettings} />
+        </CommonFormSection>
+        <CommonFormButtonWrapper>
+          <Button className='whiteButton'
+            l10nId='cancel'
+            testId='cancelButton'
+            onClick={this.props.onHide}
+          />
+          <Button className='primaryButton'
+            l10nId='clear'
+            testId='clearDataButton'
+            onClick={this.onClear}
+          />
+        </CommonFormButtonWrapper>
+        <CommonFormBottomWrapper>
           <div data-l10n-id='clearDataWarning' />
-        </div>
-      </div>
+        </CommonFormBottomWrapper>
+      </CommonFormSmall>
     </Dialog>
   }
 }
diff --git a/js/components/loginRequired.js b/js/components/loginRequired.js
index d6ed288667e..a8537d98652 100644
--- a/js/components/loginRequired.js
+++ b/js/components/loginRequired.js
@@ -91,10 +91,10 @@ class LoginRequired extends React.Component {
         <CommonFormSection data-l10n-id='basicAuthMessage' data-l10n-args={JSON.stringify(l10nArgs)} />
         <CommonFormSection>
           <div className={css(styles.sectionWrapper)}>
-            <div data-test-id='loginLabel'
-              className={css(commonFormStyles.inputWrapper,
+            <div className={css(
+              commonFormStyles.inputWrapper,
               commonFormStyles.inputWrapper__label
-            )}>
+            )} data-test-id='loginLabel'>
               <label data-l10n-id='basicAuthUsernameLabel' htmlFor='loginUsername' />
               <label className={css(commonFormStyles.input__bottomRow)} data-l10n-id='basicAuthPasswordLabel' htmlFor='loginPassword' />
             </div>
diff --git a/js/components/switchControl.js b/js/components/switchControl.js
index b86f8d384ad..641a5f3ac54 100644
--- a/js/components/switchControl.js
+++ b/js/components/switchControl.js
@@ -31,6 +31,7 @@ class SwitchControl extends ImmutableComponent {
       hasTopText: this.props.topl10nId
     })}
       data-switch-status={this.props.checkedOn}
+      data-test-id={this.props.testId}
     >
       {
         this.props.leftl10nId && this.props.topl10nId
diff --git a/less/forms.less b/less/forms.less
index 9900d7e2a35..aef79b23eb2 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -18,51 +18,6 @@ select {
   top: @dialogTopOffset;
 }
 
-.clearBrowsingDataPanel {
-  .clearBrowsingData {
-    .flyoutDialog;
-    background-color: #f7f7f7;
-    border-radius: @borderRadius;
-    max-width: 325px;
-    padding: 0;
-    text-align: left;
-    width: 473px;
-    user-select: none;
-    cursor: default;
-    color: #3B3B3B;
-    overflow-y: auto;
-    max-height: 100%;
-
-    .clickable {
-      color: #5B5B5B;
-      &:hover {
-        color: #000;
-      }
-    }
-
-    .formSection {
-      padding: 16px 30px;
-      &.clearBrowsingDataWarning {
-        background-color: #dddee0;
-      }
-
-      &.clearBrowsingDataTitle {
-        color: #ff5000;
-        font-size: 1.2em;
-      }
-
-      &.clearBrowsingDataOptions {
-        padding: 0 30px;
-      }
-
-      &.clearBrowsingDataButtons {
-        text-align: right;
-        padding: 16px 10px;
-      }
-    }
-  }
-}
-
 .braveryPanelContainer {
   .braveryPanel {
     .flyoutDialog;
diff --git a/test/bravery-components/clearBrowsingDataPanelTest.js b/test/bravery-components/clearBrowsingDataPanelTest.js
index f5fcb389ec4..d913448c655 100644
--- a/test/bravery-components/clearBrowsingDataPanelTest.js
+++ b/test/bravery-components/clearBrowsingDataPanelTest.js
@@ -3,6 +3,7 @@
 const Brave = require('../lib/brave')
 const {urlInput, braveMenu, noScriptSwitch, braveryPanel, notificationBar, clearBrowsingDataButton, securityTab, clearDataButton} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+const aboutPreferencesUrl = getTargetAboutUrl('about:preferences')
 const {getHistory} = require('../../app/common/lib/historyUtil')
 const messages = require('../../js/constants/messages')
 
@@ -25,7 +26,7 @@ describe('Clear Browsing Panel', function () {
   function * openClearBrowsingDataPanel (client) {
     return client
       .tabByIndex(0)
-      .loadUrl(getTargetAboutUrl('about:preferences'))
+      .loadUrl(aboutPreferencesUrl)
       .waitForVisible(securityTab)
       .click(securityTab)
       .waitForVisible(clearBrowsingDataButton)
@@ -46,12 +47,11 @@ describe('Clear Browsing Panel', function () {
 
     it('saves the history switch state', function * () {
       const page1Url = Brave.server.url('page1.html')
-      const browserHistorySwitch = '.browserHistorySwitch'
       yield openClearBrowsingDataPanel(this.app.client)
       yield this.app.client
-        .waitForVisible(browserHistorySwitch)
+        .waitForVisible('[data-test-id="browserHistorySwitch"]')
         .waitForVisible(clearDataButton)
-        .click(`${browserHistorySwitch} .switchBackground`)
+        .click('[data-test-id="browserHistorySwitch"] .switchBackground')
         .click(clearDataButton)
         .waitUntil(function () {
           return this.getAppState().then((val) => {
@@ -69,7 +69,7 @@ describe('Clear Browsing Panel', function () {
         })
       yield openClearBrowsingDataPanel(this.app.client)
       yield this.app.client
-        .waitForVisible(`${browserHistorySwitch} .switchedOn`)
+        .waitForVisible('[data-test-id="browserHistorySwitch"] .switchedOn')
         .waitForVisible(clearDataButton)
         .click(clearDataButton)
         .waitUntil(function () {
@@ -99,10 +99,9 @@ describe('Clear Browsing Panel', function () {
     })
 
     it('shows clearing options', function * () {
-      const clearBrowsingDataButton = '.clearBrowsingDataButton'
       yield this.app.client
         .tabByIndex(0)
-        .loadUrl(getTargetAboutUrl('about:preferences'))
+        .loadUrl(aboutPreferencesUrl)
         .waitForVisible(securityTab)
         .click(securityTab)
         .waitForVisible(clearBrowsingDataButton)
@@ -111,13 +110,13 @@ describe('Clear Browsing Panel', function () {
     it('clears the browsing history', function * () {
       yield this.app.client
         .tabByIndex(0)
-        .loadUrl(getTargetAboutUrl('about:preferences'))
+        .loadUrl(aboutPreferencesUrl)
         .waitForVisible(securityTab)
         .click(securityTab)
         .waitForVisible(clearBrowsingDataButton)
         .click(clearBrowsingDataButton)
         .waitForBrowserWindow()
-        .waitForVisible('.browserHistorySwitch')
+        .waitForVisible('[data-test-id="browserHistorySwitch"]')
         .waitForVisible(clearDataButton)
         .click(clearDataButton)
         .waitUntil(function () {
@@ -200,14 +199,14 @@ describe('Clear Browsing Panel', function () {
     it('clears site settings and permissions', function * () {
       yield this.app.client
         .tabByIndex(0)
-        .loadUrl(getTargetAboutUrl('about:preferences'))
+        .loadUrl(aboutPreferencesUrl)
         .waitForVisible(securityTab)
         .click(securityTab)
         .waitForVisible(clearBrowsingDataButton)
         .click(clearBrowsingDataButton)
         .waitForBrowserWindow()
-        .waitForVisible('.siteSettingsSwitch')
-        .click('.siteSettingsSwitch .switchBackground')
+        .waitForVisible('[data-test-id="siteSettingsSwitch"]')
+        .click('[data-test-id="siteSettingsSwitch"] .switchBackground')
         .waitForVisible(clearDataButton)
         .click(clearDataButton)
         .waitUntil(function () {
diff --git a/test/contents/autofillTest.js b/test/contents/autofillTest.js
index 5a79446f42d..279082375ae 100644
--- a/test/contents/autofillTest.js
+++ b/test/contents/autofillTest.js
@@ -1,7 +1,7 @@
 /* global describe, it, before, beforeEach */
 
 const Brave = require('../lib/brave')
-const {urlInput, autofillAddressPanel, autofillCreditCardPanel, clearBrowsingDataButton, securityTab} = require('../lib/selectors')
+const {urlInput, autofillAddressPanel, autofillCreditCardPanel, clearBrowsingDataButton, clearDataButton, securityTab} = require('../lib/selectors')
 const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
 
 const addAddressButton = '[data-test-id="addAddressButton"]'
@@ -417,10 +417,10 @@ describe('Autofill', function () {
         .waitForVisible(clearBrowsingDataButton)
         .click(clearBrowsingDataButton)
         .waitForBrowserWindow()
-        .waitForVisible('.autofillDataSwitch')
-        .click('.autofillDataSwitch .switchMiddle')
-        .waitForVisible('.clearDataButton')
-        .click('.clearDataButton')
+        .waitForVisible('[data-test-id="autofillDataSwitch"]')
+        .click('[data-test-id="autofillDataSwitch"] .switchMiddle')
+        .waitForVisible(clearDataButton)
+        .click(clearDataButton)
     })
     it('does not autofill in regular tab', function * () {
       yield this.app.client
@@ -591,10 +591,10 @@ describe('Autofill', function () {
         .waitForVisible(clearBrowsingDataButton)
         .click(clearBrowsingDataButton)
         .waitForBrowserWindow()
-        .waitForVisible('.autocompleteDataSwitch')
-        .click('.autocompleteDataSwitch .switchMiddle')
-        .waitForVisible('.clearDataButton')
-        .click('.clearDataButton')
+        .waitForVisible('[data-test-id="autocompleteDataSwitch"]')
+        .click('[data-test-id="autocompleteDataSwitch"] .switchMiddle')
+        .waitForVisible(clearDataButton)
+        .click(clearDataButton)
       })
       it('does not autofill in regular tab', function * () {
         yield this.app.client
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 89387429081..88c6f247932 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -60,9 +60,9 @@ module.exports = {
   backButton: '.backforward .backButton',
   forwardButton: '.backforward .forwardButton',
   reloadButton: '.reloadButton',
-  clearBrowsingDataPanel: '.clearBrowsingDataPanel',
-  clearBrowsingDataButton: '.clearBrowsingDataButton',
-  clearDataButton: '.clearDataButton',
+  clearBrowsingDataButton: '[data-test-id="clearBrowsingDataButton"]',
+  clearBrowsingDataPanel: '[data-test-id="clearBrowsingDataPanel"]',
+  clearDataButton: '[data-test-id="clearDataButton"]',
   securityTab: '[data-l10n-id="security"]',
   paymentsTab: '[data-l10n-id="payments"]',
   syncTab: '[data-l10n-id="sync"]',

From 21a1711d89bbc2d4e25449e09e150932f0e8652b Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 22 Apr 2017 23:26:37 +0900
Subject: [PATCH 09/17] Move loginRequired.js from js to app folder

Auditors:

Test Plan: n/a
---
 {js => app/renderer}/components/loginRequired.js | 10 +++++-----
 js/components/main.js                            |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)
 rename {js => app/renderer}/components/loginRequired.js (93%)

diff --git a/js/components/loginRequired.js b/app/renderer/components/loginRequired.js
similarity index 93%
rename from js/components/loginRequired.js
rename to app/renderer/components/loginRequired.js
index a8537d98652..e5ce353cbe6 100644
--- a/js/components/loginRequired.js
+++ b/app/renderer/components/loginRequired.js
@@ -4,14 +4,14 @@
 
 const React = require('react')
 const PropTypes = require('prop-types')
-const Dialog = require('./dialog')
-const Button = require('./button')
-const appActions = require('../actions/appActions')
-const KeyCodes = require('../../app/common/constants/keyCodes')
+const Dialog = require('../../../js/components/dialog')
+const Button = require('../../../js/components/button')
+const appActions = require('../../../js/actions/appActions')
+const KeyCodes = require('../../common/constants/keyCodes')
 const urlResolve = require('url').resolve
 
 const {StyleSheet, css} = require('aphrodite/no-important')
-const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+const commonStyles = require('./styles/commonStyles')
 
 const {
   CommonForm,
diff --git a/js/components/main.js b/js/components/main.js
index d93f4cbedd7..2d5ca0a957f 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -33,7 +33,7 @@ const WidevinePanel = require('../../app/renderer/components/widevinePanel')
 const AutofillAddressPanel = require('./autofillAddressPanel')
 const AutofillCreditCardPanel = require('./autofillCreditCardPanel')
 const AddEditBookmark = require('../../app/renderer/components/bookmarks/addEditBookmark')
-const LoginRequired = require('./loginRequired')
+const LoginRequired = require('../../app/renderer/components/loginRequired')
 const ReleaseNotes = require('../../app/renderer/components/releaseNotes')
 const BookmarksToolbar = require('../../app/renderer/components/bookmarks/bookmarksToolbar')
 const ContextMenu = require('./contextMenu')

From 36f409a7e756c8b7f9dc44b09ec0de45e06779f0 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 00:26:11 +0900
Subject: [PATCH 10/17] Move autofillAddressPanel.js and
 autofillCreditCardPanel.js from js to app folder

Auditors:

Test Plan: n/a
---
 .../autofill}/autofillAddressPanel.js          | 16 ++++++++--------
 .../autofill}/autofillCreditCardPanel.js       | 18 +++++++++---------
 app/renderer/components/loginRequired.js       |  2 +-
 js/components/main.js                          |  4 ++--
 4 files changed, 20 insertions(+), 20 deletions(-)
 rename {js/components => app/renderer/components/autofill}/autofillAddressPanel.js (95%)
 rename {js/components => app/renderer/components/autofill}/autofillCreditCardPanel.js (92%)

diff --git a/js/components/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
similarity index 95%
rename from js/components/autofillAddressPanel.js
rename to app/renderer/components/autofill/autofillAddressPanel.js
index ec8c88332eb..c9b8dff596d 100644
--- a/js/components/autofillAddressPanel.js
+++ b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -3,15 +3,15 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
-const Dialog = require('./dialog')
-const Button = require('./button')
-const windowActions = require('../actions/windowActions')
-const appActions = require('../actions/appActions')
-const KeyCodes = require('../../app/common/constants/keyCodes')
+const ImmutableComponent = require('../immutableComponent')
+const Dialog = require('../../../../js/components/dialog')
+const Button = require('../../../../js/components/button')
+const windowActions = require('../../../../js/actions/windowActions')
+const appActions = require('../../../../js/actions/appActions')
+const KeyCodes = require('../../../common/constants/keyCodes')
 
 const {css} = require('aphrodite/no-important')
-const commonStyles = require('../../app/renderer/components/styles/commonStyles')
+const commonStyles = require('../styles/commonStyles')
 
 const {
   CommonFormLarge,
@@ -20,7 +20,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('../../app/renderer/components/commonForm')
+} = require('../commonForm')
 
 class AutofillAddressPanel extends ImmutableComponent {
   constructor () {
diff --git a/js/components/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
similarity index 92%
rename from js/components/autofillCreditCardPanel.js
rename to app/renderer/components/autofill/autofillCreditCardPanel.js
index a65d18981d2..e0223076046 100644
--- a/js/components/autofillCreditCardPanel.js
+++ b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -3,16 +3,16 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
-const Dialog = require('./dialog')
-const Button = require('./button')
-const windowActions = require('../actions/windowActions')
-const appActions = require('../actions/appActions')
-const KeyCodes = require('../../app/common/constants/keyCodes')
+const ImmutableComponent = require('../immutableComponent')
+const Dialog = require('../../../../js/components/dialog')
+const Button = require('../../../../js/components/button')
+const windowActions = require('../../../../js/actions/windowActions')
+const appActions = require('../../../../js/actions/appActions')
+const KeyCodes = require('../../../common/constants/keyCodes')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
-const commonStyles = require('../../app/renderer/components/styles/commonStyles')
-const globalStyles = require('../../app/renderer/components/styles/global')
+const commonStyles = require('../styles/commonStyles')
+const globalStyles = require('../styles/global')
 
 const {
   CommonForm,
@@ -22,7 +22,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('../../app/renderer/components/commonForm')
+} = require('../commonForm')
 
 class AutofillCreditCardPanel extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/loginRequired.js b/app/renderer/components/loginRequired.js
index e5ce353cbe6..b3399f39c00 100644
--- a/app/renderer/components/loginRequired.js
+++ b/app/renderer/components/loginRequired.js
@@ -20,7 +20,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('../../app/renderer/components/commonForm')
+} = require('./commonForm')
 
 class LoginRequired extends React.Component {
   constructor () {
diff --git a/js/components/main.js b/js/components/main.js
index 2d5ca0a957f..ede797f2921 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -30,8 +30,8 @@ const BraveryPanel = require('./braveryPanel')
 const ClearBrowsingDataPanel = require('./clearBrowsingDataPanel')
 const ImportBrowserDataPanel = require('../../app/renderer/components/importBrowserDataPanel')
 const WidevinePanel = require('../../app/renderer/components/widevinePanel')
-const AutofillAddressPanel = require('./autofillAddressPanel')
-const AutofillCreditCardPanel = require('./autofillCreditCardPanel')
+const AutofillAddressPanel = require('../../app/renderer/components/autofill/autofillAddressPanel')
+const AutofillCreditCardPanel = require('../../app/renderer/components/autofill/autofillCreditCardPanel')
 const AddEditBookmark = require('../../app/renderer/components/bookmarks/addEditBookmark')
 const LoginRequired = require('../../app/renderer/components/loginRequired')
 const ReleaseNotes = require('../../app/renderer/components/releaseNotes')

From cd4844035fa53aff3366c6132c5428f43eb85966 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 00:36:55 +0900
Subject: [PATCH 11/17] Move clearBrowsingDataPanel.js from js to app folder

Auditors:

Test Plan: n/a
---
 .../renderer}/components/clearBrowsingDataPanel.js   | 12 ++++++------
 js/components/main.js                                |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)
 rename {js => app/renderer}/components/clearBrowsingDataPanel.js (93%)

diff --git a/js/components/clearBrowsingDataPanel.js b/app/renderer/components/clearBrowsingDataPanel.js
similarity index 93%
rename from js/components/clearBrowsingDataPanel.js
rename to app/renderer/components/clearBrowsingDataPanel.js
index 4bc48458ccd..51fc72a11dd 100644
--- a/js/components/clearBrowsingDataPanel.js
+++ b/app/renderer/components/clearBrowsingDataPanel.js
@@ -4,12 +4,12 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const Dialog = require('./dialog')
-const Button = require('./button')
-const SwitchControl = require('./switchControl')
-const appActions = require('../actions/appActions')
+const Dialog = require('../../../js/components/dialog')
+const Button = require('../../../js/components/button')
+const SwitchControl = require('../../../js/components/switchControl')
+const appActions = require('../../../js/actions/appActions')
 const ipc = require('electron').ipcRenderer
-const messages = require('../constants/messages')
+const messages = require('../../../js/constants/messages')
 
 const {
   CommonFormSmall,
@@ -17,7 +17,7 @@ const {
   CommonFormTitle,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
-} = require('../../app/renderer/components/commonForm')
+} = require('./commonForm')
 
 class ClearBrowsingDataPanel extends React.Component {
   constructor (props) {
diff --git a/js/components/main.js b/js/components/main.js
index ede797f2921..08b3d4de7c2 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -27,7 +27,7 @@ const {NotificationBar} = require('./notificationBar')
 const DownloadsBar = require('../../app/renderer/components/downloadsBar')
 const SiteInfo = require('./siteInfo')
 const BraveryPanel = require('./braveryPanel')
-const ClearBrowsingDataPanel = require('./clearBrowsingDataPanel')
+const ClearBrowsingDataPanel = require('../../app/renderer/components/clearBrowsingDataPanel')
 const ImportBrowserDataPanel = require('../../app/renderer/components/importBrowserDataPanel')
 const WidevinePanel = require('../../app/renderer/components/widevinePanel')
 const AutofillAddressPanel = require('../../app/renderer/components/autofill/autofillAddressPanel')

From 0786a588140e7b754206c6f7cc86be89188025b7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 09:41:24 +0900
Subject: [PATCH 12/17] Move commonForm.js into common folder

Auditors:

Test Plan: n/a
---
 .../components/autofill/autofillAddressPanel.js  |  2 +-
 .../autofill/autofillCreditCardPanel.js          |  2 +-
 .../bookmarks/addEditBookmarkHanger.js           |  2 +-
 .../components/checkDefaultBrowserDialog.js      |  2 +-
 .../components/clearBrowsingDataPanel.js         |  2 +-
 .../components/{ => common}/commonForm.js        | 10 +++++-----
 .../components/importBrowserDataPanel.js         |  2 +-
 app/renderer/components/loginRequired.js         |  2 +-
 app/renderer/components/widevineInfo.js          |  2 +-
 app/renderer/components/widevinePanel.js         |  2 +-
 js/about/styles.js                               | 16 ++++++++--------
 11 files changed, 22 insertions(+), 22 deletions(-)
 rename app/renderer/components/{ => common}/commonForm.js (95%)

diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
index c9b8dff596d..b1cdc563889 100644
--- a/app/renderer/components/autofill/autofillAddressPanel.js
+++ b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -20,7 +20,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('../commonForm')
+} = require('../common/commonForm')
 
 class AutofillAddressPanel extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/autofill/autofillCreditCardPanel.js b/app/renderer/components/autofill/autofillCreditCardPanel.js
index e0223076046..795b0f30674 100644
--- a/app/renderer/components/autofill/autofillCreditCardPanel.js
+++ b/app/renderer/components/autofill/autofillCreditCardPanel.js
@@ -22,7 +22,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('../commonForm')
+} = require('../common/commonForm')
 
 class AutofillCreditCardPanel extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index 2cab513360b..fed7e9afd58 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -36,7 +36,7 @@ const {
   CommonFormButtonWrapper,
   CommonFormBottomWrapper,
   commonFormStyles
-} = require('../commonForm')
+} = require('../common/commonForm')
 
 class AddEditBookmarkHanger extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/checkDefaultBrowserDialog.js b/app/renderer/components/checkDefaultBrowserDialog.js
index 9cb9d5efc02..5017e6313ee 100644
--- a/app/renderer/components/checkDefaultBrowserDialog.js
+++ b/app/renderer/components/checkDefaultBrowserDialog.js
@@ -26,7 +26,7 @@ const {
   CommonFormMedium,
   CommonFormSection,
   CommonFormButtonWrapper
-} = require('./commonForm')
+} = require('./common/commonForm')
 
 class CheckDefaultBrowserDialog extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/clearBrowsingDataPanel.js b/app/renderer/components/clearBrowsingDataPanel.js
index 51fc72a11dd..9425e250170 100644
--- a/app/renderer/components/clearBrowsingDataPanel.js
+++ b/app/renderer/components/clearBrowsingDataPanel.js
@@ -17,7 +17,7 @@ const {
   CommonFormTitle,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
-} = require('./commonForm')
+} = require('./common/commonForm')
 
 class ClearBrowsingDataPanel extends React.Component {
   constructor (props) {
diff --git a/app/renderer/components/commonForm.js b/app/renderer/components/common/commonForm.js
similarity index 95%
rename from app/renderer/components/commonForm.js
rename to app/renderer/components/common/commonForm.js
index 6ad0a676ffc..44d9f828326 100644
--- a/app/renderer/components/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -3,14 +3,14 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
+const ImmutableComponent = require('../immutableComponent')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('./styles/global')
-const commonStyles = require('./styles/commonStyles')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
-const {FormDropdown} = require('./dropdown')
-const {FormTextbox} = require('./textbox')
+const {FormDropdown} = require('../dropdown')
+const {FormTextbox} = require('../textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
diff --git a/app/renderer/components/importBrowserDataPanel.js b/app/renderer/components/importBrowserDataPanel.js
index 2312484303a..e8440325251 100644
--- a/app/renderer/components/importBrowserDataPanel.js
+++ b/app/renderer/components/importBrowserDataPanel.js
@@ -20,7 +20,7 @@ const {
   CommonFormTitle,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
-} = require('./commonForm')
+} = require('./common/commonForm')
 
 class ImportBrowserDataPanel extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/loginRequired.js b/app/renderer/components/loginRequired.js
index b3399f39c00..e3f47de9a2c 100644
--- a/app/renderer/components/loginRequired.js
+++ b/app/renderer/components/loginRequired.js
@@ -20,7 +20,7 @@ const {
   CommonFormTextbox,
   CommonFormButtonWrapper,
   commonFormStyles
-} = require('./commonForm')
+} = require('./common/commonForm')
 
 class LoginRequired extends React.Component {
   constructor () {
diff --git a/app/renderer/components/widevineInfo.js b/app/renderer/components/widevineInfo.js
index d12cdb1afbd..9799ffcfb41 100644
--- a/app/renderer/components/widevineInfo.js
+++ b/app/renderer/components/widevineInfo.js
@@ -15,7 +15,7 @@ const cx = require('../../../js/lib/classSet')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-const {CommonFormSection} = require('./commonForm')
+const {CommonFormSection} = require('./common/commonForm')
 
 class WidevineInfo extends ImmutableComponent {
   constructor () {
diff --git a/app/renderer/components/widevinePanel.js b/app/renderer/components/widevinePanel.js
index b4434542859..6996de91f56 100644
--- a/app/renderer/components/widevinePanel.js
+++ b/app/renderer/components/widevinePanel.js
@@ -18,7 +18,7 @@ const {
   CommonFormTitle,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
-} = require('./commonForm')
+} = require('./common/commonForm')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const commonStyles = require('./styles/commonStyles')
diff --git a/js/about/styles.js b/js/about/styles.js
index 69423aaddf2..e3c6b51cd71 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -33,7 +33,7 @@ const {
   CommonFormSubSection,
   CommonFormButtonWrapper,
   CommonFormBottomWrapper
-} = require('../../app/renderer/components/commonForm')
+} = require('../../app/renderer/components/common/commonForm')
 
 class Container extends ImmutableComponent {
   render () {
@@ -350,7 +350,7 @@ class AboutStyle extends ImmutableComponent {
             <Tab>CommonFormSubSection,{'\n'}</Tab>
             <Tab>CommonFormButtonWrapper,{'\n'}</Tab>
             <Tab>CommonFormBottomWrapper{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
@@ -402,7 +402,7 @@ class AboutStyle extends ImmutableComponent {
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormTitle{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormTitle&gt;CommonFormTitle&lt;/CommonFormTitle&gt;{'\n'}</Tab>
@@ -429,7 +429,7 @@ class AboutStyle extends ImmutableComponent {
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormSection{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
@@ -461,7 +461,7 @@ class AboutStyle extends ImmutableComponent {
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormSection,{'\n'}</Tab>
             <Tab>CommonFormDropdown{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
@@ -498,7 +498,7 @@ class AboutStyle extends ImmutableComponent {
             <Tab>CommonFormSection,{'\n'}</Tab>
             <Tab>CommonFormSubSection,{'\n'}</Tab>
             <Tab>CommonFormDropdown{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormSection&gt;{'\n'}</Tab>
@@ -532,7 +532,7 @@ class AboutStyle extends ImmutableComponent {
             const &#123;{'\n'}
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormButtonWrapper{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormButtonWrapper&gt;{'\n'}</Tab>
@@ -562,7 +562,7 @@ class AboutStyle extends ImmutableComponent {
             <Tab>CommonForm,{'\n'}</Tab>
             <Tab>CommonFormBottomWrapper,{'\n'}</Tab>
             <Tab>CommonFormClickable{'\n'}</Tab>
-            &#125; = require('../../app/renderer/components/commonForm'){'\n'}
+            &#125; = require('../../app/renderer/components/common/commonForm'){'\n'}
             {'\n'}
             &lt;CommonForm&gt;{'\n'}
             <Tab>&lt;CommonFormBottomWrapper&gt;{'\n'}</Tab>

From b836e5532157eb783ae228f21c9215a3692a67e7 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 09:47:51 +0900
Subject: [PATCH 13/17] Move list.js into common folder

Auditors:

Test Plan: n/a
---
 app/renderer/components/{ => common}/list.js | 4 ++--
 js/about/downloads.js                        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename app/renderer/components/{ => common}/list.js (88%)

diff --git a/app/renderer/components/list.js b/app/renderer/components/common/list.js
similarity index 88%
rename from app/renderer/components/list.js
rename to app/renderer/components/common/list.js
index 1e88a477f3d..185f5261a1d 100644
--- a/app/renderer/components/list.js
+++ b/app/renderer/components/common/list.js
@@ -3,9 +3,9 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
+const ImmutableComponent = require('../immutableComponent')
 const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('./styles/global')
+const globalStyles = require('../styles/global')
 
 class List extends ImmutableComponent {
   render () {
diff --git a/js/about/downloads.js b/js/about/downloads.js
index 2ac96bccb8d..b83e31d68c2 100644
--- a/js/about/downloads.js
+++ b/js/about/downloads.js
@@ -15,7 +15,7 @@ const ipc = window.chrome.ipcRenderer
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../../app/renderer/components/styles/global')
 const commonStyles = require('../../app/renderer/components/styles/commonStyles')
-const {DownloadList} = require('../../app/renderer/components/list')
+const {DownloadList} = require('../../app/renderer/components/common/list')
 
 // Stylesheets
 require('../../less/about/common.less')

From 4e9aabecc8660e6cbe336ae35d4858cf5d9b20ec Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 09:52:12 +0900
Subject: [PATCH 14/17] Move dropdown.js into common folder

Auditors:

Test Plan: n/a
---
 app/renderer/components/common/commonForm.js              | 2 +-
 app/renderer/components/{ => common}/dropdown.js          | 8 ++++----
 .../components/preferences/payment/advancedSettings.js    | 2 +-
 .../components/preferences/payment/enabledContent.js      | 2 +-
 js/about/preferences.js                                   | 2 +-
 js/about/styles.js                                        | 8 ++++----
 js/components/braveryPanel.js                             | 2 +-
 test/unit/about/preferencesTest.js                        | 2 +-
 .../app/renderer/components/navigation/navigatorTest.js   | 2 +-
 test/unit/app/renderer/paymentsTabTest.js                 | 2 +-
 10 files changed, 16 insertions(+), 16 deletions(-)
 rename app/renderer/components/{ => common}/dropdown.js (88%)

diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 44d9f828326..e5ceb11f710 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 const commonStyles = require('../styles/commonStyles')
 
-const {FormDropdown} = require('../dropdown')
+const {FormDropdown} = require('./dropdown')
 const {FormTextbox} = require('../textbox')
 
 class CommonForm extends ImmutableComponent {
diff --git a/app/renderer/components/dropdown.js b/app/renderer/components/common/dropdown.js
similarity index 88%
rename from app/renderer/components/dropdown.js
rename to app/renderer/components/common/dropdown.js
index 1a1619032cf..a58ac0ea01b 100644
--- a/app/renderer/components/dropdown.js
+++ b/app/renderer/components/common/dropdown.js
@@ -3,12 +3,12 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
+const ImmutableComponent = require('../immutableComponent')
 const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('./styles/global')
-const commonStyles = require('./styles/commonStyles')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
-const caretDownGrey = require('../../extensions/brave/img/caret_down_grey.svg')
+const caretDownGrey = require('../../../extensions/brave/img/caret_down_grey.svg')
 
 class Dropdown extends ImmutableComponent {
   render () {
diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
index f83045aa368..745920736a0 100644
--- a/app/renderer/components/preferences/payment/advancedSettings.js
+++ b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -12,7 +12,7 @@ const appConfig = require('../../../../../js/constants/appConfig')
 // components
 const Button = require('../../../../../js/components/button')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../../settings')
-const {SettingDropdown} = require('../../dropdown')
+const {SettingDropdown} = require('../../common/dropdown')
 const ImmutableComponent = require('../../immutableComponent')
 
 // style
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 29132bb5432..4e37d8e4924 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -15,7 +15,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 const ImmutableComponent = require('../../immutableComponent')
 const Button = require('../../../../../js/components/button')
 const {FormTextbox} = require('../../textbox')
-const {FormDropdown} = require('../../dropdown')
+const {FormDropdown} = require('../../common/dropdown')
 const {SettingsList, SettingItem} = require('../../settings')
 const LedgerTable = require('./ledgerTable')
 
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 424bcefe9ae..4df60e2d23b 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -12,7 +12,7 @@ const UrlUtil = require('../lib/urlutil')
 const PreferenceNavigation = require('../../app/renderer/components/preferences/preferenceNavigation')
 const {SettingsList, SettingItem, SettingCheckbox, SettingItemIcon} = require('../../app/renderer/components/settings')
 const {SettingTextbox} = require('../../app/renderer/components/textbox')
-const {SettingDropdown} = require('../../app/renderer/components/dropdown')
+const {SettingDropdown} = require('../../app/renderer/components/common/dropdown')
 const {DefaultSectionTitle} = require('../../app/renderer/components/common/sectionTitle')
 const Button = require('../components/button')
 
diff --git a/js/about/styles.js b/js/about/styles.js
index e3c6b51cd71..66dcf004c9f 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -13,7 +13,7 @@ require('../../less/forms.less')
 
 const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox')
 const {TextArea, DefaultTextArea} = require('../../app/renderer/components/textbox')
-const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/dropdown')
+const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/common/dropdown')
 
 const {
   SectionTitleWrapper,
@@ -183,7 +183,7 @@ class AboutStyle extends ImmutableComponent {
             <option>Third Choice</option>
           </Dropdown>
           <Pre><Code>
-            const { '{Dropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            const { '{Dropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
             &lt;Dropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
@@ -200,7 +200,7 @@ class AboutStyle extends ImmutableComponent {
             <option>Third Choice</option>
           </FormDropdown>
           <Pre><Code>
-            const { '{FormDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
             &lt;FormDropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
@@ -217,7 +217,7 @@ class AboutStyle extends ImmutableComponent {
             <option>Third Choice</option>
           </SettingDropdown>
           <Pre><Code>
-            const { '{SettingDropdown}' } = require('../../app/renderer/components/dropdown'){'\n'}
+            const { '{SettingDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
             &lt;SettingDropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
diff --git a/js/components/braveryPanel.js b/js/components/braveryPanel.js
index 9440a7bd519..e481c8e8719 100644
--- a/js/components/braveryPanel.js
+++ b/js/components/braveryPanel.js
@@ -8,7 +8,7 @@ const ImmutableComponent = require('../../app/renderer/components/immutableCompo
 const config = require('../constants/config')
 const Dialog = require('./dialog')
 const SwitchControl = require('./switchControl')
-const {FormDropdown} = require('../../app/renderer/components/dropdown')
+const {FormDropdown} = require('../../app/renderer/components/common/dropdown')
 const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
 const urlParse = require('../../app/common/urlParse')
diff --git a/test/unit/about/preferencesTest.js b/test/unit/about/preferencesTest.js
index d798f785a40..7ed957c8678 100644
--- a/test/unit/about/preferencesTest.js
+++ b/test/unit/about/preferencesTest.js
@@ -23,7 +23,7 @@ describe('Preferences component', function () {
     mockery.registerMock('../../less/forms.less', {})
     mockery.registerMock('../../less/button.less', {})
     mockery.registerMock('../../node_modules/font-awesome/css/font-awesome.css', {})
-    mockery.registerMock('../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
+    mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_general.svg', 'browser_prefs_general.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_search.svg', 'browser_prefs_search.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_tabs.svg', 'browser_prefs_tabs.svg')
diff --git a/test/unit/app/renderer/components/navigation/navigatorTest.js b/test/unit/app/renderer/components/navigation/navigatorTest.js
index 8e396f9d0fd..8c94b799f48 100644
--- a/test/unit/app/renderer/components/navigation/navigatorTest.js
+++ b/test/unit/app/renderer/components/navigation/navigatorTest.js
@@ -21,8 +21,8 @@ describe('Navigator component unit tests', function () {
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg', {})
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_no.svg', {})
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_yes.svg', {})
-    mockery.registerMock('../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
     mockery.registerMock('../../extensions/brave/img/tabs/new_session.svg')
+    mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg')
     mockery.registerMock('../../../../img/url-bar-no-script.svg', {})
     mockery.registerMock('electron', require('../../../../lib/fakeElectron'))
     Navigator = require('../../../../../../app/renderer/components/navigation/navigator')
diff --git a/test/unit/app/renderer/paymentsTabTest.js b/test/unit/app/renderer/paymentsTabTest.js
index c28a6e39cd4..0f7c2858ca7 100644
--- a/test/unit/app/renderer/paymentsTabTest.js
+++ b/test/unit/app/renderer/paymentsTabTest.js
@@ -25,7 +25,7 @@ describe('PaymentsTab component', function () {
     mockery.registerMock('../../less/forms.less', {})
     mockery.registerMock('../../less/button.less', {})
     mockery.registerMock('../../node_modules/font-awesome/css/font-awesome.css', {})
-    mockery.registerMock('../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
+    mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_general.svg', 'browser_prefs_general.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_search.svg', 'browser_prefs_search.svg')
     mockery.registerMock('../../../extensions/brave/img/preferences/browser_prefs_tabs.svg', 'browser_prefs_tabs.svg')

From 08e815b86b0f0e76aee2ee9edae5f1be3f26053d Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 09:56:03 +0900
Subject: [PATCH 15/17] Move textbox.js into common folder

Auditors:

Test Plan: n/a
---
 app/renderer/components/common/commonForm.js     |  2 +-
 app/renderer/components/{ => common}/textbox.js  |  6 +++---
 .../preferences/payment/enabledContent.js        |  2 +-
 .../preferences/payment/ledgerRecovery.js        |  2 +-
 js/about/adblock.js                              |  2 +-
 js/about/styles.js                               | 16 ++++++++--------
 6 files changed, 15 insertions(+), 15 deletions(-)
 rename app/renderer/components/{ => common}/textbox.js (93%)

diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index e5ceb11f710..33c3d4ef898 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -10,7 +10,7 @@ const globalStyles = require('../styles/global')
 const commonStyles = require('../styles/commonStyles')
 
 const {FormDropdown} = require('./dropdown')
-const {FormTextbox} = require('../textbox')
+const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
diff --git a/app/renderer/components/textbox.js b/app/renderer/components/common/textbox.js
similarity index 93%
rename from app/renderer/components/textbox.js
rename to app/renderer/components/common/textbox.js
index 1f44becc51f..24bcca8a56a 100644
--- a/app/renderer/components/textbox.js
+++ b/app/renderer/components/common/textbox.js
@@ -3,11 +3,11 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
+const ImmutableComponent = require('../immutableComponent')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
-const globalStyles = require('./styles/global')
-const commonStyles = require('./styles/commonStyles')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
 // Textbox
 class Textbox extends ImmutableComponent {
diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
index 4e37d8e4924..b8300a243b2 100644
--- a/app/renderer/components/preferences/payment/enabledContent.js
+++ b/app/renderer/components/preferences/payment/enabledContent.js
@@ -14,7 +14,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 // components
 const ImmutableComponent = require('../../immutableComponent')
 const Button = require('../../../../../js/components/button')
-const {FormTextbox} = require('../../textbox')
+const {FormTextbox} = require('../../common/textbox')
 const {FormDropdown} = require('../../common/dropdown')
 const {SettingsList, SettingItem} = require('../../settings')
 const LedgerTable = require('./ledgerTable')
diff --git a/app/renderer/components/preferences/payment/ledgerRecovery.js b/app/renderer/components/preferences/payment/ledgerRecovery.js
index 881421a9bd3..1ef9e6e1f55 100644
--- a/app/renderer/components/preferences/payment/ledgerRecovery.js
+++ b/app/renderer/components/preferences/payment/ledgerRecovery.js
@@ -11,7 +11,7 @@ const {btcToCurrencyString} = require('../../../../common/lib/ledgerUtil')
 // components
 const ImmutableComponent = require('../../immutableComponent')
 const Button = require('../../../../../js/components/button')
-const {RecoveryKeyTextbox} = require('../../textbox')
+const {RecoveryKeyTextbox} = require('../../common/textbox')
 const {SettingsList, SettingItem} = require('../../settings')
 
 // style
diff --git a/js/about/adblock.js b/js/about/adblock.js
index 643dcd84aca..a53145e1a3d 100644
--- a/js/about/adblock.js
+++ b/js/about/adblock.js
@@ -11,7 +11,7 @@ const getSetting = require('../settings').getSetting
 const aboutActions = require('./aboutActions')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const SwitchControl = require('../components/switchControl')
-const {DefaultTextArea} = require('../../app/renderer/components/textbox')
+const {DefaultTextArea} = require('../../app/renderer/components/common/textbox')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 
diff --git a/js/about/styles.js b/js/about/styles.js
index 66dcf004c9f..2f59292f74c 100644
--- a/js/about/styles.js
+++ b/js/about/styles.js
@@ -11,8 +11,8 @@ const globalStyles = require('../../app/renderer/components/styles/global')
 require('../../less/button.less')
 require('../../less/forms.less')
 
-const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/textbox')
-const {TextArea, DefaultTextArea} = require('../../app/renderer/components/textbox')
+const {Textbox, FormTextbox, SettingTextbox, RecoveryKeyTextbox} = require('../../app/renderer/components/common/textbox')
+const {TextArea, DefaultTextArea} = require('../../app/renderer/components/common/textbox')
 const {Dropdown, FormDropdown, SettingDropdown} = require('../../app/renderer/components/common/dropdown')
 
 const {
@@ -118,7 +118,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Plain textbox</h2>
           <Textbox placeholder='Textbox' />
           <Pre><Code>
-            const { '{Textbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{Textbox}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;Textbox />
           </Code></Pre>
         </Container>
@@ -127,7 +127,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Textbox for use in forms</h2>
           <FormTextbox placeholder='FormTextbox' />
           <Pre><Code>
-            const { '{FormTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{FormTextbox}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;FormTextbox />
           </Code></Pre>
         </Container>
@@ -136,7 +136,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Texbox used mostly in Preferences; has a fixed width</h2>
           <SettingTextbox placeholder='SettingTextbox' />
           <Pre><Code>
-            const { '{SettingTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{SettingTextbox}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;SettingTextbox />
           </Code></Pre>
         </Container>
@@ -145,7 +145,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Textbox used on wallet recovery screen in Brave Payments</h2>
           <RecoveryKeyTextbox placeholder='RecoveryKeyTextbox' />
           <Pre><Code>
-            const { '{RecoveryKeyTextbox}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{RecoveryKeyTextbox}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;RecoveryKeyTextbox />
           </Code></Pre>
         </Container>
@@ -154,7 +154,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Plain textarea</h2>
           <TextArea placeholder='TextArea' />
           <Pre><Code>
-            const { '{TextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{TextArea}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;TextArea />
           </Code></Pre>
         </Container>
@@ -163,7 +163,7 @@ class AboutStyle extends ImmutableComponent {
           <h2>Default textarea; font size is specified</h2>
           <DefaultTextArea placeholder='DefaultTextArea' />
           <Pre><Code>
-            const { '{DefaultTextArea}' } = require('../../app/renderer/components/textbox'){'\n'}
+            const { '{DefaultTextArea}' } = require('../../app/renderer/components/common/textbox'){'\n'}
             &lt;DefaultTextArea />
           </Code></Pre>
         </Container>

From 16a3171dacf8bc730e4b2a67385e2223c5937d95 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 23 Apr 2017 10:06:56 +0900
Subject: [PATCH 16/17] Move messageBox.js into common folder

Auditors:

Test Plan: n/a
---
 .../components/{ => common}/messageBox.js     | 20 +++++++++----------
 js/about/preferences.js                       |  2 +-
 js/components/frame.js                        |  2 +-
 .../app/renderer/components/messageBoxTest.js |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)
 rename app/renderer/components/{ => common}/messageBox.js (86%)

diff --git a/app/renderer/components/messageBox.js b/app/renderer/components/common/messageBox.js
similarity index 86%
rename from app/renderer/components/messageBox.js
rename to app/renderer/components/common/messageBox.js
index 155a72a1d63..30389810077 100644
--- a/app/renderer/components/messageBox.js
+++ b/app/renderer/components/common/messageBox.js
@@ -3,18 +3,18 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
-const Dialog = require('../../../js/components/dialog')
-const Button = require('../../../js/components/button')
-const SwitchControl = require('../../../js/components/switchControl')
-const appActions = require('../../../js/actions/appActions')
-const KeyCodes = require('../../common/constants/keyCodes')
-const config = require('../../../js/constants/config')
-const {makeImmutable} = require('../../common/state/immutableUtil')
+const ImmutableComponent = require('../immutableComponent')
+const Dialog = require('../../../../js/components/dialog')
+const Button = require('../../../../js/components/button')
+const SwitchControl = require('../../../../js/components/switchControl')
+const appActions = require('../../../../js/actions/appActions')
+const KeyCodes = require('../../../common/constants/keyCodes')
+const config = require('../../../../js/constants/config')
+const {makeImmutable} = require('../../../common/state/immutableUtil')
 
 const {StyleSheet, css} = require('aphrodite')
-const commonStyles = require('./styles/commonStyles')
-const globalStyles = require('./styles/global')
+const commonStyles = require('../styles/commonStyles')
+const globalStyles = require('../styles/global')
 
 class MessageBox extends ImmutableComponent {
   constructor () {
diff --git a/js/about/preferences.js b/js/about/preferences.js
index 4df60e2d23b..cead26e69e5 100644
--- a/js/about/preferences.js
+++ b/js/about/preferences.js
@@ -11,7 +11,7 @@ const UrlUtil = require('../lib/urlutil')
 // Components
 const PreferenceNavigation = require('../../app/renderer/components/preferences/preferenceNavigation')
 const {SettingsList, SettingItem, SettingCheckbox, SettingItemIcon} = require('../../app/renderer/components/settings')
-const {SettingTextbox} = require('../../app/renderer/components/textbox')
+const {SettingTextbox} = require('../../app/renderer/components/common/textbox')
 const {SettingDropdown} = require('../../app/renderer/components/common/dropdown')
 const {DefaultSectionTitle} = require('../../app/renderer/components/common/sectionTitle')
 const Button = require('../components/button')
diff --git a/js/components/frame.js b/js/components/frame.js
index 9c5556c5ba7..fefc271b8d1 100644
--- a/js/components/frame.js
+++ b/js/components/frame.js
@@ -31,7 +31,7 @@ const windowStore = require('../stores/windowStore')
 const appStoreRenderer = require('../stores/appStoreRenderer')
 const siteSettings = require('../state/siteSettings')
 const imageUtil = require('../lib/imageUtil')
-const MessageBox = require('../../app/renderer/components/messageBox')
+const MessageBox = require('../../app/renderer/components/common/messageBox')
 
 const WEBRTC_DEFAULT = 'default'
 const WEBRTC_DISABLE_NON_PROXY = 'disable_non_proxied_udp'
diff --git a/test/unit/app/renderer/components/messageBoxTest.js b/test/unit/app/renderer/components/messageBoxTest.js
index 2d071626755..22c0843b8f6 100644
--- a/test/unit/app/renderer/components/messageBoxTest.js
+++ b/test/unit/app/renderer/components/messageBoxTest.js
@@ -20,7 +20,7 @@ describe('MessageBox component unit tests', function () {
       useCleanCache: true
     })
     mockery.registerMock('electron', require('../../../lib/fakeElectron'))
-    MessageBox = require('../../../../../app/renderer/components/messageBox')
+    MessageBox = require('../../../../../app/renderer/components/common/messageBox')
     appActions = require('../../../../../js/actions/appActions')
   })
   after(function () {

From 06c34bb27a1b1c2539861edefb4bc355798c7975 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 25 Apr 2017 09:59:10 +0900
Subject: [PATCH 17/17] Add a comment and move the components on commonForm.js

Auditors:

Test Plan: n/a
---
 app/renderer/components/common/commonForm.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 33c3d4ef898..81fc7ab0d44 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -12,6 +12,8 @@ const commonStyles = require('../styles/commonStyles')
 const {FormDropdown} = require('./dropdown')
 const {FormTextbox} = require('./textbox')
 
+/* See about:styles for templates */
+
 class CommonForm extends ImmutableComponent {
   render () {
     return <div className={css(
@@ -21,22 +23,22 @@ class CommonForm extends ImmutableComponent {
   }
 }
 
-class CommonFormMedium extends ImmutableComponent {
+class CommonFormSmall extends ImmutableComponent {
   render () {
     return <div className={css(
       commonStyles.flyoutDialog,
       styles.commonForm,
-      styles.commonFormMedium,
+      styles.commonFormSmall
     )} {...this.props} />
   }
 }
 
-class CommonFormSmall extends ImmutableComponent {
+class CommonFormMedium extends ImmutableComponent {
   render () {
     return <div className={css(
       commonStyles.flyoutDialog,
       styles.commonForm,
-      styles.commonFormSmall
+      styles.commonFormMedium,
     )} {...this.props} />
   }
 }