[WIP] New tab page

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

@@ -223,3 +223,19 @@ cookies=Cookies
 licenseTextOk=Ok
 closeFirefoxWarningOk=Ok
 importSuccessOk=Ok
+
+days=day(s)
+hours=hour(s)
+minutes=minute(s)
+seconds=second(s)
+trackersBlocked=Trackers Blocked
+adsBlocked=Ads Blocked
+httpsUpgraded=Https Upgraded
+estimatedTimeSaved=Estimated Time Saved
+pinTopSiteButton.title=Unpin page from top sites list
+unpinTopSiteButton.title=Pin page to top sites list
+removeTopSiteButton.title=Remove page from Top Sites list
+preferencesPage.title=Go to Preferences page
+bookmarksPage.title=Go to Bookmarks page
+historyPage.title=Go to History page
+photoBy=Photo By

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

@@ -95,7 +95,9 @@ startsWith=Brave starts with
 startsWithOptionLastTime=my windows / tabs from last time
 startsWithOptionHomePage=my home page
 startsWithOptionNewTabPage=the new tab page
+startsWithOptionDefaultSearchEngine=default search engine
 myHomepage=My homepage is
+newTabMode=A new tab is
 default=Default
 searchEngine=Search Engine
 engineGoKey=Engine Go Key (Type First)

app/sessionStore.js

@@ -451,6 +451,14 @@ module.exports.defaultAppState = () => {
         timestamp: 0
       }
     },
-    menubar: {}
+    menubar: {},
+    about: {
+      newtab: {
+        gridLayoutSize: 'small',
+        sites: [],
+        ignoredTopSites: [],
+        pinnedTopSites: []
+      }
+    }
   }
 }

docs/state.md

@@ -145,6 +145,7 @@ AppStore
     // See defaults in js/constants/appConfig.js
     'general.startup-mode': string, // One of: lastTime, homePage, newTabPage
     'general.homepage': string, // URL of the user's homepage
+    'general.newtab-mode': string,  // One of: newTabPage, homePage, defaultSearchEngine
     'general.show-home-button': boolean, // true if the home button should be shown
     'general.useragent.value': (undefined|string), // custom user agent value
     'general.downloads.default-save-path': string, // default path for saving files
@@ -199,7 +200,10 @@ AppStore
   },
   about: {
     newtab: {
-      gridLayout: string // 'small', 'medium', 'large'
+      gridLayoutSize: string, // 'small', 'medium', 'large'
+      sites: [string], // List of sites to be used on gridLayout
+      ignoredTopSites: [string], // List of ignored sites
+      pinnedTopSites: [string], // List of pinned sites
     }
   },
   menu: {

js/about/aboutActions.js

@@ -114,6 +114,22 @@ const aboutActions = {
     ipc.sendToHost(messages.CONTEXT_MENU_OPENED, nodeProps, contextMenuType)
   },
 
+  /**
+   * Dispatches a message to set add/edit bookmark details
+   * If set, also indicates that add/edit is shown
+   * @param {Object} currentDetail - Properties of the bookmark to change to
+   * @param {Object} originalDetail - Properties of the bookmark to edit
+   * @param {Object} destinationDetail - Will move the added bookmark to the specified position
+   */
+  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail) {
+    aboutActions.dispatchAction({
+      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
+      currentDetail,
+      originalDetail,
+      destinationDetail
+    })
+  },
+
   moveSite: function (sourceDetail, destinationDetail, prepend, destinationIsParent) {
     aboutActions.dispatchAction({
       actionType: appConstants.APP_MOVE_SITE,

js/about/newTabComponents/block.js

@@ -0,0 +1,130 @@
+/* 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 cx = require('../../lib/classSet.js')
+const DragSource = require('react-dnd').DragSource
+const DropTarget = require('react-dnd').DropTarget
+
+const Types = {
+  BLOCK: 'block'
+}
+
+const blockSource = {
+  /**
+   * Required. Called when the dragging starts
+   * It's the only data available to the drop targets about the drag source
+   * @see http://gaearon.github.io/react-dnd/docs-drag-source.html#specification-methods
+   */
+  beginDrag (props) {
+    return {
+      id: props.id
+    }
+  }
+}
+
+const blockTarget = {
+  /**
+   * Optional. Called when an item is hovered over the component
+   * @see http://gaearon.github.io/react-dnd/docs-drop-target.html#specification-methods
+   */
+  hover (props, monitor) {
+    const draggedId = monitor.getItem().id
+    if (draggedId !== props.id) {
+      props.onDraggedSite(draggedId, props.id)
+    }
+  }
+}
+
+/**
+ * Both sourceCollect and targetCollect are called *Collecting Functions*
+ * They will be called by React DnD with a connector that lets you connect
+ * nodes to the DnD backend, and a monitor to query information about the drag state.
+ * It should return a plain object of props to inject into your component.
+ *
+ * @see http://gaearon.github.io/react-dnd/docs-drop-target.html#the-collecting-function
+ */
+
+const sourceCollect = (connect, monitor) => {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+}
+
+const targetCollect = (connect) => {
+  return {
+    connectDropTarget: connect.dropTarget()
+  }
+}
+
+class Block extends React.Component {
+  render () {
+    const { isDragging, connectDragSource, connectDropTarget, onBookmarkedSite, isBookmarked, onPinnedSite, isPinned, onIgnoredSite, title, href, style, favicon } = this.props
+    const opacity = isDragging ? 0 : 1
+    const starIcon = isBookmarked ? 'fa-star' : 'fa-star-o'
+
+    return connectDragSource(connectDropTarget(
+      <div className='topSiteSquareSpace'>
+        <div
+          className='topSitesElement'
+          style={{
+            opacity: opacity
+          }}
+        >
+          <div className='topSitesActionContainer'>
+            <button
+              className={cx({
+                topSitesActionBtn: true,
+                fa: true,
+                [starIcon]: true
+              })}
+              onClick={onBookmarkedSite}
+              data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+            />
+            <button
+              className='topSitesActionBtn fa fa-thumb-tack'
+              onClick={onPinnedSite}
+              data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
+            />
+            <button
+              className='topSitesActionBtn fa fa-close'
+              onClick={onIgnoredSite}
+              data-l10n-id='removeTopSiteButton'
+            />
+          </div>
+          <a
+            className='topSitesElementFavicon'
+            title={title}
+            href={href}
+            style={style}
+          >
+            {isPinned ? <div className='pinnedTopSite'><span className='pin fa fa-thumb-tack' /></div> : null}
+            {favicon}
+          </a>
+        </div>
+      </div>
+    ))
+  }
+}
+
+/**
+ * Wraps the component to make it draggable
+ * Only the drop targets registered for the same type will
+ * react to the items produced by this drag source.
+ *
+ * @see http://gaearon.github.io/react-dnd/docs-drag-source.html
+ */
+const source = DragSource(Types.BLOCK, blockSource, sourceCollect)(Block)
+
+/**
+ * React to the compatible items being dragged, hovered, or dropped on it
+ * Works with the same parameters as DragSource() above.
+ *
+ * @see http://gaearon.github.io/react-dnd/docs-drop-target.html
+ */
+const block = DropTarget(Types.BLOCK, blockTarget, targetCollect)(source)
+
+// Notice that we're exporting the DropTarget and not Block Class.
+module.exports = block