Address frontend review comments and adapt brave-ui upgrade

components/brave_webtorrent/extension/BUILD.gn

@@ -13,6 +13,7 @@ transpile_web_ui("brave_webtorrent") {
     "background/actions/tabActions.ts",
     "background/actions/webtorrentActions.ts",
     "background/actions/windowActions.ts",
+    "background/api/tabs_api.ts",
     "background/events/tabsEvents.ts",
     "background/events/torrentEvents.ts",
     "background/events/webtorrentEvents.ts",

components/brave_webtorrent/extension/actions/tab_actions.ts

@@ -23,3 +23,7 @@ export const tabRemoved = (tabId: number) => action(types.TAB_REMOVED, {
 export const activeTabChanged = (tabId: number, windowId: number) => action(types.ACTIVE_TAB_CHANGED, {
   tabId, windowId
 })
+
+export const tabRetrieved = (tab: chrome.tabs.Tab) => action(types.TAB_RETRIEVED, {
+  tab
+})

components/brave_webtorrent/extension/background.ts

@@ -3,8 +3,8 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { init } from './background/webtorrent'
-init()
+import './background/store'
+import './background/events/tabsEvents'
+import './background/events/windowsEvents'
 
-require('./background/store')
-require('./background/events/tabsEvents')
-require('./background/events/windowsEvents')
+init()

components/brave_webtorrent/extension/background/api/tabs_api.ts

@@ -0,0 +1,9 @@
+/* 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/. */
+
+export const getTabData = (tabId: number) =>
+  chrome.tabs.get(tabId, (tab: chrome.tabs.Tab) => {
+    const tabActions = require('../actions/tabActions').default
+    tabActions.tabRetrieved(tab)
+  })

components/brave_webtorrent/extension/background/reducers/webtorrent_reducer.ts

@@ -13,6 +13,7 @@ import { File, TorrentState, TorrentsState } from '../../constants/webtorrentSta
 
 // Utils
 import { addTorrent, delTorrent, findTorrent } from '../webtorrent'
+import { getTabData } from '../api/tabs_api'
 
 const focusedWindowChanged = (windowId: number, state: TorrentsState) => {
   return { ...state, currentWindowId: windowId }
@@ -25,11 +26,31 @@ const windowRemoved = (windowId: number, state: TorrentsState) => {
 }
 
 const activeTabChanged = (tabId: number, windowId: number, state: TorrentsState) => {
-  const { activeTabIds } = state
+  const { activeTabIds, torrentStateMap } = state
   activeTabIds[windowId] = tabId
+  if (!torrentStateMap[tabId]) {
+    getTabData(tabId)
+  }
   return { ...state, activeTabIds }
 }
 
+const windowCreated = (window: chrome.windows.Window, state: TorrentsState) => {
+  // update currentWindowId if needed
+  if (window.focused || Object.keys(state.activeTabIds).length === 0) {
+    state = focusedWindowChanged(window.id, state)
+  }
+
+  // update its activeTabId
+  if (window.tabs) {
+    const tab = window.tabs.find((tab: chrome.tabs.Tab) => tab.active)
+    if (tab && tab.id) {
+      state = activeTabChanged(tab.id, window.id, state)
+    }
+  }
+
+  return state
+}
+
 const tabUpdated = (tabId: number, url: string, state: TorrentsState) => {
   const { torrentStateMap, torrentObjMap } = state
   const origTorrentState: TorrentState = torrentStateMap[tabId]
@@ -168,9 +189,7 @@ export const webtorrentReducer = (state: TorrentsState = defaultState, action: a
   const payload = action.payload
   switch (action.type) {
     case windowTypes.types.WINDOW_CREATED:
-      if (payload.window.focused || Object.keys(state.activeTabIds).length === 0) {
-        state = focusedWindowChanged(payload.window.id, state)
-      }
+      state = windowCreated(payload.window, state)
       break
     case windowTypes.types.WINDOW_REMOVED:
       state = windowRemoved(payload.windowId, state)
@@ -179,6 +198,9 @@ export const webtorrentReducer = (state: TorrentsState = defaultState, action: a
       state = focusedWindowChanged(payload.windowId, state)
       break
     case tabTypes.types.ACTIVE_TAB_CHANGED:
+      if (state.currentWindowId === -1) {
+        state = focusedWindowChanged(payload.windowId, state)
+      }
       state = activeTabChanged(payload.tabId, payload.windowId, state)
       break
     case tabTypes.types.TAB_CREATED:
@@ -187,13 +209,27 @@ export const webtorrentReducer = (state: TorrentsState = defaultState, action: a
       }
       break
     case tabTypes.types.TAB_UPDATED:
+      // it's possible to be the first event when browser starts
+      // initialize currentWindowId and its activeTabId if so
+      if (state.currentWindowId === -1) {
+        state = focusedWindowChanged(payload.tab.windowId, state)
+      }
+      if (!state.activeTabIds[state.currentWindowId] && payload.tab.active) {
+        state = activeTabChanged(payload.tab.id, payload.tab.windowId, state)
+      }
+
       if (payload.changeInfo.url) {
         state = tabUpdated(payload.tab.id, payload.changeInfo.url, state)
       }
       break
     case tabTypes.types.TAB_REMOVED:
       state = tabRemoved(payload.tabId, state)
       break
+    case tabTypes.types.TAB_RETRIEVED:
+      if (payload.tab.id && payload.tab.url) {
+        state = tabUpdated(payload.tab.id, payload.tab.url, state)
+      }
+      break
     case torrentTypes.types.WEBTORRENT_PROGRESS_UPDATED:
       state = updateProgress(state, payload.torrent)
       break

components/brave_webtorrent/extension/brave_webtorrent.tsx

@@ -7,6 +7,9 @@ import { render } from 'react-dom'
 import { Provider } from 'react-redux'
 import { Store } from 'react-chrome-redux'
 
+import Theme from 'brave-ui/theme/brave-default'
+import { ThemeProvider } from 'brave-ui/theme'
+
 // Components
 import App from './components/app'
 
@@ -21,7 +24,9 @@ store.ready().then(
   () => {
     render(
       <Provider store={store}>
-      <App />
+        <ThemeProvider theme={Theme}>
+          <App />
+        </ThemeProvider>
       </Provider>,
       document.getElementById('root'))
   })

components/brave_webtorrent/extension/components/app.tsx

@@ -18,6 +18,8 @@ import * as torrentActions from '../actions/webtorrent_actions'
 
 // Assets
 require('../../../styles/webtorrent.less')
+require('../../../fonts/poppins.css')
+require('../../../fonts/muli.css')
 
 interface Props {
   torrentState: TorrentState

components/brave_webtorrent/extension/components/torrentFileList.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react'
 import { Table } from 'brave-ui/components'
-import { Cell, Row } from 'brave-ui/components/dataTables/table/index.tsx'
+import { Cell, Row } from 'brave-ui/components/dataTables/table/index'
 import { Heading } from 'brave-ui/old'
 
 // Constants

components/brave_webtorrent/extension/components/torrentViewerFooter.tsx

@@ -38,7 +38,7 @@ export default class TorrentViewerFooter extends React.PureComponent<Props, {}>
           />
         <Paragraph
           text={privacyNotice}
-          theme={theme.privacyNoticeBody}
+          customStyle={theme.privacyNoticeBody}
         />
         </div>
       )

components/brave_webtorrent/extension/components/torrentViewerHeader.tsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { ButtonPrimary, ButtonSecondary, Column, Grid } from 'brave-ui/components'
+import { Button, Column, Grid } from 'brave-ui/components'
 import { TitleHeading } from 'brave-ui/old'
 
 // Constants
@@ -24,45 +24,45 @@ interface Props {
 }
 
 export default class TorrentViewerHeader extends React.PureComponent<Props, {}> {
-  constructor (props: Props) {
-    super(props)
-    this.onClick = this.onClick.bind(this)
-    this.onCopyClick = this.onCopyClick.bind(this)
+  onClick = () => {
+    this.props.torrent
+      ? this.props.onStopDownload(this.props.tabId)
+      : this.props.onStartTorrent(this.props.torrentId, this.props.tabId)
   }
 
-  onClick () {
-    this.props.torrent ? this.props.onStopDownload(this.props.tabId)
-                       : this.props.onStartTorrent(this.props.torrentId, this.props.tabId)
-  }
-
-  onCopyClick () {
+  onCopyClick = () => {
     clipboardCopy(this.props.torrentId)
   }
 
   render () {
-    const { name, torrent } = this.props
-    const title = name ? 'Start Torrenting "' + name + '"?'
-                       : 'Loading torrent information...'
+    const { torrent } = this.props
+    const name = typeof(this.props.name) === 'object'
+      ? this.props.name[0]
+      : this.props.name
+    const title = torrent
+      ? name
+      : name
+        ? `Start Torrenting ${name}?`
+        : 'Loading torrent information...'
     const mainButtonText = torrent ? 'Stop Download' : 'Start Torrent'
 
     return (
       <Grid>
-        <Column size={9} theme={theme.headerColumnLeft}>
+        <Column size={9} customStyle={theme.headerColumnLeft}>
           <TitleHeading
             text={title}
           />
         </Column>
-        <Column size={3} theme={theme.headerColumnRight}>
-          <ButtonPrimary
+        <Column size={3} customStyle={theme.headerColumnRight}>
+          <Button
+            type='accent'
             text={mainButtonText}
-            color='brand'
-            size='medium'
             onClick={this.onClick}
           />
-          <ButtonSecondary
+          <Button
+            type='accent'
+            level='secondary'
             text='Copy Magnet Link'
-            color='brand'
-            size='medium'
             onClick={this.onCopyClick}
           />
         </Column>

components/brave_webtorrent/extension/constants/tab_types.ts

@@ -6,5 +6,6 @@ export const enum types {
   TAB_CREATED = '@@tab/TAB_CREATED',
   TAB_UPDATED = '@@tab/TAB_UPDATED',
   TAB_REMOVED = '@@tab/TAB_REMOVED',
-  ACTIVE_TAB_CHANGED = '@@tab/ACTIVE_TAB_CHANGED'
+  ACTIVE_TAB_CHANGED = '@@tab/ACTIVE_TAB_CHANGED',
+  TAB_RETRIEVED = '@@tab/TAB_RETRIEVED'
 }

components/brave_webtorrent/extension/manifest.json

@@ -7,7 +7,7 @@
     "scripts": ["extension/out/brave_webtorrent_background.bundle.js"],
     "persistent": true
   },
-  "permissions": ["tabs", "windows"],
+  "permissions": ["tabs", "windows", "http://127.0.0.1:*/*"],
   "sockets": {
     "udp": {
       "send": "*",
@@ -20,5 +20,6 @@
       "listen": "*:*"
     }
   },
+  "content_security_policy": "default-src 'self'; connect-src 'self'; font-src 'self' data:; script-src 'self'; media-src 'self' http://127.0.0.1:*; form-action 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-src 'self' http://127.0.0.1:*;",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArfOx1MW/cb3YPNlmT37CuISYgRbtR1SIdgnx/cfTyXO/PuD1VVsQWLDmrZGDmYVCzZvP36t75uhpJH4IoXL58U16yhdXZeSlb0LKcgMZB6cMNyjznV4NTEeY+tLnwGaB1TVdkJgSlY09psyfvcdzQd8xz9CNE6CXDzEq8+uMSaoAyEJ3nP78yV33nBrMj3jbjTi1fr2QsrpoISql/pJ9Zr5V0QbK4wIqln20ly96KuAO5c1DM9z9VnoYFdirEZBfkT/4gB7pBfyd4ScoMhXuaa9w53N8Espu1bC0RGmaKB679rGQdaBTrEUGF+PNfsucjnyrsnup6GMVhc91CXTDjQIDAQAB"
 }

components/styles/webtorrent.less

@@ -14,3 +14,7 @@ a {
   text-decoration: none;
   color: #686978;
 }
+
+.mediaViewer, .torrent-viewer {
+  font-family: Muli, sans-serif;
+}

components/test/brave_webtorrent/background/reducers/webtorrent_reducer_test.ts

@@ -74,12 +74,12 @@ describe('webtorrent reducer test', () => {
   })
 
   const tab: chrome.tabs.Tab = {
-    id: 2,
+    id: 0,
     index: 2,
     pinned: false,
     highlighted: false,
     windowId: 0,
-    active: true,
+    active: false,
     incognito: false,
     selected: false
   }
@@ -92,13 +92,28 @@ describe('webtorrent reducer test', () => {
     // TODO: mock ParseTorrent to test tab url case
   })
 
+  const changeInfo = {}
   describe('TAB_UPDATED', () => {
     it('state is unchanged if tab url is not ready', () => {
-      const changeInfo = {}
       const state = webtorrentReducer(torrentsState,
-        tabActions.tabUpdated(tab, changeInfo))
+        tabActions.tabUpdated(tab.id, changeInfo, tab))
       expect(state).toEqual(state)
     })
+
+    it('update currentWindowID if it is not initialized yet', () => {
+      const stateWithoutWindowId = { ...torrentsState, currentWindowId: -1 }
+      const state = webtorrentReducer(stateWithoutWindowId,
+        tabActions.tabUpdated(tab.id, changeInfo, tab))
+      expect(state).toEqual({ ...stateWithoutWindowId, currentWindowId: 0 })
+    })
+
+    it('update activeTabIds if it is not initialized yet for this window', () => {
+      const stateWithNoActiveTabIds = { ...torrentsState, activeTabIds: {} }
+      const activeTab = { ...tab, active: true }
+      const state = webtorrentReducer(stateWithNoActiveTabIds,
+        tabActions.tabUpdated(activeTab.id, changeInfo, activeTab))
+      expect(state).toEqual({ ...torrentsState, activeTabIds: {0: 0} })
+    })
     // TODO: mock ParseTorrent to test tab url case
   })
 

components/test/brave_webtorrent/components/torrentViewerHeader_test.tsx

@@ -6,6 +6,7 @@ import * as React from 'react'
 import { shallow } from 'enzyme'
 import { torrentObj } from '../testData'
 import TorrentViewerHeader from '../../../brave_webtorrent/extension/components/torrentViewerHeader'
+import { TestThemeProvider } from 'brave-ui/theme'
 
 describe('torrentViewerHeader component', () => {
   const startTorrentMock = jest.fn()
@@ -16,25 +17,29 @@ describe('torrentViewerHeader component', () => {
   describe('torrentViewerHeader dumb component', () => {
     it('renders the component with start download button if no torrent object', () => {
       const wrapper = shallow(
-        <TorrentViewerHeader
-          tabId={tabId}
-          torrentId={torrentId}
-          startTorrent={startTorrentMock}
-          stopDownload={stopDownloadMock}
-        />
+        <TestThemeProvider>
+          <TorrentViewerHeader
+            tabId={tabId}
+            torrentId={torrentId}
+            startTorrent={startTorrentMock}
+            stopDownload={stopDownloadMock}
+          />
+        </TestThemeProvider>
       )
       expect(wrapper.html()).toEqual(expect.stringContaining('Start Torrent'))
     })
 
     it('renders the component with stop download button if torrent object is passed', () => {
       const wrapper = shallow(
-        <TorrentViewerHeader
-          tabId={tabId}
-          torrentId={torrentId}
-          torrent={torrentObj}
-          startTorrent={startTorrentMock}
-          stopDownload={stopDownloadMock}
-        />
+        <TestThemeProvider>
+          <TorrentViewerHeader
+            tabId={tabId}
+            torrentId={torrentId}
+            torrent={torrentObj}
+            startTorrent={startTorrentMock}
+            stopDownload={stopDownloadMock}
+          />
+        </TestThemeProvider>
       )
       expect(wrapper.html()).toEqual(expect.stringContaining('Stop Download'))
     })