Tweaks to about:newtab

- moving SVGs into img/newtab/ folder
- standardized colors between about:newtab and Bravery panel (pulled into variables.less)
- marked items we don't want having text selection w/ -webkit-user-select:none
- marked items as cursor:default, to ensure a more app-like feel (versus browser icons)
- SVG icons in bottom right are now drawn via mask and have a hover color (gray)
- adding tests for about:newtab
- fixed bookmark behavior; title is correct (add or edit; recent changes not related to newtab updated this behavior)
- updated SiteRemovalNotification to use component state (triggering re-render when change happens)
- updated styles to match expected behavior (no border on close button, pointer cursor on undo/restore all links, etc)
- all images (except one) removed from project
- image details are now stored in json in ./js/data/backgrounds.js
- images will try to load remotely:
  - if they fail, they'll fall back to the built-in image (see config.js)
  - if the built-in image fails, the screen still looks nice (uses gradient)
  - screen desperately needs fade in transition to avoid FOUC (https://en.wikipedia.org/wiki/Flash_of_unstyled_content)
- properties that read newTabState moved into stats component
- code retrieving about links moved into footer component
- components not using state were updated to inherit from ImmutableComponent
- clock updated to start with a time (no longer waits 1 second before showing)
- remove multiple calls to aboutAction where possible
- fix broken bookmark button (handlers had wrong names)

NOTE: the ONLY way I could find to detect image load failure was to put a hidden
image tag with an onerror handler. Having a div with a `background-image` CSS
attribute doesn't appear to offer a way to catch the error. You can provide a
fallback image URL, but the title of the image won't match (and down the road,
the author details may not match, if there are multiple authors)

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

@@ -1,6 +1,8 @@
 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

js/about/aboutActions.js

@@ -144,22 +144,6 @@ 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,
@@ -355,6 +339,26 @@ const aboutActions = {
     })
   },
 
+  /**
+   * 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
+   * @param {boolean} shouldShowLocation - Whether or not to show the URL input
+   * @param {boolean} isBookmarkHanger - true if triggered from star icon in nav bar
+   */
+  setBookmarkDetail: function (currentDetail, originalDetail, destinationDetail, shouldShowLocation, isBookmarkHanger) {
+    aboutActions.dispatchAction({
+      actionType: windowConstants.WINDOW_SET_BOOKMARK_DETAIL,
+      currentDetail,
+      originalDetail,
+      destinationDetail,
+      shouldShowLocation,
+      isBookmarkHanger
+    })
+  },
+
   /**
    * Dispatch a message to set default browser
    */

js/about/newTabComponents/block.js

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ImmutableComponent = require('../../components/immutableComponent')
 const cx = require('../../lib/classSet.js')
 const DragSource = require('react-dnd').DragSource
 const DropTarget = require('react-dnd').DropTarget
@@ -59,9 +60,9 @@ const targetCollect = (connect) => {
   }
 }
 
-class Block extends React.Component {
+class Block extends ImmutableComponent {
   render () {
-    const { isDragging, connectDragSource, connectDropTarget, onBookmarkedTopSite, isBookmarked, onPinnedTopSite, isPinned, onIgnoredTopSite, title, href, style, favicon } = this.props
+    const { isDragging, connectDragSource, connectDropTarget, onToggleBookmark, 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'
@@ -81,7 +82,7 @@ class Block extends React.Component {
                 fa: true,
                 [starIcon]: true
               })}
-              onClick={onBookmarkedTopSite}
+              onClick={onToggleBookmark}
               data-l10n-id={isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
             />
             <button

js/about/newTabComponents/clock.js

@@ -7,14 +7,14 @@ const React = require('react')
 class Clock extends React.Component {
   constructor () {
     super()
-    this.state = {}
+    this.state = {
+      currentTime: this.currentTime
+    }
   }
   get currentTime () {
     const date = new Date()
     const timeOptions = {hour: '2-digit', minute: '2-digit'}
-    const currentTime = date.toLocaleTimeString([], timeOptions)
-
-    return currentTime
+    return date.toLocaleTimeString([], timeOptions)
   }
   updateClock () {
     this.setState({
@@ -30,4 +30,5 @@ class Clock extends React.Component {
     </div>
   }
 }
+
 module.exports = Clock

js/about/newTabComponents/footerInfo.js

@@ -3,27 +3,28 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ImmutableComponent = require('../../components/immutableComponent')
+const {aboutUrls} = require('../../lib/appUrlUtil')
 
-class FooterInfo extends React.Component {
-  constructor () {
-    super()
-    this.state = {}
-  }
-
+class FooterInfo extends ImmutableComponent {
   render () {
+    if (!this.props.backgroundImage.name) {
+      return null
+    }
     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>
+          <span className='photoBy' data-l10n-id='photoBy' /> <a className='copyrightOwner' href={this.props.backgroundImage.link} target='_blank'>{this.props.backgroundImage.author}</a>
         </div>
-        <span className='photoName'>{this.props.photoName}</span>
+        <span className='photoName'>{this.props.backgroundImage.name}</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' />
+        <a className='shortcutIcon settingsIcon' href={aboutUrls.get('about:preferences')} data-l10n-id='preferencesPage' />
+        <a className='shortcutIcon bookmarksIcon' href={aboutUrls.get('about:bookmarks')} data-l10n-id='bookmarksPage' />
+        <a className='shortcutIcon historyIcon' href={aboutUrls.get('about:history')} data-l10n-id='historyPage' />
       </nav>
     </footer>
   }
 }
+
 module.exports = FooterInfo

js/about/newTabComponents/siteRemovalNotification.js

@@ -3,20 +3,17 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ImmutableComponent = require('../../components/immutableComponent')
 const cx = require('../../lib/classSet.js')
 
-class siteRemovalNotification extends React.Component {
-  constructor () {
-    super()
-    this.state = {}
-  }
-
+class siteRemovalNotification extends ImmutableComponent {
   render () {
-    const { isActive, onUndoIgnoredTopSite, onRestoreAll, onCloseNotification } = this.props
+    // TODO: fix me; I removed and then hardcoded isActive because I wasn't sure how it's used
+    const { onUndoIgnoredTopSite, onRestoreAll, onCloseNotification } = this.props
     return <div
       className={cx({
         siteRemovalNotification: true,
-        active: isActive
+        active: true
       })}>
       <span className='notification' data-l10n-id='thumbRemoved' />
       <span className='siteRemovalAction' onClick={onUndoIgnoredTopSite} data-l10n-id='undoRemoved' />
@@ -25,4 +22,5 @@ class siteRemovalNotification extends React.Component {
     </div>
   }
 }
+
 module.exports = siteRemovalNotification