Download Item Removal Confirmation

Fixes #2604

app/renderer/components/downloadItem.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../../../js/components/immutableComponent')
 const Button = require('../../../js/components/button')
 const contextMenus = require('../../../js/contextMenus')
 const downloadStates = require('../../../js/constants/downloadStates')
@@ -12,7 +11,7 @@ const appActions = require('../../../js/actions/appActions')
 const downloadUtil = require('../../../js/state/downloadUtil')
 const cx = require('../../../js/lib/classSet')
 
-class DownloadItem extends ImmutableComponent {
+class DownloadItem extends React.Component {
   constructor () {
     super()
     this.onRevealDownload = this.onRevealDownload.bind(this)
@@ -21,9 +20,14 @@ class DownloadItem extends ImmutableComponent {
     this.onResumeDownload = this.onDownloadActionPerformed.bind(this, RESUME)
     this.onCancelDownload = this.onDownloadActionPerformed.bind(this, CANCEL)
     this.onClearDownload = this.onClearDownload.bind(this)
+    this.onShowDeleteConfirmation = this.onShowDeleteConfirmation.bind(this)
+    this.onHideDeleteConfirmation = this.onHideDeleteConfirmation.bind(this)
     this.onDeleteDownload = this.onDeleteDownload.bind(this)
     this.onRedownload = this.onRedownload.bind(this)
     this.onCopyLinkToClipboard = this.onCopyLinkToClipboard.bind(this)
+    this.state = {
+      deleteConfirmationVisible: false
+    }
   }
   onRevealDownload () {
     appActions.downloadRevealed(this.props.downloadId)
@@ -34,6 +38,16 @@ class DownloadItem extends ImmutableComponent {
   onClearDownload () {
     appActions.downloadCleared(this.props.downloadId)
   }
+  onShowDeleteConfirmation () {
+    this.setState({
+      deleteConfirmationVisible: true
+    })
+  }
+  onHideDeleteConfirmation () {
+    this.setState({
+      deleteConfirmationVisible: false
+    })
+  }
   onDeleteDownload () {
     appActions.downloadDeleted(this.props.downloadId)
   }
@@ -74,10 +88,17 @@ class DownloadItem extends ImmutableComponent {
     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.state.deleteConfirmationVisible,
         [this.props.download.get('state')]: true
       })}>
+      {
+        this.state.deleteConfirmationVisible
+        ? <div className='deleteConfirmation'>Delete?<Button l10nId='ok' className='primaryButton confirmDeleteButton' onClick={this.onDeleteDownload} /></div>
+        : null
+      }
       <div className='downloadActions'>
         {
           downloadUtil.shouldAllowPause(this.props.download)
@@ -111,7 +132,7 @@ class DownloadItem extends ImmutableComponent {
         }
         {
           downloadUtil.shouldAllowDelete(this.props.download)
-          ? <Button className='deleteButton' l10nId='downloadDelete' iconClass='fa-trash-o' onClick={this.onDeleteDownload} />
+          ? <Button className='deleteButton' l10nId='downloadDelete' iconClass='fa-trash-o' onClick={this.onShowDeleteConfirmation} />
           : null
         }
         {

less/downloadBar.less

@@ -60,6 +60,10 @@
         .downloadActions {
           display: none;
         }
+
+        .deleteConfirmation {
+          display: none;
+        }
       }
 
       &.paused {
@@ -75,6 +79,11 @@
         }
       }
 
+      &.deleteConfirmationVisible:hover {
+        height: 105px;
+        top: -67px;
+      }
+
       .downloadProgress {
         background-color: @highlightBlue;
         left: 0;
@@ -125,6 +134,22 @@
           }
         }
       }
+
+      .deleteConfirmation {
+        line-height: 2;
+        border-bottom: 1px solid #CCC;
+        padding: 5px 0;
+        margin-bottom: auto 0 10px 0;
+        font-size: 12px;
+
+        .confirmDeleteButton {
+          font-weight: normal;
+          padding: 1px;
+          min-width: 50px;
+          float: right;
+          margin-right: -5px;
+        }
+      }
     }
   }
 
@@ -150,5 +175,3 @@
     }
   }
 }
-
-

test/unit/app/renderer/downloadItemTest.js

@@ -116,6 +116,7 @@ describe('downloadItem component', function () {
       testButton('.deleteButton', [downloadStates.CANCELLED, downloadStates.INTERRUPTED, downloadStates.COMPLETED], function (button) {
         const spy = sinon.spy(appActions, 'downloadDeleted')
         button.simulate('click')
+        this.result.find('.confirmDeleteButton').simulate('click')
         assert(spy.withArgs(this.downloadId).calledOnce)
         appActions.downloadDeleted.restore()
       })