Browser: new architecture #5671

christianbaroni · 2024-04-26T04:53:10Z

What changed (plus any additional context for devs)

Introduces a new browser architecture that across the browser, restricts re-renders to the absolute minimum number required
- Eliminates all unneeded re-renders within the Homepage component
- There are now zero re-renders in DappBrowser
- The number of re-renders that occur across the browser is now exactly the same whether you have 2 tabs or 50 tabs (except for a few things on the homepage, but the impact is minimized with React.memo)
  - No re-renders occur when navigating within the WebView itself
  - The only time a tab re-renders is if either its internal active state changes, or if it's forced to load a new page via goToUrl
Fixes all URL/single-page app issues via animatedTabUrls, which serves as the always-up-to-date source of truth for tab URLs
- This allowed ditching the state responsible for the previous re-renders on navigation
- This also fixed all remaining screenshot bugs caused by not always having the correct page URL
Leverages the new store and lightweight persistence introduced in Browser: browserStore #5669 to create the BrowserTab instances in the most lightweight way possible, mapping each tabId in the tabIds array onto a BrowserTab instance
Leverages useSyncSharedValue from useSyncSharedValue #5662 to replace the previous queueing system, which effectively guarantees proper state syncing between the UI ↔ JS threads and fixes all broken tab layout issues resulting from out-of-sync states
- Adds a new pauseSync feature, and improves the equality check worklets used within
Reduces duplication of animated styles and values where possible - now sharing multipleTabsOpen, animatedWebViewHeight, and a few other things
Splits expensive animated styles and inexpensive ones, which smooths out the tab animations
Lots of other smaller misc. optimizations and fixes

TODO:

Get Dapp Browser: Search Performance #5645 integrated
Reintegrate canGoBack / canGoForward (navigation works but both buttons are always visible)
Finish integrating favorites into the new URL system
Hook up the ControlPanel to reflect the current site and allow for wallet and network switching
Refactor the old AccountIcon and ensure the appSessions store works within the new system
Re-enable screenshot pruning - needs some small adjustments to work within the new architecture
Catch up with develop
- Reapply Skylar's Android fixes

Screen recordings / screenshots

Demo with a hardcoded new tab URL — the browser no longer slows down for every new tab, because the number of re-renders doesn't multiply:

RPReplay_Final1713857597.MP4

What to test

brunobar79

Good stuff!

brunobar79 · 2024-04-26T14:46:34Z

src/components/DappBrowser/BrowserTab.tsx

+  const backgroundColor = useSharedValue<string>(defaultBackgroundColor);
+
+  const safeBackgroundColor = useDerivedValue(() => {
+    const homepageColor = isDarkMode ? globalColors.grey100 : '#FBFCFD';


This one is used in a bunch of places inside the dapp browser. Should we add it to the colors?

brunobar79 · 2024-04-26T14:48:41Z

src/components/DappBrowser/BrowserTab.tsx

+  }, [animatedTabIndex]);
+
+  const animatedTabYPosition = useDerivedValue(() => {
+    return withTiming(Math.floor(animatedTabIndex.value / 2) * TAB_VIEW_ROW_HEIGHT - 181, TIMING_CONFIGS.tabPressConfig);


magic number

src/components/DappBrowser/BrowserTab.tsx

brunobar79 · 2024-04-26T14:51:41Z

src/components/DappBrowser/BrowserTab.tsx

+            165 +
+            28 +


more magic numbers

Will take care of these in a follow-up PR

src/components/DappBrowser/BrowserTab.tsx

src/components/DappBrowser/control-panel/ControlPanel.tsx

* fix screenshot prunning * remove logs * Avoid subscribing to browserStore --------- Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>

src/components/DappBrowser/control-panel/ReanimatedPager.tsx

Also adds JS freeze and unfreeze scripts, and fixes a crash when opening the control panel from the homepage

Co-Authored-By: Ben Goldberg <15272675+benisgold@users.noreply.github.com>

Seems like the high image load priority might slightly delay component rendering

socket-security · 2024-04-30T10:45:50Z

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@candlefinance/faster-image@1.5.0	None	`0`	528 kB	6ary
npm/react-fast-memo@2.0.1	None	`0`	9.57 kB	romgrk

🚮 Removed packages: npm/@candlefinance/faster-image@1.4.3

View full report↗︎

* network switch fixes * Update src/components/DappBrowser/control-panel/ControlPanel.tsx Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com> --------- Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>

brunobar79

🚀 🚀 🚀

src/components/DappBrowser/control-panel/ControlPanel.tsx

Co-authored-by: gregs <me@gregs.wtf>

…estro-test * 'develop' of github.com:rainbow-me/rainbow: createRainbowStore (#5689) Browser: new architecture (#5671) handle injection natively (#5677) fix wallet balance in send flow (#5665) bump version to v1.9.23 (#5668) use current safari UA (#5670) Browser: browserStore (#5669)

…eplink-add * 'develop' of github.com:rainbow-me/rainbow: (22 commits) disable sentry (#5707) fix favorites list issues (#5659) fix: learn more webview clipped (#5687) add explorer_url and explorer_label to txn types and consume (#5690) Add names to wallet list info in backups v2 (#5692) feat: upgrading swap sdk to 0.19.0 (#5694) Add documentation (#5701) Fix supported chains bugs (#5697) useAnimatedTime, useAnimatedInterval, useAnimatedTimeout (#5699) hey (#5686) browser bugs (#5695) useSharedValueState (#5698) Connect Panel improvements (#5693) createRainbowStore (#5689) Browser: new architecture (#5671) handle injection natively (#5677) fix wallet balance in send flow (#5665) bump version to v1.9.23 (#5668) use current safari UA (#5670) Browser: browserStore (#5669) ...

christianbaroni added 4 commits April 25, 2024 16:45

Create browserStore

d25d526

serializeState → serializeBrowserState

b78a07f

New browser architecture

4b0cd8a

Fix faster-image loading spinner flashes

ac01c2c

christianbaroni requested review from brunobar79, skylarbarrera, benisgold and jinchung as code owners April 26, 2024 04:53

Add control panel

aeaf940

christianbaroni marked this pull request as draft April 26, 2024 05:01

christianbaroni added 5 commits April 26, 2024 02:44

Fix input fallback URL, clean up input value logic

dc2380d

Make syncDirection clearer

0d4af9f

Color worklets, fix control panel button text colors

17819a0

Fix rgb conversion

829c9cf

Hook up control panel site metadata, fix logos/bg color

95c94a7

brunobar79 reviewed Apr 26, 2024

View reviewed changes

brunobar79 and others added 2 commits April 27, 2024 13:23

Control panel for dapp browser (#5674)

e0a409d

fix screenshot prunning (#5675)

23ce3e8

* fix screenshot prunning * remove logs * Avoid subscribing to browserStore --------- Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>

greg-schrammel reviewed Apr 27, 2024

View reviewed changes

src/components/DappBrowser/control-panel/ReanimatedPager.tsx Outdated Show resolved Hide resolved

christianbaroni added 11 commits April 28, 2024 18:20

Further restrict re-renders, perf improvements, code cleanup

60f016d

Also adds JS freeze and unfreeze scripts, and fixes a crash when opening the control panel from the homepage

Improve website background color detection

15bce2a

Temp restructure until we add native JS bundles

bbbe7c2

Fix all screenshot bugs, simplify pruning code

a7b38a7

abc

81de0fb

Disable freeze scripts until bugs are fixed

387d2c5

Remove logs

504a523

tabStateMap → tabsData for consistency

bc6036d

Prevent interaction with tabs being closed

5955791

Clean up handleNavigationStateChange

05cd73c

Fix useSyncSharedValue boolean bug

21ed277

christianbaroni and others added 7 commits April 30, 2024 05:52

Hook up search (needs some cleanup)

b3d764d

Co-Authored-By: Ben Goldberg <15272675+benisgold@users.noreply.github.com>

Fix freeze scripts, misc. cleanup

e52f24b

Adjust faster-image loading priority

9714258

Seems like the high image load priority might slightly delay component rendering

Fix search input bugs

8c70fda

Merge branch 'develop' into @christian/browser-new-architecture

5a9db85

Reapply #5652

8b2e50d

Reapply #5657

28a1ce7

christianbaroni marked this pull request as ready for review April 30, 2024 16:22

christianbaroni and others added 7 commits April 30, 2024 12:30

Merge branch 'develop' into @christian/browser-new-architecture

ec27a0e

lint

31dd210

Remove injectedJS, misc. cleanup

0265d0c

Merge branch 'develop' into @christian/browser-new-architecture

301a5de

Catch up with develop

d8f3ef1

Add default FasterImage config

d11cdfa

brunobar79 approved these changes Apr 30, 2024

View reviewed changes

src/components/DappBrowser/control-panel/ControlPanel.tsx Show resolved Hide resolved

Add missing BrowserContext changes

7ebe170

greg-schrammel reviewed Apr 30, 2024

View reviewed changes

src/components/DappBrowser/control-panel/ControlPanel.tsx Outdated Show resolved Hide resolved

Update src/components/DappBrowser/control-panel/ControlPanel.tsx

ca031a2

Co-authored-by: gregs <me@gregs.wtf>

christianbaroni merged commit d4df288 into develop May 1, 2024
5 of 6 checks passed

christianbaroni deleted the @christian/browser-new-architecture branch May 1, 2024 00:12

brunobar79 mentioned this pull request May 6, 2024

Dapp Browser: Search Performance #5645

Closed

jinchung added the dapp browser label May 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser: new architecture #5671

Browser: new architecture #5671

christianbaroni commented Apr 26, 2024 •

edited

Loading

brunobar79 left a comment

brunobar79 Apr 26, 2024

brunobar79 Apr 26, 2024

brunobar79 Apr 26, 2024

christianbaroni Apr 30, 2024

socket-security bot commented Apr 30, 2024 •

edited

Loading

brunobar79 left a comment

Browser: new architecture #5671

Browser: new architecture #5671

Conversation

christianbaroni commented Apr 26, 2024 • edited Loading

What changed (plus any additional context for devs)

TODO:

Screen recordings / screenshots

What to test

brunobar79 left a comment

Choose a reason for hiding this comment

brunobar79 Apr 26, 2024

Choose a reason for hiding this comment

brunobar79 Apr 26, 2024

Choose a reason for hiding this comment

brunobar79 Apr 26, 2024

Choose a reason for hiding this comment

christianbaroni Apr 30, 2024

Choose a reason for hiding this comment

socket-security bot commented Apr 30, 2024 • edited Loading

brunobar79 left a comment

Choose a reason for hiding this comment

christianbaroni commented Apr 26, 2024 •

edited

Loading

socket-security bot commented Apr 30, 2024 •

edited

Loading