Per-site Redirect Opt-out #687

lidel · 2019-02-20T15:33:24Z

This PR aims to:

close Redirection toggle in popup menu #647

close Redirect opt-out per website #633

Changes

Icon-based global redirect toggle

To avoid miss-clicks, confusion, and to disincentivise disabling global redirect, we moved global toggle from Browser Action menu to the utility icon row, and used custom "redirect" icon:

Enabled	Disabled

When you start seeing the face above, you cannot unsee it.

Redirect opt-out per site

menu item in Active Tab section enables user to disable gateway redirect on current website
when clicked on regular site toggles redirect for current FQDN and all its subdomains
when clicked on /ipns// (DNSLink) website, toggles redirect for
preference changes triggers reload for current tab
DNSLink website reload changes between IPNS path and original URL

Redirect opt-out on DNSLink website loaded from local gateway restores original URL
Redirect preference applies not only to request with FQDN of the active tab, but also to all subresource requests that have it in originUrl (Firefox) or Referer header (Chrome). This means toggle is useful to restore functionality of complex websites such as d.tube (which uses IPFS subresources from various subdomains):

Redirect opt-out on regular website: functionality is restored thanks to automatic reload

Opt-out Test URLs

Use below to test the per-site opt-out:

http://docs.ipfs.io (DNSLink website at /ipns/docs.ipfs.io)
https://d.tube/#!/v/elenasteem/890wiapc (regular website with custom JS)
- video won't load if redirect is active on initial load
- disabling redirect for d.tube restores playback (note: additional toggle does not impact current video, as data is cached by the website)

Other

added subtle animation to utility icons
global redirect icon will enable integrations if clicked when in suspended state
menu items specific to the Active Tab are in a section marked with additional border
(just a prototype, needs refinement)

TODO

fix tests
improve UX of "Active Tab" section in browser Action menu
minimize redirect-icon.js (100K right now)
expose per-site opt-outs as editable field on Preferences screen
- mvp: one FQDN per line, sort lexicographically
remove requestId from caches in onCompleted || onErrorOccurred
move use of browser.* from browser action page to background page

looking for feedback and ideas!

Changes: - moved global redirect toggle from Browser Action menu to the utility icon row, under "redirect" icon - added animation to utility icons - global redirect icon will enable integrations if clicked when in suspended state - menu items specific to the Active Tab are marked with additional border (just a prototype, needs refinement) - Redirect opt-out per site - new menu item in Active Tab section - when clicked on regular site toggles redirect for current FQDN and all its subdomains - when clicked on /ipns/<fqdn>/ (DNSLink) website, toggles redirect for <fqdn> - after redirect preference changes for current website, the tab is reloaded - DNSLink websites are reloaded to with URL change between IPNS path and original URL - redirect preference applies not only to requests to URLs with with FQDN of the active tab, but also to all subresource requests that have it in `originUrl` (Firefox) or `Referer` header (Chrome)

fsdiogo · 2019-02-21T17:48:31Z

This is pretty cool @lidel 👌

In regard to the UI, I'd drop the dashed border as it gives a temporary feeling. Here's a suggestion.

One minor UI change: when you hover over the power or redirect toggle, the text always refers to when everything is turned on: Suspend all IPFS integrations and Stop all gateway redirections, even when it's already suspended or stopped. So I'd say to change to Toggle all IPFS integrations and Toggle all gateway redirections or something of the like!

Following suggestion from #687 (comment)

The request for main page (request.type=main_request) is often optimized early by preloading DNSLink etc. We switch tests to one of subrequest types to ensure the test is not impacted by main_test logic.

This removes dotted border and introduces familiar grandient as sugegsted in #687 (comment)

lidel · 2019-02-23T20:58:30Z

@fsdiogo thank you, I switched style to follow your suggestion, looks bit cleaner:

This adds a textarea for editing per-site opt-outs. Array is converted into multi-line text. Entries that are not valid FQDNs are dropped. The list is sorted lexicographically.

lidel · 2019-02-24T01:13:29Z

To keep this PR simple, added a textarea on Preferences screen for editing opt-outs:

Array is converted into multi-line text.
Entries that are not valid FQDNs are dropped.
The list is sorted lexicographically.
Added basic copy, needs to be reviewed

- removed unused paths from redirect-icon SVG - small code cleanup

lidel · 2019-02-26T00:39:46Z

Created some GIFs for README:

Disable Gateway Redirect Per Website

Active Tab actions include option to opt-out current website from Gateway redirect of any IPFS subresources.
Disabling redirect for DNSLink website will restore original URL as well:

Disable Gateway Redirect (Global Toggle)

A handy toggle to disable all gateway redirects while keeping all other features enabled:

Suspend IPFS Extension

The "power" icon can be used to temporarily suspend all IPFS integrations
(redirects, API status, content scripts, protocol handlers etc).
Useful during testing. Extension can be re-enabled with a single click:

Added ipfsPathValidator.isRedirectPageActionsContext with tests: Per-site toggle won't be shown on internal pages and non-IPNS urls loaded from local gateway (confusing to users) Removed redundant variables in Browser Action context and made UI less jittery.

lidel · 2019-02-26T14:01:13Z

Ok, I think this has been brewing for long enough.
Would appreciate review/sanity check or at least some 👍 or 👎 on:

UI proposed in
- Per-site Redirect Opt-out #687 (comment) (Browser Action with Active Tab section + Preferences)
- Per-site Redirect Opt-out #687 (comment) (Quick Toggles and Per Website Redirect Opt-Out)
- Note: feedback about (icon used for redirect toggle) is happening in Redirection toggle in popup menu #647 (comment)
Copy and new strings in add-on/_locales/en/messages.json
Updated copy in README.md (preview)

olizilla · 2019-02-26T14:43:48Z

@lidel in general I'm +1 on the idea. If we borrow from the UI language of IPFS Web UI, then we'd use a small caps label like:

Which i think works pretty well

olizilla · 2019-02-26T15:13:28Z

@ericronne I know you have no context for this, but it's would be a useful exercise to talk you through it and get your thoughts.

hugomrdias · 2019-02-26T17:52:10Z

@lidel i made a prototype which packs lots of ideas out of this PR scope

https://codesandbox.io/s/14y8r7qjo3

but basically i like toggles with explicit label and tooltip explaining everything like i'm 5. I prefer label texts that don't change with state.

[@lidel] This is awesome! I extracted this to separate issue – see #689 (comment)

ericronne · 2019-02-26T22:22:08Z

@olizilla yes, would love a walkthrough! Looks like an interesting workstream; would love to get some context before attempting to lend any sage (ha) advice …

ericronne

As a brand-newbie to IPFS, i don't yet grok much about this tool. Once i've taken the time to learn more, i'll open a new issue with broader design suggestions. For now, i would enclose the arrow icon with a circle, to better coordinate with the other two buttons. Then maybe move it to the front of the row. Otherwise i wonder if users might think that clicking it performs some kind of swapping function on the two functions that it lies between (f that makes any sense). Thanks!

It was raised during the review that labels should not change. This changes the UI of redirect toggles from dynamic label to static label + @material/switch

We already have it as regular menu item, and the switch glyph seems to confuse people about its purpose, so let's remove UI cruft and hide the icon toggle for now. Another small tweak is to fade out global toggle instead of hiding it in offline mode, which removes unnecessary jitter from UI.

lidel · 2019-03-04T18:41:52Z

Thank you for the feedback!

Just pushed some tweaks, here is the summary of changes:

Menu sections are now separated with webui-like header, as suggested by @olizilla
Applied suggestion from @hugomrdias: labels do not change and the state is represented using toggle switch (@material/switch)
- I applied this change to Pin/Unpin as well (it swapped label before)
Removed "redirect toggle" icon for now, and replaced it with "Gateway Redirect" menu item
- The icon confused a lot of people and @ericronne raised good points about placement and its general shape. We can revisit the idea with updated SVG in the future.
Switched to fading-out instead of hiding some inactive elements to reduce UI jitter.

regular website	dnslink website	offline mode

hugomrdias · 2019-03-04T19:04:37Z

looks awesome !!!

I would move active tab up and tools down and change "Gateway Redirect" to "Redirect to gateway".

This way both global and tab redirect are together in the UI to create a visual connection between them.

Another option is to change "Redirect on docs.ipfs.io" to "Gateway Redirect on docs.ipfs.io" but this one makes it bigger and with big origins it might get weird.

+ unify labels related to redirects

lidel · 2019-03-04T23:42:50Z

@hugomrdias 👌

regular website	dnslink website	offline mode

I believe it is ready for a test ride in Beta channel.
Will merge this as-is, we can tweak copy/ux in separate PRs.

Update: Ready for testing: v2.7.5.748 (Beta)
UX discussion continues in: Design: New UI for IPFS Companion #689

When we introduced option to opt-out from redirect per site (#687), it came with a side effect of removing IPFS context actions. This PR (aka Show IPFS Actions on DNSLink Sites): - Adds context actions on DNSLink sites (when redirect is disabled) - Adds a bunch of tests - Tweaks behavior of pin/unpin via browser action menu - Works around missing dnslink resolver under js

ghost assigned lidel Feb 20, 2019

ghost added the status/in-progress In progress label Feb 20, 2019

This was referenced Feb 20, 2019

Redirection toggle in popup menu #647

Closed

Redirect opt-out per website #633

Closed

lidel added 2 commits February 23, 2019 20:40

style: change labels on global toggles

ba20aa7

Following suggestion from #687 (comment)

refactor: switch dnslink tests to subrequests

8d1f3b3

The request for main page (request.type=main_request) is often optimized early by preloading DNSLink etc. We switch tests to one of subrequest types to ensure the test is not impacted by main_test logic.

lidel requested review from olizilla and removed request for olizilla February 23, 2019 20:16

style(browserAction): tweak style of active tab items

1f939d6

This removes dotted border and introduces familiar grandient as sugegsted in #687 (comment)

feat(options): UI for editing redirect opt-outs

86f5fcf

This adds a textarea for editing per-site opt-outs. Array is converted into multi-line text. Entries that are not valid FQDNs are dropped. The list is sorted lexicographically.

lidel added 2 commits February 26, 2019 00:12

refactor: code cleanup and SVG optimization

ada2ddb

- removed unused paths from redirect-icon SVG - small code cleanup

docs(README): updated section about Quick Toggles

2394847

lidel force-pushed the feat/redirect-toggle-per-website branch from e2b2fe3 to 82cae05 Compare February 26, 2019 13:44

lidel requested review from a team, hugomrdias and cwaring February 26, 2019 13:46

lidel marked this pull request as ready for review February 26, 2019 14:04

lidel changed the title ~~[WIP] Per-site Redirect Opt-out~~ Per-site Redirect Opt-out Feb 26, 2019

lidel mentioned this pull request Feb 27, 2019

Redirect of CID-in-subdomain and DNSLink websites #667

Closed

ericronne reviewed Feb 27, 2019

View reviewed changes

This was referenced Feb 28, 2019

[META] Upgraded UI for IPFS Companion #689

Closed

New UI for Backend Control #491

Closed

lidel added 2 commits March 4, 2019 18:26

style(ux): redirect toggles with @material/switch

dfe5040

It was raised during the review that labels should not change. This changes the UI of redirect toggles from dynamic label to static label + @material/switch

style(browserAction): move Active Tab section to the top

f17ae7c

+ unify labels related to redirects

lidel merged commit 678c714 into master Mar 5, 2019

ghost removed the status/in-progress In progress label Mar 5, 2019

lidel deleted the feat/redirect-toggle-per-website branch March 5, 2019 00:06

lidel mentioned this pull request Mar 12, 2019

Show IPFS Actions on DNSLink Sites #694

Merged

lidel mentioned this pull request Mar 22, 2019

Disable default redirect of DNSLink websites if it breaks Origin #701

Closed

olizilla mentioned this pull request Jul 17, 2019

feat: glyph_switch.svg ipfs-shipyard/ipfs-css#32

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Per-site Redirect Opt-out #687

Per-site Redirect Opt-out #687

lidel commented Feb 20, 2019 •

edited

Loading

fsdiogo commented Feb 21, 2019

lidel commented Feb 23, 2019

lidel commented Feb 24, 2019 •

edited

Loading

lidel commented Feb 26, 2019

Disable Gateway Redirect Per Website

Disable Gateway Redirect (Global Toggle)

Suspend IPFS Extension

lidel commented Feb 26, 2019 •

edited

Loading

olizilla commented Feb 26, 2019

olizilla commented Feb 26, 2019

hugomrdias commented Feb 26, 2019 •

edited by lidel

Loading

ericronne commented Feb 26, 2019

ericronne left a comment

lidel commented Mar 4, 2019 •

edited

Loading

hugomrdias commented Mar 4, 2019

lidel commented Mar 4, 2019 •

edited

Loading

Per-site Redirect Opt-out #687

Per-site Redirect Opt-out #687

Conversation

lidel commented Feb 20, 2019 • edited Loading

Changes

Icon-based global redirect toggle

Redirect opt-out per site

Opt-out Test URLs

Other

TODO

looking for feedback and ideas!

fsdiogo commented Feb 21, 2019

lidel commented Feb 23, 2019

lidel commented Feb 24, 2019 • edited Loading

lidel commented Feb 26, 2019

Disable Gateway Redirect Per Website

Disable Gateway Redirect (Global Toggle)

Suspend IPFS Extension

lidel commented Feb 26, 2019 • edited Loading

olizilla commented Feb 26, 2019

olizilla commented Feb 26, 2019

hugomrdias commented Feb 26, 2019 • edited by lidel Loading

ericronne commented Feb 26, 2019

ericronne left a comment

Choose a reason for hiding this comment

lidel commented Mar 4, 2019 • edited Loading

hugomrdias commented Mar 4, 2019

lidel commented Mar 4, 2019 • edited Loading

lidel commented Feb 20, 2019 •

edited

Loading

lidel commented Feb 24, 2019 •

edited

Loading

lidel commented Feb 26, 2019 •

edited

Loading

hugomrdias commented Feb 26, 2019 •

edited by lidel

Loading

lidel commented Mar 4, 2019 •

edited

Loading

lidel commented Mar 4, 2019 •

edited

Loading