implement new Tor New Identity UX

fix #13658

Test Plan:
1. open new private tab
2. go to check.torproject.org and open shields
3. click 'new circuit' button in shields
4. it should reload the page and show a new IP
5. open shields again, click the info circle next to 'new circuit'
5. it should open a FAQ page

app/browser/menu.js

@@ -50,7 +50,6 @@ const createFileSubmenu = () => {
   const submenu = [
     CommonMenu.newTabMenuItem(),
     CommonMenu.newPrivateTabMenuItem(),
-    CommonMenu.newTorIdentityMenuItem(),
     CommonMenu.newPartitionedTabMenuItem(),
     CommonMenu.newWindowMenuItem(),
     CommonMenu.separatorMenuItem,

app/common/commonMenu.js

@@ -100,15 +100,6 @@ module.exports.newPrivateTabMenuItem = () => {
   }
 }
 
-module.exports.newTorIdentityMenuItem = () => {
-  return {
-    label: locale.translation('newTorIdentity'),
-    click: function (item, focusedWindow) {
-      appActions.setTorNewIdentity()
-    }
-  }
-}
-
 module.exports.newPartitionedTabMenuItem = () => {
   const newPartitionedMenuItem = (partitionNumber) => ({
     label: `${locale.translation('newSessionTab')} ${partitionNumber}`,

app/extensions/brave/locales/en-US/bravery.properties

@@ -14,6 +14,7 @@ blockAllFingerprinting=Block all fingerprinting
 blockPopups=Block Popups
 cookieControl=Cookie Control
 editBraveryGlobalSettings=Edit default shield settings…
+newTorCircuit=New Tor circuit for this site…
 braveryTorWarning=For your protection, some sites will not work fully in Tor mode.
 fingerprintingBlocked={[plural(blockedFingerprintCount)]}
 fingerprintingBlocked[one]=Fingerprinting Method Blocked

app/extensions/brave/locales/en-US/menu.properties

@@ -101,7 +101,6 @@ new=New
 newPrivateTab=New Private Tab
 newSessionTab=New Session Tab
 newTab=New Tab
-newTorIdentity=New Tor Identity
 newWindow=New Window
 openAllInTabs=Open all in tabs
 openFile=Open File…

app/renderer/components/main/braveryPanel.js

@@ -57,8 +57,10 @@ class BraveryPanel extends React.Component {
     this.onToggleHTTPSE = this.onToggleSiteSetting.bind(this, 'httpsEverywhere')
     this.onToggleFp = this.onToggleSiteSetting.bind(this, 'fingerprintingProtection')
     this.onReload = this.onReload.bind(this)
+    this.onNewTorCircuit = this.onNewTorCircuit.bind(this)
     this.onEditGlobal = this.onEditGlobal.bind(this)
     this.onInfoClick = this.onInfoClick.bind(this)
+    this.onTorInfoClick = this.onTorInfoClick.bind(this)
   }
 
   onToggleAdsAndTracking (e) {
@@ -104,6 +106,10 @@ class BraveryPanel extends React.Component {
     appActions.loadURLRequested(this.props.tabId, this.props.lastCommittedURL)
   }
 
+  onNewTorCircuit () {
+    appActions.setTorNewIdentity(this.props.tabId, this.props.lastCommittedURL)
+  }
+
   onEditGlobal () {
     appActions.createTabRequested({
       url: 'about:preferences#shields'
@@ -117,6 +123,15 @@ class BraveryPanel extends React.Component {
     })
   }
 
+  onTorInfoClick () {
+    this.onHide()
+    appActions.createTabRequested({
+      url: config.torCircuitInfoUrl,
+      isPrivate: true,
+      isTor: true
+    })
+  }
+
   onHide () {
     windowActions.setBraveryPanelDetail()
   }
@@ -627,8 +642,8 @@ class BraveryPanel extends React.Component {
           {
             this.props.isTor
             ? <div className={css(
-              styles.braveryPanel__body__footer__edit,
-              this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__footer__edit
+              styles.braveryPanel__body__footer__tor,
+              this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__footer__tor
             )}
               data-l10n-id='braveryTorWarning'
             />
@@ -659,6 +674,24 @@ class BraveryPanel extends React.Component {
               <span className='fa fa-repeat' />
             </div>
           </div>
+          {
+            this.props.isTor
+              ? <div>
+                <span className={css(
+                  styles.braveryPanel__body__footer__tor,
+                  styles.braveryPanel__body__footer__edit_clickable,
+                  this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__footer__tor
+                )}
+                  onClick={this.onNewTorCircuit}
+                  data-l10n-id='newTorCircuit'
+                />
+                <span className={globalStyles.appIcons.question}
+                  title={config.torCircuitInfoUrl}
+                  onClick={this.onTorInfoClick}
+                />
+              </div>
+            : null
+          }
         </section>
       </FlyoutDialog>
     </Dialog>
@@ -964,6 +997,9 @@ const styles = StyleSheet.create({
   braveryPanel__body__footer__edit: {
     marginRight: '1rem'
   },
+  braveryPanel__body__footer__tor: {
+    marginTop: '10px'
+  },
   braveryPanel__body__footer__edit_clickable: {
     cursor: 'pointer'
   },
@@ -1024,6 +1060,10 @@ const styles = StyleSheet.create({
   braveryPanel_compact__body__footer__edit: {
     marginBottom: editGlobalMarginBottom
   },
+  braveryPanel_compact__body__footer__tor: {
+    maxWidth: '300px',
+    marginLeft: '4px'
+  },
 
   // controlWrapper - Common
   braveryPanel__body__advanced__control: {

js/actions/appActions.js

@@ -1971,9 +1971,11 @@ const appActions = {
     })
   },
 
-  setTorNewIdentity: function () {
+  setTorNewIdentity: function (tabId, url) {
     dispatch({
-      actionType: appConstants.APP_SET_TOR_NEW_IDENTITY
+      actionType: appConstants.APP_SET_TOR_NEW_IDENTITY,
+      tabId,
+      url
     })
   },
 

js/constants/config.js

@@ -19,6 +19,7 @@ module.exports = {
     zoomLevels: [-3.75, -3.35, -2.5, -1.65, -1.25, -0.5, -0.25, 0, 0.25, 0.5, 1.25, 2.5, 3.75, 5, 7.5, 10, 15, 20]
   },
   fingerprintingInfoUrl: 'https://github.com/brave/browser-laptop/wiki/Fingerprinting-Protection-Mode',
+  torCircuitInfoUrl: 'https://github.com/brave/browser-laptop/wiki/Brave-Tor-Support#what-does-the-new-tor-circuit-for-this-site-button-do',
   maxClosedFrames: 100,
   menu: {
     // History -> Recently closed frame list

js/stores/appStore.js

@@ -392,11 +392,7 @@ const handleAppAction = (action) => {
       filtering.checkTorAvailable(action.cb)
       break
     case appConstants.APP_SET_TOR_NEW_IDENTITY:
-      const activeTab = tabState.getActiveTab(appState)
-      if (activeTab) {
-        filtering.setTorNewIdentity(activeTab.get('url'),
-                                    activeTab.get('tabId'))
-      }
+      filtering.setTorNewIdentity(action.url, action.tabId)
       break
     case appConstants.APP_ON_CLEAR_BROWSING_DATA:
       const defaults = appState.get('clearBrowsingDataDefaults')