Add visual feedback when installing IPFS

[bbondy]

This issue was broken out from @jessicaschilling's issue posted here: #13125

When installing IPFS from the infobar (the only way currently), there is no visual feedback .

Behind the scenes go-ipfs is downloaded (which may take time on slow network) and user will think "IPFS support is broken, because nothing happened"

Jessica suggested:
Fix: open brave://ipfs (in a new active tab) and display "installation" state (downloading, unpacking, starting). More details on this below.

But since that's a diagnostics page, I think that's not completely right.
I think we could just reload the page with the local node URI and it will show the loading indicator at least.

[lidel]

I don't believe a regular "page load spinner" would be enough.

That creates a perception of "IPFS being slow" when in fact its Brave fetching and installing go-ipfs behind the scenes for the most of the time. There should be more clear messaging to the user why the very first load takes such long time.

I'd argue opening brave://ipfs and showing installation progress in some form there is way better: user not only learns what's going on, but also learns there is this diagnostic page for things related to "IPFS in Brave", they can start/stop daemon, open WebUI from that page etc.

[jessicaschilling]

Completely agree with @lidel. If we can provide any visual artifacts to help this along, would be happy to.

[jessicaschilling]

@lidel @bbondy Below are some super quick inspect-element amends that could make a substantial, quick-win difference in the usability of this diagnostics page:

The only changes here that would involve more than just a few CSS amends would be:

• Adding the "installing ... X%" in place of "Node is running"/"Node is not running"
• Graying out inactive/disabled items instead of just not displaying them

I hope this is useful. Also cross-posting in #13173 since that issue deals with suggestions for improving the diagnostic page.

[stephendonner]

Verified PASSED using nightly with the testplan from brave/brave-core#8219 on build

Brave	1.23.39 Chromium: 89.0.4389.90 (Official Build) nightly (x86_64)
Revision	62eb262cdaae9ef819aadd778193781455ec7a49-refs/branch-heads/4389@{#1534}
OS	macOS Version 11.2.3 (Build 20D91)

Case 1:

• install and launch a tool such as Apple's Network Link Conditioner
• new profile
• load brave://ipfs
• click Install and start
• let it begin installation, then select a few "poor" network-speed/error conditions (high latency, slow speed, high rate of packets dropped, etc.)
• confirm the progress % adjusts accordingly to your chosen network conditioning(s)
• switch to a "good" network-condition profile (such as Wi-Fi or slower DSL)
• confirm the progress % climbs up more quickly, and finishes installation

Confirmed installation finished and node started up, connected to peers successfully

Case 2:

• new profile
• load brave://ipfs
• click Install and start
• let it begin installation, then remove Ethernet cable
• wait a bit; confirm error message An error occurred; please try to install the node again. appears
• reconnect Ethernet cable
• click Install and start again (be patient so network link can be re-established)

Confirmed installation finished and node started up, connected to peers successfully