From 32dca6fb276e0c4ef4773dba81e8fa596316c182 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Fri, 15 Sep 2017 01:04:58 +0900
Subject: [PATCH] Add FlyoutDialog

- Update commonForm components based on FlyoutDialog

Addresses #7114
Closes #10977

Auditors: @cezaraugusto @bsclifton

Test Plan
1. Open about:styles
2. Click `commonForms`
3. Make sure the common form dialog is properly styled
---
 app/renderer/components/common/commonForm.js  | 43 ++++++++++--------
 .../components/common/flyoutDialog.js         | 45 +++++++++++++++++++
 app/renderer/components/common/messageBox.js  |  7 +--
 app/renderer/components/main/braveryPanel.js  | 12 ++---
 app/renderer/components/main/releaseNotes.js  | 17 +++----
 app/renderer/components/main/siteInfo.js      | 11 +++--
 .../components/styles/commonStyles.js         | 17 -------
 7 files changed, 89 insertions(+), 63 deletions(-)
 create mode 100644 app/renderer/components/common/flyoutDialog.js

diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 44dc6896cad..9c8a82b7513 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -7,8 +7,8 @@ const ImmutableComponent = require('../immutableComponent')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 
+const FlyoutDialog = require('./flyoutDialog')
 const {FormDropdown} = require('./dropdown')
 const {FormTextbox} = require('./textbox')
 
@@ -16,50 +16,53 @@ const {FormTextbox} = require('./textbox')
 
 class CommonForm extends ImmutableComponent {
   render () {
-    return <div className={css(
-      commonStyles.flyoutDialog,
-      styles.commonForm
-    )} {...this.props} />
+    return <FlyoutDialog custom={styles.commonForm}>
+      {this.props.children}
+    </FlyoutDialog>
   }
 }
 
 class CommonFormSmall extends ImmutableComponent {
   render () {
-    return <div className={css(
-      commonStyles.flyoutDialog,
+    return <FlyoutDialog custom={[
       styles.commonForm,
       styles.commonFormSmall
-    )} {...this.props} />
+    ]}>
+      {this.props.children}
+    </FlyoutDialog>
   }
 }
 
 class CommonFormMedium extends ImmutableComponent {
   render () {
-    return <div className={css(
-      commonStyles.flyoutDialog,
+    return <FlyoutDialog custom={[
       styles.commonForm,
       styles.commonFormMedium
-    )} {...this.props} />
+    ]}>
+      {this.props.children}
+    </FlyoutDialog>
   }
 }
 
 class CommonFormLarge extends ImmutableComponent {
   render () {
-    return <div className={css(
-      commonStyles.flyoutDialog,
+    return <FlyoutDialog custom={[
       styles.commonForm,
       styles.commonFormLarge
-    )} {...this.props} />
+    ]}>
+      {this.props.children}
+    </FlyoutDialog>
   }
 }
 
 class CommonFormBookmarkHanger extends ImmutableComponent {
   render () {
-    return <div className={css(
-      commonStyles.flyoutDialog,
+    return <FlyoutDialog custom={[
       styles.commonForm,
       styles.commonFormBookmarkHanger
-    )} {...this.props} />
+    ]}>
+      {this.props.children}
+    </FlyoutDialog>
   }
 }
 
@@ -139,8 +142,10 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.dialogWidth,
     minWidth: '310px',
     height: 'auto',
-    maxHeight: '100vh', // #8634: commonStyles.flyoutDialog,
-    userSelect: 'none'
+    userSelect: 'none',
+
+    // #8634: commonStyles.flyoutDialog,
+    maxHeight: '100vh'
 
     // Need a general solution
     // See: #7930
diff --git a/app/renderer/components/common/flyoutDialog.js b/app/renderer/components/common/flyoutDialog.js
new file mode 100644
index 00000000000..a95b4f68053
--- /dev/null
+++ b/app/renderer/components/common/flyoutDialog.js
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../immutableComponent')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
+class FlyoutDialog extends ImmutableComponent {
+  render () {
+    return <div
+      data-l10n-id={this.props.l10nId}
+      data-test-id={this.props.testId}
+      onKeyDown={this.props.onKeyDown}
+      onClick={this.props.onClick}
+      className={css(styles.flyoutDialog, this.props.custom)}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
+const styles = StyleSheet.create({
+  flyoutDialog: {
+    background: globalStyles.color.toolbarBackground,
+    borderRadius: globalStyles.radius.borderRadius,
+    boxShadow: globalStyles.shadow.flyoutDialogBoxShadow,
+    color: '#000',
+    fontSize: '13px',
+
+    // Issue #7949
+    padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
+    position: 'absolute',
+    top: globalStyles.spacing.dialogTopOffset,
+
+    // Issue #7930
+    boxSizing: 'border-box',
+    maxWidth: '600px',
+    maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
+  }
+})
+
+module.exports = FlyoutDialog
diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
index 05a1c55ae40..5131d85ffae 100644
--- a/app/renderer/components/common/messageBox.js
+++ b/app/renderer/components/common/messageBox.js
@@ -9,6 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('./dialog')
+const FlyoutDialog = require('./flyoutDialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('./switchControl')
 
@@ -125,8 +126,8 @@ class MessageBox extends React.Component {
 
   render () {
     return <Dialog testId='messageBoxDialog'>
-      <div className={css(commonStyles.flyoutDialog)}
-        data-test-id={'msgBoxTab_' + this.props.tabId}
+      <FlyoutDialog
+        testId={'msgBoxTab_' + this.props.tabId}
         onKeyDown={this.onKeyDown}
       >
         <div className={css(styles.title)} data-test-id='msgBoxTitle'>
@@ -155,7 +156,7 @@ class MessageBox extends React.Component {
             {this.messageBoxButtons}
           </div>
         </div>
-      </div>
+      </FlyoutDialog>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
index 48bacde2e24..553851afc93 100644
--- a/app/renderer/components/main/braveryPanel.js
+++ b/app/renderer/components/main/braveryPanel.js
@@ -9,6 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
+const FlyoutDialog = require('../common/flyoutDialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {FormDropdown} = require('../common/dropdown')
@@ -37,7 +38,6 @@ const urlUtil = require('../../../../js/lib/urlutil')
 
 // Styles
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 const closeButton = require('../../../../img/toolbar/braveryPanel_btn.svg')
 
 class BraveryPanel extends React.Component {
@@ -249,13 +249,13 @@ class BraveryPanel extends React.Component {
     })
 
     return <Dialog onHide={this.onHide} testId='braveryPanelContainer' isClickDismiss>
-      <div className={css(
-        commonStyles.flyoutDialog,
+      <FlyoutDialog custom={[
         styles.braveryPanel,
         this.props.isCompactBraveryPanel && styles.braveryPanel_compact
-      )}
+      ]}
         onClick={(e) => e.stopPropagation()}
-        data-test-id={this.props.isCompactBraveryPanel ? 'braveryPanelCompact' : 'braveryPanel'}>
+        testId={this.props.isCompactBraveryPanel ? 'braveryPanelCompact' : 'braveryPanel'}
+      >
         {
           this.props.isCompactBraveryPanel
           ? this.compactBraveryPanelHeader
@@ -649,7 +649,7 @@ class BraveryPanel extends React.Component {
             </div>
           </div>
         </section>
-      </div>
+      </FlyoutDialog>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/main/releaseNotes.js b/app/renderer/components/main/releaseNotes.js
index a5b3cab74f9..5501197857b 100644
--- a/app/renderer/components/main/releaseNotes.js
+++ b/app/renderer/components/main/releaseNotes.js
@@ -9,13 +9,11 @@ const Immutable = require('immutable')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
+const FlyoutDialog = require('../common/flyoutDialog')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
 
-// Styles
-const commonStyles = require('../styles/commonStyles')
-
 class ReleaseNotes extends React.Component {
   constructor (props) {
     super(props)
@@ -41,22 +39,15 @@ class ReleaseNotes extends React.Component {
   }
 
   render () {
-    const className = css(
-      commonStyles.flyoutDialog,
-      styles.releaseNotes
-    )
-
     return <Dialog onHide={this.onHide} isClickDismiss>
-      <div className={className} onClick={this.onClick}>
+      <FlyoutDialog className={styles.releaseNotes} onClick={this.onClick}>
         <h1 className={css(styles.header)}>{this.props.name}</h1>
         <div>{this.props.notes}</div>
-      </div>
+      </FlyoutDialog>
     </Dialog>
   }
 }
 
-module.exports = ReduxComponent.connect(ReleaseNotes)
-
 const styles = StyleSheet.create({
   releaseNotes: {
     width: 'auto',
@@ -69,3 +60,5 @@ const styles = StyleSheet.create({
     marginBottom: '10px'
   }
 })
+
+module.exports = ReduxComponent.connect(ReleaseNotes)
diff --git a/app/renderer/components/main/siteInfo.js b/app/renderer/components/main/siteInfo.js
index 5fe9ac28acb..425f1458394 100644
--- a/app/renderer/components/main/siteInfo.js
+++ b/app/renderer/components/main/siteInfo.js
@@ -9,6 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
+const FlyoutDialog = require('../common/flyoutDialog')
 const Button = require('../common/button')
 
 // Actions
@@ -28,7 +29,6 @@ const urlUtil = require('../../../../js/lib/urlutil')
 
 // Styles
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 
 class SiteInfo extends React.Component {
   constructor (props) {
@@ -242,12 +242,11 @@ class SiteInfo extends React.Component {
 
   render () {
     return <Dialog testId='siteInfoDialog' onHide={this.onHide} className='siteInfo' isClickDismiss>
-      <div onClick={(e) => e.stopPropagation()}
-        className={css(
-          commonStyles.flyoutDialog,
+      <FlyoutDialog onClick={(e) => e.stopPropagation()}
+        custom={[
           styles.siteInfo,
           (this.props.isBlockedRunInsecureContent || this.props.runInsecureContent) && styles.siteInfo_large
-      )}>
+        ]}>
         {
           this.secureIcon
         }
@@ -257,7 +256,7 @@ class SiteInfo extends React.Component {
         {
           this.connectionInfo
         }
-      </div>
+      </FlyoutDialog>
     </Dialog>
   }
 }
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 466a9495efb..18d0e4fe1ac 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -47,23 +47,6 @@ const styles = StyleSheet.create({
     fontSize: globalStyles.spacing.textAreaFontSize
   },
 
-  // Dialogs
-  flyoutDialog: {
-    background: globalStyles.color.toolbarBackground,
-    borderRadius: globalStyles.radius.borderRadius,
-    boxShadow: globalStyles.shadow.flyoutDialogBoxShadow,
-    color: '#000',
-    fontSize: '13px',
-    // Issue #7949
-    padding: `${globalStyles.spacing.dialogInsideMargin} 30px`,
-    position: 'absolute',
-    top: globalStyles.spacing.dialogTopOffset,
-    // Issue #7930
-    boxSizing: 'border-box',
-    maxWidth: '600px',
-    maxHeight: `calc(80vh - ${globalStyles.spacing.downloadsBarHeight})`
-  },
-
   // itemList.less
   listItem: {
     cursor: 'default',