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
This commit is contained in:
stvn
2020-04-27 15:41:22 -07:00
parent d435f4cd3e
commit 2ddc35cd79

View File

@@ -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>