I2I: Introduce `PREVIEW` visibility state

AMP PREVIEW visibility state

Overview

First step in enabling an auto-play preview mode for AMP stories, as described in https://github.com/ampproject/amphtml/issues/12815.

PREVIEW mode should default to PRERENDER mode in most cases, but must be privacy-preserving. This means any external resource loading must either happen through the serving domain (ex. via cache rewrite of <amp-video> target) or by delaying loading the component entirely if there’s no viable substitute (ex. <amp-analytics>).

Auto-play should be addressed separately while utilizing preview mode. This is to separate the set of preview-related concerns (primarily privacy and loading of external resources) from auto-play functionality (which may have more nuanced changes on how components function).

Approach

1. Introduce PREVIEW visibility-state enum. Add previewAllowed method to BaseElement which defaults to returning prerenderAllowed. This change makes the PREVIEW visibility-state available and equivalent to PRERENDER.
2. Update preact/base-element.js (prerenderAllowed), resource.js (prerenderAllowed), scheduler.js (maybeBuild), resource-impl.js (isLayoutAllowed_), and any remaining runtime+test files to handle new state.
3. Return false from previewAllowed for any components which may load external resources, blocking them in preview for now; later, their implementation can be adjusted to handle preview specifically. Non-AMP tags such as <img> will require special handling (ex. cache rewrite) to avoid external resources, which will be the responsibility of the code/page presenting the story preview. An initial pass-through found the following tags requiring external loads, which should be initially disabled in preview:
   • <amp-analytics>
   • <amp-audio>
   • <amp-gist>
   • <amp-img>
   • <amp-install-serviceworker>
   • <amp-list>
   • <amp-live-list>
   • <amp-pixel>
   • <amp-story-360>
   • <amp-story-auto-analytics>
   • <amp-story-interactive-binary-poll>
   • <amp-story-interactive-poll>
   • <amp-story-interactive-quiz>
   • <amp-story-interactive-results>
   • <amp-story-panning-media>
   • <amp-twitter>
   • <amp-video>
   • <image>
   • <img>
   • <source>
   • <svg>
   • <track>
4. Members of @wg-stories and @wg-components can separately prioritize updating the listed components to support preview visibility. This may include logic for visibility state changes from hidden --> preview --> prerender --> visible.

Milestones:

• Introduce new visibility state and add previewAllowed to BaseElement
• Update runtime code to handle new visibility state
• Disable preview for external-loading tags/components
• Expand preview support for listed components

These steps put us in a place where client code can start to display privacy-previews of stories, which a blocklist of unsupported elements.

@newmuis Does this all seem reasonable? It looks to be fairly straightforward, if I’m not missing too much.

[samouri]

PREVIEW mode should default to PRERENDER mode in most cases, but must be privacy-preserving.

My understanding was that PRERENDER is currently privacy preserving.

[gmajoulet]

Launched