Resize Popout to fit content on popout

common/changes/@itwin/appui-layout-react/joeh-resizePopout_2023-10-24-19-16.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-layout-react",
+      "comment": "",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-layout-react"
+}

common/changes/@itwin/appui-react/joeh-resizePopout_2023-10-24-19-16.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/appui-react",
+      "comment": "Popout Widgets will now size to content on popout",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/appui-react"
+}

docs/changehistory/NextVersion.md

@@ -15,6 +15,7 @@ Table of contents:
 ### Changes
 
 - `AppNotificationManager` no longer requires `StatusBar` to be rendered in the active frontstage to show messages.
+- Popout Widgets will now size to content on popout.
 
 ### Fixes
 

ui/appui-layout-react/src/appui-layout-react/widget/ContentRenderer.tsx

@@ -78,9 +78,14 @@ export function WidgetContentRenderer(props: WidgetContentRendererProps) {
     };
   }, [renderTo, widgetContentManager, props.tabId]);
   return ReactDOM.createPortal(
-    <TabIdContext.Provider value={props.tabId}>
-      {props.children}
-    </TabIdContext.Provider>,
+    <div
+      id={`content-container:${props.tabId}`}
+      style={{ width: "fit-content", height: "fit-content" }}
+    >
+      <TabIdContext.Provider value={props.tabId}>
+        {props.children}
+      </TabIdContext.Provider>
+    </div>,
     container.current
   );
 }

ui/appui-react/src/appui-react/childwindow/InternalChildWindowManager.tsx

@@ -271,12 +271,25 @@ export class InternalChildWindowManager implements FrameworkChildWindows {
       return false;
     }
 
+    const nineZoneState =
+      UiFramework.frontstages.activeFrontstageDef?.nineZoneState;
+
+    if (nineZoneState === undefined) return false;
+
+    const popoutContentContainer = document.getElementById(
+      `content-container:${nineZoneState.widgets[childWindowId].activeTabId}`
+    );
+    if (popoutContentContainer === null) return false;
+
+    const contentWidth = popoutContentContainer.offsetWidth + 20;
+    const contentHeight = popoutContentContainer.offsetHeight + 20;
+
     location = this.adjustWidowLocation(location);
     const url = useDefaultPopoutUrl ? "/iTwinPopup.html" : "";
     const childWindow = window.open(
       url,
       "",
-      `width=${location.width},height=${location.height},left=${location.left},top=${location.top},menubar=no,resizable=yes,scrollbars=no,status=no,location=no`
+      `width=${contentWidth},height=${contentHeight},left=${location.left},top=${location.top},menubar=no,resizable=yes,scrollbars=no,status=no,location=no`
     );
     if (!childWindow) return false;
     if (0 === url.length) {

ui/appui-react/src/appui-react/childwindow/PopoutWidget.tsx

@@ -15,7 +15,7 @@ interface PopoutWidgetProps {
   widgetDef: WidgetDef;
 }
 
-/** Component used to wrap a widget for use is a child window.
+/** Component used to wrap a widget for use in a child window.
  * @internal
  */
 export function PopoutWidget({

ui/appui-react/src/test/frontstage/FrontstageDef.test.tsx

@@ -65,6 +65,21 @@ class BadGroupFrontstage extends FrontstageProvider {
   }
 }
 
+class EmptyFrontstageProvider extends FrontstageProvider {
+  public static stageId = "TestFrontstageUi2";
+  public override get id(): string {
+    return EmptyFrontstageProvider.stageId;
+  }
+
+  public override frontstageConfig(): FrontstageConfig {
+    return {
+      id: this.id,
+      version: 1,
+      contentGroup: TestUtils.TestContentGroup1,
+    };
+  }
+}
+
 export const defaultFrontstageConfig: FrontstageConfig = {
   id: "test-frontstage",
   contentGroup: TestUtils.TestContentGroup1,
@@ -322,21 +337,6 @@ describe("FrontstageDef", () => {
       }
     }
 
-    class EmptyFrontstageProvider extends FrontstageProvider {
-      public static stageId = "TestFrontstageUi2";
-      public override get id(): string {
-        return EmptyFrontstageProvider.stageId;
-      }
-
-      public override frontstageConfig(): FrontstageConfig {
-        return {
-          id: this.id,
-          version: 1,
-          contentGroup: TestUtils.TestContentGroup1,
-        };
-      }
-    }
-
     beforeEach(() => {
       UiItemsManager.register(new WidgetsProvider());
     });
@@ -548,36 +548,41 @@ describe("FrontstageDef", () => {
       });
     });
     it("should handle multiple popoutWidgets being set for empty 'oldState' (For electron initialization)", async () => {
-      let state = createNineZoneState({ size: { height: 1000, width: 1600 } });
+      const frontstageProvider = new EmptyFrontstageProvider();
+      UiFramework.frontstages.addFrontstageProvider(frontstageProvider);
+      const frontstageDef = await UiFramework.frontstages.getFrontstageDef(
+        EmptyFrontstageProvider.stageId
+      );
+      if (frontstageDef === undefined) return;
+      let state = createNineZoneState();
       state = addTab(state, "t1");
       state = addTab(state, "t2");
-      state = addPopoutWidget(state, "fw1", ["t1"]);
-      state = addPopoutWidget(state, "fw2", ["t2"]);
+      state = addPopoutWidget(state, "w1", ["t1"]);
+      state = addPopoutWidget(state, "w2", ["t2"]);
 
-      const frontstageDef = new FrontstageDef();
-      await frontstageDef.initializeFromConfig({
-        ...defaultFrontstageConfig,
-        leftPanel: {
-          sections: {
-            start: [
-              {
-                id: "t1",
-              },
-            ],
-          },
-        },
-        rightPanel: {
-          sections: {
-            start: [
-              {
-                id: "t2",
-              },
-            ],
-          },
-        },
+      const widgetDef1 = WidgetDef.create({
+        id: "t1",
+        defaultState: WidgetState.Open,
+      });
+
+      const widgetDef2 = WidgetDef.create({
+        id: "t2",
+        defaultState: WidgetState.Open,
       });
 
+      const findWidgetStub = sinon.stub(frontstageDef, "findWidgetDef");
+
+      findWidgetStub.withArgs("t1").returns(widgetDef1);
+      findWidgetStub.withArgs("t2").returns(widgetDef2);
+
+      await UiFramework.frontstages.setActiveFrontstageDef(frontstageDef);
+
       const spy = sinon.spy(window, "open");
+
+      const blankHTML = document.createElement("div");
+
+      sinon.stub(document, "getElementById").returns(blankHTML);
+
       frontstageDef.nineZoneState = state;
 
       expect(frontstageDef.nineZoneState).to.be.eq(state);
@@ -587,23 +592,36 @@ describe("FrontstageDef", () => {
 
   describe("openPopoutWidgetContainer", () => {
     it("should open a popout window", async () => {
-      const frontstageDef = new FrontstageDef();
-      await frontstageDef.initializeFromConfig({
-        ...defaultFrontstageConfig,
-        leftPanel: {
-          sections: {
-            start: [
-              {
-                id: "t1",
-              },
-            ],
-          },
-        },
+      const frontstageProvider = new EmptyFrontstageProvider();
+      UiFramework.frontstages.addFrontstageProvider(frontstageProvider);
+      const frontstageDef = await UiFramework.frontstages.getFrontstageDef(
+        EmptyFrontstageProvider.stageId
+      );
+      if (frontstageDef === undefined) return;
+      let state = createNineZoneState();
+      state = addTab(state, "t1");
+      state = addPopoutWidget(state, "w1", ["t1"]);
+
+      const widgetDef = WidgetDef.create({
+        id: "t1",
+        defaultState: WidgetState.Open,
       });
-      frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
-      frontstageDef.popoutWidget("t1");
+
+      sinon
+        .stub(frontstageDef, "findWidgetDef")
+        .withArgs("t1")
+        .returns(widgetDef);
+      frontstageDef.nineZoneState = state;
+      await UiFramework.frontstages.setActiveFrontstageDef(frontstageDef);
 
       const spy = sinon.spy(window, "open");
+
+      const blankHTML = document.createElement("div");
+
+      sinon
+        .stub(document, "getElementById")
+        .withArgs("content-container:t1")
+        .returns(blankHTML);
       const popoutWidgets = frontstageDef.nineZoneState.popoutWidgets;
       const popoutWidget = popoutWidgets.byId[popoutWidgets.allIds[0]];
       frontstageDef.openPopoutWidgetContainer(
@@ -616,17 +634,16 @@ describe("FrontstageDef", () => {
 
   describe("dockWidgetContainer", () => {
     it("should dock popout widget", async () => {
-      const frontstageDef = new FrontstageDef();
-      await frontstageDef.initializeFromConfig({
-        ...defaultFrontstageConfig,
-        leftPanel: {
-          sections: {
-            start: [{ id: "t1" }],
-          },
-        },
-      });
-      frontstageDef.nineZoneState = initializeNineZoneState(frontstageDef);
-      frontstageDef.popoutWidget("t1");
+      const frontstageProvider = new EmptyFrontstageProvider();
+      UiFramework.frontstages.addFrontstageProvider(frontstageProvider);
+      const frontstageDef = await UiFramework.frontstages.getFrontstageDef(
+        EmptyFrontstageProvider.stageId
+      );
+      if (frontstageDef === undefined) return;
+      let state = createNineZoneState();
+      state = addTab(state, "t1");
+      state = addPopoutWidget(state, "w1", ["t1"]);
+      frontstageDef.nineZoneState = state;
 
       frontstageDef.dockWidgetContainer("t1");
       expect(frontstageDef.nineZoneState.popoutWidgets.allIds).lengthOf(0);