Merge pull request #5623 from cezaraugusto/feature/newtab/5594

Create default topSites for new tab page

app/sessionStore.js

@@ -22,6 +22,7 @@ const settings = require('../js/constants/settings')
 const downloadStates = require('../js/constants/downloadStates')
 const {tabFromFrame} = require('../js/state/frameStateUtil')
 const siteUtil = require('../js/state/siteUtil')
+const { topSites, pinnedTopSites } = require('../js/data/newTabData')
 const sessionStorageVersion = 1
 const filtering = require('./filtering')
 const autofill = require('./autofill')
@@ -483,7 +484,7 @@ module.exports.loadAppState = () => {
 module.exports.defaultAppState = () => {
   return {
     firstRunTimestamp: new Date().getTime(),
-    sites: [],
+    sites: topSites,
     tabs: [],
     extensions: {},
     visits: [],
@@ -510,9 +511,9 @@ module.exports.defaultAppState = () => {
     about: {
       newtab: {
         gridLayoutSize: 'small',
-        sites: [],
+        sites: topSites,
         ignoredTopSites: [],
-        pinnedTopSites: []
+        pinnedTopSites: pinnedTopSites
       }
     },
     defaultWindowParams: {}

docs/state.md

@@ -231,9 +231,9 @@ AppStore
     },
     newtab: {
       gridLayoutSize: string, // 'small', 'medium', 'large'
-      sites: [string], // List of sites to be used on gridLayout
+      sites: [string], // List of sites to be used on gridLayout. Defaults to 6 Brave-related sites; see data/newTabData.js => topSites
       ignoredTopSites: [string], // List of ignored sites
-      pinnedTopSites: [string], // List of pinned sites
+      pinnedTopSites: [string], // List of pinned sites to be used on gridLayout. Defaults to 1 Brave-related site; see data/newTabData.js => pinnedTopSites
       updatedStamp: number // timestamp for when the data was last updated
     }
   },

js/data/newTabData.js

@@ -0,0 +1,82 @@
+/* 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 appUrlUtil = require('../lib/appUrlUtil')
+const iconPath = appUrlUtil.fileUrl('img/newtab/defaultTopSitesIcon')
+
+/**
+ * Let lastAccessedTime be the first-time user see the new tab page
+ */
+const now = Date.now()
+
+module.exports.pinnedTopSites = [
+    {
+      "count": 1,
+      "favicon": `${iconPath}/twitter.png`,
+      "lastAccessedTime": now,
+      "location": "https://twitter.com/brave",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgb(255, 255, 255)",
+      "title": "Brave Software (@brave) | Twitter"
+  }
+]
+
+module.exports.topSites = [
+  {
+      "count": 1,
+      "favicon": `${iconPath}/twitter.png`,
+      "lastAccessedTime": now,
+      "location": "https://twitter.com/brave",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgb(255, 255, 255)",
+      "title": "Brave Software (@brave) | Twitter"
+  }, {
+      "count": 1,
+      "favicon": `${iconPath}/facebook.png`,
+      "lastAccessedTime": now,
+      "location": "https://www.facebook.com/BraveSoftware/",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgb(59, 89, 152)",
+      "title": "Brave Software | Facebook"
+  }, {
+      "count": 1,
+      "favicon": `${iconPath}/youtube.png`,
+      "lastAccessedTime": now,
+      "location": "https://www.youtube.com/bravesoftware",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "#E62117",
+      "title": "Brave Browser - YouTube"
+  }, {
+      "count": 1,
+      "favicon": `${iconPath}/brave.ico`,
+      "lastAccessedTime": now,
+      "location": "https://brave.com/",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgb(255, 255, 255)",
+      "title": "Brave Software | Building a Better Web"
+  }, {
+      "count": 1,
+      "favicon": `${iconPath}/appstore.png`,
+      "lastAccessedTime": now,
+      "location": "https://itunes.apple.com/app/brave-web-browser/id1052879175?mt=8",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgba(255, 255, 255, 1)",
+      "title": "Brave Web Browser: Fast with built-in adblock on the App Store"
+  }, {
+      "count": 1,
+      "favicon": `${iconPath}/playstore.png`,
+      "lastAccessedTime": now,
+      "location": "https://play.google.com/store/apps/details?id=com.brave.browser",
+      "partitionNumber": 0,
+      "tags": [],
+      "themeColor": "rgb(241, 241, 241)",
+      "title": "Brave Browser: Fast AdBlock – Apps para Android no Google Play"
+  }
+]

less/about/newtab.less

@@ -275,8 +275,8 @@ ul {
 
           }
           img {
-            width: 32px;
-            height: 32px;
+            max-width: 64px;
+            max-height: 64px;
           }
         }
         &:hover {

test/about/newTabTest.js

@@ -136,6 +136,18 @@ describe('about:newtab tests', function () {
       yield setup(this.app.client)
     })
 
+    it('shows a preloaded list of sites if session has no entries yet', function * () {
+      yield reloadNewTab(this.app.client)
+
+      yield this.app.client
+        .waitForVisible('.topSitesElementFavicon[href^="https://twitter.com/brave"]')
+        .waitForVisible('.topSitesElementFavicon[href^="https://www.facebook.com/BraveSoftware"]')
+        .waitForVisible('.topSitesElementFavicon[href^="https://www.youtube.com"]')
+        .waitForVisible('.topSitesElementFavicon[href^="https://brave.com"]')
+        .waitForVisible('.topSitesElementFavicon[href^="https://itunes.apple.com"]')
+        .waitForVisible('.topSitesElementFavicon[href^="https://play.google.com/store"]')
+    })
+
     it('shows sites that have been visited', function * () {
       yield loadPageWithTracker(this.app.client)