Polish PublisherToggle

- Set navigationBarButtonContainer for PublisherToogle in the same way as for the other buttons on navigationBar.js
- Rename publisherButton to publisherToggle

Author: Suguru Hirahara

app/renderer/components/navigation/navigationBar.js

@@ -174,7 +174,13 @@ class NavigationBar extends React.Component {
       <UrlBar titleMode={this.props.titleMode} />
       {
         this.props.showPublisherToggle
-        ? <PublisherToggle />
+        ? (
+          <NavigationBarButtonContainer isSquare isNested
+            containerFor={styles.navigationBar__urlBarEnd}
+          >
+            <PublisherToggle />
+          </NavigationBarButtonContainer>
+          )
         : null
       }
     </div>
@@ -213,10 +219,23 @@ const styles = StyleSheet.create({
   },
 
   // Applies for the first urlBar nested button
+  // currently for BookmarkButton
   navigationBar__urlBarStart: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
+  },
+
+ // Applies for the end urlBar nested button
+ // currently for PublisherToggle
+  navigationBar__urlBarEnd: {
+    borderLeft: 'none',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+
+    // TODO (Suguru): Refactor navigationBar.less to remove !important.
+    // See the wildcard style under '#navigationBar'.
+    animation: 'none !important'
   }
 })
 

app/renderer/components/navigation/publisherToggle.js

@@ -8,7 +8,6 @@ const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
 const {NormalizedButton} = require('../common/browserButton')
 
 // Actions
@@ -67,57 +66,43 @@ class PublisherToggle extends React.Component {
   }
 
   render () {
-    return <NavigationBarButtonContainer isSquare isNested
-      containerFor={styles.publisherButtonContainer}>
-      <NormalizedButton custom={[
-        (!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundVerified,
-        (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundVerified,
-        (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundUnverified,
-        (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundUnverified,
-        styles.publisherButtonContainer__button
-      ]}
-        l10nId={this.l10nString}
-        testId='publisherButton'
-        testAuthorized={this.props.isEnabledForPaymentsPublisher}
-        testVerified={this.props.isVerifiedPublisher}
-        onClick={this.onAuthorizePublisher}
-      />
-    </NavigationBarButtonContainer>
+    return <NormalizedButton custom={[
+      (!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherToggle_noFundVerified,
+      (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherToggle_fundVerified,
+      (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherToggle_noFundUnverified,
+      (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherToggle_fundUnverified,
+      styles.publisherToggle
+    ]}
+      l10nId={this.l10nString}
+      testId='publisherToggle'
+      testAuthorized={this.props.isEnabledForPaymentsPublisher}
+      testVerified={this.props.isVerifiedPublisher}
+      onClick={this.onAuthorizePublisher}
+    />
   }
 }
 
 const styles = StyleSheet.create({
-  // cf: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
-  publisherButtonContainer: {
-    borderLeft: 'none',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-
-    // TODO (Suguru): Refactor navigationBar.less to remove !important.
-    // See the wildcard style under '#navigationBar'.
-    animation: 'none !important'
-  },
-
-  publisherButtonContainer__button: {
+  publisherToggle: {
     backgroundSize: '18px 18px',
     width: '100%',
     height: '100%'
   },
 
-  publisherButtonContainer__button_noFundVerified: {
+  publisherToggle_noFundVerified: {
     // 1px added due to the check mark
     background: `url(${noFundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  publisherButtonContainer__button_fundVerified: {
+  publisherToggle_fundVerified: {
     background: `url(${fundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  publisherButtonContainer__button_noFundUnverified: {
+  publisherToggle_noFundUnverified: {
     background: `url(${noFundUnverifiedPublisherImage}) 50% no-repeat`
   },
 
-  publisherButtonContainer__button_fundUnverified: {
+  publisherToggle_fundUnverified: {
     background: `url(${fundUnverifiedPublisherImage}) 50% no-repeat`
   }
 })

test/unit/app/renderer/components/navigation/publisherToggleTest.js

@@ -92,15 +92,15 @@ describe('PublisherToggle component', function () {
       appStore.state = fakeAppState.setIn(['locationInfo', 'https://brave.com', 'exclude'], true)
 
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-authorized'], false)
     })
 
     it('Show as verified if publisher is shown as verified on locationInfo list', function () {
       windowStore.state = defaultWindowStore
       appStore.state = fakeAppState
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-verified'], true)
     })
   })
@@ -111,7 +111,7 @@ describe('PublisherToggle component', function () {
       appStore.state = fakeAppState.setIn(['siteSettings', 'https?://brave.com', 'ledgerPayments'], true)
 
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-authorized'], true)
     })