GAUD-10477 iframed dialog resize

components/dialog/demo/dialog-fullscreen-in-iframe-contents.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script type="module">
+		import '../../typography/typography.js';
+		import '../../button/button.js';
+		import '../dialog-fullscreen.js';
+	</script>
+	<title>d2l-dialog-fullscreen (iframe contents)</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta charset="UTF-8">
+	<style>
+		body {
+			margin: 0;
+			padding: 30px;
+		}
+	</style>
+</head>
+<body class="d2l-typography">
+	<d2l-button id="open">Open Dialog</d2l-button>
+
+	<d2l-dialog-fullscreen id="dialogFullscreen" title-text="Fullscreen Title in Iframe" opened>
+		<p>This dialog is rendered inside an iframe that is smaller than the browser viewport. It uses the ifrau backdrop service to size itself to the iframe's available space rather than the full window.</p>
+		<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+		<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+		<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+		<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+		<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+		<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+		<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+	</d2l-dialog-fullscreen>
+
+	<script>
+		document.querySelector('#open').addEventListener('click', () => {
+			document.querySelector('#dialogFullscreen').opened = true;
+		});
+		document.querySelector('#dialogFullscreen').addEventListener('d2l-dialog-close', (e) => {
+			console.log('dialog action:', e.detail.action);
+		});
+	</script>
+</body>
+</html>

components/dialog/demo/dialog-fullscreen-in-iframe.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../demo/demo-page.js';
+		</script>
+		<style>
+			#iframe-container {
+				border: 2px dashed var(--d2l-color-celestine);
+				box-sizing: border-box;
+				height: 50vh;
+				margin: 30px 0;
+				overflow: hidden;
+				width: 100%;
+			}
+			#iframe-container iframe {
+				display: block;
+			}
+		</style>
+	</head>
+	<body unresolved>
+
+		<d2l-demo-page page-title="d2l-dialog-fullscreen (in iframe)">
+
+			<h2>Fullscreen Dialog inside a constrained iframe</h2>
+
+			<p>The dashed box below is a fixed-size iframe (smaller than the browser viewport) hosting a page that opens a <code>d2l-dialog-fullscreen</code>. This simulates the dialog being embedded in a product iframe that doesn't fill the whole window, relying on the ifrau backdrop service to size itself to the available iframe space.</p>
+
+			<div id="iframe-container"></div>
+
+			<script type="module">
+				import { Host } from 'ifrau/host.js';
+
+				const iframeSrc = new URL('./dialog-fullscreen-in-iframe-contents.html', window.location.href).href;
+				const iframeOrigin = new URL(iframeSrc).origin;
+
+				// the ifrau client posts this to detect whether it's running inside a frame
+				window.addEventListener('message', evt => {
+					if (!evt || evt.data !== 'isFramedRequest' || evt.origin !== iframeOrigin) return;
+					evt.source.postMessage({ isFramed: true }, iframeSrc);
+				});
+
+				(async() => {
+					const ifrauHost = new Host(
+						() => document.querySelector('#iframe-container'),
+						iframeSrc,
+						{ height: '100%' }
+					);
+
+					await ifrauHost.registerService('dialogWC', '0.1', {
+						// availableHeight matches the container, which is sized to half the viewport height
+						getContextInfo: () => ({ availableHeight: document.querySelector('#iframe-container').clientHeight, top: 0 }),
+						showBackdrop: () => ({ availableHeight: document.querySelector('#iframe-container').clientHeight, top: 0 }),
+						hideBackdrop: async() => {}
+					});
+					await ifrauHost.connect();
+				})();
+			</script>
+
+		</d2l-demo-page>
+
+	</body>
+</html>

components/dialog/dialog-mixin.js

@@ -116,6 +116,7 @@ export const DialogMixin = superclass => class extends superclass {
 		const ifrauDialogService = await tryGetIfrauBackdropService();
 		if (this.opened) {
 			if (ifrauDialogService) {
+				this.#ifrauDialogService = ifrauDialogService;
 				this._ifrauContextInfo = await ifrauDialogService.showBackdrop();
 				this._inIframe = true;
 			}
@@ -125,6 +126,7 @@ export const DialogMixin = superclass => class extends superclass {
 				ifrauDialogService.hideBackdrop();
 				this._ifrauContextInfo = null;
 			}
+			this.#ifrauDialogService = null;
 			this._close();
 		}
 	}
@@ -165,6 +167,7 @@ export const DialogMixin = superclass => class extends superclass {
 	}
 
 	#useNativeInitialized = false;
+	#ifrauDialogService = null;
 
 	#handleMvcDialogOpen = () => {
 		// native dialogs on top layer will be stacked on non-native dialogs regardless of z-index
@@ -182,6 +185,7 @@ export const DialogMixin = superclass => class extends superclass {
 	};
 
 	#updateSize = async() => {
+		if (this._inIframe && this.#ifrauDialogService) this._ifrauContextInfo = await this.#ifrauDialogService.getContextInfo();
 		if (this._autoSize) {
 			if (this._ifrauContextInfo) {
 				if (this._ifrauContextInfo.top > defaultMargin.top) {

components/dialog/test/dialog-ifrau.vdiff.js

@@ -34,6 +34,7 @@ describe('dialog-ifrau', () => {
 			);
 
 			await ifrauHost.registerService('dialogWC', '0.1', {
+				getContextInfo: () => ({ availableHeight: ifrau.availableHeight, top: ifrau.top }),
 				showBackdrop: () => {
 					return {
 						availableHeight: ifrau.availableHeight,

index.html

@@ -69,6 +69,7 @@ <h2 class="d2l-heading-3">Components</h2>
 				<li><a href="components/dialog/demo/dialog-nested.html">d2l-dialog (Nested)</a></li>
 				<li><a href="components/dialog/demo/dialog-confirm.html">d2l-dialog-confirm</a></li>
 				<li><a href="components/dialog/demo/dialog-fullscreen.html">d2l-dialog-fullscreen</a></li>
+				<li><a href="components/dialog/demo/dialog-fullscreen-in-iframe.html">d2l-dialog-fullscreen (iFramed)</a></li>
 			</ul>
 		</li>
 		<li>