From 2ddc35cd79a74f878517431bf99b22fb432be2bf Mon Sep 17 00:00:00 2001
From: stvn <stvn@mit.edu>
Date: Mon, 27 Apr 2020 15:41:22 -0700
Subject: [PATCH] Add logging to Learning MFE iframe, temporarily

to debug Firefox event handling that cannot be reproduced locally.

See TNL-7187 [1] for more details.

- [1] https://openedx.atlassian.net/browse/TNL-7187
---
 lms/templates/courseware/courseware-chromeless.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/lms/templates/courseware/courseware-chromeless.html b/lms/templates/courseware/courseware-chromeless.html
index b0e021b37d..db15dbc08b 100644
--- a/lms/templates/courseware/courseware-chromeless.html
+++ b/lms/templates/courseware/courseware-chromeless.html
@@ -115,22 +115,30 @@ ${HTML(fragment.foot_html())}
 % endif
 
 % if is_learning_mfe:
+## TODO: Remove console.log statements after production debugging
 <script type="text/javascript">
   (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.
+    console.log('MFE', 'Start script', document.referrer);
     if (window !== window.parent) {
       document.body.className += ' view-in-mfe';
       var lastHeight = window.offsetHeight;
       var lastWidth = window.offsetWidth;
       var contentElement = document.getElementById('content');
 
-      function dispatchResizeMessage() {
+      function dispatchResizeMessage(event) {
+        // Note: event is actually an Array of MutationRecord objects
+        // when fired from the MutationObserver
+        var eventType = event.type || 'mutate';
+        console.log('MFE', 'Handle resize', eventType);
+
         var newHeight = contentElement.offsetHeight;
         var newWidth = contentElement.offsetWidth;
 
         if (newWidth === lastWidth && newHeight === lastHeight) {
+          console.log('MFE', 'Ignore resize', newWidth, newHeight, eventType);
           return;
         }
 
@@ -153,6 +161,7 @@ ${HTML(fragment.foot_html())}
         // height. This window.scrollTo is an attempt to keep the content at the
         // top of the page. See TNL-7094
         window.scrollTo(0, 0);
+        console.log('MFE', 'Did resize', newWidth, newHeight, eventType);
       }
 
       // Create an observer instance linked to the callback function
@@ -163,6 +172,7 @@ ${HTML(fragment.foot_html())}
 
       window.addEventListener('load', dispatchResizeMessage);
       window.addEventListener('resize', dispatchResizeMessage);
+      console.log('MFE', 'Bind events to element', contentElement);
     }
   }());
 </script>