Fix regression around CSS stacking contexts and PIP widgets (#12094)

t3chguy · web-flow · commit 57da29de5899 · 2024-01-08T12:11:44.000Z
* Fix CSS stacking contexts for Dialogs &amp; PersistedElement

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix Widget PIP overlay being under the widget and dragging being broken

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix border-radius on widget pip

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix majority of tests

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix jest retryTimes applying outside of CI

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix remaining tests

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix React unique key warnings

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix sticker picker

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* id not class

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Fix widget pip button colour in light theme

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

* Revert unrelated change

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;

---------

Signed-off-by: Michael Telatynski &lt;7t3chguy@gmail.com&gt;
diff --git a/res/css/_common.pcss b/res/css/_common.pcss
@@ -56,8 +56,10 @@ limitations under the License.
     /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
     contain: strict;
 }
-.mx_Dialog_StaticContainer,
-.mx_Dialog_Container {
+#mx_ContextualMenu_Container,
+#mx_PersistedElement_container,
+#mx_Dialog_Container,
+#mx_Dialog_StaticContainer {
     /* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */
     isolation: isolate;
 }
diff --git a/res/css/components/views/pips/_WidgetPip.pcss b/res/css/components/views/pips/_WidgetPip.pcss
@@ -14,11 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$width: 320px;
+$height: 220px;
+
 .mx_WidgetPip {
-    width: 320px;
-    height: 220px;
+    width: $width;
+    height: $height;
+}
+
+.mx_WidgetPip_overlay {
+    width: $width;
+    height: $height;
+    position: absolute;
+    top: 0;
     border-radius: 8px;
-    contain: paint;
+    overflow: hidden;
     color: $call-primary-content;
     cursor: pointer;
 }
@@ -31,8 +41,11 @@ limitations under the License.
     width: 100%;
     box-sizing: border-box;
     transition: opacity ease 0.15s;
+}
 
-    .mx_WidgetPip:not(:hover) > & {
+.mx_WidgetPip_overlay:not(:hover) {
+    .mx_WidgetPip_header,
+    .mx_WidgetPip_footer {
         opacity: 0;
     }
 }
diff --git a/res/css/views/rooms/_AppsDrawer.pcss b/res/css/views/rooms/_AppsDrawer.pcss
@@ -325,6 +325,9 @@ limitations under the License.
     &.mx_AppTileBody--call {
         border-radius: 0px;
     }
+    &.mx_AppTileBody--call.mx_AppTileBody--mini {
+        border-radius: 8px;
+    }
 }
 
 /* appTileBody is embedded to PersistedElement outside of mx_AppTile,
diff --git a/src/components/structures/PipContainer.tsx b/src/components/structures/PipContainer.tsx
@@ -305,6 +305,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
             const call = this.state.primaryCall;
             pipContent.push(({ onStartMoving, onResize }) => (
                 <LegacyCallView
+                    key="call-view"
                     onMouseDownOnHeader={onStartMoving}
                     call={call}
                     secondaryCall={this.state.secondaryCall}
@@ -317,6 +318,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
         if (this.state.showWidgetInPip && this.state.persistentWidgetId) {
             pipContent.push(({ onStartMoving }) => (
                 <WidgetPip
+                    key="widget-pip"
                     widgetId={this.state.persistentWidgetId!}
                     room={MatrixClientPeg.safeGet().getRoom(this.state.persistentRoomId ?? undefined)!}
                     viewingRoom={this.state.viewedRoomId === this.state.persistentRoomId}
diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -93,6 +93,8 @@ interface IProps {
     showLayoutButtons?: boolean;
     // Handle to manually notify the PersistedElement that it needs to move
     movePersistedElement?: MutableRefObject<(() => void) | undefined>;
+    // An element to render after the iframe as an overlay
+    overlay?: ReactNode;
 }
 
 interface IState {
@@ -663,17 +665,20 @@ export default class AppTile extends React.Component<IProps, IState> {
                 );
             } else {
                 appTileBody = (
-                    <div className={appTileBodyClass} style={appTileBodyStyles}>
-                        {this.state.loading && loadingElement}
-                        <iframe
-                            title={widgetTitle}
-                            allow={iframeFeatures}
-                            ref={this.iframeRefChange}
-                            src={this.sgWidget.embedUrl}
-                            allowFullScreen={true}
-                            sandbox={sandboxFlags}
-                        />
-                    </div>
+                    <>
+                        <div className={appTileBodyClass} style={appTileBodyStyles}>
+                            {this.state.loading && loadingElement}
+                            <iframe
+                                title={widgetTitle}
+                                allow={iframeFeatures}
+                                ref={this.iframeRefChange}
+                                src={this.sgWidget.embedUrl}
+                                allowFullScreen={true}
+                                sandbox={sandboxFlags}
+                            />
+                        </div>
+                        {this.props.overlay}
+                    </>
                 );
 
                 if (!this.props.userWidget) {
diff --git a/src/components/views/elements/PersistedElement.tsx b/src/components/views/elements/PersistedElement.tsx
@@ -29,6 +29,19 @@ export const getPersistKey = (appId: string): string => "widget_" + appId;
 // of doing reusable widgets like dialog boxes & menus where we go and
 // pass in a custom control as the actual body.
 
+// We contain all persisted elements within a master container to allow them all to be within the same
+// CSS stacking context, and thus be able to control their z-indexes relative to each other.
+function getOrCreateMasterContainer(): HTMLDivElement {
+    let container = getContainer("mx_PersistedElement_container");
+    if (!container) {
+        container = document.createElement("div");
+        container.id = "mx_PersistedElement_container";
+        document.body.appendChild(container);
+    }
+
+    return container;
+}
+
 function getContainer(containerId: string): HTMLDivElement {
     return document.getElementById(containerId) as HTMLDivElement;
 }
@@ -39,7 +52,7 @@ function getOrCreateContainer(containerId: string): HTMLDivElement {
     if (!container) {
         container = document.createElement("div");
         container.id = containerId;
-        document.body.appendChild(container);
+        getOrCreateMasterContainer().appendChild(container);
     }
 
     return container;
diff --git a/src/components/views/elements/PersistentApp.tsx b/src/components/views/elements/PersistentApp.tsx
@@ -58,6 +58,7 @@ export default class PersistentApp extends React.Component<IProps> {
                 showMenubar={false}
                 pointerEvents={this.props.pointerEvents}
                 movePersistedElement={this.props.movePersistedElement}
+                overlay={this.props.children}
             />
         );
     }
diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx
@@ -107,34 +107,37 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
 
     return (
         <div className="mx_WidgetPip" onMouseDown={onStartMoving} onClick={onBackClick}>
-            <Toolbar className="mx_WidgetPip_header">
-                <RovingAccessibleButton
-                    onClick={onBackClick}
-                    className="mx_WidgetPip_backButton"
-                    aria-label={_t("action|back")}
-                >
-                    <BackIcon className="mx_Icon mx_Icon_16" />
-                    {roomName}
-                </RovingAccessibleButton>
-            </Toolbar>
             <PersistentApp
                 persistentWidgetId={widgetId}
                 persistentRoomId={room.roomId}
                 pointerEvents="none"
                 movePersistedElement={movePersistedElement}
-            />
-            {(call !== null || WidgetType.JITSI.matches(widget?.type)) && (
-                <Toolbar className="mx_WidgetPip_footer">
-                    <RovingAccessibleTooltipButton
-                        onClick={onLeaveClick}
-                        tooltip={_t("action|leave")}
-                        aria-label={_t("action|leave")}
-                        alignment={Alignment.Top}
-                    >
-                        <HangupIcon className="mx_Icon mx_Icon_24" />
-                    </RovingAccessibleTooltipButton>
-                </Toolbar>
-            )}
+            >
+                <div onMouseDown={onStartMoving} className="mx_WidgetPip_overlay">
+                    <Toolbar className="mx_WidgetPip_header">
+                        <RovingAccessibleButton
+                            onClick={onBackClick}
+                            className="mx_WidgetPip_backButton"
+                            aria-label={_t("action|back")}
+                        >
+                            <BackIcon className="mx_Icon mx_Icon_16" />
+                            {roomName}
+                        </RovingAccessibleButton>
+                    </Toolbar>
+                    {(call !== null || WidgetType.JITSI.matches(widget?.type)) && (
+                        <Toolbar className="mx_WidgetPip_footer">
+                            <RovingAccessibleTooltipButton
+                                onClick={onLeaveClick}
+                                tooltip={_t("action|leave")}
+                                aria-label={_t("action|leave")}
+                                alignment={Alignment.Top}
+                            >
+                                <HangupIcon className="mx_Icon mx_Icon_24" />
+                            </RovingAccessibleTooltipButton>
+                        </Toolbar>
+                    )}
+                </div>
+            </PersistentApp>
         </div>
     );
 };
diff --git a/test/components/structures/PipContainer-test.tsx b/test/components/structures/PipContainer-test.tsx
@@ -64,6 +64,16 @@ import { WidgetType } from "../../../src/widgets/WidgetType";
 import { SdkContextClass } from "../../../src/contexts/SDKContext";
 import { ElementWidgetActions } from "../../../src/stores/widgets/ElementWidgetActions";
 
+jest.mock("../../../src/stores/OwnProfileStore", () => ({
+    OwnProfileStore: {
+        instance: {
+            isProfileInfoFetched: true,
+            removeListener: jest.fn(),
+            getHttpAvatarUrl: jest.fn().mockReturnValue("http://avatar_url"),
+        },
+    },
+}));
+
 describe("PipContainer", () => {
     useMockedCalls();
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
@@ -91,6 +101,8 @@ describe("PipContainer", () => {
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
+        client.getUserId.mockReturnValue("@alice:example.org");
+        client.getSafeUserId.mockReturnValue("@alice:example.org");
         DMRoomMap.makeShared(client);
 
         room = new Room("!1:example.org", client, "@alice:example.org", {
@@ -161,6 +173,7 @@ describe("PipContainer", () => {
         if (!(call instanceof MockedCall)) throw new Error("Failed to create call");
 
         const widget = new Widget(call.widget);
+        WidgetStore.instance.addVirtualWidget(call.widget, room.roomId);
         WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
             stop: () => {},
         } as unknown as ClientWidgetApi);
@@ -175,6 +188,7 @@ describe("PipContainer", () => {
         cleanup();
         call.destroy();
         ActiveWidgetStore.instance.destroyPersistentWidget(widget.id, room.roomId);
+        WidgetStore.instance.removeVirtualWidget(widget.id, room.roomId);
     };
 
     const withWidget = async (fn: () => Promise<void>): Promise<void> => {
@@ -265,7 +279,7 @@ describe("PipContainer", () => {
         const widget = WidgetStore.instance.addVirtualWidget(
             {
                 id: "1",
-                creatorUserId: "@alice:exaxmple.org",
+                creatorUserId: "@alice:example.org",
                 type: WidgetType.CUSTOM.preferred,
                 url: "https://example.org",
                 name: "Example widget",
@@ -279,7 +293,7 @@ describe("PipContainer", () => {
 
             // The return button should maximize the widget
             const moveSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
-            await user.click(screen.getByRole("button", { name: "Back" }));
+            await user.click(await screen.findByRole("button", { name: "Back" }));
             expect(moveSpy).toHaveBeenCalledWith(room, widget, Container.Center);
 
             expect(screen.queryByRole("button", { name: "Leave" })).toBeNull();
@@ -295,7 +309,7 @@ describe("PipContainer", () => {
         const widget = WidgetStore.instance.addVirtualWidget(
             {
                 id: "1",
-                creatorUserId: "@alice:exaxmple.org",
+                creatorUserId: "@alice:example.org",
                 type: WidgetType.JITSI.preferred,
                 url: "https://meet.example.org",
                 name: "Jitsi example",
@@ -310,7 +324,7 @@ describe("PipContainer", () => {
             // The return button should view the room
             const dispatcherSpy = jest.fn();
             const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
-            await user.click(screen.getByRole("button", { name: "Back" }));
+            await user.click(await screen.findByRole("button", { name: "Back" }));
             expect(dispatcherSpy).toHaveBeenCalledWith({
                 action: Action.ViewRoom,
                 room_id: room.roomId,

Original file line number	Diff line number	Diff line change
`@@ -56,8 +56,10 @@ limitations under the License.`
`56`	`56`	`/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */`
`57`	`57`	`contain: strict;`
`58`	`58`	`}`
`59`		`-.mx_Dialog_StaticContainer,`
`60`		`-.mx_Dialog_Container {`
	`59`	`+#mx_ContextualMenu_Container,`
	`60`	`+#mx_PersistedElement_container,`
	`61`	`+#mx_Dialog_Container,`
	`62`	`+#mx_Dialog_StaticContainer {`
`61`	`63`	`/* This is required to ensure Compound tooltips correctly draw where they should with z-index: auto */`
`62`	`64`	`isolation: isolate;`
`63`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -325,6 +325,9 @@ limitations under the License.`
`325`	`325`	`&.mx_AppTileBody--call {`
`326`	`326`	`border-radius: 0px;`
`327`	`327`	`}`
	`328`	`+ &.mx_AppTileBody--call.mx_AppTileBody--mini {`
	`329`	`+ border-radius: 8px;`
	`330`	`+ }`
`328`	`331`	`}`
`329`	`332`
`330`	`333`	`/* appTileBody is embedded to PersistedElement outside of mx_AppTile,`
Original file line number	Diff line number	Diff line change
`@@ -58,6 +58,7 @@ export default class PersistentApp extends React.Component<IProps> {`
`58`	`58`	`showMenubar={false}`
`59`	`59`	`pointerEvents={this.props.pointerEvents}`
`60`	`60`	`movePersistedElement={this.props.movePersistedElement}`
	`61`	`+ overlay={this.props.children}`
`61`	`62`	`/>`
`62`	`63`	`);`
`63`	`64`	`}`