From c4ced0a6dbb4c61b8c0178eb4f24ea2d4adb7a7d Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 4 Jul 2017 21:46:00 +0900
Subject: [PATCH] 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 https://github.com/brave/browser-laptop/pull/9299#issue-234116287
---
 .../components/navigation/navigationBar.js    |  2 +-
 .../components/navigation/publisherToggle.js  |  1 +
 app/renderer/components/navigation/urlBar.js  | 23 ++----------
 .../components/styles/commonStyles.js         | 35 ++++++++++++-------
 4 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 5413ce271b6..7ec4758a0e6 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/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,
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index 44719b8b5de..85d1a68773f 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/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
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index e76a1d2aec0..913e3300e81 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/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})`,
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 7a9c3bdeb68..233e14ef159 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/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
   }
 })