Measure and outline: reach into same-origin iframes rendered by a story

[xiaoyu2er]

Is your feature request related to a problem? Please describe.

When a story renders its own <iframe> (for example an HTML email preview shown through srcdoc, an embedded widget, or a micro-frontend host), the measure and outline tools only see the iframe element itself. Hovering inside the iframe with measure enabled highlights the whole iframe box, and outline draws only its border. Nothing inside the frame can be measured or outlined.

In 10.6.5 this follows from the implementation:

• measure's deepElementFromPoint descends into shadowRoots, but not into iframe.contentDocument;
• the measure overlay <canvas> is drawn on the preview document;
• outline (and backgrounds) inject their <style> into the preview document's <head> only.

Minimal reproduction (any React project):

export const InFrame = {
  render: () => (
    <iframe
      title="frame"
      style={{ border: 0, width: 400, height: 200 }}
      srcDoc="<div style='margin:16px;padding:24px;border:1px solid'>inner</div>"
    />
  ),
};

1. Enable measure and hover the text "inner": only the iframe is highlighted, not the div, its padding or its margin.
2. Enable outline: the div inside the frame is not outlined.

Today the workaround is to turn off the built-in tools (features: { measure: false }) and re-implement them inside the frame from a decorator.

Describe the solution you'd like

For same-origin iframes only (cross-origin documents can't be read and would be skipped):

• Measure: when the element under the pointer is an HTMLIFrameElement with an accessible contentDocument, translate the coordinates into the frame and keep descending, the same way shadow roots are crawled. Draw the result offset by the frame's position, or draw the overlay inside the frame's document.
• Outline: also inject the outline stylesheet into the documents of same-origin iframes in the story, and inject it again when a frame loads a new document.

This could be opt-in through a parameter (e.g. measure: { iframes: true }), if crawling frames by default is too broad.

Describe alternatives you've considered

• Rendering the content inline instead of in an iframe. That doesn't work when the content needs its own document: its own doctype or quirks/almost-standards mode, <html>/<body> styles, or CSS that must not leak into, or pick up, the preview's styles.
• Shadow DOM: it isolates CSS but has no doctype or <html>/<body>, and the outline selectors don't pierce it either.
• layout: 'document' (in progress on a canary branch) lets a story own the whole preview document, which covers some of these cases. It doesn't cover content that needs a different doctype than the preview's, or several frames in one story.
• Re-implementing measure and outline inside the frame from a decorator (what we do now). It works, but it duplicates the built-in tools and their toolbar toggles.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

Scroll position and coordinate translation for nested or scrolled frames are probably the hardest parts. I'd like to know whether you'd accept this before working on a PR, and whether it should wait for the measure/outline rework that's being done for layout: 'document'.