Support debug bookmarklet in same-origin iframes

[MattiasBuelens]

Summary

The debug display bookmarklet now also finds Open Video UI players inside same-origin iframes, including nested ones. Many of our demo pages embed their player this way.

Each frame has its own customElements registry, and Lit's constructed stylesheets can't be shared across documents. So the top-level run doesn't create panels inside other frames itself:

top-level run:
  for each accessible document (recursing through window.frames; cross-origin frames are skipped):
    supported UIs found?
      doc === document || doc's registry already has <theoplayer-debug-display>  → toggle directly
      otherwise → inject <script src=currentScript.src data-theoplayer-debug-frame> into that doc
  nothing supported anywhere → alert (top window only)

injected copy (data-theoplayer-debug-frame): toggle UIs in its own document only; no recursion, no alert

New panels are now created with ui.ownerDocument.createElement(...).

When the only UIs found are older than 2.6.0 (no overlay slot), the alert now includes the version it detected. That version comes from the version getter or, on UMD pages, from window.THEOplayerUI.version, e.g.:

Open Video UI 2.4.1 found, but the debug display requires Open Video UI 2.6.0 or higher.

The guide now mentions that players in same-origin iframes are supported, and there is a patch changeset.

Tested in Chrome by serving the local build in place of the jsDelivr URL:

• A local page with nested same-origin frames plus one cross-origin frame. The panel toggles show → hide → show, there is only ever one panel per UI, and the cross-origin player is left alone.
• https://optiview.dolby.com/docs/theoplayer/ui/web/open-video-ui/examples/default-ui/ and https://optiview.dolby.com/docs/theoplayer/examples/getting-started/basic/ both toggle correctly.
• https://optiview.dolby.com/developers/test-stream/ (UI 2.4.1) shows the version alert.

Link to Devin session: https://dolby.devinenterprise.com/sessions/50ad8a122b354986bcfc78390b5a7f00
Open in Devin Desktop: https://dolby.devinenterprise.com/desktop/session/50ad8a122b354986bcfc78390b5a7f00?variant=devin
Requested by: @MattiasBuelens

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring

[changeset-bot]

🦋 Changeset detected

Latest commit: 2024190

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@theoplayer/web-ui	Patch
@theoplayer/react-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR