Private New Tab Page now shows only applicable Mac / non-Mac keys to open Tor

Also corrects the actual keys in the string

Fix brave/brave-browser#1688

Author: petemill

components/brave_new_tab_ui/components/privateTab/privateTab.tsx

@@ -17,14 +17,14 @@ import {
   Text,
   PrivateImage,
   DuckDuckGoImage,
-  TorLockImage,
   Separator,
   FakeButton,
   Link
 } from 'brave-ui/features/newTab'
 
 // Components
 import { Toggle } from 'brave-ui/features/shields'
+import TorContent from './torContent'
 
 // Helpers
 import { getLocale } from '../../../common/locale'
@@ -74,12 +74,7 @@ export default class PrivateTab extends React.PureComponent<Props, {}> {
           </ButtonGroup>
         </Box>
         <Box>
-          <Content>
-            <TorLockImage />
-            <SubTitle>{getLocale('boxTorLabel')}</SubTitle>
-            <Title>{getLocale('boxTorTitle')}</Title>
-            <Text>{getLocale('boxTorText2')}</Text>
-          </Content>
+          <TorContent />
           <Separator />
           <FakeButton href='https://support.brave.com/hc/en-us/articles/360018121491' target='_blank'>
             {getLocale('boxTorButton')}

components/brave_new_tab_ui/components/privateTab/qwantTab.tsx

@@ -8,17 +8,15 @@ import * as React from 'react'
 import {
   Grid2Columns,
   Box,
-  Content,
   HeaderBox,
   Title,
   SubTitle,
   Text,
   TorImage,
-  TorLockImage,
   Separator,
   FakeButton
 } from 'brave-ui/features/newTab'
-
+import TorContent from './torContent'
 // Helpers
 import { getLocale } from '../../../common/locale'
 
@@ -40,12 +38,7 @@ export default class QwantTab extends React.PureComponent<{}, {}> {
           </div>
         </HeaderBox>
         <Box>
-          <Content>
-            <TorLockImage />
-            <SubTitle>{getLocale('boxTorLabel')}</SubTitle>
-            <Title>{getLocale('boxTorTitle')}</Title>
-            <Text>{getLocale('boxTorText2')}</Text>
-          </Content>
+          <TorContent />
           <Separator />
           <FakeButton
             href='https://support.brave.com/hc/en-us/articles/360018121491'

components/brave_new_tab_ui/components/privateTab/torContent.tsx

@@ -0,0 +1,29 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at http://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+// Feature-specific components
+import {
+  Content,
+  Title,
+  SubTitle,
+  Text,
+  TorLockImage
+} from 'brave-ui/features/newTab'
+// Helpers
+import { getLocale } from '../../../common/locale'
+
+const isMac = window.navigator.userAgent.includes('Macintosh')
+const torKeyboardShortcutText = isMac ? '⌥⌘N' : 'Alt+Shift+N'
+
+export default function TorContent () {
+  return (
+    <Content>
+      <TorLockImage />
+      <SubTitle>{getLocale('boxTorLabel')}</SubTitle>
+      <Title>{getLocale('boxTorTitle')}</Title>
+      <Text>{getLocale('boxTorText2', { key: torKeyboardShortcutText })}</Text>
+    </Content>
+  )
+}

components/resources/brave_components_resources.grd

@@ -188,7 +188,7 @@
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_LABEL_2" desc="">This Private Window is much more private</message>
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_TITLE" desc="">with Tor</message>
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_TEXT_1" desc="">Tor hides your IP address from the sites you visit, by routing your browsing through several Tor servers before it reaches your destination. These connections are encrypted, so your ISP or employer can’t see which sites you’re visiting either. Tor can slow down browsing and some sites might not work at all.</message>
-      <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_TEXT_2" desc="">Using Private Tabs only changes what Brave does on your device — it doesn't change anyone else's behavior. Tor hides your IP address from the sites you visit, and hides the sites you visit from your ISP or your employer. Open a Private Window with Tor from the menu, or with Alt+Shift+N or Option+Shift+N.</message>
+      <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_TEXT_2" desc="">Using Private Tabs only changes what Brave does on your device — it doesn't change anyone else's behavior. Tor hides your IP address from the sites you visit, and hides the sites you visit from your ISP or your employer. Open a Private Window with Tor from the menu, or with {{ key }}.</message>
       <message name="IDS_BRAVE_PRIVATE_NEW_TAB_BOX_TOR_BUTTON" desc="">Learn more about Tor in Brave</message>
 
       <!-- WebUI adblock resources -->