Merge pull request #1339 from brave/ca-newtab-2

refactor ntp to use brave-ui

browser/ui/webui/brave_webui_source.cc

@@ -109,6 +109,7 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "estimatedTimeSaved", IDS_BRAVE_NEW_TAB_TOTAL_TIME_SAVED },
         { "thumbRemoved", IDS_BRAVE_NEW_TAB_THUMB_REMOVED },
         { "undoRemoved", IDS_BRAVE_NEW_TAB_UNDO_REMOVED },
+        { "close", IDS_BRAVE_NEW_TAB_CLOSE },
         { "restoreAll", IDS_BRAVE_NEW_TAB_RESTORE_ALL },
         { "second", IDS_BRAVE_NEW_TAB_SECOND },
         { "seconds", IDS_BRAVE_NEW_TAB_SECONDS },

components/brave_new_tab_ui/BUILD.gn

@@ -2,26 +2,28 @@ import("//brave/components/common/typescript.gni")
 
 transpile_web_ui("brave_new_tab_ui") {
   inputs = [
-    "brave_new_tab.html",
-    "brave_new_tab.tsx",
-    "storage.ts",
-    "store.ts",
     "actions/new_tab_actions.ts",
-    "components/app.tsx",
-    "components/block.tsx",
-    "components/footerInfo.tsx",
-    "components/siteRemovalNotification.tsx",
-    "components/stats.tsx",
+    "components/newTab/block.tsx",
+    "components/newTab/footerInfo.tsx",
+    "components/newTab/index.tsx",
+    "components/newTab/notification.tsx",
+    "components/newTab/stats.tsx",
     "components/privateTab/index.tsx",
     "components/privateTab/privateTab.tsx",
     "components/privateTab/qwantTab.tsx",
     "components/privateTab/qwantTorTab.tsx",
+    "components/privateTab/torContent.tsx",
     "components/privateTab/torTab.tsx",
+    "components/app.tsx",
     "constants/backgrounds.ts",
     "constants/new_tab_types.ts",
-    "constants/theme.ts",
     "reducers/index.ts",
     "reducers/new_tab_reducer.tsx",
+    "api.ts",
+    "brave_new_tab.html",
+    "brave_new_tab.tsx",
+    "storage.ts",
+    "store.ts"
   ]
 
   entry_points = [

components/brave_new_tab_ui/actions/new_tab_actions.ts

@@ -11,8 +11,6 @@ export const topSitesDataUpdated = (topSites: NewTab.Site[]) => action(types.NEW
   topSites
 })
 
-export const backgroundImageLoadFailed = () => action(types.NEW_TAB_BACKGROUND_IMAGE_LOAD_FAILED)
-
 export const bookmarkAdded = (url: string) => action(types.BOOKMARK_ADDED, {
   url
 })

components/brave_new_tab_ui/api.ts

@@ -73,7 +73,7 @@ export const getGridSites = (state: NewTab.State, checkBookmarkInfo?: boolean) =
   gridSites.forEach((gridSite: NewTab.Site) => {
     gridSite.letter = getLetterFromSite(gridSite)
     gridSite.thumb = `chrome://thumb/${gridSite.url}`
-    gridSite.favicon = `chrome://favicon/size/48@1x/${gridSite.url}`
+    gridSite.favicon = `chrome://favicon/size/64@1x/${gridSite.url}`
     gridSite.bookmarked = state.bookmarks[gridSite.url]
 
     if (checkBookmarkInfo && !gridSite.bookmarked) {

components/brave_new_tab_ui/brave_new_tab.tsx

@@ -16,6 +16,11 @@ import App from './components/app'
 // Utils
 import store from './store'
 import * as newTabActions from './actions/new_tab_actions'
+import 'emptykit.css'
+
+// Fonts
+import '../fonts/poppins.css'
+import '../fonts/muli.css'
 
 window.cr.define('brave_new_tab', function () {
   'use strict'

components/brave_new_tab_ui/components/app.tsx

@@ -3,195 +3,33 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { DragDropContext } from 'react-dnd'
 import { bindActionCreators, Dispatch } from 'redux'
 import { connect } from 'react-redux'
-import HTML5Backend from 'react-dnd-html5-backend'
-import { Clock } from 'brave-ui/old'
 
 // Components
-import Stats from './stats'
-import Block from './block'
-import FooterInfo from './footerInfo'
-import SiteRemovalNotification from './siteRemovalNotification'
-import NewPrivateTab from './privateTab'
-
-// Constants
-import { theme } from '../constants/theme'
+import NewPrivateTabPage from './privateTab'
+import NewTabPage from './newTab'
 
 // Utils
 import * as newTabActions from '../actions/new_tab_actions'
 
-// Assets
-require('../../styles/newtab.less')
-require('../../fonts/poppins.css')
-require('../../fonts/muli.css')
-
 interface Props {
   actions: any
   newTabData: NewTab.State
 }
 
-class NewTabPage extends React.Component<Props, {}> {
-  get actions () {
-    return this.props.actions
-  }
-
-  get showImages () {
-    return this.props.newTabData.showImages && !!this.props.newTabData.backgroundImage
-  }
-
-  get useAlternativePrivateSearchEngine () {
-    return (
-      this.props.newTabData &&
-      this.props.newTabData.useAlternativePrivateSearchEngine
-    )
-  }
-
-  onDraggedSite = (fromUrl: string, toUrl: string, dragRight: boolean) => {
-    this.actions.siteDragged(fromUrl, toUrl, dragRight)
-  }
-
-  onDragEnd = (url: string, didDrop: boolean) => {
-    this.actions.siteDragEnd(url, didDrop)
-  }
-
-  onToggleBookmark (site: NewTab.Site) {
-    if (site.bookmarked === undefined) {
-      this.actions.bookmarkAdded(site.url)
-    } else {
-      this.actions.bookmarkRemoved(site.url)
-    }
-  }
-
-  onHideSiteRemovalNotification = () => {
-    this.actions.onHideSiteRemovalNotification()
-  }
-
-  onTogglePinnedTopSite (site: NewTab.Site) {
-    if (!site.pinned) {
-      this.actions.sitePinned(site.url)
-    } else {
-      this.actions.siteUnpinned(site.url)
-    }
-  }
-
-  onIgnoredTopSite (site: NewTab.Site) {
-    this.actions.siteIgnored(site.url)
-  }
-
-  onUndoIgnoredTopSite = () => {
-    this.actions.undoSiteIgnored()
-  }
-
-  /**
-   * Clear ignoredTopSites and pinnedTopSites list
-   */
-  onUndoAllSiteIgnored = () => {
-    this.actions.undoAllSiteIgnored()
-  }
-
-  /**
-   * This handler only fires when the image fails to load.
-   * If both the remote and local image fail, page defaults to gradients.
-   */
-  onBackgroundImageLoadFailed = () => {
-    this.actions.backgroundImageLoadFailed()
-  }
-
-  onChangePrivateSearchEngine = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target) {
-      return
-    }
-    this.actions.changePrivateSearchEngine(e.target.checked)
-  }
-
+class DefaultPage extends React.Component<Props, {}> {
   render () {
-    const { newTabData } = this.props
+    const { newTabData, actions } = this.props
 
     // don't render if user prefers an empty page
     if (this.props.newTabData.showEmptyPage && !this.props.newTabData.isIncognito) {
-      return <div className='empty' />
+      return <div />
     }
 
-    if (this.props.newTabData.isIncognito) {
-      return (
-        <NewPrivateTab
-          useAlternativePrivateSearchEngine={this.useAlternativePrivateSearchEngine}
-          isTor={this.props.newTabData.isTor}
-          isQwant={this.props.newTabData.isQwant}
-          onChangePrivateSearchEngine={this.onChangePrivateSearchEngine}
-        />
-      )
-    }
-
-    // don't render until object is found
-    if (!this.props.newTabData) {
-      return null
-    }
-
-    const backgroundProps: Partial<NewTab.Image> = {}
-    const bgImage: NewTab.Image | undefined = this.props.newTabData.backgroundImage
-    let gradientClassName = 'gradient'
-    if (this.showImages && bgImage) {
-      backgroundProps.style = bgImage.style
-      gradientClassName = 'bgGradient'
-    }
-    return (
-      <div data-test-id='dynamicBackground' className='dynamicBackground' {...backgroundProps}>
-        {
-          this.showImages && bgImage
-            ? <img src={bgImage.source} onError={this.onBackgroundImageLoadFailed} data-test-id='backgroundImage' />
-            : null
-        }
-        <div data-test-id={this.showImages ? 'bgGradient' : 'gradient'} className={gradientClassName} />
-        <div className='content'>
-          <main style={theme.newTab}>
-            <div className='newTabStats'>
-              <div className='statsContainer'>
-                <Stats stats={newTabData.stats}/>
-              </div>
-              <div className='clockContainer'>
-                <Clock customStyle={theme.clock} />
-              </div>
-            </div>
-            <div className='topSitesContainer'>
-              <nav className='topSitesGrid'>
-                {
-                  this.props.newTabData.gridSites.map((site: NewTab.Site) =>
-                    <Block
-                      key={site.url}
-                      id={site.url}
-                      title={site.title}
-                      href={site.url}
-                      favicon={site.favicon}
-                      style={{ backgroundColor: site.themeColor || site.computedThemeColor }}
-                      onToggleBookmark={this.onToggleBookmark.bind(this, site)}
-                      onPinnedTopSite={this.onTogglePinnedTopSite.bind(this, site)}
-                      onIgnoredTopSite={this.onIgnoredTopSite.bind(this, site)}
-                      onDraggedSite={this.onDraggedSite}
-                      onDragEnd={this.onDragEnd}
-                      isPinned={site.pinned}
-                      isBookmarked={site.bookmarked !== undefined}
-                    />
-                  )
-                }
-              </nav>
-            </div>
-          </main>
-          {
-            this.props.newTabData.showSiteRemovalNotification
-              ? <SiteRemovalNotification
-                onUndoIgnoredTopSite={this.onUndoIgnoredTopSite}
-                onRestoreAll={this.onUndoAllSiteIgnored}
-                onCloseNotification={this.onHideSiteRemovalNotification}
-              />
-              : null
-          }
-          <FooterInfo backgroundImage={bgImage} />
-        </div>
-      </div>
-    )
+    return this.props.newTabData.isIncognito
+      ? <NewPrivateTabPage newTabData={newTabData} actions={actions} />
+      : <NewTabPage newTabData={newTabData} actions={actions} />
   }
 }
 
@@ -206,4 +44,4 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(DragDropContext(HTML5Backend)(NewTabPage))
+)(DefaultPage)