Add buttonContainer on commonStyles.js

Setting navigator__buttonContainer_outsideOfURLbar
to apply border to the bookmark button and publisher button only,

normalize size, placement, draggability etc of
- navigator__buttonContainer
- navigator__urlbarForm__buttonContainer_showNoScriptInfo
- navigator__urlbarForm__urlbarIconContainer

Test Plan: available on #9299 (comment)

app/renderer/components/navigation/navigationBar.js

@@ -189,7 +189,7 @@ class NavigationBar extends React.Component {
         !this.props.titleMode
         ? <span className={cx({
           bookmarkButtonContainer: true,
-          [css(commonStyles.navigator__buttonContainer, styles.navigator__buttonContainer_bookmarkButtonContainer)]: true
+          [css(commonStyles.navigator__buttonContainer, commonStyles.navigator__buttonContainer_outsideOfURLbar, styles.navigator__buttonContainer_bookmarkButtonContainer)]: true
         })}>
           <button className={cx({
             normalizeButton: true,

app/renderer/components/navigation/publisherToggle.js

@@ -75,6 +75,7 @@ class PublisherToggle extends React.Component {
       data-test-verified={this.props.isVerifiedPublisher}
       className={css(
         commonStyles.navigator__buttonContainer,
+        commonStyles.navigator__buttonContainer_outsideOfURLbar,
         styles.navigator__buttonContainer_addPublisherButtonContainer,
       )}>
       <BrowserButton

app/renderer/components/navigation/urlBar.js

@@ -43,6 +43,7 @@ const publisherUtil = require('../../../common/lib/publisherUtil')
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
 
 const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
 
 class UrlBar extends React.Component {
   constructor (props) {
@@ -491,7 +492,7 @@ class UrlBar extends React.Component {
       id='urlbar'>
       <div className={cx({
         urlbarIconContainer: true,
-        [css(styles.urlbarForm__urlbarIconContainer)]: true
+        [css(commonStyles.navigator__urlbarForm__urlbarIconContainer)]: true
       })}>
         <UrlBarIcon
           titleMode={this.props.titleMode}
@@ -535,7 +536,7 @@ class UrlBar extends React.Component {
       {
         !this.props.showNoScriptInfo
         ? null
-        : <span className={css(styles.noScriptContainer)}
+        : <span className={css(commonStyles.navigator__urlbarForm__buttonContainer_showNoScriptInfo)}
           onClick={this.onNoScript}>
           <span
             data-l10n-id='noScriptButton'
@@ -588,17 +589,6 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: '0 !important'
   },
 
-  // Create 25x25 square and place .urlbarIcon at the center of it
-  urlbarForm__urlbarIconContainer: {
-    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
-  },
-
   urlbarForm__titleBar: {
     display: 'inline-block',
     color: globalStyles.color.chromeText,
@@ -613,13 +603,6 @@ const styles = StyleSheet.create({
     fontWeight: 600
   },
 
-  noScriptContainer: {
-    display: 'flex',
-    padding: '5px',
-    marginRight: '-8px',
-    WebkitAppRegion: 'drag'
-  },
-
   noScriptButton: {
     WebkitAppRegion: 'no-drag',
     backgroundImage: `url(${iconNoScript})`,

app/renderer/components/styles/commonStyles.js

@@ -5,6 +5,20 @@
 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',
@@ -200,19 +214,16 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  // #9283
-  // Create 25x25 squares and place the buttons at the center of each container
-  navigator__buttonContainer: {
+  // See urlBar.js and publisherToggle.js
+  // TODO: rename buttonContainer and urlbarIconContainer
+  navigator__buttonContainer: buttonContainer,
+  navigator__urlbarForm__buttonContainer_showNoScriptInfo: buttonContainer,
+  navigator__urlbarForm__urlbarIconContainer: buttonContainer,
+
+  // Add border to the bookmark button and publisher button only
+  navigator__buttonContainer_outsideOfURLbar: {
     border: `1px solid ${globalStyles.color.urlBarOutline}`,
-    borderRadius: globalStyles.radius.borderRadiusURL,
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    height: globalStyles.navigationBar.urlbarForm.height,
-    width: globalStyles.navigationBar.urlbarForm.height,
-    minHeight: globalStyles.navigationBar.urlbarForm.height,
-    minWidth: globalStyles.navigationBar.urlbarForm.height,
-    WebkitAppRegion: 'no-drag'
+    borderRadius: globalStyles.radius.borderRadiusURL
   }
 })