Browser-laptop: New Tab Design: Overview with subtasks (about:newtab)

[bradleyrichter]

When the user makes a new tab, a set of useful information will be displayed which includes their Top-Sites, a digital clock showing their local time, and a cumulative readout of ads/trackers blocked over time. This info is presented over photo backgrounds which are sourced from a creative commons image database of earth surface imagery.

First version features:

• Image background, selected at random from source cache which is loaded from a remote server at run time. (random, but different than currently displayed image)
• top-sites large-image thumbnails with BG preview feature
• top sites grid-toggle button to show 6, 12, or 18 squares
• Cumulative Bravery interesting data - Trackers, Ads blocked, and estimated loading time saved
• Time clock that shows the current regional time for the user
• "toolbar" with shortcuts to several Brave about:pages including prefs, bookmarks and history

Later features:

• ability to select from 3-5 background themes of different images https://github.com/brave/browser-laptop/issues/5306
• ability to select a local volume as the BG image source https://github.com/brave/browser-laptop/issues/5305
• ability to customize the top-sites area to show source sites from a bookmark folder https://github.com/brave/browser-laptop/issues/5304
• ability to change the view from thumbnail squares to a list view https://github.com/brave/browser-laptop/issues/5303
• add local temp/weather to time display https://github.com/brave/browser-laptop/issues/5302

1.0 ENG tasks:

• build data collector for "Bravery blocking reports", and add time estimation
• build high-res favicon collector mechanism, pulled from page header at domain root page
  
  
  
  • create local cache for large favicons
  
  
  • add fall-back mechanism when large favicon is not present for a given site
  
  
• build the top-sites list creation mechanism using a blend of freceny and other means which may be adjusted over time to improve the results
• build the BG images retrieval mechanism, with smart randomizer to eliminate the same image twice in a row (images will be stored and pulled from an AWS volume)
• interface with tab-preview mechanism to be utilized for previewing the topsites on mouse-over. (replaces BG image during mouseover and uses the same delay approach as tab-previews)
• build data connector for local-time display
• connect new-tab to prefs

1.0 Front-end tasks

• arrange BG image in CSS to zoom-to-width or height with above-centered anchor point
• create separate black gradient mask in layer over BG image
• create adjustable table layout for top-site buttons with high-res favicons
• create CSS for Bravery info display
• create CSS for live Clock display
• create bottom-right-anchored toolbar for various brave browser-page shortcuts

[bbondy]

@bradleyrichter how do you recommend we calculate the time saved stat? Maybe the number of things blocked * some small value for avg request/response time?

[bradleyrichter]

Ideally we could measure the local bandwidth and use it as part of the equation but let's test a fixed small value first that is optimized for 4 megabit?

[paanvaannd]

Usually not a fan of start pages such as this, so I would still like to have an option to display a blank page, but I must admit that I would really love to try this out! The UI looks a lot cleaner than, say, Firefox's start page which is just a bunch of boxes with links to frequented websites.

Great work on the layout and execution; I can't wait to try it out!

[bradleyrichter]

attaching the topsites-rows toggle buttons (SVG format, 100px square)

topsites_btn.zip

[ayumi]

my preferred new tab page is motivation

[bsclifton]

@cezaraugusto do you have any recent pics that you can demo? Would love to see where it's at :smile:

[cezaraugusto]

@bsclifton:

We are already dynamically adding/pinning/removing/reordering sites (I had to cut the video), next steps are bookmarking and preview options. UI had some minor alteration since last preview.

[Sh1d0w]

Looks really good @cezaraugusto . Can't wait to get hands on it :smile: