Incorporate Desktop's Settings into Web UI's

[hacdias]

Right now we have a set of Settings for Desktop that should be available for the user. Screenshots:

For a better user experience and integration, this settings should be placed alongside/withing Web UI's.

How are we going to incorporate this settings into Web UI?

On one hand, we could have some kind of detection on Web UI's side to know if it is running inside desktop or not. If so, then it would just show the Settings. Not sure if the bundled version of Web UI would work that way because we need ipcRenderer to be available to have contact between Web UI and the node main proccess.

Another option would be to have some kind of plug-ins on Web UI so we could just add a "third-party" component to a pre-defined place in the UI.

These are just some thoughts. I'm looking forward to hear yours @ipfs-shipyard/gui

[lidel]

(below are some notes, mostly a summary of discussion we had during our sync call this week: ipfs/in-web-browsers#127)

Design

To keep UI minimal, we will try to extend Settings screen from Web UI.

• Related design can be found in Settings page: add UI controls for common settings from config file ipfs-gui#15 (comment)
  • The way I imagine it: instead of "Simple" and "Advanced" sections we would have "IPFS Desktop Settings" and "IPFS Daemon Configuration" (@olizilla and @alanshaw pls help with naming so it does not sound awkward :)).

Injecting Settings

AKA "Signaling Web UI runs in ipfs-desktop"

A clean way to do it is to:

• ipfs-desktop: inject window.ipfsDesktop into browser window that renders Web UI
  • This is similar to ipfs-redux-bundle detecting window.ipfsCompanion when Web UI runs in WebExtension context of ipfs-companion, but probably requires less code:
    • Electron supports this type of script injection natively – search for preload at https://electronjs.org/docs/api/browser-window
    • We don't need to worry about access controls or changing window.ipfsDesktop.* API in the future (it will only used internally by ipfs-desktop)
• ipfs-webui: check if window.ipfsDesktop exists and if it does:
  • show settings section specific to ipfs-desktop
  • use methods exposed as window.ipfsDesktop.* for getting/setting settings from ipfs-desktop