Deal with user gesture limitations (permissions.request(), sidePanel.open())

[fregante]

Continuing from #7237 (comment)

Some APIs like sidePanel.open() and permission.request() requires a "user gesture", which means they can only be called after the user clicks or types somewhere.

We have code that takes care of a similar limitation around the Clipboard API and I think we can write a utility simplify user gesture capture.

Proposal

function withUserGesture(message, fn) {
  try {
    await fn();
  } catch (error) {
    if (!isUserGestureError(error)) {
      throw error
    }
    const button = <button>{message}</button>;
    document.append(button);
    await oneEvent(button, 'click');
    button.remove();
    await fn();
  }
}

withUserGesture('Click anywhere to continue', async () => {
  await chrome.sidePanel.open()
});

This would be particularly for the sidePanel API (and the "open sidebar" brick) in MV3, so I'll tag this ticket as MV3/sidebar.

[grahamlangford]

I like the idea of the utility, but I'm not so sure about using a button. Adding the click handler to the document along with a toast feels like better UX and DX (just appending the button to the body doesn't give us any control over position). This is also something @BrandonPxBx should weigh in on.

[fregante]

That was pseudo-code, the style is TBD

[twschiller]

A standard utility would be helpful and would let us have a standard UX. It doesn't replace avoiding the problem in the first place. Mod Creators/Users get confused by our Copy to Clipboard flow (they don't have a mental modal about page focus / gesture)

[fregante]

Mod Creators/Users get confused by our Copy to Clipboard flow

Could that be a UI problem? Apple implemented a similar flow to block automated clipboard retrieval. The user is presented with a clear modal that lets the user confirm or deny the "paste".

Certainly it should be avoided if possible, but it's not always possible. For example with a "Load trigger" you just cannot open the sidebar automatically (I don't know how common this is, but...)

I'd say we can wrap those calls with the utility, while also pushing the user towards confirmation-free usage, e.g. "Open the sidebar in the first brick".

[BrandonPxBx]

I would hypothesize that users are confused by a toast message that says "Click anywhere to copy to clipboard" because there's 1) nothing specific to click on, and 2) clicking in a random place to copy something is a really out-of-the-ordinary pattern.

Since this is a fallback situation, I would treat it like an error, and I like @fregante's suggestion of using a button since it's a specific target with a clickable nature.

Message like "Something went wrong in Chrome [TRY AGAIN]" or generic that can be applied to everything is a small solution. Customizing with specific text and button labels is a larger, better solution IMO.