Bug 1480338 - Prevent event/task dialog being too small for the iframe inside; r=MakeMyDay

calendar/base/content/dialogs/calendar-dialog-utils.js

@@ -40,7 +40,6 @@ function dispose() {
     if (args.job && args.job.dispose) {
         args.job.dispose();
     }
-    resetDialogId(document.documentElement);
 }
 
 /**
@@ -51,23 +50,8 @@ function dispose() {
  * @param aNewId                The new ID as String.
  */
 function setDialogId(aDialog, aNewId) {
-    aDialog.setAttribute("originalId", aDialog.getAttribute("id"));
     aDialog.setAttribute("id", aNewId);
-    applyPersitedProperties(aDialog);
-}
-
-/**
- * Sets the Dialog id back to previously stored one,
- * so that the persisted values are correctly saved.
- *
- * @param aDialog               The Dialog which is to be restored.
- */
-function resetDialogId(aDialog) {
-    let id = aDialog.getAttribute("originalId");
-    if (id != "") {
-        aDialog.setAttribute("id", id);
-    }
-    aDialog.removeAttribute("originalId");
+    applyPersistedProperties(aDialog);
 }
 
 /**
@@ -77,7 +61,7 @@ function resetDialogId(aDialog) {
  *
  * @param aDialog               The Dialog to apply the property values for
  */
-function applyPersitedProperties(aDialog) {
+function applyPersistedProperties(aDialog) {
     let xulStore = Services.xulStore;
     // first we need to detect which properties are persisted
     let persistedProps = aDialog.getAttribute("persist") || "";
@@ -85,12 +69,27 @@ function applyPersitedProperties(aDialog) {
         return;
     }
     let propNames = persistedProps.split(" ");
+    let { outerWidth: width, outerHeight: height } = aDialog;
+    let doResize = false;
     // now let's apply persisted values if applicable
     for (let propName of propNames) {
         if (xulStore.hasValue(aDialog.baseURI, aDialog.id, propName)) {
-            aDialog.setAttribute(propName, xulStore.getValue(aDialog.baseURI, aDialog.id, propName));
+            let propValue = xulStore.getValue(aDialog.baseURI, aDialog.id, propName);
+            if (propName == "width") {
+                width = propValue;
+                doResize = true;
+            } else if (propName == "height") {
+                height = propValue;
+                doResize = true;
+            } else {
+                aDialog.setAttribute(propName, propValue);
+            }
         }
     }
+
+    if (doResize) {
+        aDialog.ownerGlobal.resizeTo(width, height);
+    }
 }
 
 /**

calendar/base/content/dialogs/calendar-event-dialog.xul

@@ -30,8 +30,7 @@
 
 <!-- Dialog id is changed during excution to allow different Window-icons
      on this dialog. document.loadOverlay() will not work on this one. -->
-<dialog id="calendar-event-dialog"
-        title="&event.title.label;"
+<dialog title="&event.title.label;"
         windowtype="Calendar:EventDialog"
         onload="onLoadLightningItemPanel();"
         onunload="onUnloadLightningItemPanel();"

calendar/lightning/content/lightning-item-panel.js

@@ -232,11 +232,10 @@ function onLoadLightningItemPanel(aIframeId, aUrl) {
         iframe.setAttribute("id", "lightning-item-panel-iframe");
         iframe.setAttribute("flex", "1");
 
-        let dialog = document.getElementById("calendar-event-dialog");
         let statusbar = document.getElementById("status-bar");
 
         // Note: iframe.contentWindow is undefined before the iframe is inserted here.
-        dialog.insertBefore(iframe, statusbar);
+        document.documentElement.insertBefore(iframe, statusbar);
 
         // Move the args so they are positioned relative to the iframe,
         // for the window dialog just as they are for the tab.
@@ -255,6 +254,40 @@ function onLoadLightningItemPanel(aIframeId, aUrl) {
         if (typeof ToolbarIconColor !== "undefined") {
             ToolbarIconColor.init();
         }
+
+        // Enlarge the dialog window so the iframe content fits, and prevent it
+        // getting smaller. We don't know the minimum size of the content unless
+        // it's overflowing, so don't attempt to enforce what we don't know.
+        let docEl = document.documentElement;
+        let overflowListener = () => {
+            let { scrollWidth, scrollHeight } = iframe.contentDocument.documentElement;
+            let { clientWidth, clientHeight } = iframe;
+
+            let diffX = scrollWidth - clientWidth;
+            let diffY = scrollHeight - clientHeight;
+            // If using a scaled screen resolution, rounding might cause
+            // scrollWidth/scrollHeight to be 1px larger than
+            // clientWidth/clientHeight, so we check for a difference
+            // greater than 1 here, not 0.
+            if (diffX > 1) {
+                window.resizeBy(diffX, 0);
+                docEl.setAttribute("minwidth", docEl.getAttribute("width"));
+            }
+            if (diffY > 1) {
+                window.resizeBy(0, diffY);
+                docEl.setAttribute("minheight", docEl.getAttribute("height"));
+            }
+            if (docEl.hasAttribute("minwidth") && docEl.hasAttribute("minheight")) {
+                iframe.contentWindow.removeEventListener("resize", overflowListener);
+            }
+        };
+        iframe.contentWindow.addEventListener("load", () => {
+            // This is the first listener added, but it should run after all the others,
+            // so that they can properly set up the layout they might need.
+            // Push to the end of the event queue.
+            setTimeout(overflowListener, 0);
+        }, { once: true });
+        iframe.contentWindow.addEventListener("resize", overflowListener);
     }
 
     // event or task
@@ -262,8 +295,12 @@ function onLoadLightningItemPanel(aIframeId, aUrl) {
     gConfig.isEvent = cal.item.isEvent(calendarItem);
 
     // for tasks in a window dialog, set the dialog id for CSS selection, etc.
-    if (!gTabmail && !gConfig.isEvent) {
-        setDialogId(document.documentElement, "calendar-task-dialog");
+    if (!gTabmail) {
+        if (gConfig.isEvent) {
+            setDialogId(document.documentElement, "calendar-event-dialog");
+        } else {
+            setDialogId(document.documentElement, "calendar-task-dialog");
+        }
     }
 
     // timezones enabled