update email iframe height on message focus

ui/thread-view.html

@@ -63,13 +63,42 @@
     Do not add 'allow-scripts' to the sandbox attribute. This would allow the
     document to execute scripts itself.
   -->
-  <iframe class="body_iframe" sandbox="allow-same-origin" onload="sizeIframe(this);" srcdoc=""></iframe>
+  <iframe class="body_iframe" sandbox="allow-same-origin" onload="handleLoadIframe(this);" srcdoc=""></iframe>
 </div>
 
 <script>
+  function onSetFocused(element, callback) {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.target.classList.contains("focused")) {
+          callback(mutation.target);
+        }
+      });
+    });
+
+    observer.observe(element, { attributeFilter: ["class"] });
+
+    return observer.disconnect;
+  }
+
   function sizeIframe(iframe) {
-    iframe.style.height = (iframe.contentWindow.document.body.scrollHeight + 20) + 'px';
+    iframe.height = 0; // hack, no idea why it only works with this
+    iframe.height = iframe.contentWindow.document.body.scrollHeight;
   }
+
+  function getParentWithClass(element, c) {
+    p = element.parentElement;
+    while (!p.classList.contains(c)) {
+      p = p.parentElement;
+    }
+
+    return p;
+  }
+
+  function handleLoadIframe(iframe) {
+    sizeIframe(iframe);
+    onSetFocused(getParentWithClass(iframe, "email"), _ => sizeIframe(iframe));
+  };
 </script>
 
 </body>