Merge pull request #11818 from brave/issue-11813

Avoid 'flashes of white' when tabs open or close

app/renderer/components/frame/frame.js

@@ -860,12 +860,15 @@ class Frame extends React.Component {
 
     const props = {}
     // used in renderer
+    props.transitionState = ownProps.transitionState
     props.partition = frameStateUtil.getPartition(frame)
     props.isFullScreen = frame.get('isFullScreen')
     props.isPreview = frame.get('key') === currentWindow.get('previewFrameKey')
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frame.get('key'))
     props.showFullScreenWarning = frame.get('showFullScreenWarning')
     props.location = location
+    props.isDefaultNewTabLocation = location === 'about:newtab'
+    props.isBlankLocation = location === 'about:blank'
     props.tabId = tabId
     props.showMessageBox = tabMessageBoxState.hasMessageBoxDetail(state, tabId)
 
@@ -906,13 +909,27 @@ class Frame extends React.Component {
     return props
   }
 
+  getTransitionStateClassName (stateName) {
+    // handle missing data
+    if (!stateName) {
+      return null
+    }
+    // convert Transition element state string to a more consistent css classname
+    return `is${stateName[0].toUpperCase()}${stateName.slice(1)}`
+  }
+
   render () {
+    const transitionClassName = this.getTransitionStateClassName(this.props.transitionState)
     return <div
       data-partition={this.props.partition}
       className={cx({
         frameWrapper: true,
+        [this.props.className]: this.props.className,
+        [transitionClassName]: transitionClassName,
         isPreview: this.props.isPreview,
-        isActive: this.props.isActive
+        isActive: this.props.isActive,
+        isDefaultNewTabLocation: this.props.isDefaultNewTabLocation,
+        isBlankLocation: this.props.isBlankLocation
       })}>
       {
         this.props.isFullScreen && this.props.showFullScreenWarning

app/renderer/components/main/main.js

@@ -17,6 +17,7 @@ const contextMenus = require('../../../../js/contextMenus')
 const {getSetting} = require('../../../../js/settings')
 
 // Components
+const { Transition, TransitionGroup } = require('react-transition-group')
 const Navigator = require('../navigation/navigator')
 const Frame = require('../frame/frame')
 const TabPages = require('../tabs/tabPages')
@@ -699,15 +700,27 @@ class Main extends React.Component {
         }
       </div>
       <div className='mainContainer'>
-        <div className='tabContainer'>
+        <TransitionGroup className='tabContainer'>
           {
             this.props.sortedFrames.map((frameKey) =>
-              <Frame
-                frameKey={frameKey}
+              <Transition
                 key={frameKey}
-              />)
+                // after how long (ms)
+                // should the state 'entering' switch to 'entered'
+                // and also how long should state switch from 'exiting'
+                // to the <Frame /> component actually being removed
+                timeout={150}>
+                {
+                  (transitionState) =>
+                    <Frame
+                      frameKey={frameKey}
+                      transitionState={transitionState}
+                    />
+                }
+              </Transition>
+            )
           }
-        </div>
+        </TransitionGroup>
       </div>
       {
         this.props.showDownloadBar

js/about/newprivatetab.js

@@ -40,7 +40,20 @@ const styles = StyleSheet.create({
   newPrivateTab: {
     background: `linear-gradient(
       ${globalStyles.color.privateTabBackgroundActive},
-      ${globalStyles.color.black100})`,
+      #000
+    )`,
+    backgroundAttachment: 'fixed',
+    // fade in from the new tab background color
+    animationName: {
+      '0%': {
+        opacity: '0'
+      },
+      '100%': {
+        opacity: '1'
+      }
+    },
+    animationDuration: `0.35s`,
+    animationTiming: 'ease-out',
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',

js/about/newtab.js

@@ -284,7 +284,7 @@ class NewTabPage extends React.Component {
         backgroundLoaded: this.state.imageLoadComplete,
         showImages: this.showImages
       })}>
-        <main>
+        <main className='newTabDashboard'>
           <div className='statsBar'>
             <Stats newTabData={this.state.newTabData} />
             <Clock />

less/about/newtab.less

@@ -9,12 +9,23 @@
   box-sizing: border-box;
 }
 
+// match private tab js-css values
+@newTabAnimationDuration: 0.5s;
+@newTabAnimationEasing: ease-out;
+
 strong, div, span, li, em, p, a {
   font-family: "Helvetica Neue", Arial, sans-serif;
   font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
 
+.newTabDashboard
+{
+    animation: fadeIn;
+    animation-duration: .3s;
+    animation-timing-function: ease-out;
+}
+
 .copyrightNotice {
   user-select: none;
   cursor: default;

less/window.less

@@ -63,16 +63,68 @@ html,
 .frameWrapper {
   height: 100%;
   width: 100%;
-  z-index: @zindexWindow;
+
   position: absolute;
   top: 0;
   left: 0;
 
   // Needed to be able to click and drag to select content in pages.
   user-select: none;
+  // default frame background
+  // TODO: use theme.frame.defaultBackground
+  --frame-bg: #fff;
+  // custom frame background(s)
+  &.isDefaultNewTabLocation {
+    // matches tab dashboard background
+    // will also show when about:newtab === about:blank or is Private Tab
+    // TODO: use theme.frame.newTabBackground
+    --frame-bg: #222;
+  }
+  // Webviews can cause flickers w/ Chrome  v49 if left visible
+  // in the background.  This also has a major benefit for background
+  // tabs that have video and animations in them.
+  visibility: hidden;
+  // delay frames getting hidden when new tabs show up
+  // in order to avoid showing 0 frames and just the window
+  // background
+  // whilst this does also affect visibility when switching tabs,
+  // z-index ensures the delayed-hidden tab is not visible
+  // Note that this value can be as large as we want, it does not
+  // need to match the timeout specified in the frame's <Transition /> element
+  // (in renderer main.js). However, there is no reason to set it higher than that.
+  transition: visibility 0s linear 150ms;
+  // 1000
+  z-index: @zindexWindow;
+  &:not(.isActive) {
+    // 900
+    z-index: @zindexWindowNotActive;
+  }
+  &.isPreview {
+    background: #222;
+    // 1100
+    z-index: @zindexWindowIsPreview;
+  }
+  // show frame when active or preview
+  &.isActive,
+  &.isPreview,
+  // keep window contents around when exiting, to allow
+  // time for next active frame to be shown
+  &.isExiting {
+    visibility: visible;
+    // show instantly
+    transition-delay: 0s;
+  }
+  // hide frame whilst it's figuring out which location to be
+  // note: that isEntering is timed-out at a value set in renderer main.js
+  // but isBlankLocation will change at the exact moment that the frame
+  // has an actual location
+  &.isEntering.isBlankLocation {
+    visibility: hidden;
+    transition-delay: 0s;
+  }
 
   webview {
-    background-color: #fff;
+    background-color: var(--frame-bg);
     border: 0;
     height: 100%;
     outline: none;
@@ -90,21 +142,6 @@ html,
     }
   }
 
-  &:not(.isActive) {
-    z-index: @zindexWindowNotActive;
-
-    &.isPreview {
-      background: gray;
-      z-index: @zindexWindowIsPreview;
-    }
-
-    // Webviews can cause flickers w/ Chrome  v49 if left visible
-    // in the background.  This also has a major benefit for background
-    // tabs that have video and animations in them.
-    &:not(.isPreview) {
-      visibility: hidden;
-    }
-  }
 }
 
 .hrefPreview {

package.json

@@ -121,6 +121,7 @@
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.5.4",
     "react-select": "^0.9.1",
+    "react-transition-group": "^2.2.1",
     "snazzy": "^7.0.0",
     "string.prototype.endswith": "^0.2.0",
     "string.prototype.startswith": "^0.2.0",