From 6456b38d37ca11a49351b2f86b6175bd41cad806 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 28 Apr 2023 17:16:12 +0000 Subject: [PATCH 1/6] Optimize mx_RoomView_myReadMarker - Replace the compound selector with a type selector - Nest the type selector in "mx_RoomView_myReadMarker_container" --- res/css/structures/_RoomView.pcss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 67626af2877..5357e75fc8d 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -187,14 +187,13 @@ limitations under the License. justify-content: center; } -li.mx_RoomView_myReadMarker_container { - height: 0px; - margin: 0px; - padding: 0px; - border: 0px; -} +.mx_RoomView_myReadMarker_container { + height: 0; + margin: 0; + padding: 0; + border: 0; -hr.mx_RoomView_myReadMarker { +hr { border-top: solid 1px $accent; border-bottom: solid 1px $accent; margin-top: 0px; @@ -206,6 +205,7 @@ hr.mx_RoomView_myReadMarker { width: 99%; opacity: 1; } +} /* Rooms with immersive content */ .mx_RoomView_immersive .mx_RoomHeader_wrapper { From b9e9dfbf605ae17e54c8f77bcb6889e81621aade Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 28 Apr 2023 17:20:02 +0000 Subject: [PATCH 2/6] Conform the style rules to the naming policy Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element. --- cypress/e2e/audio-player/audio-player.spec.ts | 2 +- cypress/e2e/polls/polls.spec.ts | 2 +- cypress/e2e/right-panel/file-panel.spec.ts | 2 +- cypress/e2e/threads/threads.spec.ts | 4 ++-- cypress/e2e/timeline/timeline.spec.ts | 14 +++++++------- res/css/structures/_RoomView.pcss | 2 +- src/components/structures/MessagePanel.tsx | 8 ++++---- test/components/structures/MessagePanel-test.tsx | 12 ++++++------ 8 files changed, 23 insertions(+), 23 deletions(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 41f7f1a8568..0477ef0775a 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -29,7 +29,7 @@ describe("Audio player", () => { ".mx_SeekBar, " + // Exclude various components from the snapshot, for consistency ".mx_JumpToBottomButton, " + - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; const uploadFile = (file: string) => { // Upload a file from the message composer diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index a3850dcdbc1..5cf4b9dc4ce 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -22,7 +22,7 @@ import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; -const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index f2e0e0a013b..a402fbc3972 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -164,7 +164,7 @@ describe("FilePanel", () => { // FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24897 // Remove this once https://github.com/vector-im/element-web/issues/24898 is fixed. const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr, .mx_SeekBar { visibility: hidden !important; }"; // Take a snapshot of file tiles list on FilePanel cy.get(".mx_FilePanel .mx_RoomView_MessageList").percySnapshotElement("File tiles list on FilePanel", { diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 465aeb9520c..e8ba34c7df6 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -69,7 +69,7 @@ describe("Threads", () => { const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message @@ -445,7 +445,7 @@ describe("Threads", () => { // Exclude timestamp, read marker, and mapboxgl-map from snapshots const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr, .mapboxgl-map { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 331496a9695..ee7ec90ffc2 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -149,7 +149,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -319,7 +319,7 @@ describe("Timeline", () => { .should("have.css", "inset-inline-start", "0px"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -452,7 +452,7 @@ describe("Timeline", () => { // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957 ".mx_TopUnreadMessagesBar, " + // Exclude timestamp and read marker from snapshots - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; sendEvent(roomId); sendEvent(roomId); // check continuation @@ -583,7 +583,7 @@ describe("Timeline", () => { cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -757,7 +757,7 @@ describe("Timeline", () => { cy.checkA11y(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], @@ -903,7 +903,7 @@ describe("Timeline", () => { cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; // Check the margin value of ReplyChains of EventTile at the bottom on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -1014,7 +1014,7 @@ describe("Timeline", () => { cy.viewport(1600, 1200); // Exclude timestamp and read marker from snapshots - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; // Make sure the strings do not overflow on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 5357e75fc8d..21c79a53c81 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -187,7 +187,7 @@ limitations under the License. justify-content: center; } -.mx_RoomView_myReadMarker_container { +.mx_RoomView_myReadMarker { height: 0; margin: 0; padding: 0; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 56d0db128b6..c76dbf1ad3f 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -502,14 +502,14 @@ export default class MessagePanel extends React.Component { // algorithms which depend on its position on the screen aren't // confused. if (visible) { - hr =
; + hr =
; } return (
  • {hr} @@ -528,7 +528,7 @@ export default class MessagePanel extends React.Component { // and TransitionGroup requires that all its children are Transitions. const hr = (
    { // we get a new DOM node (restarting the animation) when the ghost // moves to a different event. return ( -
  • +
  • {hr}
    • ); diff --git a/test/components/structures/MessagePanel-test.tsx b/test/components/structures/MessagePanel-test.tsx index e4239533f18..f20681b112d 100644 --- a/test/components/structures/MessagePanel-test.tsx +++ b/test/components/structures/MessagePanel-test.tsx @@ -353,7 +353,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); // it should follow the
  • which wraps the event tile for event 4 const eventContainer = tiles[4]; @@ -373,7 +373,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -395,7 +395,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -420,7 +420,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); expect(rm.previousSibling).toEqual(tiles[4]); rerender( @@ -434,7 +434,7 @@ describe("MessagePanel", function () { ); // now there should be two RM containers - const readMarkers = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const readMarkers = container.getElementsByClassName("mx_RoomView_myReadMarker"); expect(readMarkers.length).toEqual(2); @@ -510,7 +510,7 @@ describe("MessagePanel", function () { ); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); const [messageList] = container.getElementsByClassName("mx_RoomView_MessageList"); const rows = messageList.children; From 1f49f4c77b6c4b6281faf821876b9fd4c4ba93cc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 28 Apr 2023 17:23:55 +0000 Subject: [PATCH 3/6] Run prettier --- res/css/structures/_RoomView.pcss | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 21c79a53c81..25fdc5ba707 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -193,18 +193,18 @@ limitations under the License. padding: 0; border: 0; -hr { - border-top: solid 1px $accent; - border-bottom: solid 1px $accent; - margin-top: 0px; - position: relative; - top: -1px; - z-index: 1; - will-change: width; - transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; - width: 99%; - opacity: 1; -} + hr { + border-top: solid 1px $accent; + border-bottom: solid 1px $accent; + margin-top: 0px; + position: relative; + top: -1px; + z-index: 1; + will-change: width; + transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; + width: 99%; + opacity: 1; + } } /* Rooms with immersive content */ From 5e0bc6587a9f720b5f764731ac2aeea41afc87ae Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 28 Apr 2023 18:02:35 +0000 Subject: [PATCH 4/6] Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker` - Remove a unit - Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots --- cypress/e2e/audio-player/audio-player.spec.ts | 2 +- cypress/e2e/polls/polls.spec.ts | 2 +- cypress/e2e/right-panel/file-panel.spec.ts | 2 +- cypress/e2e/threads/threads.spec.ts | 4 ++-- cypress/e2e/timeline/timeline.spec.ts | 14 +++++++------- res/css/structures/_RoomView.pcss | 2 +- src/components/structures/MessagePanel.tsx | 3 +-- 7 files changed, 14 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 0477ef0775a..41f7f1a8568 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -29,7 +29,7 @@ describe("Audio player", () => { ".mx_SeekBar, " + // Exclude various components from the snapshot, for consistency ".mx_JumpToBottomButton, " + - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; const uploadFile = (file: string) => { // Upload a file from the message composer diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index 5cf4b9dc4ce..a3850dcdbc1 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -22,7 +22,7 @@ import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; -const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index a402fbc3972..f2e0e0a013b 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -164,7 +164,7 @@ describe("FilePanel", () => { // FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24897 // Remove this once https://github.com/vector-im/element-web/issues/24898 is fixed. const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr, .mx_SeekBar { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; // Take a snapshot of file tiles list on FilePanel cy.get(".mx_FilePanel .mx_RoomView_MessageList").percySnapshotElement("File tiles list on FilePanel", { diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index e8ba34c7df6..465aeb9520c 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -69,7 +69,7 @@ describe("Threads", () => { const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message @@ -445,7 +445,7 @@ describe("Threads", () => { // Exclude timestamp, read marker, and mapboxgl-map from snapshots const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr, .mapboxgl-map { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index ee7ec90ffc2..331496a9695 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -149,7 +149,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -319,7 +319,7 @@ describe("Timeline", () => { .should("have.css", "inset-inline-start", "0px"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -452,7 +452,7 @@ describe("Timeline", () => { // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957 ".mx_TopUnreadMessagesBar, " + // Exclude timestamp and read marker from snapshots - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; sendEvent(roomId); sendEvent(roomId); // check continuation @@ -583,7 +583,7 @@ describe("Timeline", () => { cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -757,7 +757,7 @@ describe("Timeline", () => { cy.checkA11y(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], @@ -903,7 +903,7 @@ describe("Timeline", () => { cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; // Check the margin value of ReplyChains of EventTile at the bottom on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -1014,7 +1014,7 @@ describe("Timeline", () => { cy.viewport(1600, 1200); // Exclude timestamp and read marker from snapshots - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker hr { visibility: hidden !important; }"; + //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); diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 25fdc5ba707..3f1328548cf 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -196,7 +196,7 @@ limitations under the License. hr { border-top: solid 1px $accent; border-bottom: solid 1px $accent; - margin-top: 0px; + margin-top: 0; position: relative; top: -1px; z-index: 1; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index c76dbf1ad3f..db6530480bc 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -502,7 +502,7 @@ export default class MessagePanel extends React.Component { // algorithms which depend on its position on the screen aren't // confused. if (visible) { - hr =
    ; + hr =
    ; } return ( @@ -528,7 +528,6 @@ export default class MessagePanel extends React.Component { // and TransitionGroup requires that all its children are Transitions. const hr = (
    Date: Fri, 28 Apr 2023 19:26:38 +0000 Subject: [PATCH 5/6] Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker` The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion. - Create _MessagePanel.pcss for the style rules of MessagePanel --- cypress/e2e/audio-player/audio-player.spec.ts | 2 +- cypress/e2e/polls/polls.spec.ts | 2 +- cypress/e2e/right-panel/file-panel.spec.ts | 2 +- cypress/e2e/threads/threads.spec.ts | 4 +-- cypress/e2e/timeline/timeline.spec.ts | 14 ++++---- res/css/_components.pcss | 1 + res/css/structures/_MessagePanel.pcss | 35 +++++++++++++++++++ res/css/structures/_RoomView.pcss | 20 ----------- src/components/structures/MessagePanel.tsx | 4 +-- .../structures/MessagePanel-test.tsx | 12 +++---- 10 files changed, 56 insertions(+), 40 deletions(-) create mode 100644 res/css/structures/_MessagePanel.pcss diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 41f7f1a8568..7a5d608cd65 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -29,7 +29,7 @@ describe("Audio player", () => { ".mx_SeekBar, " + // Exclude various components from the snapshot, for consistency ".mx_JumpToBottomButton, " + - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; const uploadFile = (file: string) => { // Upload a file from the message composer diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index a3850dcdbc1..1a6682a6429 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -22,7 +22,7 @@ import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; -const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index f2e0e0a013b..2595d0f2966 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -164,7 +164,7 @@ describe("FilePanel", () => { // FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24897 // Remove this once https://github.com/vector-im/element-web/issues/24898 is fixed. const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; // Take a snapshot of file tiles list on FilePanel cy.get(".mx_FilePanel .mx_RoomView_MessageList").percySnapshotElement("File tiles list on FilePanel", { diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 465aeb9520c..08e93af7ad3 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -69,7 +69,7 @@ describe("Threads", () => { const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message @@ -445,7 +445,7 @@ describe("Threads", () => { // Exclude timestamp, read marker, and mapboxgl-map from snapshots const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 331496a9695..d036bc848c1 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -149,7 +149,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -319,7 +319,7 @@ describe("Timeline", () => { .should("have.css", "inset-inline-start", "0px"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -452,7 +452,7 @@ describe("Timeline", () => { // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957 ".mx_TopUnreadMessagesBar, " + // Exclude timestamp and read marker from snapshots - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; sendEvent(roomId); sendEvent(roomId); // check continuation @@ -583,7 +583,7 @@ describe("Timeline", () => { cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -757,7 +757,7 @@ describe("Timeline", () => { cy.checkA11y(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], @@ -903,7 +903,7 @@ describe("Timeline", () => { cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // Check the margin value of ReplyChains of EventTile at the bottom on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -1014,7 +1014,7 @@ describe("Timeline", () => { cy.viewport(1600, 1200); // Exclude timestamp and read marker from snapshots - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + //const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // Make sure the strings do not overflow on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 345c2cd08ef..c8f48728c1f 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -68,6 +68,7 @@ @import "./structures/_LeftPanel.pcss"; @import "./structures/_MainSplit.pcss"; @import "./structures/_MatrixChat.pcss"; +@import "./structures/_MessagePanel.pcss"; @import "./structures/_NonUrgentToastContainer.pcss"; @import "./structures/_QuickSettingsButton.pcss"; @import "./structures/_RightPanel.pcss"; diff --git a/res/css/structures/_MessagePanel.pcss b/res/css/structures/_MessagePanel.pcss new file mode 100644 index 00000000000..c5e777b3e6d --- /dev/null +++ b/res/css/structures/_MessagePanel.pcss @@ -0,0 +1,35 @@ +/* +Copyright 2023 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_MessagePanel_myReadMarker { + height: 0; + margin: 0; + padding: 0; + border: 0; + + hr { + border-top: solid 1px $accent; + border-bottom: solid 1px $accent; + margin-top: 0; + position: relative; + top: -1px; + z-index: 1; + will-change: width; + transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; + width: 99%; + opacity: 1; + } +} diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 3f1328548cf..13aff7418b5 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -187,26 +187,6 @@ limitations under the License. justify-content: center; } -.mx_RoomView_myReadMarker { - height: 0; - margin: 0; - padding: 0; - border: 0; - - hr { - border-top: solid 1px $accent; - border-bottom: solid 1px $accent; - margin-top: 0; - position: relative; - top: -1px; - z-index: 1; - will-change: width; - transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; - width: 99%; - opacity: 1; - } -} - /* Rooms with immersive content */ .mx_RoomView_immersive .mx_RoomHeader_wrapper { border: unset; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index db6530480bc..9b8b2ec1cc7 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -509,7 +509,7 @@ export default class MessagePanel extends React.Component {
  • {hr} @@ -538,7 +538,7 @@ export default class MessagePanel extends React.Component { // we get a new DOM node (restarting the animation) when the ghost // moves to a different event. return ( -
  • +
  • {hr}
    • ); diff --git a/test/components/structures/MessagePanel-test.tsx b/test/components/structures/MessagePanel-test.tsx index f20681b112d..feef37bb78b 100644 --- a/test/components/structures/MessagePanel-test.tsx +++ b/test/components/structures/MessagePanel-test.tsx @@ -353,7 +353,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); // it should follow the
  • which wraps the event tile for event 4 const eventContainer = tiles[4]; @@ -373,7 +373,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -395,7 +395,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -420,7 +420,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(tiles[4]); rerender( @@ -434,7 +434,7 @@ describe("MessagePanel", function () { ); // now there should be two RM containers - const readMarkers = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const readMarkers = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(readMarkers.length).toEqual(2); @@ -510,7 +510,7 @@ describe("MessagePanel", function () { ); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); const [messageList] = container.getElementsByClassName("mx_RoomView_MessageList"); const rows = messageList.children; From e422e7b8d105f947067a6ee6721ceca9a5e1ec3b Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 12 May 2023 07:02:10 +0000 Subject: [PATCH 6/6] Update permalinks.spec.ts --- cypress/e2e/permalinks/permalinks.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/permalinks/permalinks.spec.ts b/cypress/e2e/permalinks/permalinks.spec.ts index 73428873b63..1487924e8cd 100644 --- a/cypress/e2e/permalinks/permalinks.spec.ts +++ b/cypress/e2e/permalinks/permalinks.spec.ts @@ -131,7 +131,7 @@ describe("permalinks", () => { cy.get(".mx_NewRoomIntro").invoke("remove"); cy.get(".mx_GenericEventListSummary").invoke("remove"); - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_RoomView_timeline").percySnapshotElement("Permalink rendering", { percyCSS }); }); });