Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to Remove "Back to Tab" Button in Picture-in-Picture (PiP) Window #113

Closed
offbeatful opened this issue Feb 20, 2024 · 6 comments · Fixed by #114
Closed

Option to Remove "Back to Tab" Button in Picture-in-Picture (PiP) Window #113

offbeatful opened this issue Feb 20, 2024 · 6 comments · Fixed by #114
Assignees
Labels
enhancement New feature or request

Comments

@offbeatful
Copy link

The current "Back to Tab" button within the Picture-in-Picture window presents some usability concerns that deserve consideration:

  • Contradicts Design Language: The "Back to Tab" closes the PiP window while navigating back to original tab, may conflict with the common web design pattern of "open in a new tab" button navigating towards a new page. This inconsistency can lead to user confusion, specifically when both buttons are visible (Back to Tab in the header and Open in a New Tab HTML button created by user).

  • Unexpected Behavior: Users might not intuitively understand that the "Back to Tab" button closes the PiP window entirely. They might expect it to return focus to the original tab while keeping the PiP window open.

  • Alternative Controls: The standard "close" button (usually an "X") already provides the functionality of closing the PiP window, rendering the "Back to Tab" button potentially redundant.

Proposed Solution:
Provide an option to remove the "Back to Tab" button from the Picture-in-Picture requestWindow method.

@beaufortfrancois
Copy link
Contributor

The "Back to tab" button is an implementation detail browsers choose to expose in their UI. I don't think the spec should say something about how browsers should handle this potential button.

Contradicts Design Language: The "Back to Tab" closes the PiP window while navigating back to original tab, may conflict with the common web design pattern of "open in a new tab" button navigating towards a new page. This inconsistency can lead to user confusion, specifically when both buttons are visible (Back to Tab in the header and Open in a New Tab HTML button created by user).

Can you share a real-life example of this issue? It's not clear to me where user confusion may happen.

Unexpected Behavior: Users might not intuitively understand that the "Back to Tab" button closes the PiP window entirely. They might expect it to return focus to the original tab while keeping the PiP window open.

Safari and Firefox browsers also have respectively a "Return" and "Back to tab" button in their PiP video windows implementations. We didn't hear yet users complaining about it.

Instead, we may want to update the Back to Tab" button UI in Chrome. Data points that proves that "Back to Tab" is confusing would also help as well.

safarifirefox

Alternative Controls: The standard "close" button (usually an "X") already provides the functionality of closing the PiP window, rendering the "Back to Tab" button potentially redundant.

The "Back to tab" button closes the PiP window but also focuses the opener tab. We could argue the "Back to Tab" button should be just about focusing the tab also.

Proposed Solution:
Provide an option to remove the "Back to Tab" button from the Picture-in-Picture requestWindow method.

A way to do feature detection before calling requestWindow with the option would also come handy for web developers.

@beaufortfrancois
Copy link
Contributor

beaufortfrancois commented Feb 21, 2024

Since web developers can now use the focus() Window method to focus the opener window from the Picture-in-Picture window, I wonder if we should simply remove the "back to tab" button from the PiP window and let the web app handle it by itself.

@steimelchrome
Copy link
Collaborator

I'm not sure I'm convinced that the focus() changes are enough to motivate always removing the "back to tab" button and forcing websites to create their own button.

Do you have any ideas on how to enable feature detection for the option?

@beaufortfrancois
Copy link
Contributor

I'm not sure I'm convinced that the focus() changes are enough to motivate always removing the "back to tab" button and forcing websites to create their own button.

Do we have user stats about the usage of "close" vs "back to tab" buttons in PiP windows?

Do you have any ideas on how to enable feature detection for the option?

With no standardized ways to do proper feature detection before calling the documentPictureInPicture.requestWindow(), web developers would have to do it afterwards with the following code for instance:

let supportsAllowReturnToTab = false;

await documentPictureInPicture.requestWindow(
  Object.defineProperty({ width: 300, height: 200 }, "allowReturnToTab", {
    get: () => {
      supportsAllowReturnToTab = true;
      return true; // the actual value of "allowReturnToTab"
    },
  }),
);
console.log({ supportsAllowReturnToTab });

@steimelchrome
Copy link
Collaborator

Do we have user stats about the usage of "close" vs "back to tab" buttons in PiP windows?

Yep. Just checked Windows stats and it looks like "back to tab" is used about twice as often as "close", so users definitely find it to be a useful feature.

Also, thanks for the link about feature detection. Definitely seems like a larger issue

@iamryflores
Copy link

I just want to support some of the comments that were already mentioned:

  • "Back to tab" is an existing PiP pattern (close window and refocus opener tab) across browsers, so users should have some familiarity with it if they have used standard PiP before
  • We are providing sites the ability to refocus the opener tab and also hide the "back to tab" button; therefore I don't think we need to always hide "back to tab". I do understand the potential inconsistency issues between site experiences that this may cause
  • "Back to tab" is consistently the most commonly used action over the "close" icon. So it's probably safe to assume that users both desire and understand this functionality

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants