Brand new about:newtab page

Fixes #3001

Test plan for unpinning topSites:
* Pin a topSite
* Check that there are a pinned icon
* Hover over topSite
* Check that there are a minus icon
* Hit minus icon
* Pinned icon should be removed

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

@@ -1,8 +1,6 @@
 reload=Reload
 addBookmark=Add bookmark
-addBookmarkButton.title=Bookmark page
 removeBookmark=Remove bookmark
-removeBookmarkButton.title=Remove bookmark
 addToReadingList=Add to reading list
 removeFromReadingList=Remove from reading list
 forward=Forward

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

@@ -21,10 +21,16 @@ httpsUpgraded={[plural(httpsUpgradedCount)]}
 httpsUpgraded[one]=HTTPS Upgrade
 httpsUpgraded[other]=HTTPS Upgrades
 estimatedTimeSaved=Estimated Time Saved
+addBookmarkButton.title=Bookmark page
+removeBookmarkButton.title=Remove bookmark
 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
+thumbRemoved=Thumb Removed.
+undoRemoved=Undo
+restoreAll=Restore All
+close.title=Close notification

docs/state.md

@@ -161,6 +161,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
@@ -219,10 +220,10 @@ AppStore
   },
   about: {
     newtab: {
-      gridLayoutSize: [string], // 'small', 'medium', 'large'
-      sites: [list], // List of accessed sites to be used on gridLayout
-      ignoredTopSites: [list], // List of ignored sites
-      pinnedTopSites: [list], // List of pinned sites
+      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

@@ -144,6 +144,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,135 @@
+/* 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, onBookmarkedTopSite, isBookmarked, onPinnedTopSite, isPinned, onIgnoredTopSite, title, href, style, favicon } = this.props
+    const opacity = isDragging ? 0 : 1
+    const starIcon = isBookmarked ? 'fa-star' : 'fa-star-o'
+    const pinIcon = isPinned ? 'fa-minus' : 'fa-thumb-tack'
+
+    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={onBookmarkedTopSite}
+              data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+            />
+            <button
+              className={cx({
+                topSitesActionBtn: true,
+                fa: true,
+                [pinIcon]: true
+              })}
+              onClick={onPinnedTopSite}
+              data-l10n-id={isPinned ? 'pinTopSiteButton' : 'unpinTopSiteButton'}
+            />
+            <button
+              className='topSitesActionBtn fa fa-close'
+              onClick={onIgnoredTopSite}
+              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

js/about/newTabComponents/footerInfo.js

@@ -0,0 +1,29 @@
+/* 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')
+
+class FooterInfo extends React.Component {
+  constructor () {
+    super()
+    this.state = {}
+  }
+
+  render () {
+    return <footer className='footerContainer'>
+      <div className='copyrightNotice'>
+        <div className='copyrightCredits'>
+          <span className='photoBy' data-l10n-id='photoBy' /> <a className='copyrightOwner' href={this.props.photographerLink} target='_blank'>{this.props.photographer}</a>
+        </div>
+        <span className='photoName'>{this.props.photoName}</span>
+      </div>
+      <nav className='shortcutsContainer'>
+        <a className='shortcutIcon settingsIcon' href={this.props.settingsPage} data-l10n-id='preferencesPage' />
+        <a className='shortcutIcon bookmarksIcon' href={this.props.bookmarksPage} data-l10n-id='bookmarksPage' />
+        <a className='shortcutIcon historyIcon' href={this.props.historyPage} data-l10n-id='historyPage' />
+      </nav>
+    </footer>
+  }
+}
+module.exports = FooterInfo

js/about/newTabComponents/siteRemovalNotification.js

@@ -0,0 +1,28 @@
+/* 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')
+
+class siteRemovalNotification extends React.Component {
+  constructor () {
+    super()
+    this.state = {}
+  }
+
+  render () {
+    const { isActive, onUndoIgnoredTopSite, onRestoreAll, onCloseNotification } = this.props
+    return <div
+      className={cx({
+        siteRemovalNotification: true,
+        active: isActive
+      })}>
+      <span className='notification' data-l10n-id='thumbRemoved' />
+      <span className='siteRemovalAction' onClick={onUndoIgnoredTopSite} data-l10n-id='undoRemoved' />
+      <span className='siteRemovalAction' onClick={onRestoreAll} data-l10n-id='restoreAll' />
+      <button className='fa fa-close' onClick={onCloseNotification} data-l10n-id='close' />
+    </div>
+  }
+}
+module.exports = siteRemovalNotification