show origin for downloaded URLs

fix #7468
brave · Mar 17, 2017 · 4d24855 · 4d24855
1 parent 2faf7e9
commit 4d24855
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 4 deletions.
diff --git a/app/renderer/components/downloadItem.js b/app/renderer/components/downloadItem.js
@@ -10,6 +10,7 @@ const downloadStates = require('../../../js/constants/downloadStates')
 const {PAUSE, RESUME, CANCEL} = require('../../common/constants/electronDownloadItemActions')
 const appActions = require('../../../js/actions/appActions')
 const downloadUtil = require('../../../js/state/downloadUtil')
+const {getOrigin} = require('../../../js/state/siteUtil')
 const cx = require('../../../js/lib/classSet')
 
 class DownloadItem extends ImmutableComponent {
@@ -71,6 +72,7 @@ class DownloadItem extends ImmutableComponent {
     return this.props.download.get('state') === downloadStates.PAUSED
   }
   render () {
+    const origin = getOrigin(this.props.download.get('url'))
     const progressStyle = {
       width: downloadUtil.getPercentageComplete(this.props.download)
     }
@@ -149,6 +151,15 @@ class DownloadItem extends ImmutableComponent {
               this.props.download.get('filename')
             }
           </div>
+          {
+            origin
+              ? <div className={cx({
+                downloadOrigin: true,
+                isSecure: origin.startsWith('https://'),
+                isInsecure: origin.startsWith('http://')
+              })} title={origin}>{origin}</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)} />

diff --git a/less/downloadBar.less b/less/downloadBar.less
@@ -36,15 +36,15 @@
       display: flex;
       font-size: 11px;
       flex-direction: column;
-      height: 36px;
+      height: 46px;
       padding: 0 14px;
       position: relative;
       margin: auto var(--download-item-margin) auto 0;
       max-width: var(--download-item-width);
       min-width: var(--download-item-width);
 
       &:hover {
-        height: 62px;
+        height: 72px;
         top: -23px;
 
         .downloadInfo .downloadArrow {
@@ -97,7 +97,7 @@
       .downloadInfo {
         display: flex;
         margin: auto 0;
-        .downloadFilename, .downloadState {
+        .downloadFilename, .downloadState, .downloadOrigin {
           margin: auto 0;
           white-space: nowrap;
           overflow: hidden;
@@ -110,6 +110,14 @@
           margin: auto 0 auto auto;
         }
 
+        .isSecure {
+          color: #15b106;
+        }
+
+        .isInsecure {
+          color: red;
+        }
+
         >span {
           width: 150px;
           margin-right: 12px;

diff --git a/less/variables.less b/less/variables.less
@@ -75,7 +75,7 @@
 @switchNubTransition: right 100ms;
 
 @navbarHeight: 36px;
-@downloadsBarHeight: 50px;
+@downloadsBarHeight: 60px;
 @tabsToolbarHeight: 24px;
 @tabPagesHeight: 9px;
 @bookmarksToolbarHeight: 24px;

diff --git a/test/unit/app/renderer/downloadItemTest.js b/test/unit/app/renderer/downloadItemTest.js
@@ -62,6 +62,10 @@ describe('downloadItem component', function () {
         assert.equal(this.result.find('.downloadFilename').text(), this.download.get('filename'))
       })
 
+      it('origin exists and matches download origin', function () {
+        assert.equal(this.result.find('.downloadOrigin').text(), 'http://www.bradrichter.com')
+      })
+
       const shouldProgressBarExist = [downloadStates.IN_PROGRESS, downloadStates.PAUSED].includes(state)
       it(shouldProgressBarExist ? 'progress bar should exist' : 'progress bar should not exist', function () {
         assert.equal(this.result.find('.downloadProgress').length, shouldProgressBarExist ? 1 : 0)