[Moved to #937] feat: add permalink and IPFS path copy options

[DeedleFake]

Closes #740.

As this currently is, it introduces a UI bug in the pop-up in Firefox that's accessed by clicking the icon on the far-right, as opposed to the one in the URL bar. The contents of the pop-up are too large for it, and it's not scrollable, so the bottom of the menu becomes inaccessible. I'm not familiar enough with how extensions work to fix that without hunting through the codebase for stuff that looks like it might have to do with it, so if someone could let me know what I should take a look at for fixing that it would be quite helpful.

[lidel]

Problem

Indeed, when we add two additional menu entries it goes over the max height browser allows:

💢 /ipns/	✔️ /ipfs/

I am afraid that is the hard limit:

In chrome the popup window dynamically changes (grows / shrinks) to suit changes to the content up to a maximum size of 800 x 600 px.

• https://bugzilla.mozilla.org/show_bug.cgi?id=1215025
• https://discourse.mozilla.org/t/what-is-the-max-size-for-a-browser-action-popup/16074

Also, now that I see all the Copy options, it feels the flat list does not work anymore: menu becomes too noisy.

Looking for solutions

We can either drop some items (eg. path ones), or change the UI of this to take less vertical space.

Some ideas:

default state	(A) details on hover	(B) details on click
default state shown when browser action is opened	clickable options are displayed inline, when user hovers over the "Copy" row	"Copy" is clickable and on click entire "Active Tab" section is replaced with "Copy" options

Would love another set of eyes on this before proceeding :)

[lidel]

This needs some design love, looping in design shop :)

tl;dr is: "Copy.." options take too much space, need some hint on how to proceed

Some time ago I did a related exploration in #587.
What if instead of "Copy.." actions, actual values are shown inline?

• Revamped "Copy.."
  • Clicking on URL, PATH, CID would select entire thing to make it easy to copy it to clipboard
  • There should also be "copy" icon on the right that would do the same
  • Having the above, most of the menu items could be removed, saving space

[jessicaschilling]

@lidel Looks like this got dropped at some point. To recap -- are you thinking something like this?

[lidel]

@jessicaschilling yes, you are reading my mind 👌

IIRC the remaining problem here is that on a mutable website such as IPNS or DNSLink http://en.wikipedia-on-ipfs.org/ this PR would add two items for copying an immutable link/path for the current snapshot:

Copy shareable link: https://en.wikipedia-on-ipfs.org/wiki/
Copy immutable permalink https://bafy..foo.ipfs.dweb.link/wiki/
Copy content path: /ipns/en.wikipedia-on-ipfs.org/wiki/
Copy immutable path: /ipfs/bafy..foo/wiki/
Copy CID: bafy..bar

Problems:

• if we add one more item the menu gets too tall and browser cuts the item at bottom of the list. Last time I checked there was no API that let us control height reliably across all vendors, so parked this PR until we rework the header of this menu to take less space.
• still, we simply have too many Copy.. items (mock)

[jessicaschilling]

They do fit into three categories:

• copy a link
• copy a path
• copy a CID

We could go down the path of making it a two-step process (copy a link: shareable or permalink?), which isn't ideal, but does reduce the initial cognitive burden down to three choices, which is a net improvement.

[jessicaschilling]

@lidel Here's a thought. What if we just had a single "Copy ..." item that would launch a modal with those 3-5 options, and the user could click to copy the one they want? This keeps the menu tidy, and gives us a little room in the modal to qualify what each of those options actually means (particularly useful in situations where you as a newbie might not know if you'd rather copy the shareable link or the permalink).

The drawback is it knocks every copy action into a two-click process. However, that's also in line with how many (most?) "share" flows work in the general wild.

Thoughts?

[lidel]

I think the idea of modal is ok, but still trying to find a way to make this work without introducing different screen/modal/huge state change 😅

What if we collapse all items into a single line with three buttons (or even icons?)

Enable on example.com
----------------------
Copy:  link, path, CID
----------------------
Pin IPFS resource

..and then when user hovers on "link" we show a value that will be copied when clicked (tooltip, or some sort of subtle overlay):

Copy:  [link], path, CID
 ________/\____________________________
| Click to copy a shareable link:
| https://bafybeigdyrzt5sfp7udm7hu76uh7y26nf3efuylqabf3oclgtqy55fbzdi.ipfs.dweb.link/

@jessicaschilling would appreciate a reality check with this idea.

[jessicaschilling]

@lidel LOVE this idea. I'd go with words, rather than icons, to avoid another layer of decoding (not sure we can create meaningful icons to differentiate between link/path/CID.

So ... next steps? @DeedleFake -- I realize this started out way back as your PR 😊 Are you game for implementing these suggestions? Thanks so much!

[DeedleFake]

I can take a stab at it when I get a chance, sure.

[jessicaschilling]

@DeedleFake - thanks so much! Please reach out if we can be helpful. 😊

[jessicaschilling]

Quick note, cc @lidel and @DeedleFake: #907 may get us back the vertical height we need to make this work as originally proposed (i.e. adding two menu items for "Copy immutable permalink" and "copy immutable path"). Is it possible to look this back over again after the new Companion release?

[DeedleFake]

Sure. Sorry that I haven't been able to get to it yet, by the way.

[jessicaschilling]

No worries at all 😊 thanks!

[jessicaschilling]

Hi @DeedleFake -- you can see the UI changes in stable channels for both Chrome and Firefox now! Are you able to take a look and see if there's room?

[jessicaschilling]

Closing this in favor of #937, since some significant changes to Companion code since this PR was originally made.

@DeedleFake -- happy to have you pick this back up if you have the time! If not, we can keep it on our list, but may not be terribly high priority at the moment.