Consolidate RedactionGrouper and HiddenEventGrouper into MELS (#7739)

res/css/_components.scss

@@ -141,7 +141,7 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
-@import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_GenericEventListSummary.scss";
 @import "./views/elements/_EventTilePreview.scss";
 @import "./views/elements/_ExternalLink.scss";
 @import "./views/elements/_FacePile.scss";

res/css/views/elements/_GenericEventListSummary.scss

@@ -14,28 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EventListSummary {
+.mx_GenericEventListSummary {
     position: relative;
 }
 
-.mx_TextualEvent.mx_EventListSummary_summary {
+.mx_TextualEvent.mx_GenericEventListSummary_summary {
     font-size: $font-14px;
     display: inline-flex;
 }
 
-.mx_EventListSummary_avatars {
+.mx_GenericEventListSummary_avatars {
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
     line-height: $font-12px;
 }
 
-.mx_EventListSummary_avatars .mx_BaseAvatar {
+.mx_GenericEventListSummary_avatars .mx_BaseAvatar {
     margin-right: -4px;
     cursor: pointer;
 }
 
-.mx_EventListSummary_toggle {
+.mx_GenericEventListSummary_toggle {
     color: $accent;
     cursor: pointer;
     float: right;
@@ -43,29 +43,29 @@ limitations under the License.
     margin-top: 8px;
 }
 
-.mx_EventListSummary_line {
+.mx_GenericEventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
     line-height: $font-30px;
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_EventListSummary {
+    .mx_GenericEventListSummary {
         font-size: $font-13px;
         .mx_EventTile_line {
             line-height: $font-20px;
         }
     }
 
-    .mx_EventListSummary_line {
+    .mx_GenericEventListSummary_line {
         line-height: $font-22px;
     }
 
-    .mx_EventListSummary_toggle {
+    .mx_GenericEventListSummary_toggle {
         margin-top: 3px;
     }
 
-    .mx_TextualEvent.mx_EventListSummary_summary {
+    .mx_TextualEvent.mx_GenericEventListSummary_summary {
         font-size: $font-13px;
     }
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -118,7 +118,7 @@ limitations under the License.
         padding-right: 0;
     }
 
-    .mx_EventTile, .mx_EventListSummary {
+    .mx_EventTile, .mx_GenericEventListSummary {
         // Account for scrollbar when hovering
         padding-top: 0;
 

res/css/views/rooms/_EventBubbleTile.scss

@@ -23,7 +23,7 @@ limitations under the License.
 }
 
 .mx_EventTile[data-layout=bubble],
-.mx_EventListSummary[data-layout=bubble] {
+.mx_GenericEventListSummary[data-layout=bubble] {
     --avatarSize: 32px;
     --gutterSize: 11px;
     --cornerRadius: 12px;
@@ -477,7 +477,7 @@ limitations under the License.
 .mx_EventTile.mx_EventTile_bubbleContainer[data-layout=bubble],
 .mx_EventTile.mx_EventTile_leftAlignedBubble[data-layout=bubble],
 .mx_EventTile.mx_EventTile_info[data-layout=bubble],
-.mx_EventListSummary[data-layout=bubble][data-expanded=false] {
+.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] {
     --backgroundColor: transparent;
     --gutterSize: 0;
 
@@ -518,11 +518,11 @@ limitations under the License.
     }
 }
 
-.mx_EventListSummary[data-layout=bubble] {
+.mx_GenericEventListSummary[data-layout=bubble] {
     --maxWidth: 70%;
     margin-left: calc(var(--avatarSize) + var(--gutterSize));
 
-    .mx_EventListSummary_toggle {
+    .mx_GenericEventListSummary_toggle {
         margin: 0 55px 0 5px;
         float: none;
 
@@ -534,11 +534,11 @@ limitations under the License.
         }
     }
 
-    .mx_EventListSummary_line {
+    .mx_GenericEventListSummary_line {
         display: none;
     }
 
-    .mx_EventListSummary_avatars {
+    .mx_GenericEventListSummary_avatars {
         padding-top: 0;
     }
 
@@ -548,14 +548,14 @@ limitations under the License.
     }
 }
 
-.mx_EventListSummary[data-expanded=false][data-layout=bubble] {
+.mx_GenericEventListSummary[data-expanded=false][data-layout=bubble] {
     // Align with left edge of bubble tiles
     padding: 0 49px;
 }
 
 // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
 // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
-.mx_EventListSummary[data-expanded=true][data-layout=bubble] {
+.mx_GenericEventListSummary[data-expanded=true][data-layout=bubble] {
     display: flex;
     flex-direction: column;
     margin: 0;
@@ -579,12 +579,12 @@ limitations under the License.
 }
 
 // increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
-.mx_EventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
+.mx_GenericEventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
     margin-top: 20px;
 }
 
 /* events that do not require bubble layout */
-.mx_EventListSummary[data-layout=bubble],
+.mx_GenericEventListSummary[data-layout=bubble],
 .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
     .mx_EventTile_line {
         background: transparent;

res/css/views/rooms/_EventTile.scss

@@ -281,11 +281,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile:not([data-layout=bubble]).mx_EventTile_info .mx_EventTile_line,
-.mx_EventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
+.mx_GenericEventListSummary:not([data-layout=bubble]) > :not(.mx_EventTile) .mx_EventTile_avatar ~ .mx_EventTile_line {
     padding-left: calc($left-gutter + 18px);
 }
 
-.mx_EventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
+.mx_GenericEventListSummary:not([data-layout=bubble]) .mx_EventTile_line {
     padding-left: $left-gutter;
 }
 

res/css/views/rooms/_IRCLayout.scss

@@ -139,12 +139,12 @@ $irc-line-height: $font-18px;
         margin: 0;
     }
 
-    .mx_EventListSummary {
+    .mx_GenericEventListSummary {
         > .mx_EventTile_line {
             padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
         }
 
-        .mx_EventListSummary_avatars {
+        .mx_GenericEventListSummary_avatars {
             padding: 0;
             margin: 0 9px 0 0;
         }