Merge branch 'develop' into langleyd/improve-poll-ended-ux

Author: langleyd

package.json

@@ -81,7 +81,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.8.0",
+        "@element-hq/element-web-module-api": "1.9.0",
         "@element-hq/web-shared-components": "link:packages/shared-components",
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "^5",

playwright/e2e/devtools/devtools.spec.ts

@@ -29,5 +29,12 @@ test.describe("Devtools", () => {
                 display: none;
             }`,
         });
+
+        // Try entering a value for the Developer.elementCallUrl setting
+        const input = page.getByRole("textbox", { name: "Element Call URL" });
+        await input.fill("https://example.com");
+        await input.press("Enter");
+        // expect EW NOT to reload
+        await page.getByText("Saved").isVisible();
     });
 });

src/components/structures/RoomView.tsx

@@ -190,6 +190,13 @@ interface IRoomProps extends RoomViewProps {
      * If true, hide the widgets
      */
     hideWidgets?: boolean;
+
+    /**
+     * If true, enable sending read receipts and markers on user activity in the room view. When the user interacts with the room view, read receipts and markers are sent.
+     * If false, the read receipts and markers are only send when the room view is focused. The user has to focus the room view in order to clear any unreads and to move the unread marker to the bottom of the view.
+     * @default true
+     */
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
 }
 
 export { MainSplitContentType };
@@ -418,6 +425,10 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
     public static contextType = SDKContext;
     declare public context: React.ContextType<typeof SDKContext>;
 
+    public static readonly defaultProps = {
+        enableReadReceiptsAndMarkersOnActivity: true,
+    };
+
     public constructor(props: IRoomProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
@@ -2182,6 +2193,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         }
     };
 
+    /**
+     * Handles the focus event on the RoomView component.
+     *
+     * Sends read receipts and updates the read marker if the
+     * disableReadReceiptsAndMarkersOnActivity prop is set.
+     */
+    private onFocus = (): void => {
+        if (this.props.enableReadReceiptsAndMarkersOnActivity) return;
+
+        this.messagePanel?.sendReadReceipts();
+        this.messagePanel?.updateReadMarker();
+    };
+
     public render(): ReactNode {
         if (!this.context.client) return null;
         const { isRoomEncrypted } = this.state;
@@ -2539,7 +2563,9 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     timelineSet={this.state.room.getUnfilteredTimelineSet()}
                     showReadReceipts={this.state.showReadReceipts}
                     manageReadReceipts={!this.state.isPeeking}
-                    sendReadReceiptOnLoad={!this.state.wasContextSwitch}
+                    sendReadReceiptOnLoad={
+                        !this.state.wasContextSwitch && this.props.enableReadReceiptsAndMarkersOnActivity
+                    }
                     manageReadMarkers={!this.state.isPeeking}
                     hidden={hideMessagePanel}
                     highlightedEventId={highlightedEventId}
@@ -2556,6 +2582,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     showReactions={true}
                     layout={this.state.layout}
                     editState={this.state.editState}
+                    enableReadReceiptsAndMarkersOnActivity={this.props.enableReadReceiptsAndMarkersOnActivity}
                 />
             );
         }
@@ -2622,7 +2649,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         <Measured sensor={this.roomViewBody} onMeasurement={this.onMeasurement} />
                         {auxPanel}
                         {pinnedMessageBanner}
-                        <main className={timelineClasses}>
+                        <main className={timelineClasses} data-testid="timeline">
                             <FileDropTarget
                                 parent={this.roomView.current}
                                 onFileDrop={this.onFileDrop}
@@ -2683,7 +2710,13 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         return (
             <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
-                <div className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
+                <div
+                    className={mainClasses}
+                    ref={this.roomView}
+                    onKeyDown={this.onReactKeyDown}
+                    onFocus={this.onFocus}
+                    tabIndex={-1}
+                >
                     {showChatEffects && this.roomView.current && (
                         <EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
                     )}

src/components/structures/TimelinePanel.tsx

@@ -139,6 +139,12 @@ interface IProps {
 
     hideThreadedMessages?: boolean;
     disableGrouping?: boolean;
+
+    /**
+     * Enable updating the read receipts and markers on user activity.
+     * @default true
+     */
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
 }
 
 interface IState {
@@ -228,6 +234,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
         sendReadReceiptOnLoad: true,
         hideThreadedMessages: true,
         disableGrouping: false,
+        enableReadReceiptsAndMarkersOnActivity: true,
     };
 
     private lastRRSentEventId: string | null | undefined = undefined;
@@ -302,10 +309,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
         this.props.timelineSet.room?.on(ThreadEvent.Update, this.onThreadUpdate);
 
-        if (this.props.manageReadReceipts) {
+        if (this.props.manageReadReceipts && this.props.enableReadReceiptsAndMarkersOnActivity) {
             this.updateReadReceiptOnUserActivity();
         }
-        if (this.props.manageReadMarkers) {
+        if (this.props.manageReadMarkers && this.props.enableReadReceiptsAndMarkersOnActivity) {
             this.updateReadMarkerOnUserActivity();
         }
         this.initTimeline(this.props);
@@ -1028,7 +1035,10 @@ class TimelinePanel extends React.Component<IProps, IState> {
         );
     }
 
-    private sendReadReceipts = async (): Promise<void> => {
+    /**
+     * Sends read receipts and fully read markers as appropriate.
+     */
+    public sendReadReceipts = async (): Promise<void> => {
         if (SettingsStore.getValue("lowBandwidth")) return;
         if (!this.messagePanel.current) return;
         if (!this.props.manageReadReceipts) return;
@@ -1134,9 +1144,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
         }
     }
 
-    // if the read marker is on the screen, we can now assume we've caught up to the end
-    // of the screen, so move the marker down to the bottom of the screen.
-    private updateReadMarker = async (): Promise<void> => {
+    /**
+     * Move the marker to the bottom of the screen.
+     * If the read marker is on the screen, we can now assume we've caught up to the end
+     * of the screen, so move the marker down to the bottom of the screen.
+     */
+    public updateReadMarker = async (): Promise<void> => {
         if (!this.props.manageReadMarkers) return;
         if (this.getReadMarkerPosition() === 1) {
             // the read marker is at an event below the viewport,

src/components/views/dialogs/DevtoolsDialog.tsx

@@ -113,8 +113,16 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                     <SettingsFlag name="developerMode" level={SettingLevel.ACCOUNT} />
                     <SettingsFlag name="showHiddenEventsInTimeline" level={SettingLevel.DEVICE} />
                     <SettingsFlag name="enableWidgetScreenshots" level={SettingLevel.ACCOUNT} />
-                    <SettingsField settingKey="Developer.elementCallUrl" level={SettingLevel.DEVICE} />
                 </Form.Root>
+                {/* The settings field needs to be outside `Form.Root` because `SettingsField` will have a inner Form,
+                    Otherwise we end up with a nester `Form` and that prohibits `preventDefault` so setting the value
+                    will reload the page.
+                 */}
+                <SettingsField
+                    settingKey="Developer.elementCallUrl"
+                    level={SettingLevel.DEVICE}
+                    aria-label="elementCallUrl"
+                />
             </BaseTool>
         );
     }

src/components/views/rooms/BasicMessageComposer.tsx

@@ -482,6 +482,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
     private onKeyDown = (event: React.KeyboardEvent): void => {
         if (!this.editorRef.current) return;
+        // Ignore any keypress while doing IME compositions to prevent cursor position issues
+        // This matches the behavior in SendMessageComposer and EditMessageComposer
+        if (this.isComposing(event)) {
+            return;
+        }
         if (this.isSafari && event.which == 229) {
             // Swallow the extra keyDown by Safari
             event.stopPropagation();

src/settings/watchers/ThemeWatcher.ts

@@ -122,7 +122,6 @@ export default class ThemeWatcher extends TypedEventEmitter<ThemeWatcherEvent, T
                 return theme;
             }
         }
-        logger.log("returning theme value");
         return SettingsStore.getValue("theme");
     }
 

test/unit-tests/components/structures/RoomView-test.tsx

@@ -335,6 +335,54 @@ describe("RoomView", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    describe("enableReadReceiptsAndMarkersOnActivity", () => {
+        it.each([
+            {
+                enabled: false,
+                testName: "should send read receipts and update read marker on focus when disabled",
+                checkCall: (sendReadReceiptsSpy: jest.Mock, updateReadMarkerSpy: jest.Mock) => {
+                    expect(sendReadReceiptsSpy).toHaveBeenCalled();
+                    expect(updateReadMarkerSpy).toHaveBeenCalled();
+                },
+            },
+            {
+                enabled: true,
+                testName: "should not send read receipts and update read marker on focus when enabled",
+                checkCall: (sendReadReceiptsSpy: jest.Mock, updateReadMarkerSpy: jest.Mock) => {
+                    expect(sendReadReceiptsSpy).not.toHaveBeenCalled();
+                    expect(updateReadMarkerSpy).not.toHaveBeenCalled();
+                },
+            },
+        ])("$testName", async ({ enabled, checkCall }) => {
+            // Join the room
+            jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            const ref = createRef<RoomView>();
+            await mountRoomView(ref, {
+                enableReadReceiptsAndMarkersOnActivity: enabled,
+            });
+
+            // Wait for the timeline to be rendered
+            await waitFor(() => expect(screen.getByTestId("timeline")).not.toBeNull());
+
+            // Get the RoomView instance and mock the messagePanel methods
+            const instance = ref.current!;
+            const sendReadReceiptsSpy = jest.fn();
+            const updateReadMarkerSpy = jest.fn();
+            // @ts-ignore - accessing private property for testing
+            instance.messagePanel = {
+                sendReadReceipts: sendReadReceiptsSpy,
+                updateReadMarker: updateReadMarkerSpy,
+            };
+
+            // Find the main RoomView div and trigger focus
+            const timeline = screen.getByTestId("timeline");
+            fireEvent.focus(timeline);
+
+            // Verify that sendReadReceipts and updateReadMarker were called or not based on the enabled state
+            checkCall(sendReadReceiptsSpy, updateReadMarkerSpy);
+        });
+    });
+
     describe("invites", () => {
         beforeEach(() => {
             const member = new RoomMember(room.roomId, cli.getSafeUserId());

test/unit-tests/components/structures/TimelinePanel-test.tsx

@@ -51,6 +51,7 @@ import { Action } from "../../../../src/dispatcher/actions";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
 import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import type Timer from "../../../../src/utils/Timer";
 
 // ScrollPanel calls this, but jsdom doesn't mock it for us
 HTMLDivElement.prototype.scrollBy = () => {};
@@ -369,6 +370,56 @@ describe("TimelinePanel", () => {
         });
     });
 
+    describe("enableReadReceiptsAndMarkersOnActivity", () => {
+        it.each([
+            {
+                enabled: false,
+                testName: "should not set up activity timers when disabled",
+                checkCall: (readReceiptTimer: Timer | null, readMarkerTimer: Timer | null) => {
+                    expect(readReceiptTimer).toBeNull();
+                    expect(readMarkerTimer).toBeNull();
+                },
+            },
+            {
+                enabled: true,
+                testName: "should set up activity timers when enabled",
+                checkCall: (readReceiptTimer: Timer | null, readMarkerTimer: Timer | null) => {
+                    expect(readReceiptTimer).toBeTruthy();
+                    expect(readMarkerTimer).toBeTruthy();
+                },
+            },
+        ])("$testName", async ({ enabled, checkCall }) => {
+            const room = mkRoom(client, "roomId");
+            const events = mockEvents(room);
+            const [, timelineSet] = mkTimeline(room, events);
+
+            let timelinePanel: TimelinePanel | null = null;
+
+            render(
+                <TimelinePanel
+                    timelineSet={timelineSet}
+                    manageReadMarkers={true}
+                    manageReadReceipts={true}
+                    enableReadReceiptsAndMarkersOnActivity={enabled}
+                    ref={(ref) => {
+                        timelinePanel = ref;
+                    }}
+                />,
+                clientAndSDKContextRenderOptions(client, sdkContext),
+            );
+
+            await waitFor(() => expect(timelinePanel).toBeTruthy());
+
+            // Check if the activity timers were set up
+            // @ts-ignore - accessing private property for testing
+            const readReceiptTimer = timelinePanel!.readReceiptActivityTimer;
+            // @ts-ignore - accessing private property for testing
+            const readMarkerTimer = timelinePanel!.readMarkerActivityTimer;
+
+            checkCall(readReceiptTimer, readMarkerTimer);
+        });
+    });
+
     it("should scroll event into view when props.eventId changes", () => {
         const client = MatrixClientPeg.safeGet();
         const room = mkRoom(client, "roomId");