New Onboarding WebUI #15637

nullhook · 2022-10-24T21:22:00Z

Resolves brave/brave-browser#26378

~~DO NOT MERGE BEFORE: #15674~~

The PR adds the new onboarding UI. It replaces the previous brave://welcome UI.

Submitter Checklist:

I confirm that no security/privacy review is needed, or that I have requested one
There is a ticket for my issue
Used Github auto-closing keywords in the PR description above
Wrote a good PR/commit description
Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
Ran git rebase master (if needed)

Reviewer Checklist:

A security review is not needed, or a link to one is included in the PR description
New files have MPL-2.0 license header
Adequate test coverage exists to prevent regressions
Major classes, functions and non-trivial code blocks are well-commented
Changes in component dependencies are properly reflected in gn
Code follows the style guide
Test plan is specified in PR before merging

After-merge Checklist:

Test Plan:

Visit brave://welcome and go through the steps to ensure all functionality is working

Ensure single import is working
Ensure bulk import (multiple profiles) is working
Ensure importing from Safari is working

Background animations only work if hardware acceleration is enabled and "Reduce motion" flag disabled. The is to avoid animating on the CPU and respect accessibility. We need to ensure animations are not playing in the following scenarios:

Disable HW accel --disable-gpu
Enable HW accel and Reduced motion should be checked

Sam-Sibley · 2022-11-08T04:47:53Z

@nullhook Here are the assets, if theyre not as you need them, lets discuss.

For the Browser icons, i can set up them all up and export them, but we will need a list of browsers we support. Or we can see if there is a someway we can get them online so we don't have to update them.
Assets.zip

brave-builds · 2022-11-10T19:43:06Z

A Storybook has been deployed to preview UI for the latest push

petemill · 2022-11-11T00:02:26Z

patches/third_party-lottie-lottie_worker.js.patch

+     }
+   });
+
+  currentAnimation.addEventListener("complete", setCompleteEvent);


If you want to change this whole patch to a 1-liner then perhaps you can try:

currentAnimation.addEventListener("complete", () => postMessage({ name: 'COMPLETE' });

patch updated

brave-builds · 2022-11-21T18:33:04Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-11-21T19:53:01Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-11-21T21:58:26Z

A Storybook has been deployed to preview UI for the latest push

browser/ui/webui/settings/import_feature.cc

browser/ui/webui/brave_welcome_ui.cc

mkarolin

chromium_src ++ (see a couple other comments).

github-actions · 2022-11-22T01:57:52Z

⚠️ PR head is an unsigned commit
commit: a73bbdd9ead0fa67594999fc13b0e77ee1e93382
reason: unsigned
Please follow the handbook to configure commit signing
cc: @nullhook

brave-builds · 2022-11-22T02:32:07Z

A Storybook has been deployed to preview UI for the latest push

brave-builds · 2022-11-22T03:40:47Z

A Storybook has been deployed to preview UI for the latest push

petemill · 2022-11-22T06:45:50Z

Fixed the SonarCloud error. It was complaining about Math.random, which is used in a safe context here. Asked linux to re-run as it's the only remaining fail.

petemill

Looks good to go for me once this minor feedback is resolved, @mkarolin 's too. I'm approving since I'm on PTO and not as accessible, but please address non-nit feedback.

components/brave_welcome_ui/api/default_data_browser.ts

components/brave_welcome_ui/api/import_data_browser.ts

petemill · 2022-11-22T06:25:34Z

browser/ui/webui/brave_welcome_ui.cc

  RecordP3AHistogram(screen_number_, finished_);
 }

+void WelcomeDOMHandler::HandleOpenSettingsPage(const base::Value::List& args) {


nit: I don't think you need to do this - can just have <a href="chrome://settings/privacy" target="_blank">

I have tried adding an anchor and it doesn't seem to allow internal links to open. I believe there's an allow list somewhere?

browser/ui/webui/brave_welcome_ui.cc

petemill · 2022-11-22T07:04:03Z

components/brave_welcome_ui/state/hooks.ts

+  let results = profiles
+    .filter((profile) => profile.name !== 'Bookmarks HTML File')
+    .map((profile) => {
+      const browserType = getBrowserName(profile.name)
+      // Introducing a new property here
+      return { ...profile, browserType }
+    })


React.useMemo this calculation?

why memoize it? It just get called once, on mount.

components/brave_welcome_ui/state/hooks.ts

petemill · 2022-11-22T07:09:02Z

components/brave_welcome_ui/state/hooks.ts

+  const [shouldPlayAnimations] = React.useState(
+    loadTimeData.getBoolean('hardwareAccelerationEnabledAtStartup') &&
+    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  )


Since this doesn't change, seems like this doesn't need to be state, but could use memo

const shouldPlayAnimations = React.useMemo(() => loadTimeData.getBoolean('hardwareAccelerationEnabledAtStartup') && !window.matchMedia('(prefers-reduced-motion: reduce)').matches , [])

At least saves calling matchMedia on every render.

components/brave_welcome_ui/brave_welcome.tsx

brave-builds · 2022-11-22T17:50:50Z

A Storybook has been deployed to preview UI for the latest push

Allow WebSerial API to be enabled via brave://flags.

github-actions bot added the CI/storybook-url Deploy storybook and provide a unique URL for each build label Oct 24, 2022

github-actions bot assigned nullhook Oct 24, 2022

nullhook changed the title ~~Onboarding/webui~~ New Onboarding WebUI Oct 24, 2022

nullhook mentioned this pull request Oct 24, 2022

Need bulk profile importer for the upcoming onboarding UI brave/brave-browser#26217

Open

nullhook force-pushed the onboarding/webui branch 3 times, most recently from 472e696 to 583c8b7 Compare October 25, 2022 20:34

spylogsster mentioned this pull request Oct 26, 2022

Allow to import multiple profiles in parallel brave/brave-browser#26282

Closed

nullhook force-pushed the onboarding/webui branch 7 times, most recently from abef180 to 70da9fe Compare October 28, 2022 23:40

nullhook requested a review from petemill October 29, 2022 00:25

nullhook force-pushed the onboarding/webui branch 2 times, most recently from aec2dd9 to a5a8f75 Compare November 5, 2022 18:58

nullhook requested a review from bsclifton November 8, 2022 01:43

nullhook marked this pull request as ready for review November 8, 2022 01:43

nullhook requested a review from a team as a code owner November 8, 2022 01:43

nullhook force-pushed the onboarding/webui branch 3 times, most recently from 8bea808 to 8b1b778 Compare November 10, 2022 18:57

petemill reviewed Nov 11, 2022

View reviewed changes

nullhook force-pushed the onboarding/webui branch 3 times, most recently from 36d7308 to 0ef9fcb Compare November 12, 2022 23:23

nullhook requested a review from petemill November 21, 2022 17:21

nullhook force-pushed the onboarding/webui branch from 01eec7c to 96550b6 Compare November 21, 2022 18:43

nullhook requested a review from mkarolin November 21, 2022 18:50

nullhook force-pushed the onboarding/webui branch from 96550b6 to d20570a Compare November 21, 2022 19:09

nullhook force-pushed the onboarding/webui branch from d20570a to 51c11bf Compare November 21, 2022 21:13

nullhook force-pushed the onboarding/webui branch 2 times, most recently from 61b9e35 to a73bbdd Compare November 22, 2022 01:41

mkarolin reviewed Nov 22, 2022

View reviewed changes

browser/ui/webui/settings/import_feature.cc Outdated Show resolved Hide resolved

mkarolin reviewed Nov 22, 2022

View reviewed changes

browser/ui/webui/brave_welcome_ui.cc Outdated Show resolved Hide resolved

mkarolin approved these changes Nov 22, 2022

View reviewed changes

nullhook added 4 commits November 21, 2022 16:56

Enabled parallel import flag

cee59df

Patch lottie worker to send animation complete event

7d9f9c8

Added moving background, brave 3d logo and progress

4180df9

Added P3A calls on relevant screens

de145d5

nullhook force-pushed the onboarding/webui branch from a73bbdd to 6eeae10 Compare November 22, 2022 02:57

petemill approved these changes Nov 22, 2022

View reviewed changes

Resolved feedback

c266e5e

nullhook force-pushed the onboarding/webui branch from 6eeae10 to c266e5e Compare November 22, 2022 17:09

nullhook merged commit 459f8ff into master Nov 22, 2022

nullhook deleted the onboarding/webui branch November 22, 2022 18:21

github-actions bot added this to the 1.47.x - Nightly milestone Nov 22, 2022

goodov added a commit that referenced this pull request Jul 17, 2023

Merge pull request #19252 from /issues/15637-about-flags

f06d2e8

Allow WebSerial API to be enabled via brave://flags.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New Onboarding WebUI #15637

New Onboarding WebUI #15637

nullhook commented Oct 24, 2022 •

edited

Loading

Sam-Sibley commented Nov 8, 2022

brave-builds commented Nov 10, 2022

petemill Nov 11, 2022

nullhook Nov 12, 2022

brave-builds commented Nov 21, 2022

brave-builds commented Nov 21, 2022

brave-builds commented Nov 21, 2022

mkarolin left a comment

github-actions bot commented Nov 22, 2022

brave-builds commented Nov 22, 2022

brave-builds commented Nov 22, 2022

petemill commented Nov 22, 2022 •

edited

Loading

petemill left a comment

petemill Nov 22, 2022 •

edited

Loading

nullhook Nov 22, 2022

petemill Nov 22, 2022

nullhook Nov 22, 2022

petemill Nov 22, 2022

brave-builds commented Nov 22, 2022

New Onboarding WebUI #15637

New Onboarding WebUI #15637

Conversation

nullhook commented Oct 24, 2022 • edited Loading

Submitter Checklist:

Reviewer Checklist:

After-merge Checklist:

Test Plan:

Sam-Sibley commented Nov 8, 2022

brave-builds commented Nov 10, 2022

petemill Nov 11, 2022

Choose a reason for hiding this comment

nullhook Nov 12, 2022

Choose a reason for hiding this comment

brave-builds commented Nov 21, 2022

brave-builds commented Nov 21, 2022

brave-builds commented Nov 21, 2022

mkarolin left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 22, 2022

brave-builds commented Nov 22, 2022

brave-builds commented Nov 22, 2022

petemill commented Nov 22, 2022 • edited Loading

petemill left a comment

Choose a reason for hiding this comment

petemill Nov 22, 2022 • edited Loading

Choose a reason for hiding this comment

nullhook Nov 22, 2022

Choose a reason for hiding this comment

petemill Nov 22, 2022

Choose a reason for hiding this comment

nullhook Nov 22, 2022

Choose a reason for hiding this comment

petemill Nov 22, 2022

Choose a reason for hiding this comment

brave-builds commented Nov 22, 2022

nullhook commented Oct 24, 2022 •

edited

Loading

petemill commented Nov 22, 2022 •

edited

Loading

petemill Nov 22, 2022 •

edited

Loading