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

* Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix border-radius on widget pip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix majority of tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix jest retryTimes applying outside of CI Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix remaining tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React unique key warnings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix sticker picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * id not class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix widget pip button colour in light theme Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Revert unrelated change Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-15 20:54:59 +08:00 · 2024-01-08 12:11:44 +00:00 · 2024-01-08 12:11:44 +00:00 · 57da29de58
commit 57da29de58
parent 896d890198
9 changed files with 101 additions and 45 deletions
--- 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;
 }
--- 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;
    }
 }
--- 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,
--- 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}
--- 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) {
--- 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;
--- 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}
            />
        );
    }
--- 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>
    );
 };
--- 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,