calendar: Auto-size inline item details

Author: kewisch

calendar/experiments/calendar/parent/ext-calendarItemDetails.js

@@ -72,23 +72,32 @@ this.calendarItemDetails = class extends ExtensionAPI {
         const separatorCell = separator.appendChild(document.createElementNS("http://www.w3.org/1999/xhtml", "td"));
         separatorCell.setAttribute("colspan", "2");
 
+        // Fix an annoying bug, this should be part of a different patch
+        document.getElementById("url-link").style.maxWidth = "42em";
+
         const browser = document.createXULElement("browser");
         browser.setAttribute("flex", "1");
 
-        // TODO The real version will need a max-height and auto-resizing
-        browser.style.height = "200px";
         browser.style.width = "100%";
         browser.style.display = "block";
 
-        // Fix an annoying bug, this should be part of a different patch
-        document.getElementById("url-link").style.maxWidth = "42em";
-
-        const options = { maxWidth: null, fixedWidth: true };
-        setupE10sBrowser(this.extension, browser, browserCell, options).then(() => {
-          const target = new URL(this.extension.manifest.calendar_item_details.default_content);
-          target.searchParams.set("area", "inline");
-          browser.fixupAndLoadURIString(target.href, { triggeringPrincipal: this.extension.principal });
-        });
+        // Do this on the next tick so the column width is correctly calculated
+        window.setTimeout(() => {
+          const columnWidth = document.querySelector("#event-grid th")?.offsetWidth || 0;
+
+          const options = { maxWidth: null, fixedWidth: true, maxHeight: 200 };
+          setupE10sBrowser(this.extension, browser, browserCell, options).then(() => {
+            browser.messageManager.addMessageListener("Extension:BrowserResized", function(message) {
+              if (message.data.detail == "delayed") {
+                browser.style.height = `${message.data.height}px`;
+              }
+            });
+            const target = new URL(this.extension.manifest.calendar_item_details.default_content);
+            target.searchParams.set("area", "inline");
+            target.searchParams.set("columnWidth", columnWidth);
+            browser.fixupAndLoadURIString(target.href, { triggeringPrincipal: this.extension.principal });
+          });
+        }, 0);
       }
     });