googlechromelabs/feature-policy-demos

Feature Policy Kitchen Sink Demos

Permissions Policy and Document Policy Demos

Kitchen sink of Permissions Policy and Document Policy demos.

Development

First install the dependencies:

npm i

Then run the web server:

npm run start

Deployment

npm run deploy

feature-policy-demos's Issues

Clarify unsized-media comments

I was looking at the page for unsized-media and found it a little bit confusing.

Click the disallow/allow buttons above to see how the page loads with the policy on and off. When the policy is on, you won't see layout thrashing as large images load. Media without explicit sizes (either as HTML attributes ore defined in CSS) causes layout and text reflows as the page loads.

Could this be written more precisely as this?:

Click the disallow/allow buttons above to see how the page loads with the policy on and off. When the policy is on, you won't see layout thrashing as large images load. When the policy is off, media without explicit sizes (either as HTML attributes or defined in CSS) causes layout and text reflows as the page loads.

---

<!--
When both dimension are specified, unsized-media has no effect. The image will
be sized to the specified dimensions and no re-layout will occur.
-->
<img src="https://picsum.photos/1200/700/?random" width="100%" height="300">

Should the height on this picture be set to 700 instead of 300? It shows up as being distorted.

---

When no dimensions are specified (either via style attr, width/height attr, or class):
1. unsized-media on: image/video will have an intrinsic size. Causes re-layout.
2. unsized-media off: image/video will have a default size of 300x150. No re-layout.

When one dimension is specified (via a class, width="200", style="width:200px").
1. unsized-media off: image/video will be one of the specified dimension
   and the intrinsic ratio. Causes a re-layout.
2. unsized-media on: image/video will be one of the default dimensions (300x150)
   and the specified dimension. No re-layout.

When both dimension are specified, unsized-media has no effect. The image will
be sized to the specified dimensions and no re-layout will occur.

In the docs these two lists seem to contradict each other, I think the second list should have the off/on switched?

---

One of the goals of this page (I think?) is to show the distorting effect of this feature policy if you don't set width/height correctly. It could be good to explicitly call that out in the page, otherwise people may come away from looking at this page with the impression "unsized-media, that's the one that skews all my images".

Demos should reflect name change from 'Feature Policy' to 'Permissions Policy'

https://www.chromestatus.com/features/5745992911552512
https://w3c.github.io/webappsec-permissions-policy/

extension: better support for dark themes

The extension is not really readable or usable on a dark theme atm.

My theme is Morpheon Dark.

The theme works fine on something like the Lighthouse tab

Or Performance tab

Oversized-images demo not working anymore

Hi there!

Two months ago, I was able to get this demo working on my Chrome browser. It is not the case anymore.

Chrome version: 83.0
Experimental Web Platform features: enable
Experimental Productivity Features: enable (as explained here)
Browser restarted after flags change.
I've also tried adding a Feature-Policy header with the ModHeader extension.

Nothing happens, all images are visible in the demo. Was this Feature-Policy removed from Chrome?

Sample page for `vertical-scroll`.

For vertical-scroll demo, (similar to other policies) a sample html page is loaded inside an <iframe> where the feature itself is enabled/disabled. This is a bit limiting in demonstrating a feature such as vertical-scroll where for proper illustration, the actual <iframe> should be scrollable in its parent. Essentially with the new changes to vertical-scroll policy, when a frame is disabled it will not consume any scroll gestures. With the current demo it leads to the whole page appearing as unscrollable which is in fact only because the <iframe> containing vertical-scroll.html was not scrollable to begin with.

I think setting up for a new feature for demo-ing should involve an optional step to configure the embedding page as well. Perhaps in updatePage we could check if policy requires further tuning (although putting raw code in policy.json which is where all the feature related information coming from might not be a good idea)