Coverts DownloadItem and DownloadsBar

Auditors:

Test Plan:

app/renderer/components/download/downloadItem.js

@@ -3,9 +3,10 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const Immutable = require('immutable')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const Button = require('../common/button')
 
 // Constants
@@ -18,12 +19,13 @@ const appActions = require('../../../../js/actions/appActions')
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const downloadUtil = require('../../../../js/state/downloadUtil')
+const urlUtil = require('../../../../js/lib/urlutil')
 const {getOrigin} = require('../../../../js/state/siteUtil')
 const cx = require('../../../../js/lib/classSet')
 
-class DownloadItem extends ImmutableComponent {
-  constructor () {
-    super()
+class DownloadItem extends React.Component {
+  constructor (props) {
+    super(props)
     this.onRevealDownload = this.onRevealDownload.bind(this)
     this.onOpenDownload = this.onOpenDownload.bind(this)
     this.onPauseDownload = this.onDownloadActionPerformed.bind(this, PAUSE)
@@ -36,147 +38,231 @@ class DownloadItem extends ImmutableComponent {
     this.onRedownload = this.onRedownload.bind(this)
     this.onCopyLinkToClipboard = this.onCopyLinkToClipboard.bind(this)
   }
+
   onRevealDownload () {
     appActions.downloadRevealed(this.props.downloadId)
   }
+
   onOpenDownload () {
     appActions.downloadOpened(this.props.downloadId)
   }
+
   onClearDownload () {
     appActions.downloadCleared(this.props.downloadId)
   }
+
   onShowDeleteConfirmation () {
     appActions.showDownloadDeleteConfirmation()
   }
+
   onHideDeleteConfirmation () {
     appActions.hideDownloadDeleteConfirmation()
   }
+
   onDeleteDownload () {
     appActions.hideDownloadDeleteConfirmation()
     appActions.downloadDeleted(this.props.downloadId)
   }
+
   onDownloadActionPerformed (downloadAction) {
     appActions.downloadActionPerformed(this.props.downloadId, downloadAction)
   }
+
   onCopyLinkToClipboard () {
     appActions.downloadCopiedToClipboard(this.props.downloadId)
   }
+
   onRedownload () {
     appActions.downloadRedownloaded(this.props.downloadId)
   }
+
   get isInterrupted () {
-    return this.props.download.get('state') === downloadStates.INTERRUPTED
+    return this.props.downloadState === downloadStates.INTERRUPTED
   }
+
   get isInProgress () {
-    return this.props.download.get('state') === downloadStates.IN_PROGRESS
+    return this.props.downloadState === downloadStates.IN_PROGRESS
   }
+
   get isCompleted () {
-    return this.props.download.get('state') === downloadStates.COMPLETED
+    return this.props.downloadState === downloadStates.COMPLETED
   }
+
   get isCancelled () {
-    return this.props.download.get('state') === downloadStates.CANCELLED
+    return this.props.downloadState === downloadStates.CANCELLED
   }
+
   get isPaused () {
-    return this.props.download.get('state') === downloadStates.PAUSED
+    return this.props.downloadState === downloadStates.PAUSED
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const download = state.getIn(['downloads', ownProps.downloadId]) || Immutable.Map()
+    const origin = getOrigin(download.get('url'))
+
+    const props = {}
+    // used in renderer
+    props.downloadId = ownProps.downloadId
+    props.deleteConfirmationVisible = state.get('deleteConfirmationVisible')
+    props.isLocalFile = urlUtil.isLocalFile(origin)
+    props.isInsecure = origin.startsWith('http://')
+    props.percentageComplete = downloadUtil.getPercentageComplete(download)
+    props.isPendingState = downloadUtil.isPendingState(download)
+    props.downloadState = download.get('state')
+    props.totalBytes = download.get('totalBytes')
+    props.fileName = download.get('filename')
+    props.origin = origin
+    props.statel10n = downloadUtil.getL10nId(download)
+    props.download = download // TODO (nejc) only primitive types
+
+    return props
   }
+
   render () {
-    const origin = getOrigin(this.props.download.get('url'))
-    const localFileOrigins = ['file:', 'blob:', 'data:', 'chrome-extension:', 'chrome:']
-    const localFile = origin && localFileOrigins.some((localFileOrigin) => origin.startsWith(localFileOrigin))
+    const l10nStateArgs = {}
     const progressStyle = {
-      width: downloadUtil.getPercentageComplete(this.props.download)
+      width: this.props.percentageComplete
     }
-    const l10nStateArgs = {}
+
     if (this.isCancelled || this.isInterrupted) {
       progressStyle.display = 'none'
-    } else if (downloadUtil.isPendingState(this.props.download)) {
-      l10nStateArgs.downloadPercent = downloadUtil.getPercentageComplete(this.props.download)
+    } else if (this.props.isPendingState) {
+      l10nStateArgs.downloadPercent = this.props.percentageComplete
     }
-    const isInsecure = origin.startsWith('http://')
+
     return <span
       onContextMenu={contextMenus.onDownloadsToolbarContextMenu.bind(null, this.props.downloadId, this.props.download)}
       onDoubleClick={this.onOpenDownload}
       onMouseLeave={this.onHideDeleteConfirmation}
       className={cx({
         downloadItem: true,
         deleteConfirmationVisible: this.props.deleteConfirmationVisible,
-        [this.props.download.get('state')]: true
+        [this.props.downloadState]: true
       })}>
       {
         this.props.deleteConfirmationVisible
-        ? <div className='deleteConfirmation'><span data-l10n-id='downloadDeleteConfirmation' /><Button testId='confirmDeleteButton' l10nId='ok' className='primaryButton confirmDeleteButton' onClick={this.onDeleteDownload} /></div>
+        ? <div className='deleteConfirmation'>
+          <span data-l10n-id='downloadDeleteConfirmation' /><Button testId='confirmDeleteButton' l10nId='ok' className='primaryButton confirmDeleteButton' onClick={this.onDeleteDownload} />
+        </div>
         : null
       }
       <div className='downloadActions'>
         {
           downloadUtil.shouldAllowPause(this.props.download)
-          ? <Button testId='pauseButton' className='pauseButton' l10nId='downloadPause' iconClass='fa-pause' onClick={this.onPauseDownload} />
+          ? <Button
+            testId='pauseButton'
+            className='pauseButton'
+            l10nId='downloadPause'
+            iconClass='fa-pause'
+            onClick={this.onPauseDownload}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowResume(this.props.download)
-          ? <Button testId='resumeButton' className='resumeButton' l10nId='downloadResume' iconClass='fa-play' onClick={this.onResumeDownload} />
+          ? <Button
+            testId='resumeButton'
+            className='resumeButton'
+            l10nId='downloadResume'
+            iconClass='fa-play'
+            onClick={this.onResumeDownload}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowCancel(this.props.download)
-          ? <Button testId='cancelButton' className='cancelButton' l10nId='downloadCancel' iconClass='fa-times' onClick={this.onCancelDownload} />
+          ? <Button
+            testId='cancelButton'
+            className='cancelButton'
+            l10nId='downloadCancel'
+            iconClass='fa-times'
+            onClick={this.onCancelDownload}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowRedownload(this.props.download)
-          ? <Button testId='redownloadButton' className='redownloadButton' l10nId='downloadRedownload' iconClass='fa-repeat' onClick={this.onRedownload} />
+          ? <Button
+            testId='redownloadButton'
+            className='redownloadButton'
+            l10nId='downloadRedownload'
+            iconClass='fa-repeat'
+            onClick={this.onRedownload}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowCopyLink(this.props.download)
-          ? <Button testId='copyLinkButton' className='copyLinkButton' l10nId='downloadCopyLinkLocation' iconClass='fa-link' onClick={this.onCopyLinkToClipboard} />
+          ? <Button
+            testId='copyLinkButton'
+            className='copyLinkButton'
+            l10nId='downloadCopyLinkLocation'
+            iconClass='fa-link'
+            onClick={this.onCopyLinkToClipboard}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowOpenDownloadLocation(this.props.download)
-          ? <Button testId='revealButton' className='revealButton' l10nId='downloadOpenPath' iconClass='fa-folder-open-o' onClick={this.onRevealDownload} />
+          ? <Button
+            testId='revealButton'
+            className='revealButton'
+            l10nId='downloadOpenPath'
+            iconClass='fa-folder-open-o'
+            onClick={this.onRevealDownload}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowDelete(this.props.download)
-          ? <Button testId='deleteButton' className='deleteButton' l10nId='downloadDelete' iconClass='fa-trash-o' onClick={this.onShowDeleteConfirmation} />
+          ? <Button
+            testId='deleteButton'
+            className='deleteButton'
+            l10nId='downloadDelete'
+            iconClass='fa-trash-o'
+            onClick={this.onShowDeleteConfirmation}
+          />
           : null
         }
         {
           downloadUtil.shouldAllowRemoveFromList(this.props.download)
-          ? <Button testId='downloadRemoveFromList' l10nId='downloadRemoveFromList' iconClass='fa-times' className='removeDownloadFromList' onClick={this.onClearDownload} />
+          ? <Button
+            testId='downloadRemoveFromList'
+            l10nId='downloadRemoveFromList'
+            iconClass='fa-times'
+            className='removeDownloadFromList'
+            onClick={this.onClearDownload}
+          />
           : null
         }
       </div>
       {
-        (this.isInProgress || this.isPaused) && this.props.download.get('totalBytes')
+        (this.isInProgress || this.isPaused) && this.props.totalBytes
         ? <div data-test-id='downloadProgress' className='downloadProgress' style={progressStyle} />
         : null
       }
       <div className='downloadInfo'>
         <span>
-          <div data-test-id='downloadFilename' className='downloadFilename'
-            title={this.props.download.get('filename')}>
-            {
-              this.props.download.get('filename')
-            }
+          <div data-test-id='downloadFilename' className='downloadFilename' title={this.props.fileName}>
+            {this.props.fileName}
           </div>
           {
-            origin
+            this.props.origin
               ? <div data-test-id='downloadOrigin' className='downloadOrigin'>
                 {
-                  isInsecure
+                  this.props.isInsecure
                     ? <span className='fa fa-unlock isInsecure' />
                     : null
                 }
-                <span data-l10n-id={localFile ? 'downloadLocalFile' : null} title={origin}>{localFile ? null : origin}</span>
+                <span data-l10n-id={this.props.isLocalFile ? 'downloadLocalFile' : null} title={this.props.origin}>
+                  {this.props.isLocalFile ? null : this.props.origin}
+                </span>
               </div>
               : null
           }
           {
             this.isCancelled || this.isInterrupted || this.isCompleted || this.isPaused || this.isInProgress
-            ? <div className='downloadState' data-l10n-id={downloadUtil.getL10nId(this.props.download)} data-l10n-args={JSON.stringify(l10nStateArgs)} />
+            ? <div className='downloadState' data-l10n-id={this.props.statel10n} data-l10n-args={JSON.stringify(l10nStateArgs)} />
             : null
           }
         </span>
@@ -186,4 +272,4 @@ class DownloadItem extends ImmutableComponent {
   }
 }
 
-module.exports = DownloadItem
+module.exports = ReduxComponent.connect(DownloadItem)

app/renderer/components/download/downloadsBar.js

@@ -5,7 +5,7 @@
 const React = require('react')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const Button = require('../common/button')
 const DownloadItem = require('./downloadItem')
 
@@ -15,37 +15,35 @@ const webviewActions = require('../../../../js/actions/webviewActions')
 
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
+const downloadUtil = require('../../../../js/state/downloadUtil')
 
-class DownloadsBar extends ImmutableComponent {
-  constructor () {
-    super()
+class DownloadsBar extends React.Component {
+  constructor (props) {
+    super(props)
     this.onHideDownloadsToolbar = this.onHideDownloadsToolbar.bind(this)
   }
+
   onHideDownloadsToolbar () {
     windowActions.setDownloadsToolbarVisible(false)
     webviewActions.setWebviewFocused()
   }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const props = {}
+    // used in renderer
+    props.downloads = downloadUtil.getDownloadItems(state)
+
+    return props
+  }
+
   render () {
-    const getComputedStyle = require('../../getComputedStyle')
-    const downloadItemWidth = Number.parseInt(getComputedStyle('--download-item-width'), 10)
-    const downloadItemMargin = Number.parseInt(getComputedStyle('--download-item-margin'), 10)
-    const downloadBarPadding = Number.parseInt(getComputedStyle('--download-bar-padding'), 10)
-    const downloadBarButtons = Number.parseInt(getComputedStyle('--download-bar-buttons'), 10)
-    const numItems = Math.floor((this.props.windowWidth - (downloadBarPadding * 2) - downloadBarButtons) / (downloadItemWidth + downloadItemMargin))
     return <div className='downloadsBar'
       onContextMenu={contextMenus.onDownloadsToolbarContextMenu.bind(null, undefined, undefined)}>
       <div className='downloadItems'>
         {
-          this.props.downloads
-            .sort((x, y) => x.get('startTime') - y.get('startTime'))
-            .skip(this.props.downloads.size - numItems)
-            .reverse()
-            .map((download, downloadId) =>
-              <DownloadItem download={download}
-                windowWidth={this.props.windowWidth}
-                deleteConfirmationVisible={this.props.deleteConfirmationVisible}
-                downloadId={downloadId}
-                downloadsSize={this.props.downloads.size} />)
+          this.props.downloads.map(downloadId =>
+            <DownloadItem downloadId={downloadId} />
+          )
         }
       </div>
       <div className='downloadBarButtons'>
@@ -56,4 +54,4 @@ class DownloadsBar extends ImmutableComponent {
   }
 }
 
-module.exports = DownloadsBar
+module.exports = ReduxComponent.connect(DownloadsBar)

app/renderer/components/main/main.js

@@ -892,10 +892,7 @@ class Main extends ImmutableComponent {
       </div>
       {
         this.props.windowState.getIn(['ui', 'downloadsToolbar', 'isVisible']) && this.props.appState.get('downloads') && this.props.appState.get('downloads').size > 0
-        ? <DownloadsBar
-          windowWidth={window.innerWidth}
-          deleteConfirmationVisible={this.props.appState.get('deleteConfirmationVisible')}
-          downloads={this.props.appState.get('downloads')} />
+        ? <DownloadsBar />
         : null
       }
     </div>