Side Panel

[benjycui]

こんにちは TAG-さん!

I'm requesting a TAG review of Side Panel.

Modern browsers have a side panel that can be used to display additional information about the current page or provides a way to browse side-by-side. This proposal aims to standardize the side panel and its API. The new side panel API will allow developers to declare support for the side panel and to control their web content in the side panel.

• Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/SidePanel/explainer.md
• User research: N/A
• Security and Privacy self-review²: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/SidePanel/security-and-privacy-self-review.md
• GitHub repo (if you prefer feedback filed there): https://github.com/MicrosoftEdge/MSEdgeExplainers
• Primary contacts (and their relationship to the specification):
  • Xiaobin Cui, @benjycui , Microsoft
• Organization/project driving the design: Microsoft Edge
• External status/issue trackers for this feature: N/A

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• The group where the incubation/design work on this is being done (or is intended to be done in the future):
• The group where standardization of this work is intended to be done: webapps
• Existing major pieces of multi-stakeholder review or discussion of this design: N/A
• Major unresolved issues with or opposition to this design: N/A
• This work is being funded by: Microsoft Edge

We'd prefer the TAG provide feedback as:

🐛 open issues in our GitHub repo for each point of feedback

[plinss]

Hi! Thank you for sending this our way. We're not sure exactly about the use cases? You've listed a non-goal of displaying content from different origins but the example seems to show content from different origins. Also there's no specified way to target content to a side panel or to trigger content coming up in a side panel. Basically can you elaborate on the use cases a bit?

[benjycui]

I created a PR to update the explainer https://github.com/MicrosoftEdge/MSEdgeExplainers/pull/700/files

The confusing non-goal had been updated to:

Allowing a site to declare a side panel app of a different origin (e.g. contoso.com cannot declare a side panel app for fabrikam.com).

Side panel API is designed to be used by web developers when they want their web application can be promoted and detect being rendered in side panel.

If developers want to access left-side web content from a side panel app, they should use Extension.

If developers want to install a web application to side panel, they should use Web Install API.

[LeaVerou]

Hi there, @hober, @torgo, @matatk, and I looked at this today during a breakout at our London F2F.

We have some concerns that the way this feature is designed overfits to Edge's specific side panel feature. We generally prefer Web platform features to be designed in a more general way to be able to encompass different designs for the same purpose, including designs that may conceivably emerge down the line.

Furthermore, we are not 100% sure that a new feature is needed at all. Adapting the UI design of the app for the smaller viewport can be done with existing web platform primitives. Is there something fundamentally different about this use case that requires a new display mode, and if so, what is the core of it? If we understand what is fundamentally different about this display mode over others (either existing, or potential future extensions) we may be able to give you more actionable design advice.

[benjycui]

Thanks @LeaVerou

Adapting the UI design of the app for the smaller viewport can be done with existing web platform primitives.

There is an existing issue discussing about this MicrosoftEdge/MSEdgeExplainers#692

Is there something fundamentally different about this use case that requires a new display mode, and if so, what is the core of it?

That side panel might not provide UX like a browser tab/window is the reason why web page needs side-panel mode , e.g., side panel might not provide omnibox and back/forward button, so web applications need to provide other way to navigate around.

It is recommended to detect windows' width if styles or behaviors are not side panel only.

[LeaVerou]

That side panel might not provide UX like a browser tab/window is the reason why web page needs side-panel mode , e.g., side panel might not provide omnibox and back/forward button, so web applications need to provide other way to navigate around.

This does not seem specific to side panels, the same thing applies in other contexts, e.g. certain window.open() calls.

[novac42]

@LeaVerou appreciate the feedback. A main difference is the context: sidebar PWA has a special UA to inform the app that it's being rendered in a sidebar of a main browser window. Therefore, developer could leverage this to dispatch more lightweight content that fits the sidebar, in that case sidebar PWA serves as a minimalist gateway to extensive content.
For example, an onboarded developer made a TikTok-style channel consists of short clips of its original movie/TV shows, and if users watched the short clip in sidebar, they could click on the title and start watching full length video in main browser window.

[matatk]

Thanks @benjycui for your request, and to you and @novac42 for your answers to our questions. It looks like there isn't active community engagement with this proposal at the moment (please point us in the right direction if we've missed anything) - so we are closing this for now. However, if the community picks up on this work in future, please feel free to re-open.