Add a basic about:adblock placeholder

Fix #3936 Auditors: @bridiver
brave · Sep 12, 2016 · 255303a · 255303a
1 parent 0934f9b
commit 255303a
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 0 deletions.
diff --git a/app/extensions/brave/about-adblock.html b/app/extensions/brave/about-adblock.html
@@ -0,0 +1,20 @@
+<!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">
+    <meta name='theme-color' content='#035500'>
+    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
+    <title data-l10n-id="adblockTitle"></title>
+    <script src='js/about.js'></script>
+    <script src="ext/l20n.min.js" async></script>
+    <link rel="localization" href="locales/{locale}/adblock.properties">
+ </head>
+ <body>
+    <div id="appContainer"/>
+ </body>
+</html>
diff --git a/app/extensions/brave/locales/en-US/adblock.properties b/app/extensions/brave/locales/en-US/adblock.properties
@@ -0,0 +1,5 @@
+adblockTitle=Ad Block
+adblock=Ad Block
+lastUpdateCheckDateLabel=Last update check:
+lastCheckETagLabel=Last check ETag:
+blockedCountLabel=Blocked count:
diff --git a/js/about/adblock.js b/js/about/adblock.js
@@ -0,0 +1,56 @@
+/* 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/. */
+
+// Note that these are webpack requires, not CommonJS node requiring requires
+const React = require('react')
+const Immutable = require('immutable')
+const messages = require('../constants/messages')
+
+const ipc = window.chrome.ipc
+
+// Stylesheets
+require('../../less/about/itemList.less')
+require('../../less/about/adblock.less')
+
+class AboutAdBlock extends React.Component {
+  constructor () {
+    super()
+    this.state = {
+      adblock: Immutable.Map()
+    }
+    ipc.on(messages.ADBLOCK_UPDATED, (e, detail) => {
+      if (!detail) {
+        return
+      }
+      this.setState({
+        adblock: Immutable.fromJS(detail.adblock)
+      })
+    })
+  }
+  render () {
+    const lastUpdateDate = new Date(this.state.adblock.get('lastCheckDate'))
+    return <div className='adblockDetailsPage'>
+      <h2 data-l10n-id='adblock' />
+      <list>
+        <div role='listitem'>
+          <div className='adblockDetailsPageContent'>
+            <div className='adblockCount'><span data-l10n-id='blockedCountLabel' /> <span className='blockedCountTotal'>{this.state.adblock.get('count') || 0}</span></div>
+            {
+              Number.isNaN(lastUpdateDate.getTime())
+              ? null
+              : <div className='adblockLastChecked'><span data-l10n-id='lastUpdateCheckDateLabel' /> <span>{lastUpdateDate.toLocaleDateString()}</span></div>
+            }
+            {
+              this.state.adblock.get('etag')
+              ? <div className='adblockLastETag'><span data-l10n-id='lastCheckETagLabel' /> <span>{this.state.adblock.get('etag')}</span></div>
+              : null
+            }
+          </div>
+        </div>
+      </list>
+    </div>
+  }
+}
+
+module.exports = <AboutAdBlock />
diff --git a/js/about/entry.js b/js/about/entry.js
@@ -21,6 +21,9 @@ switch (getBaseUrl(getSourceAboutUrl(window.location.href))) {
   case 'about:extensions':
     element = require('./extensions')
     break
+  case 'about:adblock':
+    element = require('./adblock')
+    break
   case 'about:downloads':
     element = require('./downloads')
     break

diff --git a/js/components/frame.js b/js/components/frame.js
@@ -96,6 +96,10 @@ class Frame extends ImmutableComponent {
       this.webview.send(messages.EXTENSIONS_UPDATED, {
         extensions: this.props.extensions.toJS()
       })
+    } else if (location === 'about:adblock') {
+      this.webview.send(messages.ADBLOCK_UPDATED, {
+        adblock: this.props.adblock.toJS()
+      })
     } else if (location === 'about:downloads') {
       this.webview.send(messages.DOWNLOADS_UPDATED, {
         downloads: this.props.downloads.toJS()

diff --git a/js/constants/messages.js b/js/constants/messages.js
@@ -114,6 +114,7 @@ const messages = {
   BOOKMARKS_UPDATED: _,
   HISTORY_UPDATED: _,
   EXTENSIONS_UPDATED: _,
+  ADBLOCK_UPDATED: _,
   DOWNLOADS_UPDATED: _,
   FLASH_UPDATED: _,
   // About pages from contentScript

diff --git a/js/lib/appUrlUtil.js b/js/lib/appUrlUtil.js
@@ -62,6 +62,7 @@ module.exports.aboutUrls = new Immutable.Map({
   'about:bookmarks': module.exports.getAppUrl('about-bookmarks.html'),
   'about:downloads': module.exports.getAppUrl('about-downloads.html'),
   'about:extensions': module.exports.getAppUrl('about-extensions.html'),
+  'about:adblock': module.exports.getAppUrl('about-adblock.html'),
   'about:newtab': module.exports.getAppUrl('about-newtab.html'),
   'about:preferences': module.exports.getAppUrl('about-preferences.html'),
   'about:config': module.exports.getAppUrl('about-config.html'),

diff --git a/less/about/adblock.less b/less/about/adblock.less
@@ -0,0 +1,15 @@
+@import "./itemList.less";
+
+.adblockDetailsPage {
+  margin: 20px;
+  min-width: 704px;
+
+  h2 {
+    margin-bottom: 10px;
+  }
+
+  list .listItem {
+    display: flex;
+    -webkit-user-select: text;
+  }
+}
diff --git a/test/about/adblockTest.js b/test/about/adblockTest.js
@@ -0,0 +1,27 @@
+/* global describe, it, before */
+
+const Brave = require('../lib/brave')
+const {urlInput} = require('../lib/selectors')
+const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+
+describe('about:adblock', function () {
+  Brave.beforeAll(this)
+  before(function * () {
+    const url = getTargetAboutUrl('about:adblock')
+    yield this.app.client
+      .waitUntilWindowLoaded()
+      .waitForUrl(Brave.newTabUrl)
+      .waitForBrowserWindow()
+      .waitForVisible('#window')
+      .waitForVisible(urlInput)
+      .windowByUrl(Brave.browserWindowUrl)
+      .waitForExist('.tab[data-frame-key="1"]')
+      .tabByIndex(0)
+      .url(url)
+  })
+
+  it('lists adblock count', function * () {
+    yield this.app.client
+      .getText('.blockedCountTotal').should.eventually.be.equal('0')
+  })
+})