Onboarding fixes (Uplift to 1.47.x)

browser/ui/webui/brave_welcome_ui.cc

@@ -69,8 +69,6 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WELCOME_SELECT_ALL_BUTTON_LABEL},
     {"braveWelcomeHelpImproveBraveTitle",
      IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_TITLE},
-    {"braveWelcomeHelpImproveBraveDesc",
-     IDS_BRAVE_WELCOME_HELP_IMPROVE_BRAVE_DESC},
     {"braveWelcomeSendReportsLabel", IDS_BRAVE_WELCOME_SEND_REPORTS_LABEL},
     {"braveWelcomeSendInsightsLabel", IDS_BRAVE_WELCOME_SEND_INSIGHTS_LABEL},
     {"braveWelcomeSetupCompleteLabel", IDS_BRAVE_WELCOME_SETUP_COMPLETE_LABEL},
@@ -283,6 +281,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/index.tsx

@@ -13,7 +13,7 @@ import { getLocale, splitStringForTag } from '$web-common/locale'
 
 interface InputCheckboxProps {
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  labelText: string
+  children: React.ReactNode
   id?: string
   isChecked: boolean
 }
@@ -27,15 +27,15 @@ function InputCheckbox (props: InputCheckboxProps) {
         onChange={props.onChange}
       />
       <div>
-        {props.labelText}
+        {props.children}
       </div>
     </label>
   )
 }
 
 function HelpImprove () {
-  const [isP3AEnabled, setP3AEnabled] = React.useState(false)
   const [isMetricsReportingEnabled, setMetricsReportingEnabled] = React.useState(true)
+  const [isP3AEnabled, setP3AEnabled] = React.useState(true)
 
   const handleP3AChange = () => {
     setP3AEnabled(!isP3AEnabled)
@@ -58,29 +58,40 @@ function HelpImprove () {
 
   const changeSettingsNote = splitStringForTag(getLocale('braveWelcomeChangeSettingsNote'))
   const readPrivacyPolicy = splitStringForTag(getLocale('braveWelcomePrivacyPolicyNote'))
+  const diagnosticReportsLabel = splitStringForTag(getLocale('braveWelcomeSendReportsLabel'))
+  const braveProductUsageDataLabel = splitStringForTag(getLocale('braveWelcomeSendInsightsLabel'))
 
   return (
     <S.MainBox>
       <div className="view-header-box">
         <div className="view-details">
           <h1 className="view-title">{getLocale('braveWelcomeHelpImproveBraveTitle')}</h1>
-          <p className="view-desc">{getLocale('braveWelcomeHelpImproveBraveDesc')}</p>
         </div>
       </div>
       <S.Grid>
         <div className="list">
-          <InputCheckbox
-            id="p3a"
-            onChange={handleP3AChange}
-            isChecked={isP3AEnabled}
-            labelText={getLocale('braveWelcomeSendReportsLabel')}
-          />
           <InputCheckbox
             id="metrics"
             onChange={handleMetricsReportingChange}
             isChecked={isMetricsReportingEnabled}
-            labelText={getLocale('braveWelcomeSendInsightsLabel')}
-          />
+          >
+            {diagnosticReportsLabel.beforeTag}
+            <a href="https://support.brave.com/hc/en-us/articles/360017905872-How-do-I-enable-or-disable-automatic-crash-reporting" target="_blank" onClick={handleOpenSettingsPage}>
+              {diagnosticReportsLabel.duringTag}
+            </a>
+            {diagnosticReportsLabel.afterTag}
+          </InputCheckbox>
+          <InputCheckbox
+            id="p3a"
+            onChange={handleP3AChange}
+            isChecked={isP3AEnabled}
+          >
+            {braveProductUsageDataLabel.beforeTag}
+            <a href="https://support.brave.com/hc/en-us/articles/9140465918093-What-is-P3A-in-Brave-" target="_blank" onClick={handleOpenSettingsPage}>
+              {braveProductUsageDataLabel.duringTag}
+            </a>
+            {braveProductUsageDataLabel.afterTag}
+          </InputCheckbox>
         </div>
       </S.Grid>
       <S.ActionBox>