Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor ntp to use brave-ui #1339

Merged
merged 5 commits into from
Jan 17, 2019
Merged

refactor ntp to use brave-ui #1339

merged 5 commits into from
Jan 17, 2019

Conversation

cezaraugusto
Copy link
Contributor

@cezaraugusto cezaraugusto commented Jan 14, 2019

screen shot 2019-01-11 at 7 11 00 pm

Changes in this pull-request:

  • Replace all legacy LESS files for NTP
  • Make NTP responsive
  • Simplify logic for background images
  • Remove leftover files

Test Plan 1 - change default new tab and private new tab structure

  • New tab (default) should render;
  • Private tab (default) should render;
  • Private tab (default) shoud toggle between default search engine/ddg;
  • Tor window should render.

Test Plan 2 - refactor new tab page to use brave-ui

close brave/brave-browser#633

  • All interactions in new tab top sites should work

    • Tile links to its website;
    • Pinning/unpinning;
    • Bookmarking/un-bookmarking;
    • Removing
      • All actions in the removal notification should work
  • Background should change upon browser refresh

  • Background should load even without internet connection

  • Links in footer should go to their own links

Test Plan 3 - remove leftover files from ntp

  • Ensure everything builds -- should be catched by CI

Test Plan 4 - adapt favicon size to 64px to match tile icon size

This is a tentative to make favicons look better without much success, but since favicon image wrapper has 64px I thought to be a good idea to have the same size fetched by Brave

Test Plan 5 - normalize styles using emptykit.css

This bumps the latest sha version of brave-ui from @rossmoody and includes only style updates. emptykit.css is a css normalizer used across our pages but not in new tab, which I included.

  • Ensure things look good without weird margins/paddings

this allow us to have a better view of the front-end architecture
and split interests between files
@@ -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}`
Copy link
Member

Choose a reason for hiding this comment

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

What happens here if a 64 pixel version isn't available?

Copy link
Member

Choose a reason for hiding this comment

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

actually nm - just tried it out; it upscales it 😄

@bsclifton
Copy link
Member

Test plan 1 - 👍

Test plan 2

  • getting some weird behavior with pinning; not sure if it was already present or was introduced with this PR. Basically, I browsed until I had 4 tiles showing. I then moved one tile to the far right position (position 4) and pinned it. It then jumped to position 3 and didn't pin. However, once in position 3, I could pin it, as expected.
  • bookmark icon for tile seems to be wrong. It shows as filled (gray) when there is NOT a bookmark. If I click it, it becomes unfilled and a bookmark is added to Other bookmarks
  • when clicking the X to remove tile (tile was in 4th position), it did remove itself. However, it had the following JavaScript error logged to console:
load_time_data.js:217 Unexpected condition on chrome://newtab/: Could not find value for close
  • undo and restore all buttons worked as expected 👍
  • background always refreshed on reload 👍
  • backgrounds load just fine when internet connection is down 👍
  • links for background author work properly 👍

Test plan 3 - code builds great 👍

Test plan 4 - the source icons are showing as 64 pixels, but it's being constrained to 40 pixels
screen shot 2019-01-14 at 4 59 00 pm

Test plan 5 - 👍

Copy link
Member

@bsclifton bsclifton left a comment

Choose a reason for hiding this comment

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

Comments left with behavior found during testing. I also updated the milestone for PR + issue and then added test plan to issue (pointing back here)

@bsclifton bsclifton added this to the 0.60.x - Dev milestone Jan 15, 2019
@cezaraugusto
Copy link
Contributor Author

@bsclifton thanks. there was a missing locale for the close button which was addressed. the logic for topsites didn't change so not introduced in this pr. in general top sites will be reworked fully in a new pr

Copy link
Member

@bsclifton bsclifton left a comment

Choose a reason for hiding this comment

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

Approving since behaviors noted were already present (and may already be captured in issues). Missing locale issue was fixed 😄

@bsclifton bsclifton merged commit cacbcc9 into master Jan 17, 2019
@bsclifton bsclifton deleted the ca-newtab-2 branch January 17, 2019 06:23
@bsclifton
Copy link
Member

@cezaraugusto can you please create a PR to uplift this into 0.60.x? I'm getting a fair amount of merge conflicts when doing a cherry-pick

This was referenced Jan 17, 2019
cezaraugusto added a commit that referenced this pull request Jan 17, 2019
cezaraugusto pushed a commit that referenced this pull request Jan 17, 2019
refactor ntp to use brave-ui
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

newtab should use brave-ui
2 participants