From feedcdcce1670c4089fd0464948ed96964b9ab0f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 4 Jul 2017 21:46:58 +0900
Subject: [PATCH] Rename navigationButtonContainer -> navbarButtonContainer etc

- Rename buttonContainer -> rectangleContainer
- Remove 'Button' from navigationButton_*
---
 .../components/navigation/homeButton.js       | 24 ++++++------
 .../components/navigation/navigationBar.js    | 37 +++++++++---------
 .../components/navigation/navigator.js        |  4 +-
 .../components/navigation/publisherToggle.js  |  4 +-
 app/renderer/components/navigation/urlBar.js  |  4 +-
 .../components/styles/commonStyles.js         | 39 +++++++++----------
 6 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
index 226e5315528..fb2cee1530b 100644
--- a/app/renderer/components/navigation/homeButton.js
+++ b/app/renderer/components/navigation/homeButton.js
@@ -55,19 +55,17 @@ class HomeButton extends ImmutableComponent {
       })
   }
 
+  // BEM Level: navigationBar__buttonContainer
   render () {
-    // BEM Level: navigator__navigationButtonContainer
-    return <span className='navigationButtonContainer'>
-      <button className={cx({
-        normalizeButton: true,
-        [css(styles.navigationButton, styles.navigationButton_homeButton)]: true
-      })}
-        data-test-id='homeButton'
-        data-l10n-id='homeButton'
-        ref={(node) => { this.homeButton = node }}
-        onClick={this.onHome}
-      />
-    </span>
+    return <button className={cx({
+      normalizeButton: true,
+      [css(styles.navigationButton, styles.navigationButton_home)]: true
+    })}
+      data-test-id='homeButton'
+      data-l10n-id='homeButton'
+      ref={(node) => { this.homeButton = node }}
+      onClick={this.onHome}
+    />
   }
 }
 
@@ -84,7 +82,7 @@ const styles = StyleSheet.create({
     padding: 0
   },
 
-  navigationButton_homeButton: {
+  navigationButton_home: {
     background: `url(${homeButton}) center no-repeat`,
     backgroundSize: `16px 16px`
   }
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index a7cc35f926c..bbfa78163ba 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -88,22 +88,22 @@ class NavigationBar extends React.Component {
       this.props.bookmarked
   }
 
-  // BEM Level: navigationBar__navigationButtonContainer
+  // BEM Level: navigationBar__buttonContainer
   get stopButton () {
     return <button className={cx({
       normalizeButton: true,
-      [css(styles.navigationButton, styles.navigationButton_stopButton)]: true
+      [css(styles.navigationButton, styles.navigationButton_stop)]: true
     })}
       data-l10n-id='stopButton'
       onClick={this.onStop}
     />
   }
 
-  // BEM Level: navigationBar__navigationButtonContainer
+  // BEM Level: navigationBar__buttonContainer
   get reloadButton () {
     return <LongPressButton className={cx({
       normalizeButton: true,
-      [css(styles.navigationButton, styles.navigationButton_reloadButton)]: true
+      [css(styles.navigationButton, styles.navigationButton_reload)]: true
     })}
       l10nId='reloadButton'
       testId='reloadButton'
@@ -115,14 +115,14 @@ class NavigationBar extends React.Component {
   // BEM Level: navigationBar
   get bookmarkButtonContainer () {
     return <span className={css(
-      commonStyles.navigationBar__buttonContainer,
-      commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
-      styles.navigationBar__buttonContainer_bookmarkButtonContainer
+      commonStyles.rectangleContainer,
+      commonStyles.rectangleContainer_outsideOfurlbarForm,
+      styles.navigationBar__buttonContainer_bookmark
     )}>
       <button className={cx({
         normalizeButton: true,
         withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-        [css(styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
+        [css(styles.navigationBar__buttonContainer_bookmark__button, this.bookmarked && styles.navigationBar__buttonContainer_bookmark__button_remove)]: true
       })}
         data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
         data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
@@ -209,8 +209,8 @@ class NavigationBar extends React.Component {
         this.props.titleMode
         ? null
         : <span className={css(
-            commonStyles.navigationButtonContainer,
-            styles.navigationBar__navigationButtonContainer,
+            commonStyles.navbarButtonContainer,
+            styles.navigationBar__buttonContainer,
           )}>
           {
             this.props.isLoading
@@ -222,8 +222,8 @@ class NavigationBar extends React.Component {
       {
         this.props.showHomeButton
         ? <span className={css(
-            commonStyles.navigationButtonContainer,
-            styles.navigationBar__navigationButtonContainer,
+            commonStyles.navbarButtonContainer,
+            styles.navigationBar__buttonContainer,
           )}>
           <HomeButton activeTabId={this.props.activeTabId} />
         </span>
@@ -278,7 +278,7 @@ const styles = StyleSheet.create({
     justifyContent: 'initial'
   },
 
-  navigationBar__navigationButtonContainer: {
+  navigationBar__buttonContainer: {
     width: globalStyles.navigationBar.navigationButtonContainer.width
   },
 
@@ -294,31 +294,30 @@ const styles = StyleSheet.create({
     padding: 0
   },
 
-  navigationButton_stopButton: {
+  navigationButton_stop: {
     background: `url(${stopLoadingButton}) center no-repeat`,
     backgroundSize: '11px 11px'
   },
 
-  navigationButton_reloadButton: {
+  navigationButton_reload: {
     background: `url(${reloadButton}) center no-repeat`,
     backgroundSize: '13px 13px'
   },
 
-  // cf: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
-  navigationBar__buttonContainer_bookmarkButtonContainer: {
+  navigationBar__buttonContainer_bookmark: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
 
-  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
+  navigationBar__buttonContainer_bookmark__button: {
     background: `url(${bookmarkButton}) center no-repeat`,
     backgroundSize: '14px 14px',
     width: '100%',
     height: '100%'
   },
 
-  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
+  navigationBar__buttonContainer_bookmark__button_remove: {
     background: `url(${bookmarkedButton}) center no-repeat`
   }
 })
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index 8df48614f34..3cc88e05e57 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -188,7 +188,7 @@ class Navigator extends React.Component {
         : 'navigationBackButton'
       }
       className={css(
-        commonStyles.navigationButtonContainer,
+        commonStyles.navbarButtonContainer,
         styles.topLevelStartButtonContainer,
         !this.props.canGoBack && styles.topLevelStartButtonContainer_disabled
       )}
@@ -221,7 +221,7 @@ class Navigator extends React.Component {
         : 'navigationForwardButton'
       }
       className={css(
-        commonStyles.navigationButtonContainer,
+        commonStyles.navbarButtonContainer,
         styles.topLevelStartButtonContainer,
         !this.props.canGoForward && styles.topLevelStartButtonContainer_disabled
       )}
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index f97bd4b78e6..cc533ea7a03 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -76,8 +76,8 @@ class PublisherToggle extends React.Component {
       data-test-authorized={this.props.isEnabledForPaymentsPublisher}
       data-test-verified={this.props.isVerifiedPublisher}
       className={css(
-        commonStyles.navigationBar__buttonContainer,
-        commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
+        commonStyles.rectangleContainer,
+        commonStyles.rectangleContainer_outsideOfurlbarForm,
         styles.publisherButtonContainer
       )}>
       <button className={cx({
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 60bdebed0fa..fbdd1fb9bf0 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -463,7 +463,7 @@ class UrlBar extends React.Component {
 
   // BEM Level: urlbarForm__buttonContainer_showNoScript
   get noScriptInfo () {
-    return <span className={css(commonStyles.urlbarForm__buttonContainer_noScript)}
+    return <span className={css(commonStyles.rectangleContainer)}
       onClick={this.onNoScript}>
       <span className={css(styles.noScript__button)}
         data-l10n-id='noScriptButton'
@@ -569,7 +569,7 @@ class UrlBar extends React.Component {
       })}
       action='#'
       id='urlbar'>
-      <div className={css(commonStyles.urlbarForm__urlbarIconContainer)}>
+      <div className={css(commonStyles.rectangleContainer)}>
         <UrlBarIcon titleMode={this.props.titleMode} />
       </div>
       {
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 65ce560c9bb..896000a0494 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -5,20 +5,6 @@
 const {StyleSheet} = require('aphrodite')
 const globalStyles = require('./global')
 
-// #9283
-// Create 25x25 squares and place the buttons at the center of each container
-const buttonContainer = {
-  boxSizing: 'border-box',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  height: globalStyles.navigationBar.urlbarForm.height,
-  width: globalStyles.navigationBar.urlbarForm.height,
-  minHeight: globalStyles.navigationBar.urlbarForm.height,
-  minWidth: globalStyles.navigationBar.urlbarForm.height,
-  WebkitAppRegion: 'no-drag'
-}
-
 const styles = StyleSheet.create({
   formControl: {
     background: '#fff',
@@ -214,19 +200,30 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  // See navigationBar.js and urlBar.js
-  // TODO: rename buttonContainer and urlbarIconContainer
-  navigationBar__buttonContainer: buttonContainer,
-  urlbarForm__buttonContainer_noScript: buttonContainer,
-  urlbarForm__urlbarIconContainer: buttonContainer,
+  // #9283
+  // Create 25x25 squares and place the buttons at the center of each container
+  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
+  rectangleContainer: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.navigationBar.urlbarForm.height,
+    minHeight: globalStyles.navigationBar.urlbarForm.height,
+    minWidth: globalStyles.navigationBar.urlbarForm.height,
+    WebkitAppRegion: 'no-drag'
+  },
 
   // Add border to the bookmark button and publisher button only
-  navigationBar__buttonContainer_outsideOfURLbar: {
+  rectangleContainer_outsideOfurlbarForm: {
     border: `1px solid ${globalStyles.color.urlBarOutline}`,
     borderRadius: globalStyles.radius.borderRadiusURL
   },
 
-  navigationButtonContainer: {
+  navbarButtonContainer: {
+  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+  // and backButton and forwardButton on navigator.js
     display: 'inline-block',
     borderRadius: globalStyles.radius.borderRadiusNavigationButton,
     height: globalStyles.navigationBar.urlbarForm.height,