brave · bbondy · Nov 7, 2016 · Nov 7, 2016 · Nov 7, 2016 · Nov 6, 2016
diff --git a/app/aboutDialog.js b/app/aboutDialog.js
diff --git a/app/common/commonMenu.js b/app/common/commonMenu.js
@@ -301,11 +301,7 @@ module.exports.aboutBraveMenuItem = () => {
   return {
     label: locale.translation('aboutApp'),
     click: (item, focusedWindow) => {
-      if (process.type === 'browser') {
-        process.emit(messages.SHOW_ABOUT)
-      } else {
-        electron.ipcRenderer.send(messages.SHOW_ABOUT)
-      }
+      module.exports.sendToFocusedWindow(focusedWindow, [messages.SHORTCUT_NEW_FRAME, 'about:brave', { singleFrame: true }])
     }
   }
 }

diff --git a/app/extensions/brave/about-brave.html b/app/extensions/brave/about-brave.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="availableLanguages" content="">
+    <meta name="defaultLanguage" content="en-US">
+    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
+    <title data-l10n-id="aboutBrave"></title>
+    <script src='js/about.js'></script>
+    <script src="ext/l20n.min.js" async></script>
+    <link rel="localization" href="locales/{locale}/app.properties">
+  </head>
+  <body>
+    <div id="appContainer"/>
+  </body>
+</html>
diff --git a/app/extensions/brave/locales/en-US/app.properties b/app/extensions/brave/locales/en-US/app.properties
@@ -14,6 +14,8 @@ cancel=Cancel
 submit=Submit
 settings=Settings
 aboutPages=About pages
+aboutBrave=About Brave
+versionInformation=Version Information
 listOfAboutPages=List of about pages
 history=History
 settingName=Setting name

diff --git a/app/importer.js b/app/importer.js
@@ -10,14 +10,15 @@ const dialog = electron.dialog
 const BrowserWindow = electron.BrowserWindow
 const session = electron.session
 const Immutable = require('immutable')
-const {showImportWarning, showImportSuccess} = require('./aboutDialog')
 const siteUtil = require('../js/state/siteUtil')
 const AppStore = require('../js/stores/appStore')
 const siteTags = require('../js/constants/siteTags')
 const appActions = require('../js/actions/appActions')
 const messages = require('../js/constants/messages')
 const settings = require('../js/constants/settings')
 const getSetting = require('../js/settings').getSetting
+const path = require('path')
+const locale = require('./locale')
 
 var isMergeFavorites = false
 var isImportingBookmarks = false
@@ -225,6 +226,34 @@ importer.on('add-cookies', (e, cookies) => {
   }
 })
 
+const showImportWarning = function () {
+  // The timeout is in case there's a call just after the modal to hide the menu.
+  // showMessageBox is a modal and blocks everything otherwise, so menu would remain open
+  // while the dialog is displayed.
+  setTimeout(() => {
+    dialog.showMessageBox({
+      title: 'Brave',
+      message: `${locale.translation('closeFirefoxWarning')}`,
+      icon: path.join(__dirname, '..', 'app', 'extensions', 'brave', 'img', 'braveAbout.png'),
+      buttons: [locale.translation('closeFirefoxWarningOk')]
+    })
+  }, 50)
+}
+
+const showImportSuccess = function () {
+  // The timeout is in case there's a call just after the modal to hide the menu.
+  // showMessageBox is a modal and blocks everything otherwise, so menu would remain open
+  // while the dialog is displayed.
+  setTimeout(() => {
+    dialog.showMessageBox({
+      title: 'Brave',
+      message: `${locale.translation('importSuccess')}`,
+      icon: path.join(__dirname, '..', 'app', 'extensions', 'brave', 'img', 'braveAbout.png'),
+      buttons: [locale.translation('importSuccessOk')]
+    })
+  }, 50)
+}
+
 importer.on('show-warning-dialog', (e) => {
   showImportWarning()
 })

diff --git a/app/index.js b/app/index.js
@@ -68,7 +68,6 @@ const HttpsEverywhere = require('./httpsEverywhere')
 const SiteHacks = require('./siteHacks')
 const CmdLine = require('./cmdLine')
 const UpdateStatus = require('../js/constants/updateStatus')
-const showAbout = require('./aboutDialog').showAbout
 const urlParse = require('url').parse
 const CryptoUtil = require('../js/lib/cryptoUtil')
 const keytar = require('keytar')
@@ -755,9 +754,6 @@ app.on('ready', () => {
       process.on(messages.CHECK_FOR_UPDATE, () => Updater.checkForUpdate(true))
       ipcMain.on(messages.CHECK_FOR_UPDATE, () => Updater.checkForUpdate(true))
 
-      process.on(messages.SHOW_ABOUT, showAbout)
-      ipcMain.on(messages.SHOW_ABOUT, showAbout)
-
       // This is fired from a auto-update metadata call
       process.on(messages.UPDATE_META_DATA_RETRIEVED, (metadata) => {
         console.log(metadata)

diff --git a/app/sessionStore.js b/app/sessionStore.js
@@ -27,6 +27,7 @@ const filtering = require('./filtering')
 const autofill = require('./autofill')
 const {navigatableTypes} = require('../js/lib/appUrlUtil')
 // const tabState = require('./common/state/tabState')
+const Channel = require('./channel')
 
 const getSetting = require('../js/settings').getSetting
 const promisify = require('../js/lib/promisify')
@@ -323,6 +324,8 @@ module.exports.cleanAppData = (data, isShutdown) => {
       delete data.extensions[extensionId].tabs
     })
   }
+
+  delete data.versionInformation
 }
 
 /**
@@ -426,6 +429,22 @@ module.exports.loadAppState = () => {
           return
         }
       }
+
+      // version information (shown on about:brave)
+      const os = require('os')
+      const versionInformation = [
+        {name: 'brave', version: app.getVersion()},
+        {name: 'muon', version: process.versions['atom-shell']},
+        {name: 'libchromiumcontent', version: process.versions['chrome']},
+        {name: 'V8', version: process.versions.v8},
+        {name: 'Node.js', version: process.versions.node},
+        {name: 'channel', version: Channel.channel()},
+        {name: 'os.platform', version: os.platform()},
+        {name: 'os.release', version: os.release()},
+        {name: 'os.arch', version: os.arch()}
+        // TODO(bsclifton): read the latest commit hash from a file, etc.
+      ]
+      data.versionInformation = versionInformation
     } catch (e) {
       // TODO: Session state is corrupted, maybe we should backup this
       // corrupted value for people to report into support.

diff --git a/js/about/about.js b/js/about/about.js
@@ -6,20 +6,29 @@ const React = require('react')
 const ImmutableComponent = require('../components/immutableComponent')
 const {aboutUrls, isNavigatableAboutPage} = require('../lib/appUrlUtil')
 
+require('../../less/about/history.less')
+require('../../node_modules/font-awesome/css/font-awesome.css')
+
 class AboutAbout extends ImmutableComponent {
   render () {
-    return <div>
-      <h1 data-l10n-id='listOfAboutPages' />
-      <ul>
-        {
-        aboutUrls.keySeq().sort().filter((aboutSourceUrl) => isNavigatableAboutPage(aboutSourceUrl)).map((aboutSourceUrl) =>
-          <li>
-            <a href={aboutUrls.get(aboutSourceUrl)} target='_blank'>
-              {aboutSourceUrl}
-            </a>
-          </li>)
-        }
-      </ul>
+    return <div className='siteDetailsPage'>
+      <div className='siteDetailsPageHeader'>
+        <div data-l10n-id='aboutPages' className='sectionTitle' />
+      </div>
+
+      <div className='siteDetailsPageContent aboutAbout'>
+        <div className='sectionTitle' data-l10n-id='listOfAboutPages' />
+        <ul>
+          {
+            aboutUrls.keySeq().sort().filter((aboutSourceUrl) => isNavigatableAboutPage(aboutSourceUrl)).map((aboutSourceUrl) =>
+              <li>
+                <a href={aboutUrls.get(aboutSourceUrl)} target='_blank'>
+                  {aboutSourceUrl}
+                </a>
+              </li>)
+          }
+        </ul>
+      </div>
     </div>
   }
 }

diff --git a/js/about/brave.js b/js/about/brave.js
@@ -0,0 +1,52 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const messages = require('../constants/messages')
+const SortableTable = require('../components/sortableTable')
+
+const ipc = window.chrome.ipc
+
+require('../../less/about/history.less')
+require('../../node_modules/font-awesome/css/font-awesome.css')
+
+class AboutBrave extends React.Component {
+  constructor () {
+    super()
+    this.state = { versionInformation: Immutable.fromJS([]) }
+    ipc.on(messages.VERSION_INFORMATION_UPDATED, (e, versionInformation) => {
+      if (this.state.versionInformation.size === 0) {
+        this.setState({versionInformation: Immutable.fromJS(versionInformation)})
+      }
+    })
+  }
+
+  render () {
+    return <div className='siteDetailsPage'>
+      <div className='siteDetailsPageHeader'>
+        <div data-l10n-id='aboutBrave' className='sectionTitle' />
+      </div>
+
+      <div className='siteDetailsPageContent aboutAbout'>
+        <div className='sectionTitle' data-l10n-id='versionInformation' />
+        <SortableTable
+          headings={['Name', 'Version']}
+          rows={this.state.versionInformation.map((entry) => [
+            {
+              html: entry.get('name'),
+              value: entry.get('name')
+            },
+            {
+              html: entry.get('version'),
+              value: entry.get('version')
+            }
+          ])}
+        />
+      </div>
+    </div>
+  }
+}
+
+module.exports = <AboutBrave />
diff --git a/js/about/entry.js b/js/about/entry.js
@@ -6,50 +6,54 @@ const ipc = window.chrome.ipc
 let element
 
 switch (getBaseUrl(getSourceAboutUrl(window.location.href))) {
-  case 'about:newtab':
-    element = require('./newtab')
-    break
   case 'about:about':
     element = require('./about')
     break
-  case 'about:preferences':
-    element = require('./preferences')
-    break
-  case 'about:bookmarks':
-    element = require('./bookmarks')
-    break
-  case 'about:extensions':
-    element = require('./extensions')
-    break
   case 'about:adblock':
     element = require('./adblock')
     break
-  case 'about:downloads':
-    element = require('./downloads')
+  case 'about:autofill':
+    element = require('./autofill')
+    break
+  case 'about:brave':
+    element = require('./brave')
+    break
+  case 'about:bookmarks':
+    element = require('./bookmarks')
     break
   case 'about:certerror':
     element = require('./certerror')
     break
-  case 'about:passwords':
-    element = require('./passwords')
-    break
-  case 'about:safebrowsing':
-    element = require('./safebrowsing')
+  case 'about:downloads':
+    element = require('./downloads')
     break
   case 'about:error':
     element = require('./errorPage')
     break
+  case 'about:extensions':
+    element = require('./extensions')
+    break
   case 'about:flash':
     element = require('./flashPlaceholder')
     break
   case 'about:history':
     element = require('./history')
     break
+  case 'about:newtab':
+    element = require('./newtab')
+    break
+  case 'about:passwords':
+    element = require('./passwords')
+    break
+  case 'about:preferences':
+    element = require('./preferences')
+    break
+  case 'about:safebrowsing':
+    element = require('./safebrowsing')
+    break
   case 'about:styles':
     element = require('./styles')
     break
-  case 'about:autofill':
-    element = require('./autofill')
 }
 
 if (element) {

diff --git a/js/components/frame.js b/js/components/frame.js
@@ -170,6 +170,11 @@ class Frame extends ImmutableComponent {
         })
         this.webview.send(messages.AUTOFILL_CREDIT_CARDS_UPDATED, list)
       }
+    } else if (location === 'about:brave') {
+      const versionInformation = appStoreRenderer.state.get('versionInformation')
+      if (versionInformation && versionInformation.toJS) {
+        this.webview.send(messages.VERSION_INFORMATION_UPDATED, versionInformation.toJS())
+      }
     }
 
     // send state to about pages