Optimized the new Welcome UI and style fixes (#16164)

* Converted assets to webp format
* Lazy loading
* Style fixes
* Added background image loading handle

browser/ui/webui/brave_welcome_ui.cc

@@ -283,6 +283,8 @@ BraveWelcomeUI::BraveWelcomeUI(content::WebUI* web_ui, const std::string& name)
       content::GpuDataManager::GetInstance()->HardwareAccelerationEnabled());
 
   profile->GetPrefs()->SetBoolean(prefs::kHasSeenWelcomePage, true);
+
+  AddBackgroundColorToSource(source, web_ui->GetWebContents());
 }
 
 BraveWelcomeUI::~BraveWelcomeUI() = default;

components/brave_welcome_ui/api/web_animation_player.ts

@@ -12,8 +12,9 @@ class WebAnimationPlayer {
     this.timingOption = timingOption
   }
 
-  to (element: Element | null, keyframeEffectOption: PropertyIndexedKeyframes) {
-    const kF = new KeyframeEffect(element, keyframeEffectOption, this.timingOption)
+  to (element: Element | null, keyFrame: PropertyIndexedKeyframes, keyFrameOption?: OptionalEffectTiming) {
+    const kFOptions = { ...this.timingOption, ...keyFrameOption }
+    const kF = new KeyframeEffect(element, keyFrame, kFOptions)
     const animation = new Animation(kF)
     this.animations.push(animation)
     return this

components/brave_welcome_ui/brave_welcome.html

@@ -17,7 +17,10 @@
   #root { height: 100%; width: 100%; }
 
   body {
-    background: black;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    background: $i18n{backgroundColor};
   }
 </style>
 </head>

components/brave_welcome_ui/components/background/index.tsx

@@ -5,26 +5,34 @@
 
 import * as React from 'react'
 import * as S from './style'
+import classnames from '$web-common/classnames'
 
 import WebAnimationPlayer from '../../api/web_animation_player'
 import DataContext from '../../state/context'
+import { shouldPlayAnimations } from '../../state/hooks'
 
 import Stars01 from '../svg/stars01'
 import Stars02 from '../svg/stars02'
 import Stars03 from '../svg/stars03'
 import Stars04 from '../svg/stars04'
+import fullCompositeBgUrl from '../../assets/[email protected]'
+import skyBgUrl from '../../assets/sky.webp'
 
 interface BackgroundProps {
   children?: JSX.Element
   static: boolean
+  onLoad?: () => void
 }
 
-function AnimatedBackground (props: { children?: JSX.Element }) {
+function Background (props: BackgroundProps) {
   const ref = React.useRef<HTMLDivElement>(null)
   const { setScenes } = React.useContext(DataContext)
+  const [hasLoaded, setHasLoaded] = React.useState(false)
+  const isReadyForAnimation = hasLoaded && !props.static
 
   React.useEffect(() => {
     if (!ref.current) return
+    if (!isReadyForAnimation) return
 
     const s1 = new WebAnimationPlayer()
     const s2 = new WebAnimationPlayer()
@@ -55,43 +63,66 @@ function AnimatedBackground (props: { children?: JSX.Element }) {
       .to(stars04, { transform: 'scale(1.5)' })
 
     setScenes({ s1, s2 })
-  }, [])
+  }, [isReadyForAnimation])
+
+  React.useEffect(() => {
+    if (!ref.current) return
+    if (!isReadyForAnimation) return
+
+    const s1 = new WebAnimationPlayer()
+    const starsContainer = ref.current.querySelector('.stars-container')
+    const hillsContainer = ref.current.querySelector('.hills-container')
+
+    s1.to(starsContainer, { opacity: 1 }, { delay: 250 })
+      .to(hillsContainer, { opacity: 1 }, { delay: 250 })
+
+    const lastAnimationEl = s1.animations[s1.animations.length - 1]
+    lastAnimationEl.addEventListener('finish', () => props.onLoad?.())
+
+    s1.play()
+  }, [isReadyForAnimation])
+
+  const handleImgLoad = () => {
+    setHasLoaded(true)
+
+    // When animations are disabled, we trigger onLoad instantly
+    if (!shouldPlayAnimations) {
+      props.onLoad?.()
+    }
+  }
 
   return (
-    <S.Box ref={ref}>
-      <div className="stars-container">
-        <Stars01 />
-        <Stars02 />
-        <Stars03 />
-        <Stars04 />
-      </div>
+    <S.Box ref={isReadyForAnimation ? ref : null}>
+      {isReadyForAnimation && (
+        <div className="stars-container">
+          <Stars01 />
+          <Stars02 />
+          <Stars03 />
+          <Stars04 />
+        </div>
+      )}
       <div className="content-box">
         {props.children}
       </div>
-      <div className="sky" />
-      <div className="hills-container">
-        <div className="hills-base hills03"></div>
-        <div className="hills-base hills02"></div>
-        <div className="hills-base hills01"></div>
-        <div className="pyramid"></div>
-      </div>
+      <img
+        // We animate the background image via CSS only.
+        className={classnames({
+          'background-img': true,
+          'is-visible': hasLoaded
+        })}
+        src={!props.static ? skyBgUrl : fullCompositeBgUrl}
+        onLoad={handleImgLoad}
+      />
+      {isReadyForAnimation && (
+        <div className="hills-container">
+          <div className="hills-base hills03"></div>
+          <div className="hills-base hills02"></div>
+          <div className="hills-base hills01"></div>
+          <div className="pyramid"></div>
+        </div>
+      )}
     </S.Box>
   )
 }
 
-function Background (props: BackgroundProps) {
-  if (!props.static) {
-    return (<AnimatedBackground>
-        {props.children}
-      </AnimatedBackground>
-    )
-  }
-
-  return (
-    <S.StaticBackground>
-      {props.children}
-    </S.StaticBackground>
-  )
-}
-
 export default Background

components/brave_welcome_ui/components/background/style.ts

@@ -4,38 +4,77 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 
 import styled from 'styled-components'
-import skyeBgUrl from '../../assets/sky.jpg'
-import hillBgUrl from '../../assets/hill.png'
-import pyramidBgUrl from '../../assets/pyramid.png'
-import backgroundUrl2x from '../../assets/[email protected]'
 
-export const Box = styled.div`
+import hillBgUrl from '../../assets/hill.webp'
+import pyramidBgUrl from '../../assets/pyramid.webp'
 
+export const Box = styled.div`
   .content-box {
     position: fixed;
     width: 100%;
-    height: 100vh;
+    height: 100%;
     z-index: 999;
 
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .sky {
+  .background-img {
     position: fixed;
-    width: 100vw;
-    height: 100vh;
-    background: url(${skyeBgUrl}) no-repeat;
-    background-size: cover;
+    width: 100%;
+    height: 100%;
     z-index: 1;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity .2s ease-in;
+
+    &.is-visible {
+      opacity: 1;
+    }
   }
 
   .hills-container {
     position: fixed;
     width: 100vw;
-    height: 100vh;
+    height: 100%;
     z-index: 2;
+    opacity: 0;
+  }
+
+  .stars-container {
+    position: fixed;
+    width: 100vw;
+    height: 100%;
+    z-index: 50;
+    opacity: 0;
+
+    svg {
+      width: 100%;
+      height: auto;
+      position: absolute;
+      transform-origin: center;
+    }
+
+    .stars01 {
+      bottom: 0;
+      transform: scale(1.14);
+      filter: blur(3px);
+    }
+
+    .stars02 {
+      top: 10%;
+    }
+
+    .stars03 {
+      top: 15%;
+    }
+
+    .stars04 {
+      top: 30%;
+      transform: scale(0.8);
+      opacity: 0;
+    }
   }
 
   .hills-base {
@@ -76,48 +115,4 @@ export const Box = styled.div`
     z-index: 1;
     transform: translateX(20%);
    }
-
-   .stars-container {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    z-index: 50;
-
-    svg {
-      width: 100%;
-      height: auto;
-      position: absolute;
-      transform-origin: center;
-    }
-
-    .stars01 {
-      bottom: 0;
-      transform: scale(1.14);
-      filter: blur(3px);
-    }
-
-    .stars02 {
-      top: 10%;
-    }
-
-    .stars03 {
-      top: 15%;
-    }
-
-    .stars04 {
-      top: 30%;
-      transform: scale(0.8);
-      opacity: 0;
-    }
-  }
-`
-
-export const StaticBackground = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100vh;
-  background: url(${backgroundUrl2x}) no-repeat center center;
-  background-size: cover;
 `

components/brave_welcome_ui/components/help-improve/style.ts

@@ -64,10 +64,10 @@ export const Grid = styled.div`
     width: 22px;
     height: 22px;
     border-radius: 4px;
-    border: 1px solid ${(p) => p.theme.color.interactive08};
+    border: 1px solid #AEB1C2;
 
     &:checked {
-      accent-color: ${(p) => p.theme.color.interactive05};
+      accent-color: #4C54D2;
     }
   }
 `

components/brave_welcome_ui/components/import-in-progress/index.tsx

@@ -7,11 +7,10 @@ import * as React from 'react'
 
 import * as S from './style'
 import DataContext from '../../state/context'
-import { useShouldPlayAnimations } from '../../state/hooks'
+import { shouldPlayAnimations } from '../../state/hooks'
 
 function ImportInProgress () {
   const { scenes } = React.useContext(DataContext)
-  const shouldPlayAnimations = useShouldPlayAnimations()
   const ref = React.useRef<HTMLDivElement>(null)
 
   React.useEffect(() => {

components/brave_welcome_ui/components/loader/index.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2022 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// you can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import styled from 'styled-components'
+import { LoaderIcon } from 'brave-ui/components/icons'
+
+const Loading = styled('div')`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const Graphic = styled('div')`
+  width: 50px;
+  height: 50px;
+  align-self: center;
+
+  svg {
+    fill: white;
+  }
+`
+
+export default function Loader () {
+  const [show, setShow] = React.useState(false)
+
+  React.useEffect(() => {
+    const timerId = setTimeout(() => setShow(true), 100)
+
+    return () => {
+      clearTimeout(timerId)
+    }
+  }, [])
+
+  return (
+    <Loading aria-busy='true'>
+      <Graphic aria-label='Loading'>
+        { show ? <LoaderIcon /> : null }
+      </Graphic>
+    </Loading>
+  )
+}

components/brave_welcome_ui/components/select-browser/style.ts

@@ -62,7 +62,7 @@ export const BrowserListBox = styled.div`
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    color: ${(p) => p.theme.color.text01};
+    color: #212529;
     border: 0;
     box-shadow: 0 0 0 4px var(--border-color);
     position: relative;
@@ -97,4 +97,8 @@ export const ActionBox = styled.div`
   display: flex;
   grid-gap: 10px;
   margin-bottom: 40px;
+
+  button {
+    color: white;
+  }
 `