+ return
+ {
+ this.state.backgroundImage
+ ?
+ : null
+ }
-
+
@@ -351,7 +282,7 @@ class NewTabPage extends React.Component {
:
})
}
style={{backgroundColor: site.get('themeColor')}}
- onBookmarkedSite={this.onToggleBookmark.bind(this, site)}
+ onToggleBookmark={this.onToggleBookmark.bind(this, site)}
onPinnedTopSite={this.onPinnedTopSite.bind(this, site)}
onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
onDraggedSite={this.onDraggedSite.bind(this)}
@@ -364,23 +295,15 @@ class NewTabPage extends React.Component {
{
- this.onIgnoredTopSite.isCalled
+ this.state.showSiteRemovalNotification
?
: null
}
-
+
}
diff --git a/js/constants/config.js b/js/constants/config.js
index 2493af0efb2..58d6fa91277 100644
--- a/js/constants/config.js
+++ b/js/constants/config.js
@@ -45,5 +45,13 @@ module.exports = {
PDFJSExtensionId: 'jdbefljfgobbmcidnmpjamcbhnbphjnb',
PocketExtensionId: 'niloccemoadcdkdjlinkgdfekeahmflj',
widevineComponentId: 'oimompecagnajdejgnnjijobebaeigek',
- coinbaseOrigin: 'https://buy.coinbase.com'
+ coinbaseOrigin: 'https://buy.coinbase.com',
+ newtab: {
+ fallbackImage: {
+ name: 'Bay Bridge',
+ source: 'img/newtab_stock_image.jpg',
+ author: 'Darrell Sano',
+ link: 'http://dksfoto.smugmug.com'
+ }
+ }
}
diff --git a/js/data/backgrounds.js b/js/data/backgrounds.js
new file mode 100644
index 00000000000..30ad15e0dfc
--- /dev/null
+++ b/js/data/backgrounds.js
@@ -0,0 +1,62 @@
+/* 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/. */
+
+module.exports = [
+ {
+ "name": "Tuolome Meadows",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto1.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "South Tufa, Mono Lake",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto2.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Little Lakes Valley",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto3.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Bay Bridge",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto4.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Yosemite",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto5.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Beach Ice",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto6.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Color and White Trunks",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto7.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Golden Gate Bridge",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto8.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Long Lake",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto9.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "San Francisco Skyline",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto10.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }, {
+ "name": "Across Mono Basin",
+ "source": "https://s3.amazonaws.com/brave-backgrounds/dksfoto11.jpg",
+ "author": "Darrell Sano",
+ "link": "http://dksfoto.smugmug.com"
+ }
+]
diff --git a/less/about/newtab.less b/less/about/newtab.less
index 3c5235035dd..f4c2a8d4c53 100644
--- a/less/about/newtab.less
+++ b/less/about/newtab.less
@@ -18,6 +18,12 @@ body {
background: @darkGray;
}
+main,
+.copyrightNotice {
+ -webkit-user-select: none;
+ cursor: default;
+}
+
a {
text-decoration: none;
}
@@ -41,6 +47,9 @@ ul {
background-size: cover;
display: flex;
flex: 1;
+ > img {
+ display: none;
+ }
}
.gradient {
@@ -87,21 +96,21 @@ ul {
max-width: 200px;
&.trackers {
- color: @statsYellow;
+ color: @statsOrange;
}
&.ads {
- color: @statsOrange
+ color: @statsRed;
}
&.https {
- color: @statsRed
+ color: @statsBlue;
}
&.timeSaved {
- color: @statsBlue
+ color: @statsGray;
}
.text {
display: inline;
- color: @statsBlue;
+ color: @statsGray;
font-size: 20px;
line-height: 24px;
}
@@ -138,22 +147,22 @@ ul {
background: 0 0 / contain no-repeat;
display: flex;
border: 0;
- cursor: pointer;
margin-left: auto;
width: 30px;
height: 30px;
font-size: 30px;
margin-bottom: 20px;
transition: @transitionFast;
+ cursor: default;
&.hasThreeRows {
- background: url('../../img/topsites_btn_3.svg');
+ background: url('../../img/newtab/topsites_btn_3.svg');
}
&.hasTwoRows {
- background: url('../../img/topsites_btn_2.svg');
+ background: url('../../img/newtab/topsites_btn_2.svg');
}
&.hasOneRow {
- background: url('../../img/topsites_btn_1.svg');
+ background: url('../../img/newtab/topsites_btn_1.svg');
}
}
@@ -274,6 +283,11 @@ ul {
justify-content: center;
margin: auto;
+ .notification {
+ -webkit-user-select: none;
+ cursor: default;
+ }
+
.notificationText, .siteRemovalAction {
margin: 0 6px;
}
@@ -281,11 +295,14 @@ ul {
.siteRemovalAction {
color: @braveOrange;
text-decoration: underline;
+ cursor: pointer;
}
.fa-close {
color: @statsRed;
margin-left: 12px;
+ border: 0;
+ background-color: transparent;
}
}
@@ -332,15 +349,22 @@ ul {
width: 35px;
height: 35px;
margin: 15px 5px;
+ cursor: default;
+ background-color: white;
+ -webkit-mask-repeat: no-repeat;
+
+ &:hover {
+ background-color: @gray;
+ }
&.settingsIcon {
- background: url('../../img/settings_prefs_btn.svg') 0 0 / contain no-repeat;
+ -webkit-mask-image: url('../../img/newtab/settings_prefs_btn.svg');
}
&.bookmarksIcon {
- background: url('../../img/bookmarks_btn.svg') 0 0 / contain no-repeat;
+ -webkit-mask-image: url('../../img/newtab/bookmarks_btn.svg');
}
&.historyIcon {
- background: url('../../img/history_btn.svg') 0 0 / contain no-repeat;
+ -webkit-mask-image: url('../../img/newtab/history_btn.svg');
}
}
}
diff --git a/less/forms.less b/less/forms.less
index 99179b60fa9..85cf5ecdb9d 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -368,19 +368,19 @@
.braveryStat {
font-size: 40px;
- color: @chromeText;
+ color: @statsGray;
&.adsBlockedStat {
- color: #fe521d;
+ color: @statsRed;
}
&.trackersBlockedStat {
- color: #f39030;
+ color: @statsOrange;
}
&.redirectedResourcesStat {
- color: #0796fa;
+ color: @statsBlue;
}
&.fpStat {
- color: #ffc000;
+ color: @statsYellow;
}
}
.statDisabled {
diff --git a/less/variables.less b/less/variables.less
index da0d703ac06..f84e92b60f2 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -145,13 +145,19 @@
@transitionFastEase: all 100ms ease;
@transitionSlowEase: all 1s ease;
-@statsYellow: rgb(247,147,30);
-@statsOrange: rgb(241,90,36);
-@statsRed: rgb(237,28,36);
-@statsBlue: rgb(41,171,226);
+// Colors used for stats on:
+// - Bravery panel
+// - about:newtab
+@statsYellow: #ffc000;
+@statsOrange: #f39030;
+@statsRed: #fe521d;
+@statsBlue: #0796fa;
+@statsGray: @chromeText;
@defaultIconBackground: #F7F7F7;
+// Variables can be exposed to (and read from) our JavaScript code
+// (for more info, search MDN for CSSStyleDeclaration)
:root {
--navbar-height: @navbarHeight;
--downloads-bar-height: @downloadsBarHeight;
diff --git a/test/about/newTabTest.js b/test/about/newTabTest.js
new file mode 100644
index 00000000000..82c80874680
--- /dev/null
+++ b/test/about/newTabTest.js
@@ -0,0 +1,107 @@
+/* global describe, it, before, beforeEach */
+
+const Brave = require('../lib/brave')
+const {urlInput} = require('../lib/selectors')
+const {getTargetAboutUrl} = require('../../js/lib/appUrlUtil')
+const aboutNewTabUrl = getTargetAboutUrl('about:newtab')
+
+describe('about:newtab', function () {
+ function * setup (client) {
+ yield client
+ .waitForUrl(Brave.newTabUrl)
+ .waitForBrowserWindow()
+ .waitForVisible(urlInput)
+ }
+
+ function * loadPageWithTracker (client) {
+ const url = Brave.server.url('tracking.html')
+ yield client
+ .waitForDataFile('trackingProtection')
+ .tabByIndex(0)
+ .loadUrl(url)
+ }
+
+ function * loadPageWithAdblock (client) {
+ const url = Brave.server.url('adblock.html')
+ yield client
+ .waitForDataFile('adblock')
+ .tabByIndex(0)
+ .loadUrl(url)
+ .windowByUrl(Brave.browserWindowUrl)
+ }
+
+ function * reloadNewTab (client) {
+ yield client
+ .tabByIndex(0)
+ .loadUrl(aboutNewTabUrl)
+ }
+
+ describe('page content', function () {
+ Brave.beforeAll(this)
+
+ before(function * () {
+ yield setup(this.app.client)
+ })
+
+ it('displays a clock', function * () {
+ yield this.app.client
+ .windowByUrl(Brave.browserWindowUrl)
+ .waitForExist('.tab[data-frame-key="1"]')
+ .tabByIndex(0)
+ .waitForVisible('.clock .time')
+ .waitUntil(function () {
+ return this.getText('.clock .time')
+ .then((clockTime) => {
+ return !!clockTime.match(/^\d{1,2}.*\d{2}.*/)
+ })
+ })
+ })
+ })
+
+ describe('when displaying stats', function () {
+ Brave.beforeEach(this)
+ beforeEach(function * () {
+ yield setup(this.app.client)
+ })
+
+ it('shows # trackers blocked', function * () {
+ yield loadPageWithTracker(this.app.client)
+
+ yield reloadNewTab(this.app.client)
+
+ yield this.app.client
+ .waitForVisible('.counter.trackers')
+ .waitUntil(function () {
+ return this.getText('.counter.trackers')
+ .then((blocked) => {
+ return blocked === '2'
+ })
+ })
+ })
+
+ it('shows # ads blocked', function * () {
+ yield loadPageWithAdblock(this.app.client)
+
+ yield reloadNewTab(this.app.client)
+
+ yield this.app.client
+ .waitForVisible('.counter.ads')
+ .waitUntil(function () {
+ return this.getText('.counter.ads')
+ .then((blocked) => {
+ return blocked === '1'
+ })
+ })
+ })
+
+ // TODO(bsclifton):
+ // upgrades
+ // shows a time based on # blocked
+
+ // TODO(bsclifton):
+ // - link check
+ // has link to settings
+ // has link to bookmarks
+ // has link to history
+ })
+})