Add an indicator to show that resources have been loaded over IPFS

[da2x]

1. Install IPFS Companion extension.
2. Visit a website that loads some resources over IPFS (like https://www.ctrl.blog).

Expected: There should be an indicator to show that some resources on the current page have been loaded over IPFS. The page is loaded over HTTPS but some static assets are served from an DNSLink enabled subdomain.

Actual: There is no visual indicator.

Notes: I'd normally suggest fixing up the pageAction icon, but browser support for pageAction isn't all that great compared to browserAction. Maybe just change the color of the browserAction icon? Attaching a green version for this purpose.

[lidel]

Subresource requests are easy to detect: ResourceType !== main_frame, and parent page is in request's documentUrl/originUrl (Firefox) or initiator (Chromium), so we have means of counting them per page/tab.

I agree, UX will be the tricky to get right, especially on Chromium browsers where it is not possible to show pageAction and browserAction at the same time.

What if we stop displaying peer count on the badge, and instead show the number of redirected resources on current page? (if any)

[jessicaschilling]

Revisiting this one with the idea that we can probably accomplish this without removing the "number of peers" indicator. The below sketch:

• Replaces the filled "off" state icon with a stroke version for greater contrast between "off" and "on"
• Offers a few versions of an "on, but not loading resources via IPFS" state (aka "partially on") for discussion
• Reserves the use of the full-color IPFS cube for an "on, and loading resources via IPFS" state

Note that this scheme makes the Firefox address bar indicator a duplication of info, so I've removed it ... this also means greater consistency between browsers 😊

@lidel, any thoughts?

[lidel]

I like the stroke version for "off" and aqua stroke for "on, but current tab had no resources loaded from IPFS", but at the same time worry that this aqua stroke would be shown for the most of the time as people browse regular internet without IPFS resources, effectively replacing the cube as default companion icon.

I think we could use "aqua stroke" as indicator for "redirect to local gateway disabled globally/for this host" state, but we are lacking good way of distinguishing between "online, redirect enabled" vs "online, redirect enabled, and we loaded some stuff from local node".

Here's an idea: use regular cube, but change the meaning of the badge count, and make it "the number of resources loaded from IPFS for the current tab".
Presence of a number on the badge makes good indicator of "this page has IPFS stuff on it" and follows what other extensions do, for example adblockers use badge to show "number of blocked ads on the current page". It also declutters UI on non-IPFS pages.

Would that work?

[jessicaschilling]

@lidel I'd be a bit concerned about changing the meaning of that number after a few years of it meaning something else -- users would assume their number of available peers had gone way down with no reason, unless they read the release notes.

I'd suggest running a survey to learn more from users, but unfortunately at the moment we're sort of inundating users with surveys ... we could hold off for a while on this if we wanted to go that route.

Is it necessarily a bad thing if the stroke icon is a somewhat-default until more IPFS-resourced sites exist in the wild?

[lidel]

Tough one 🤔 Note that we need to remove peer count anyway, as constant updates are expensive (#721, #721 (comment)).

What if we:

• use browserAction.setTitle API and make it clear in the tooltip what the number on icon badge means (eg. "This page loaded resources from IPFS"). Right now the tooltip says "IPFS Companion".
• Repeat the count in the main menu somewhere, so users can learn the difference between "peer count" and "number of resources loaded from IPFS on the current page"

ps. I realized we may have a problem with stroke version for "off" in dark modes. Current "off" works pretty well in both light and dark contexts:

ps2. we could also display https://github.com/ipfs/ipfs-companion/releases/latest after each update

[jessicaschilling]

Oh, that is a HUGE bummer about removing peer count -- thanks for alerting me to those discussions, I hadn't been tracking that conversation. Sample set of one, but I've leaned pretty heavily on the peer count icon ...

There was earlier discussion about bringing peer count into the Desktop cube menu (the dropdown, not the cube itself). Do we want to wake that back up again as at least a reasonably convenient way of offering that indicator when we strip it out of Companion?

+1 to opening the GH latest-release page on upgrade; had been wanting that anyway. I'll open a separate issue for that. (Note this means we'll have to be pretty intentional about how we write release notes -- probably a TLDR at the top of what's user-impacting, followed by our usual changelog.)

Agree with your recommendations above with the tooltip and repeating the count in the main menu. The count would fit nicely into the "Current Tab" menu header (particularly since there's nothing interactive in it, just informative).

Regarding dark mode: can we detect and change icon accordingly, or is that too much trouble?

[lidel]

Sample set of one, but I've leaned pretty heavily on the peer count icon ...

I thought the same, but then I mostly rely on the color of the icon (is the node on/off) – unsure if knowing how many peers you have is that crucial. If we introduce have HALF-ON icon to represent "node is on, but has no peers", we could remove peer count without functional regression.

There was earlier discussion about bringing peer count into the Desktop cube menu [..] Do we want to wake that back up [..] when we strip it out of Companion?

Should be enough to have "peer count" in companion browser action menu.
(some companion users do not run desktop, they run standalone go-ipfs, so I'd evaluate this separately from desktop)

Regarding dark mode: can we detect and change icon accordingly, or is that too much trouble?

Sadly no, no universal way to solve dark mode dynamically:
only Firefox provides basic light/dark theme support (via theme_icons API), no support in Chromium.

That is the main reason why we were stuck with current "off" icon for so long – its "good enough" in both light and dark.

[jessicaschilling]

@lidel, thanks for the clarification re light/dark mode -- let's keep the existing off state icon, then.

I'm struggling with how to convey one extra state for "on but no peers" without introducing too much visual complexity. We could throw an alert triangle ⚠️ over the cube icon in the "on" states where it applies (since there will never be a number badge in that case) and add appropriate hover text, but now I'm wondering if I'm just overthinking this and we don't need it at all?

With that in mind, I believe the below illustration covers all the points mentioned above: four states (off, on+no redirects, on+redirects, on+redirects+loading stuff), plus more granular hover text for the cube icon and an indicator in the menu (next to "Current Tab") for how many resources, if any, are loaded.

Hover text for the cube icon would change accordingly based on the state, something like:

• Off: IPFS is not running
• On, redirects disabled: IPFS is running (redirects disabled)
• On, redirects enabled: IPFS is running (redirects enabled)
• On, redirects enabled, loading via IPFS: IPFS is running (redirects enabled) and loading resources

Question: What happens to the badge when a tab is loading more than 999 resources? "1.2k"?

Related: ipfs/ipfs-desktop#1599 would display peer count in Desktop tray/cube menu, both as a hover on the cube icon (for those who have it) and in the menu itself. Understood this doesn't help folks who aren't running Desktop, but it's a value add for those who are.

[lidel]

I think that is a very good summary, thank you @jessicaschilling !

I'd like us to have the indicator you mentioned, but would avoid ⚠️ because (1) it will flash every time node starts/restarts (2) some users run node with --offline on purpose, so it may be too prominent.

What if we set the badge value to err, ! or … instead? That way we don't need to invent anything new:

Question: What happens to the badge when a tab is loading more than 999 resources? "1.2k"?

AFAIK badge is "4 characters or less", so 1000 would display just fine.

[jessicaschilling]

@lidel Great idea on just inserting a badge value. I might go for -- to avoid visual confusion between ! and 1...

Regarding other options: err isn't actually an error for --offline folks and ... isn't true for them either since it's not an in-process state, it'll never actually fetch a number 😊

(edit: What about changing the color of the badge? Too prominent?)

I'm afraid implementation is getting a little out of my depth for this one. Happy to work together with you and/or @rafaelramalho19 if we want to prioritize this ... I might suggest we ship this prior to any bumps in user numbers due to pinning services etc, because this work is going to change an existing visual pattern. Thoughts?

[lidel]

-- sgtm!

(edit: What about changing the color of the badge? Too prominent?)

We can experiment with it, as long we get similar results in all browsers.
Caveats are, as always, API limitations:

• Both Chromium and Firefox support setBadgeBackgroundColor
• Only Firefox supports setBadgeTextColor (did not look into details, but assume Chrome makes arbitrary decision to ensure proper contrast)

I might suggest we ship this prior to any bumps in user numbers due to pinning services etc, because this work is going to change an existing visual pattern. Thoughts?

Agreed. I'd like to pick this up after #811 (hoping to finish that PR this/next week).

Q: where can I find SVG asset for ? ipfs-css?

[jessicaschilling]

Yep, is just stroke_cube in ipfs-css aqua #69c4cd.

Re setBadgeTextColor only being available in FF -- thanks for bringing this up, because it's been bugging me that the badge text in FF is black. Can you please specify white while you're at it? 🙏

Adding a -- badge (in this case, in ipfs-css yellow #f39021) looks like below. (Note that this badge could also appear on top of the stroke_cube indicator for "on, redirects disabled"). For the hover text, we'd want to append "but has no peers" to whatever hover text already applied, so:

• On, redirects disabled, peers warning: IPFS is running (redirects disabled) but has no peers
• On, redirects enabled, peers warning: IPFS is running (redirects enabled) but has no peers

Anything else I can get you to make implementation easier next week? 😊

[lidel]

I think that's all I need for now, thank you! Will see if anything comes up during implementation 👍