PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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

Browse source 
* 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>
This commit is contained in:
Michael Telatynski 2024-01-08 12:11:44 +00:00 committed by GitHub
parent 896d890198
commit 57da29de58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 101 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
res/css/_common.pcss
View file

@ -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;
}

21
res/css/components/views/pips/_WidgetPip.pcss
View file

@ -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;
}
}

3
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -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,

2
src/components/structures/PipContainer.tsx
View file

@ -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}

5
src/components/views/elements/AppTile.tsx
View file

@ -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,6 +665,7 @@ export default class AppTile extends React.Component<IProps, IState> {
);
} else {
appTileBody = (
<>
<div className={appTileBodyClass} style={appTileBodyStyles}>
{this.state.loading && loadingElement}
<iframe
@ -674,6 +677,8 @@ export default class AppTile extends React.Component<IProps, IState> {
sandbox={sandboxFlags}
/>
</div>
{this.props.overlay}
</>
);
if (!this.props.userWidget) {

15
src/components/views/elements/PersistedElement.tsx
View file

@ -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;

1
src/components/views/elements/PersistentApp.tsx
View file

@ -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}
/>
);
}

15
src/components/views/pips/WidgetPip.tsx
View file

@ -107,6 +107,13 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
return (
<div className="mx_WidgetPip" onMouseDown={onStartMoving} onClick={onBackClick}>
<PersistentApp
persistentWidgetId={widgetId}
persistentRoomId={room.roomId}
pointerEvents="none"
movePersistedElement={movePersistedElement}
>
<div onMouseDown={onStartMoving} className="mx_WidgetPip_overlay">
<Toolbar className="mx_WidgetPip_header">
<RovingAccessibleButton
onClick={onBackClick}
@ -117,12 +124,6 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
{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
@ -136,5 +137,7 @@ export const WidgetPip: FC<Props> = ({ widgetId, room, viewingRoom, onStartMovin
</Toolbar>
)}
</div>
</PersistentApp>
</div>
);
};

22
test/components/structures/PipContainer-test.tsx
View file

@ -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,