Use interstitial page instead of infobar for ipfs

[spylogsster]

Resolves brave/brave-browser#13655

• Implemented interstitial page for IPFS ASK mode in settings
• Show IPFS interstitial instead of IPFS Infobar
• Show node installation progress and errors on page
• Removed IPFS Infobar

Submitter Checklist:

• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• 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)
• Requested a security/privacy review as needed

Reviewer Checklist:

• 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:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

• Set IPFS mode in settings as ASK
• Navigate any ipfs url, ipfs://bafkreigcnxudvpojjfwncmauociy5q46zsq46oe66cxbyzie3imabuoege for example
• You should see the interstitial page with source url in address bar
• In case of error during IPFS node installation(or launching), an error message should be visible
• Change browser theme in settings, the page should apply new theme without reloading

[bbondy]

Currently when you install for the first time, your first experience will be this:

Let's instead have another button state like the Installing... one called Waiting for peers.... In which you will wait up to 2 minutes for the connected peers to go above 0. As soon as it does, you will only then redirect the user to the local node. Maybe check every 1s.

[spylogsster]

Currently when you install for the first time, your first experience will be this:

Let's instead have another button state like the Installing... one called Waiting for peers.... In which you will wait up to 2 minutes for the connected peers to go above 0. As soon as it does, you will only then redirect the user to the local node. Maybe check every 1s.

[bbondy]

When we add this error text we should keep the padding and not push the button up against it's box.

For example see:

Notice that it retains the padding both at the bottom and the top.

Also I think we can avoid showing any red text error at all until after 10s. Because it is kind of seen like an error when we display it.

[bbondy]

I tried disconnecting my ethernet cable too when it is installing, it seems to just hang here and I think it never gives an error state.

[spylogsster]

hang here and I think it never gives an error state.

after short discussion we decided to proceed with it in separate issue brave/brave-browser#14229

[karenkliu]

@spylogsster Yes what @bbondy said ☝️ Please keep the padding when there is text below the button. If it's not an error you can use the same font size/styling as the error text but make it the regular dark text color instead of the red error color.

[kloun]

ььь