Render interactive catalog resources in an in-app HTML viewer

[soyalejolopez]

Interactive catalog resources (Copilot Agents Guide, Agents Cost Calculator) now render their HTML page inside the app via a View button that opens a window-in-window modal with an Open-in-new-tab header link, instead of only linking to GitHub. Only index.html changed.

[gemini-code-assist]

Code Review

This pull request introduces an interactive Resource Viewer Modal to index.html, allowing users to preview resources directly within an iframe. It includes the necessary CSS styling, HTML structure, and JavaScript logic to open and close the viewer, as well as handling the 'Escape' key and backdrop clicks. The review feedback suggests enhancing security by adding a sandbox attribute to the iframe, and improving accessibility by managing focus states and handling keydown events within same-origin iframe contexts.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

To follow security best practices and enforce a strong security boundary, consider adding a sandbox attribute to the <iframe>. Since the embedded interactive resources are same-origin and require scripts, using allow-scripts allow-same-origin allow-popups allow-forms will ensure they function correctly while preventing them from navigating the top-level window (allow-top-navigation is omitted).

<iframe class="viewer-iframe" id="viewerFrame" title="Resource preview" loading="lazy" referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>

[gemini-code-assist]

To improve accessibility (A11y) and user experience, we should manage focus when opening and closing the modal. Specifically:

1. Store the currently focused element before opening the modal, and restore focus to it when the modal is closed.
2. Set focus to the close button when the modal opens so keyboard users can easily dismiss it.
3. Bind an Escape key listener inside the same-origin iframe's document, as keydown events inside an iframe do not bubble up to the parent document.

    let activeElementBeforeModal = null;

    function openViewer(name, url) {
      activeElementBeforeModal = document.activeElement;
      const overlay = document.getElementById('viewerOverlay');
      const frame = document.getElementById('viewerFrame');
      document.getElementById('viewerTitle').textContent = name;
      document.getElementById('viewerOpenTab').href = url;
      frame.src = url;

      // Enable Escape key to close the viewer even when focus is inside the same-origin iframe
      frame.onload = () => {
        try {
          frame.contentDocument.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeViewer();
          });
        } catch (err) {
          // Ignore cross-origin or loading errors
        }
      };

      overlay.classList.add('open');
      document.body.style.overflow = 'hidden';
      document.getElementById('viewerClose').focus();
      if (typeof window.clarity !== 'undefined') { window.clarity('event', 'resource_preview'); }
    }

    function closeViewer() {
      const overlay = document.getElementById('viewerOverlay');
      const frame = document.getElementById('viewerFrame');
      overlay.classList.remove('open');
      frame.src = 'about:blank';
      document.body.style.overflow = '';
      if (activeElementBeforeModal) {
        activeElementBeforeModal.focus();
      }
    }