diff --git a/README.md b/README.md index e864c85..917adc1 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Document Picture-in-Picture Explained -2022-10-31 +2023-10-26 Spec: https://wicg.github.io/document-picture-in-picture/ @@ -210,6 +210,21 @@ function onLeavePiP() { } ``` +### Programatically resize the PiP window + +The document picture-in-picture window supports the resizeTo() and resizeBy() +APIs, but only with a user gesture on the PiP window: + +```js +const expandButton = pipWindow.document.createElement('button'); +expandButton.textContent = 'Expand PiP Window'; +expandButton.addEventListener('click', () => { + // Expand the PiP window's width by 20px and height by 30px. + pipWindow.resizeBy(20, 30); +}); +pipWindow.document.body.append(expandButton); +``` + ## Detailed design discussion ### Why not extend the `HTMLVideoElement.requestPictureInPicture()` idea to allow it to be called on any `HTMLElement`? diff --git a/spec.bs b/spec.bs index 888faa6..19b31f5 100644 --- a/spec.bs +++ b/spec.bs @@ -374,6 +374,46 @@ document in a Document Picture-in-Picture window is navigated, the Document Picture-in-Picture window is closed.

+## Resizing the PiP window ## {#resizing-the-pip-window} + +

+While programmatically resizing a document picture-in-picture window can be +useful, the always-on-top nature of the window means an unrestricted ability +to resize the window could be abused in annoying or intrusive way. To mitigate +these concerns without completely preventing the use of window resize APIs, we +will have those APIs consume a user gesture for document picture-in-picture +windows. +

+ +

+Merge this into {{Window/resizeTo()}} once it has enough consensus. +

+ +Add a new step to {{Window/resizeTo()}} after step 3, "If |target| is not an +[=auxiliary browsing context=] that was created by a script (as opposed to by an +action of the user), then return.": + +4. If |target|'s top-level traversable's + Is Document Picture-in-Picture boolean is true, then: + 1. If this's relevant global object does not have + transient activation, throw a "{{NotAllowedError}}" + {{DOMException}}. + 2. Consume user activation given this's relevant global object. + +

+Merge this into {{Window/resizeBy()}} once it has enough consensus. +

+ +Add a new step to {{Window/resizeBy()}} after step 3, "If |target| is not an +[=auxiliary browsing context=] that was created by a script (as opposed to by an +action of the user), then return.": + +4. If |target|'s top-level traversable's + Is Document Picture-in-Picture boolean is true, then: + 1. If this's relevant global object does not have + transient activation, throw a "{{NotAllowedError}}" + {{DOMException}}. + 2. Consume user activation given this's relevant global object. # Examples # {#examples} @@ -508,6 +548,21 @@ function onLeavePiP() { } +## Programatically resize the PiP window ## {#example-programmatic-resize} + +The document picture-in-picture window supports the {{Window/resizeTo()}} and +{{Window/resizeBy()}} APIs, but only with a user gesture on the PiP window: + +
+const expandButton = pipWindow.document.createElement('button');
+expandButton.textContent = 'Expand PiP Window';
+expandButton.addEventListener('click', () => {
+  // Expand the PiP window's width by 20px and height by 30px.
+  pipWindow.resizeBy(20, 30);
+});
+pipWindow.document.body.append(expandButton);
+
+ # Acknowledgments # {#acknowledgments} Many thanks to Frank Liberato, Mark Foltz, Klaus Weidner, François Beaufort,