show origin for downloaded URLs

fix #7468
brave · Apr 3, 2017 · 0dd7d4f · 0dd7d4f
1 parent 325b163
commit 0dd7d4f
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
@@ -76,7 +76,7 @@
 @switchNubTransition: right 100ms;
 
 @navbarHeight: 36px;
-@downloadsBarHeight: 50px;
+@downloadsBarHeight: 60px;
 @tabsToolbarHeight: 24px;
 @tabPagesHeight: 7px;
 @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)