From 04d56f9229fe47fea1bb6b8a8b9556553edb77e8 Mon Sep 17 00:00:00 2001
From: Michael Terry <mterry@edx.org>
Date: Mon, 4 Apr 2022 16:21:14 -0400
Subject: [PATCH] fix: tell MFE about xblock iframe resizes more often

Previously, we missed some kinds of resize events (like css changes)
when the DOM inside an xblock changed. And then the MFE iframe
wouldn't be the right size.

This switches from a MutateObserver to the more appropriate
ResizeObserver which catches more cases.

AA-1252
---
 .../courseware/courseware-chromeless.html        | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html
index af36cacae5..b99a41807e 100644
--- a/lms/templates/courseware/courseware-chromeless.html
+++ b/lms/templates/courseware/courseware-chromeless.html
@@ -118,7 +118,7 @@ ${HTML(fragment.foot_html())}
   (function() {
     // If this view is rendered in an iframe within the learning microfrontend app
     // it will report the height of its contents to the parent window when the
-    // document loads, window resizes, or DOM mutates.
+    // document loads, window resizes, or DOM resizes.
     if (window !== window.parent) {
       document.body.className += ' view-in-mfe';
       var lastHeight = window.offsetHeight;
@@ -126,12 +126,11 @@ ${HTML(fragment.foot_html())}
       var contentElement = document.getElementById('content');
 
       function dispatchResizeMessage(event) {
-        // Note: event is actually an Array of MutationRecord objects
-        // when fired from the MutationObserver
-        var eventType = event.type || 'mutate';
+        // Note: event is actually an Array of ResizeObserverEntry objects when fired from the ResizeObserver
+        var isLoadEvent = event.type === 'load';
         var newHeight = contentElement.offsetHeight;
         var newWidth = contentElement.offsetWidth;
-        if (eventType !== 'load' && newWidth === lastWidth && newHeight === lastHeight) {
+        if (!isLoadEvent && newWidth === lastWidth && newHeight === lastHeight) {
             // Monitor when any anchor tag is clicked, it is checked to make sure
             // it is referencing an element's id or name (not an external website). If
             // the href attribute is an id or name, the location of the selected focus
@@ -190,11 +189,8 @@ ${HTML(fragment.foot_html())}
         window.scrollTo(0, 0);
       }
 
-      // Create an observer instance linked to the callback function
-      const observer = new MutationObserver(dispatchResizeMessage);
-
-      // Start observing the target node for configured mutations
-      observer.observe(document.body, { attributes: true, childList: true, subtree: true });
+      const observer = new ResizeObserver(dispatchResizeMessage);
+      observer.observe(document.body);
 
       window.addEventListener('load', dispatchResizeMessage);
       window.addEventListener('resize', dispatchResizeMessage);