New UI for Backend Control

[lidel]

Tasks

• define what is missing and what elements need to be added to UI
• design drop-down and toggle (browser_action)
• design backend list editor (Preferences) – see notes below
• implement changes
  • move node type switch to Preferences
  • ON/OFF toggle New UI for Backend Control #491 (comment)
  • backend list editor (Preferences)
• migrate existing settings to a new item in "backend list"
• close all issues in related milestone

---

Background

Click to expand historical notes on why this change was proposed

Right now we have a simple toggle between Embedded node (browserified js-ipfs) and External node (usually go-ipfs at IP and port defined in Preferences, accessed over HTTP API):

Limitations

• No obvious one-click to "enable/disable" what IPFS Companion does.
  • Multiple users raised the need for "off" switch.
  • Removal of all redirects of IPFS paths and window.ipfs object during web development requires going over multiple checkboxes in Preferences or disabling the entire extension via Addon Manager (was the case when troubleshooting CORS bugs).
  • No clear indication when "power-user ipfs mode" (with local node, API and window.ipfs) is enabled, and when "vanilla public" (no API) gateway is used. This makes troubleshooting of various issues harder than necessary.
• Switching between "backend" different nodes is a chore, one needs to change URLs in Preferences each time.
  • Users raised a need for making this easier, namely having a predefined list of backends that one can pick. MetaMask network-picker was given as an example of what is missing in Companion:

    

• Embedded node will have a different meaning in environments where js-ipfs is replaced with orchestrated instance of go-ipfs. Still, we should be able to make it possible to use js-ipfs in those environments, if user choose to do so.

Proposed UI Changes

Let's replace two-state toggle with global ON/OFF toggle + a drop-down list that enables selection from multiple available backends:

Browser Action Popup

• collapsed - mockup:

  

• expanded - mockup:

  
  ( just a sketch, some design work needs to happen here to use space more efficiently)

• ON/OFF toggle will be one-click switch for: (IMPLEMENTED)
  • API status polling
  • redirect of IPFS paths to custom gateway (if enabled in preferences)
  • spawning/destroying js-ipfs instance (if selected as a current backend)
  • exposing API as window.ipfs (if enabled in preferences)
  • making possible to pick different backend via drop-down menu (see below)
• Drop-down list will include available backends that control:
  • which API is used for uploads, polled, exposed in status section and under window.ipfs
  • which HTTP gateway is used for redirect (if enabled in preferences)

Simplified Backend List on Preferences Screen

Preferences screen should have an UI for adding/removing "IPFS Backends" that appear in the dropdown list rendered in browser_action.

• Preferences UI: replace "node type" and "custom and public gateway" forms with a single list of backends
• Currently active Gateway/API ports will be hidden from Preferences screen and be solely based on which backend node is picked by the user in browser action popup menu
• user-defined backends can be added/removed from the list
• "embedded" js-ipfs is implicit, always present, cant be removed
• each entry has attributes:
  • "label"
  • "API" and "Gateway" URLs
    (why both need to be defined? Gateway port can be fetched from API port, but it is not 100% safe as people are known to put it behind reverse-proxy such as nginx, and we want to use one list for Gateway-only backends)
  • a checkbox "public gateway without API" that disables API field and marks backend for use as "public gateway"
  • a checkbox "embedded, no HTTP gateway" that disables HTTP Gateway field (afaik there will be only one example: embedded js-ipfs node, so this checkbox may be a hidden flag, eg in "metadata" field below)
  • "metadata" – hidden, used for storing additional flags (eg. making sure default public or embedded node can't be removed)
  • "custom headers" – an option to define custom headers per backend (Feature request: support basic (or custom headers) auth for public gateway requests #538 (comment))
• "external" nodes are loaded from storage.local.
• If the list is empty, an item with current "localhost" defaults is added automatically when extension starts for the first time.
• Future / Nice to haves
  • A way to dynamically import list of public gateways (eg. this one)

---

cc @olizilla @akrych

Thoughts?

[olizilla]

I think for now we should just show what node you are connected to as a text label below the on off switch. On hover, a "change" link could fade in, and clicking it takes you to a page that explains what it means to change it, offer up the defaults along with their constraints and allow users to add more.

If people start making use of this feature, then we could offer a "quick switch" drop down, but I don't think we need it yet. It's a useful feature but we do need enough space to explain the consequences of changing it, so I'd forgo the drop down at this point.

[lidel]

@olizilla I like the idea, hovewer something to note is that we already display info about currently used API and Gateway in the bottom "status" section.

• To avoid content duplication we may just add a clickable "change" action to the status section that opens Preferences. It could be as simple as an icon: 🔧 or ⚙️ next to "gateway" and "api" or something like that.

• Existing toggle could remain in the same place, but its meaning would simply change from Embedded/External to Enabled/Disabled.

• We may consider moving entire status section above menu items, making it one with "heartbeat" icon and toggle.

• Just like in WebUI, we should avoid use of "on hover" for key features, as it does not work on touch devices (Firefox for Android). The "change" action should be always visible.

[lidel]

Activate / Suspend Toggle

First step was to move "node type toggle" to Preferences and introduce a global "on/off" toggle that activates/suspends all IPFS integrations. Details can be found in PR #500.

It just got merged and released to Beta in v2.3.1.9890 🚀

So far the UI moves into more calm, less cluttered direction:

Next

My initial thoughts on how to introduce "backed selector" into this minimal UI:

• UI should look the same, but enable user to switch to different backend without going to Preferences
  • A) drop-down indicator (a triange?) on the right of "API" status field
  • B) add third icon that onclick replaces status area with bigger backend selector
  • C) ?

[lidel]

After playing with options, I've come up to realization that consistent UI requires us to inline gateway selector as well.

Mockup:

Mechanics of both selectors would be similar to Material Design: exposed dropdown menu:

Thoughts?

[olizilla]

That could work, but the extension already looks like a drop down menu, and a drop-down in a drop-down isn't ideal.

I'd start with a full page for it and figure our all the info we need to get across and the UI for adding new backends, and give the user access to it as a menu option. We can figure out the "quick change" selector once that is place.

[lidel]

Started gathering related feature requests in milestone/14.

Gist of feature request from #591:

• When adding a new backend to the list it should be enough to enter API port by itself
• Gateway port should be read from API by default, with an opt-in option to override it per backend
  (for custom setups where user tunels the port etc)

[hsanjuan]

I noticed the setting Redirect to Custom Gateway is a bit confusing right now because the local gateway is defined as Preferred so you would think it's used by default already.

I'm not sure what's the best way to improve it but it's a weird setting because it flips itself by toggling the public gateway from the main dropdown, and also automatically depending on local daemon' s availability. Perhaps Automatically use custom gateway when available would be a better config option, and leave the manual switching for the dropdown menu items.

[lidel]

• Redirect to Custom Gateway will be moved from menu item to a quick toggle icon in Per-site Redirect Opt-out #687

• Drop-down list with available backends that control in main popup menu did not happen yet, but we started discussing revamping entire menu in [META] Upgraded UI for IPFS Companion #689 (but I believe we will add backend switcher on the Preferences screen first)

[jessicaschilling]

Closing in favor of #689.