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

about:newtab - avoid flash of unstyled content #5309

Closed
bsclifton opened this issue Nov 1, 2016 · 7 comments · Fixed by #11817
Closed

about:newtab - avoid flash of unstyled content #5309

bsclifton opened this issue Nov 1, 2016 · 7 comments · Fixed by #11817
Labels
feature/newtab polish Nice to have — usually related to front-end/visual tasks. QA/checked-Linux QA/checked-macOS QA/checked-Win64 QA/test-plan-specified release-notes/include
Milestone
0.19.x Hotfix 6 (...

Comments

@bsclifton
Copy link
Member

bsclifton commented Nov 1, 2016 •
edited by kjozwiak
Loading

Because the page is loading an image remotely, opening a new tab has a very brief flash (from white, to gradient, to the image that gets loaded).

We should be fading in gradually to avoid causing a flash for the user.

Test Cases:

Test Cases 1 (downloading the images)

  • launch brave with a new profile
  • open a new tab and ensure that the window appears black for a few seconds while the image is being retrieved remotely
  • ensure that there's a smooth transition when the image is loaded in about:newtab and there's no visible "flashes" of white or any other artefacts.. It should be a smooth experience.

Repeat the above STR several times to retrieve several other images into the local cache.

Test Case 2 (loading images from cache)

  • open a new tab
  • images that have already been downloaded should have a quick smooth transition without any visible "flashes" of white or any other artefacts.

You should be able to tell the difference when an image is being downloaded/loaded from cache.
@bsclifton bsclifton added this to the 0.12.9dev milestone Nov 1, 2016
@cezaraugusto cezaraugusto mentioned this issue Nov 1, 2016
Merged
3 tasks
@bsclifton bsclifton modified the milestones: 0.12.8dev, 0.12.9dev Nov 1, 2016
@bsclifton
Copy link
Member Author

Reopening after @bbondy had tried it out and it's noticeably slow. Let's see what we can do to fix this

@bsclifton bsclifton reopened this Nov 2, 2016
@bsclifton bsclifton self-assigned this Nov 2, 2016
@bsclifton bsclifton modified the milestones: 0.12.9dev, 0.12.8dev Nov 2, 2016
@cezaraugusto cezaraugusto changed the title about:newtab - fade in to avoid flash of unstyled content about:newtab - avoid flash of unstyled content Nov 9, 2016
@bbondy bbondy modified the milestones: 0.12.10 release , 0.12.9dev Nov 9, 2016
@bbondy
Copy link
Member

bbondy commented Nov 9, 2016

moving to 0.12.10

@bsclifton
Copy link
Member Author

Cache-Control header was added to all of the images (max age = 1 year) so it should always load from cache (after it does the initial load). It could still be better though

@bbondy
Copy link
Member

bbondy commented Nov 15, 2016

I think we should share a single instance of a webview for newtab pages to make it instant, but I think the cache control improved things a lot so I'm removing the priority for now.

@bbondy bbondy modified the milestones: contributor backlog, 0.12.10 release Nov 15, 2016
@bsclifton bsclifton added the polish Nice to have — usually related to front-end/visual tasks. label Nov 17, 2016
@bsclifton bsclifton mentioned this issue Dec 7, 2016
Closed
josiah-keller pushed a commit to josiah-keller/browser-laptop that referenced this issue Jan 10, 2017
Smoother transition when newtab image is slow
6dcbe4e 
Fixes brave#5309
@josiah-keller josiah-keller mentioned this issue Jan 10, 2017
Closed
4 tasks
@bsclifton bsclifton modified the milestones: 0.13.2, contributor backlog Jan 26, 2017
josiah-keller pushed a commit to josiah-keller/browser-laptop that referenced this issue Feb 7, 2017
Smoother transition when newtab image is slow
97aeb3c 
Fixes brave#5309
josiah-keller pushed a commit to josiah-keller/browser-laptop that referenced this issue Feb 14, 2017
Smoother transition when newtab image is slow
58bdb2d 
Fixes brave#5309
@bsclifton bsclifton removed this from the 0.13.5 milestone Feb 16, 2017
josiah-keller pushed a commit to josiah-keller/browser-laptop that referenced this issue Feb 20, 2017
Smoother transition when newtab image is slow
4dac6c9 
Fixes brave#5309
@bsclifton
Copy link
Member Author

bsclifton commented Feb 23, 2017 •
edited
Loading

A really solid fix was put together by @josiah-keller in #6590. Setting the background to black made the flash more pronounced... the problem is definitely the default background color (white) when the webview object gets loaded.

I searched the Electron issue log and found electron/electron#5175, which captures this exact issue. We should be able to fix this Muon by patching Chromium.

It's hard to determine a priority for this issue since it's not horrible... but fixing it would be a very nice touch. I'd like to give a heads up to some folks just in case you see related code when you're in Muon: @bridiver @bbondy @darkdh @diracdeltas

There is a similar issue captured in Electron's issue log with electron/electron#861 which is for the BrowserWindow object. A work-around is provided there for that case (in case we'd like to incorporate it with our main window).

@bsclifton bsclifton removed this from the 0.13.6 milestone Feb 23, 2017
@bsclifton bsclifton mentioned this issue May 9, 2017
Closed
@bsclifton
Copy link
Member Author

+1 via #8128

@luixxiul
Copy link
Contributor

luixxiul commented Nov 5, 2017

I thought @petemill was working on this issue recently. I am sorry if I am wrong.

petemill added a commit that referenced this issue Nov 6, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
704486e 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.

Addresses #5309
petemill added a commit that referenced this issue Nov 6, 2017
@petemill
about:newtab dashboard page shows text on a dark background, and fade…
5fbf1af 
…s in the image when loaded

Fix #5309

Note: the flashes of white that are still present on both tab open and close are from both the <webview> background on open, and the window background on close (when no other tab is shown). These will be addressed in #11813
This was referenced Nov 6, 2017
Merged
Merged
petemill added a commit that referenced this issue Nov 7, 2017
@petemill
about:newtab dashboard page shows text on a dark background, and fade…
3bc1498 
…s in the image when loaded

Fix #5309

Note: the flashes of white that are still present on both tab open and close are from both the <webview> background on open, and the window background on close (when no other tab is shown). These will be addressed in #11813
petemill added a commit that referenced this issue Nov 15, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
3bcf2c7 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.

Addresses #5309
bsclifton pushed a commit that referenced this issue Nov 16, 2017
@petemill @bsclifton
Avoid 'flashes of white' when tabs open or close
f73bf83 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.

Addresses #5309
petemill added a commit that referenced this issue Nov 17, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
238bfe8 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.

Addresses #5309
petemill added a commit that referenced this issue Nov 17, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
685d991 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.
Fix flash of 'dark' when opening new private tab by fading in private tab background.

Addresses #5309
petemill added a commit that referenced this issue Nov 17, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
497dda0 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.
Fix flash of 'dark' when opening new private tab by fading in private tab background.

Addresses #5309
petemill added a commit that referenced this issue Nov 18, 2017
@petemill
Avoid 'flashes of white' when tabs open or close
054632b 
Remove white flash for new tab pages which use about:newtab.
Sets the frame background to the same background as the newtab page, for a smooth transition between frame creation and the tab beginning to load content.
Keeps the frame around until the next frame is ready, to avoid flash when closing tabs.
Fix flash of 'dark' when opening new private tab by fading in private tab background.

Addresses #5309
@kjozwiak kjozwiak mentioned this issue Dec 1, 2017
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
feature/newtab polish Nice to have — usually related to front-end/visual tasks. QA/checked-Linux QA/checked-macOS QA/checked-Win64 QA/test-plan-specified release-notes/include
Projects
None yet
Milestone
0.19.x Hotfix 6 (Release channel)
Development

Successfully merging a pull request may close this issue.

'New tab' dashboard images fade in from dark brave/browser-laptop
7 participants
@petemill @bbondy @kjozwiak @luixxiul @cezaraugusto @bsclifton @NejcZdovc