From e030571133107acacfb195174ea931128f46f24a Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 2 Mar 2023 13:38:48 +0900 Subject: [PATCH 1/6] Prevent long name blowout from Replytile on IRC layout Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_ReplyTile.pcss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 1a2e1a38147..2782bbb1de2 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -137,5 +137,11 @@ limitations under the License. .mx_BaseAvatar { line-height: 14px; // To match size } + + .mx_IRCLayout & { + .mx_DisambiguatedProfile { + flex: auto; /* prevent long display name blowout */ + } + } } } From 0ef63ba38604bc6121e59d9c2d5746ae4ab04cf6 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 2 Mar 2023 16:06:03 +0900 Subject: [PATCH 2/6] Add a test to check long strings do not overflow Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 86 ++++++++++++++++++++++++++- 1 file changed, 85 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 8d6aa931018..ed4fd7436fb 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -494,6 +494,7 @@ describe("Timeline", () => { describe("message sending", () => { const MESSAGE = "Hello world"; + const reply = "Reply"; const viewRoomSendMessageAndSetupReply = () => { // View room cy.visit("/#/room/" + roomId); @@ -508,7 +509,6 @@ describe("Timeline", () => { }; it("can reply with a text message", () => { - const reply = "Reply"; viewRoomSendMessageAndSetupReply(); cy.getComposer().type(`${reply}{enter}`); @@ -560,5 +560,89 @@ describe("Timeline", () => { .children() .should("have.length", 4); }); + + it("should send, reply, and display long strings without overflowing", () => { + // Max 256 characters for display name + const LONG_STRING = + "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut " + + "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " + + "aliquip ex"; + + // Create a bot with a long display name + let bot: MatrixClient; + cy.getBot(homeserver, { + displayName: LONG_STRING, + autoAcceptInvites: false, + }).then((_bot) => { + bot = _bot; + }); + + // Create another room with a long name, invite the bot, and open the room + cy.createRoom({ name: LONG_STRING }) + .as("testRoomId") + .then((_roomId) => { + roomId = _roomId; + cy.inviteUser(roomId, bot.getUserId()); + bot.joinRoom(roomId); + cy.visit("/#/room/" + roomId); + }); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Set display name to LONG_STRING + cy.setDisplayName(`${LONG_STRING}`); + + // Have the bot send a long message + cy.get("@testRoomId").then((roomId) => { + bot.sendMessage(roomId, { + body: LONG_STRING, + msgtype: "m.text", + }); + }); + + // Wait until the message is rendered + cy.get(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").should("have.text", LONG_STRING); + + // Reply to the message + cy.get(".mx_EventTile_last") + .realHover() + .within(() => { + cy.get('[aria-label="Reply"]').click({ force: false }); + }); + cy.getComposer().type(`${reply}{enter}`); + + // Make sure the reply tile and the reply are displayed + cy.get(".mx_EventTile_last").within(() => { + cy.get(".mx_ReplyTile .mx_MTextBody").should("have.text", LONG_STRING); + cy.get(".mx_EventTile_line > .mx_MTextBody").should("have.text", reply); + }); + + // Exclude timestamp and read marker from snapshots + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + + // Make sure the strings do not overflow on IRC layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on IRC layout", { percyCSS }); + + // Make sure the strings do not overflow on modern layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + cy.get(".mx_EventTile_last[data-layout='group'] .mx_EventTile_line > .mx_MTextBody").should( + "have.text", + reply, + ); + cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on modern layout", { percyCSS }); + + // Make sure the strings do not overflow on bubble layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_EventTile_last[data-layout='bubble'] .mx_EventTile_line > .mx_MTextBody").should( + "have.text", + reply, + ); + cy.get(".mx_MainSplit").percySnapshotElement("Long strings with a reply on bubble layout", { percyCSS }); + }); }); }); From 6ef3021a7d202e60b9565431755fc7ddd8118ff7 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Mar 2023 03:16:11 +0900 Subject: [PATCH 3/6] Set a different name to avoid a random matrix id from being created Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index ed4fd7436fb..fb3f8587fc4 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -566,7 +566,7 @@ describe("Timeline", () => { const LONG_STRING = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut " + "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " + - "aliquip ex"; + "aliquip"; // Create a bot with a long display name let bot: MatrixClient; @@ -593,8 +593,9 @@ describe("Timeline", () => { "created and configured the room.", ).should("exist"); - // Set display name to LONG_STRING - cy.setDisplayName(`${LONG_STRING}`); + // Set the display name to "LONG_STRING 2" in order to avoid a warning in Percy tests from being triggered + // due to the generated random mxid being displayed inside the GELS summary. + cy.setDisplayName(`${LONG_STRING} 2`); // Have the bot send a long message cy.get("@testRoomId").then((roomId) => { From 5371615df4b3a55be89341f758f926d5c43c6205 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Mar 2023 04:22:49 +0900 Subject: [PATCH 4/6] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index fb3f8587fc4..3eb42812fd4 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -21,6 +21,7 @@ import type { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; +import { MatrixClient } from "../../global"; import Chainable = Cypress.Chainable; // The avatar size used in the timeline From 6993f2f8bc9081396825cd5aa01e9d8110723385 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Mar 2023 04:50:43 +0900 Subject: [PATCH 5/6] Better solution Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 1 + res/css/views/rooms/_ReplyTile.pcss | 6 ------ 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index 84b15ccd384..b92faf6a7d6 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -186,6 +186,7 @@ $irc-line-height: $font-18px; margin: 0; .mx_DisambiguatedProfile { order: unset; + flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */ width: unset; background: transparent; } diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 2782bbb1de2..1a2e1a38147 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -137,11 +137,5 @@ limitations under the License. .mx_BaseAvatar { line-height: 14px; // To match size } - - .mx_IRCLayout & { - .mx_DisambiguatedProfile { - flex: auto; /* prevent long display name blowout */ - } - } } } From a7779ae3ec1881ab5e7fd61ed428ff187fa383d9 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 5 Mar 2023 04:54:05 +0900 Subject: [PATCH 6/6] Sort declarations based on .mx_IRCLayout .mx_EventTile .mx_DisambiguatedProfile Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_IRCLayout.pcss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_IRCLayout.pcss b/res/css/views/rooms/_IRCLayout.pcss index b92faf6a7d6..18da287d539 100644 --- a/res/css/views/rooms/_IRCLayout.pcss +++ b/res/css/views/rooms/_IRCLayout.pcss @@ -185,10 +185,10 @@ $irc-line-height: $font-18px; .mx_ReplyChain { margin: 0; .mx_DisambiguatedProfile { - order: unset; - flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */ width: unset; background: transparent; + order: unset; + flex-shrink: unset; /* Unset flex-shrink to prevent long display name blowout */ } .mx_EventTile_emote {