This repository has been archived by the owner on Dec 11, 2019. It is now read-only.
Avoid 'flashes of white' when tabs open or close #11818
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diracdeltas
reviewed
Nov 9, 2017
package.json
Outdated
| "react-select": "^0.9.1", | ||
| "react-transition-group": "^2.2.1", |
There was a problem hiding this comment.
petemill
force-pushed
the
issue-11813
branch
from
704486e
to
3bcf2c7
Compare
petemill
added
QA/test-plan-specified
and removed
PR/needs-rebase ۞
QA/test-plan-required
labels
|
I've rebased this branch and specified a test plan. Would appreciate a review and merge to master so I can land open a PR for some other features based on this. |
bsclifton
force-pushed
the
issue-11813
branch
from
3bcf2c7
to
f73bf83
Compare
petemill
force-pushed
the
issue-11813
branch
from
f73bf83
to
238bfe8
Compare
bsclifton
reviewed
Nov 17, 2017
| getTransitionStateClassName (stateName) { | ||
| if (!stateName) { | ||
| return null | ||
| } else { |
|
Although we default to dashboard, users can pick others (including an empty tab). I noticed if I picked empty tab, the tab stays as the gray color
There might be a flash of gray when opening a new tab when set to search engine / home page, but I can't tell for sure (my eyes are horrible! it's too fast 👀 ) This appears to have been introduced w/ #11817 (missed when reviewing originally) |
petemill
force-pushed
the
issue-11813
branch
from
238bfe8
to
685d991
Compare
Codecov Report
@@ Coverage Diff @@
## master #11818 +/- ##
==========================================
- Coverage 53.38% 53.38% -0.01%
==========================================
Files 274 274
Lines 26018 26020 +2
Branches 4170 4170
==========================================
+ Hits 13890 13891 +1
- Misses 12128 12129 +1
|
petemill
force-pushed
the
issue-11813
branch
from
685d991
to
497dda0
Compare
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
force-pushed
the
issue-11813
branch
from
497dda0
to
054632b
Compare
bsclifton
approved these changes
Nov 18, 2017
There was a problem hiding this comment.
Works as expected and looks great! Really nice polish in here 😄 👌
Thanks for following up with @bradleyrichter and others on this one
bsclifton
added a commit
that referenced
this pull request
Nov 18, 2017
Avoid 'flashes of white' when tabs open or close
bsclifton
added a commit
that referenced
this pull request
Nov 18, 2017
Avoid 'flashes of white' when tabs open or close
petemill
pushed a commit
that referenced
this pull request
Nov 18, 2017
Avoid 'flashes of white' when tabs open or close
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 a closed frame around until the next frame is ready, to avoid flash when closing tabs.
Fix #11813
Addresses #5309
When opening a tab, there is a flash of the background of the component, which is explicitly set to white in window.less.
This is avoided by setting the background to the 'new tab dashboard' background color (only when that is the Url for the frame), and by hiding the frame if it's about:blank and for the first 150ms since when a frame is first created, it starts as about:blank and then sets its location to the specified Url.
When closing a tab, there is a flash of the background of the whole window (or at least div.tabContainer) as the active frame is removed, but the next active frame is not set active yet. This is avoided by keeping the
Elementfor the frame around for 100ms, with a low z-index, so that the new / next active tab will show on top when it is ready.Closing tabs - Before:
https://www.dropbox.com/s/aon11cov3nqcau2/p11813-close-tabs-before.mov?dl=0
Closing tabs - After:
https://www.dropbox.com/s/0x1n8msobxssihh/p11813-close-tabs-after.mov?dl=0
Test Plan:
difficult to see until 'New tab' dashboard images fade in from dark #11817 lands since all new frames have white background, and the window has a white background).Submitter Checklist:
git rebase -ito squash commits (if needed).Security
Introduces new package: https://github.com/reactjs/react-transition-group
Reviewer Checklist:
Tests