Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

[WIP] New tab page #3199

Closed
wants to merge 1 commit into from
Closed

[WIP] New tab page #3199

wants to merge 1 commit into from

Conversation

cezaraugusto
Copy link
Contributor

@cezaraugusto cezaraugusto commented Aug 16, 2016

  • Submitted a ticket for my issue if one did not already exist.
  • Used Github auto-closing keywords in the commit message.
  • Ran git rebase -i to squash commits if needed.

Still a lot of work to do. WIP of #3001

Current output: (will be updated as things gets done)

newnewtab

Tasks:

1.0 ENG tasks:

  • build data collector for "Bravery blocking reports", and add time estimation
    • add mechanism for when the number excels the column width. i.e. 33k
  • add fall-back mechanism when large favicon is not present for a given site
  • build high-res favicon collector mechanism, pulled from page header at domain root page (not needed; best favicon URL is already fetched when page loads)
  • create local cache for large favicons (base64) (not needed; favicons are already cached by browser)
  • create mechanism to retain page theme-color about:newtab - create mechanism to retain page theme-color #5307
  • (ON HOLD) 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 the top-sites list creation mechanism using a blend of freceny and other means which may be adjusted over time to improve the results
  • Translate estimated time strings
  • build the BG images retrieval mechanism, with smart randomizer to eliminate the same image twice in a row (working but needs follow-up)
  • build data connector for local-time display
  • connect new-tab to prefs
  • add mechanism to remove unwanted tiles
  • Add mechanism for Pinned tiles
  • Add mechanism for bookmarking tiles
  • Add reordering mechanism for tiles' grid
  • State changes need to be documented in docs/state.md
  • Removing a pinned site would also remove it from pinned list
  • Pinned sites should be allowed to be dragged as well
  • Add 'undo Pinning' (working)
  • Add 'restore gridLayout' in a way similar as Chrome (working)
  • Make suggestions.js ignore bookmarked sites on topSites grid about:newtab - Make suggestions.js ignore bookmarked sites on topSites grid #5308

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
  • Create copyright text box for background images (working but needs follow-up)
  • Add labels for about:page links (settings, bookmarks, history), and topSites actions (bookmark/pin/remove)
  • extend height of black opacity blend until the obvious transition disappears. (I’ll look if I had solved that in a mockup already.)
  • Set photo credit to left-aligned text
  • change looping order of the site icon row button - should be 1/2/3/1/2/3 with 1 as the default
  • edit table with correct labels for the photos
  • (ON HOLD) we must use a small AM/PM label.
  • Improve transitions for topSites actions

Current Issues found (under investigation)

  • On resizing window background doesn't follow window height
  • On hover over a tile, please use a title attribute so you can have the page title there
  • Pinning even sites makes last site to jump to previous position
  • Pinning a 2nd site and reordering erase previous pinned site
  • If a url is typed wrong, then typed right, it doesn't populate topSites grid
  • Bookmark the about bookmarks page by dragging it to your toolbar. It shows up in the newtab, but when you click it, it only opens an about:blank page and not the bookmarks.
  • Sometimes a tile doesn't have a letter even, it was for this URL
    screenshot 2016-09-12 09 04 44

@luixxiul luixxiul added the design A design change, especially one which needs input from the design team. label Aug 16, 2016
@bbondy
Copy link
Member

bbondy commented Aug 18, 2016

wowzers this is starting to look good. cc @bradleyrichter
The icons on the bottom right of Brad's design might be a good easy step to do when you have time as well.

@bsclifton
Copy link
Member

Wow- great job, @cezaraugusto! 😄

@bradleyrichter
Copy link
Contributor

yeah! exiting! Nice job @cezaraugusto !

@bbondy
Copy link
Member

bbondy commented Aug 27, 2016

looks like this needs a new rebase because it can't be merged in cleanly in github (it isn't ready to merge yet, but would be good to keep it up to date with master).

Could you check for what the HTML meta tags we should be checking for are for the high res icons that you need?

@bbondy
Copy link
Member

bbondy commented Aug 27, 2016

Let me know if you need any help with the grid layout.

@cezaraugusto
Copy link
Contributor Author

About high-res icons:

I was thinking on getting images following Apple > MS conventions on links/meta icon declarations, then search for a given pattern for high res icons (maybe look for size attr, or maybe a given number). If all else fails we fallback to default *.ico images we already have. Like:

1. Search for Apple name convention
<link rel="apple-touch-icon" href="http://example.com/apple-touch-icon.png">

2. Search for MS name convention (tile pictures)
<meta name="msapplication-TileImage" content="http://example.com/mstile-72x72.png">

3. Search for any name convention for high-res icons
<link type="image/png" rel="icon" href="http://example.com/something-144x144.png" sizes="144x144">

*4. Fallback for default .ico images

@bradleyrichter
Copy link
Contributor

@cezaraugusto This should work nicely.

I expect half the ico files are 32x which may look clear enough.

The other half at 16x are too small so we need to check for the dims and fall back from there to the letter/background theme.

Doable?

@cezaraugusto
Copy link
Contributor Author

@bradleyrichter sure, sounds great

@cezaraugusto cezaraugusto mentioned this pull request Sep 6, 2016
@@ -802,7 +810,11 @@ class Frame extends ImmutableComponent {
const isError = this.props.aboutDetails && this.props.aboutDetails.get('errorCode')
if (!this.props.isPrivate && this.props.provisionalLocation === this.props.location && (protocol === 'http:' || protocol === 'https:') && !isError && savePage) {
// Register the site for recent history for navigation bar
appActions.addSite(siteUtil.getDetailFromFrame(this.frame))
const addSiteDebounced = debounce((frame) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We were debouncing this so that we can call it multiple times. As the different events come in.
So you need to move addSiteDebounced above at the top of the file. Then use it like you do below. But also use it in the other events as things come in like the favicon and the themeColor event.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is sometimes we get a loadi-end but the favicon or themecolor event didn't happen yet. So you need to also call addSiteDebounced from:
this.webview.addEventListener('page-favicon-updated', (e) => {
this.webview.addEventListener('did-change-theme-color', ({themeColor}) => {

But be sure not to call it for private tabs, like the above one doesn't.

@rafaelcastrocouto
Copy link

rafaelcastrocouto commented Sep 16, 2016

Great job, I have two things to say:
1 - My suggestion to the new tab is to have an edit mode like codepen.io
2 - Until this becomes a real thing, is there a way to edit the new tab page? Is it possible to just edit some html? That plain white is killing me!

@cezaraugusto
Copy link
Contributor Author

@rafaelcastrocouto

1 - we're gradually improving new tab page, it will be connected with preferences so you can customize it your way.
2 - There's no option to do it, but If you want to hack and play with new tab while it's not ready, you'll want to look at js/about/newtab.js 👻

@rafaelcastrocouto
Copy link

Thx a lot Cezar,

If anyone has trouble finding the file here is the link in github
https://github.com/brave/browser-laptop/blob/master/app/extensions/brave/js/about.js

And on a local windows install the file can be found at
C:\Users\USERNAME\AppData\Local\brave\app-VERSION\resources\extensions\brave\js\about.js

@luixxiul luixxiul added this to the 1.0.0 milestone Sep 28, 2016
@lucidNTR
Copy link
Contributor

lucidNTR commented Oct 4, 2016

@cezaraugusto i built a local storage based cache for theme colors and favicons. if that could help you ping me. i did not make a pull request yet because i need to implement cache cleaning first...

@cezaraugusto
Copy link
Contributor Author

@lucidNTR thanks for your help! I'm not in this task yet but will definitely ping you if needed, thanks.

@bsclifton
Copy link
Member

bsclifton commented Oct 24, 2016

@cezaraugusto I rebased against master and resolved all conflicts; I couldn't push to your remote since upstream editing wasn't allowed when this PR was created (you might be able to give me permissions by editing this PR)

Here's the resolved branch though; I'll hit you up later via Slack about this 😄
https://github.com/bsclifton/browser-laptop/commits/bsclifton-newtab

@bsclifton bsclifton mentioned this pull request Nov 1, 2016
4 tasks
@bsclifton
Copy link
Member

Closing in favor of #5301

I'll be creating tasks based on what's left and referencing a lot of what's in here 😄

@bsclifton bsclifton closed this Nov 1, 2016
@bsclifton bsclifton removed this from the 1.0.0 milestone Nov 1, 2016
@cezaraugusto cezaraugusto deleted the 3001 branch April 7, 2017 17:08
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
design A design change, especially one which needs input from the design team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants