Add "view all" option to download bar (#9093)

* Add view "all button" option to downloads bar

app/extensions/brave/locales/en-US/downloads.properties

@@ -18,3 +18,5 @@ downloadCopyLinkLocation.title=Copy Link Location
 downloadDelete.title=Delete Download
 downloadOpenPath.title=Open Folder Path
 downloadRemoveFromList.title=Remove Download From List
+
+downloadViewAll=View All

app/renderer/components/download/downloadsBar.js

@@ -7,24 +7,38 @@ const React = require('react')
 // Components
 const ImmutableComponent = require('../immutableComponent')
 const Button = require('../common/button')
+const BrowserButton = require('../common/browserButton')
 const DownloadItem = require('./downloadItem')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
 const webviewActions = require('../../../../js/actions/webviewActions')
+const appActions = require('../../../../js/actions/appActions')
 
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 
+const cx = require('../../../../js/lib/classSet')
+
 class DownloadsBar extends ImmutableComponent {
   constructor () {
     super()
     this.onHideDownloadsToolbar = this.onHideDownloadsToolbar.bind(this)
+    this.onShowDownloads = this.onShowDownloads.bind(this)
   }
   onHideDownloadsToolbar () {
     windowActions.setDownloadsToolbarVisible(false)
     webviewActions.setWebviewFocused()
   }
+  onShowDownloads () {
+    appActions.createTabRequested({
+      activateIfOpen: true,
+      url: 'about:downloads'
+    })
+    windowActions.setDownloadsToolbarVisible(false)
+  }
   render () {
     const getComputedStyle = require('../../getComputedStyle')
     const downloadItemWidth = Number.parseInt(getComputedStyle('--download-item-width'), 10)
@@ -48,12 +62,35 @@ class DownloadsBar extends ImmutableComponent {
                 downloadsSize={this.props.downloads.size} />)
         }
       </div>
-      <div className='downloadBarButtons'>
-        <Button testId='hideDownloadsToolbar' className='downloadButton hideDownloadsToolbar'
-          onClick={this.onHideDownloadsToolbar} />
+      <div className={cx({
+        downloadBarButtons: true,
+        [css(styles.downloadsBar__downloadBarButtons)]: true
+      })}>
+        <BrowserButton secondaryColor
+          l10nId='downloadViewAll'
+          testId='downloadViewAll'
+          custom={styles.downloadsBar__downloadBarButtons__viewAllButton}
+          onClick={this.onShowDownloads}
+        />
+        <Button className='downloadButton hideDownloadsToolbar'
+          testId='hideDownloadsToolbar'
+          onClick={this.onHideDownloadsToolbar}
+        />
       </div>
     </div>
   }
 }
 
 module.exports = DownloadsBar
+
+const styles = StyleSheet.create({
+  downloadsBar__downloadBarButtons: {
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center'
+  },
+
+  downloadsBar__downloadBarButtons__viewAllButton: {
+    marginRight: '20px'
+  }
+})

less/downloadBar.less

@@ -8,7 +8,7 @@
   --download-item-width: 200px;
   --download-item-margin: 10px;
   --download-bar-padding: 20px;
-  --download-bar-buttons: 22px;
+  --download-bar-buttons: 140px;
 }
 
 @downloadItemHeight: 50px;
@@ -30,6 +30,7 @@
     display: flex;
     flex-grow: 1;
     position: relative;
+
     .downloadItem {
       background-color: white;
       border: 1px solid @chromeTertiary;
@@ -126,6 +127,7 @@
 
       .downloadActions {
         margin: 8px 0 0;
+
         .browserButton {
           font-size: 14px;
           height: auto;