first iteration for message bubble layout

res/css/_components.scss

@@ -194,6 +194,7 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_EventBubbleTile.scss";
 @import "./views/rooms/_GroupLayout.scss";
 @import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";

res/css/views/messages/_MImageBody.scss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_MImageBody {
     display: block;
-    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {

res/css/views/messages/_ReactionsRow.scss

@@ -26,6 +26,7 @@ limitations under the License.
         height: 24px;
         vertical-align: middle;
         margin-left: 4px;
+        margin-right: 4px;
 
         &::before {
             content: '';

res/css/views/rooms/_EventBubbleTile.scss

@@ -0,0 +1,149 @@
+/*
+Copyright 2021 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_EventTile[data-layout=bubble] {
+
+    --avatarSize: 32px;
+    --gutterSize: 7px;
+    --cornerRadius: 5px;
+
+    --maxWidth: 70%;
+
+    position: relative;
+    margin-top: var(--gutterSize);
+    margin-left: var(--avatarSize);
+    margin-right: var(--avatarSize);
+    padding: 2px 0;
+
+    &:hover {
+        background: rgb(242, 242, 242);
+    }
+
+    .mx_SenderProfile,
+    .mx_EventTile_line {
+        width: fit-content;
+        max-width: 70%;
+        background: var(--backgroundColor);
+    }
+
+    .mx_SenderProfile {
+        display: none;
+        padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize);
+        border-top-left-radius: var(--cornerRadius);
+        border-top-right-radius: var(--cornerRadius);
+    }
+
+    .mx_EventTile_line {
+        padding: var(--gutterSize);
+        border-radius: var(--cornerRadius);
+    }
+
+    /*
+    .mx_SenderProfile + .mx_EventTile_line {
+        padding-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    */
+
+    .mx_EventTile_avatar {
+        position: absolute;
+        top: 0;
+        img {
+            border: 2px solid #fff;
+            border-radius: 50%;
+        }
+    }
+
+    &[data-self=true] {
+        .mx_EventTile_line {
+            float: right;
+        }
+        .mx_ReactionsRow {
+            float: right;
+            clear: right;
+            display: flex;
+
+            /* Moving the "add reaction button" before the reactions */
+            > :last-child {
+                order: -1;
+            }
+        }
+        .mx_EventTile_avatar {
+            right: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F8FDFC;
+    }
+
+    &:not([data-self=true]) {
+        .mx_EventTile_avatar {
+            left: calc(-1 * var(--avatarSize));
+        }
+        --backgroundColor: #F7F8F9;
+    }
+
+    &.mx_EventTile_bubbleContainer,
+    &.mx_EventTile_info,
+    & ~ .mx_EventListSummary[data-expanded=false] {
+
+        --backgroundColor: transparent;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .mx_EventTile_avatar {
+            position: static;
+            order: -1;
+        }
+    }
+
+    & ~ .mx_EventListSummary {
+        --maxWidth: 95%;
+        .mx_EventListSummary_toggle {
+            float: none;
+            margin: 0;
+            order: 9;
+        }
+    }
+
+    & + .mx_EventListSummary {
+        .mx_EventTile {
+            margin-top: 0;
+            padding: 0;
+        }
+    }
+
+    .mx_EventListSummary_toggle {
+        margin-right: 55px;
+    }
+
+    .mx_EventTile_line {
+        display: flex;
+        gap: var(--gutterSize);
+        > a {
+            order: 999; /* always display the timestamp as the last item */
+            align-self: flex-end;
+        }
+    }
+
+    .mx_EventTile_readAvatars {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+    }
+
+}

res/css/views/rooms/_EventTile.scss

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020-2021 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.
@@ -18,13 +18,12 @@ limitations under the License.
 $left-gutter: 64px;
 $hover-select-border: 4px;
 
-.mx_EventTile {
+.mx_EventTile:not([data-layout=bubble]) {
     max-width: 100%;
     clear: both;
     padding-top: 18px;
     font-size: $font-14px;
     position: relative;
-}
 
     .mx_EventTile.mx_EventTile_info {
         padding-top: 1px;
@@ -116,32 +115,10 @@ $hover-select-border: 4px;
         }
     }
 
-.mx_EventTile_bubbleContainer {
-    display: grid;
-    grid-template-columns: 1fr 100px;
-
-    .mx_EventTile_line {
-        margin-right: 0;
-        grid-column: 1 / 3;
-        // override default padding of mx_EventTile_line so that we can be centered
-        padding: 0 !important;
-    }
-
-    .mx_EventTile_msgOption {
-        grid-column: 2;
-    }
-}
-
     .mx_EventTile_reply {
         margin-right: 10px;
     }
 
-/* HACK to override line-height which is already marked important elsewhere */
-.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px !important;
-    line-height: 57px !important;
-}
-
     .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
         left: calc(-$hover-select-border);
     }
@@ -247,36 +224,6 @@ $hover-select-border: 4px;
         text-decoration: none;
     }
 
-.mx_EventTile_readAvatars {
-    position: relative;
-    display: inline-block;
-    width: 14px;
-    height: 14px;
-    // This aligns the avatar with the last line of the
-    // message. We want to move it one line up - 2.2rem
-    top: -2.2rem;
-    user-select: none;
-    z-index: 1;
-}
-
-.mx_EventTile_readAvatars .mx_BaseAvatar {
-    position: absolute;
-    display: inline-block;
-    height: $font-14px;
-    width: $font-14px;
-
-    will-change: left, top;
-    transition:
-        left var(--transition-short) ease-out,
-        top var(--transition-standard) ease-out;
-}
-
-.mx_EventTile_readAvatarRemainder {
-    color: $event-timestamp-color;
-    font-size: $font-11px;
-    position: absolute;
-}
-
     /* all the overflow-y: hidden; are to trap Zalgos -
        but they introduce an implicit overflow-x: auto.
        so make that explicitly hidden too to avoid random
@@ -381,34 +328,6 @@ $hover-select-border: 4px;
         opacity: 1;
     }
 
-.mx_EventTile_keyRequestInfo {
-    font-size: $font-12px;
-}
-
-.mx_EventTile_keyRequestInfo_text {
-    opacity: 0.5;
-}
-
-.mx_EventTile_keyRequestInfo_text a {
-    color: $primary-fg-color;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p {
-    text-align: auto;
-    margin-left: 3px;
-    margin-right: 3px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
-    margin-top: 0px;
-}
-
-.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
-    margin-bottom: 0px;
-}
-
     .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
     .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
     .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -453,6 +372,83 @@ $hover-select-border: 4px;
         left: 41px;
     }
 
+    .mx_EventTile_tileError {
+        color: red;
+        text-align: center;
+
+        // Remove some of the default tile padding so that the error is centered
+        margin-right: 0;
+        .mx_EventTile_line {
+            padding-left: 0;
+            margin-right: 0;
+        }
+
+        .mx_EventTile_line span {
+            padding: 4px 8px;
+        }
+
+        a {
+            margin-left: 1em;
+        }
+    }
+
+    .mx_MImageBody {
+        margin-right: 34px;
+    }
+}
+
+.mx_EventTile_bubbleContainer {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+
+    .mx_EventTile_line {
+        margin-right: 0;
+        grid-column: 1 / 3;
+        // override default padding of mx_EventTile_line so that we can be centered
+        padding: 0 !important;
+    }
+
+    .mx_EventTile_msgOption {
+        grid-column: 2;
+    }
+}
+
+.mx_EventTile_readAvatars {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    // This aligns the avatar with the last line of the
+    // message. We want to move it one line up - 2.2rem
+    top: -2.2rem;
+    user-select: none;
+    z-index: 1;
+}
+
+.mx_EventTile_readAvatars .mx_BaseAvatar {
+    position: absolute;
+    display: inline-block;
+    height: $font-14px;
+    width: $font-14px;
+
+    will-change: left, top;
+    transition:
+        left var(--transition-short) ease-out,
+        top var(--transition-standard) ease-out;
+}
+
+.mx_EventTile_readAvatarRemainder {
+    color: $event-timestamp-color;
+    font-size: $font-11px;
+    position: absolute;
+}
+
+/* HACK to override line-height which is already marked important elsewhere */
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+    font-size: 48px !important;
+    line-height: 57px !important;
+}
+
 .mx_EventTile_content .mx_EventTile_edited {
     user-select: none;
     font-size: $font-12px;
@@ -601,24 +597,33 @@ $hover-select-border: 4px;
 
 /* end of overrides */
 
-.mx_EventTile_tileError {
-    color: red;
-    text-align: center;
 
-    // Remove some of the default tile padding so that the error is centered
-    margin-right: 0;
-    .mx_EventTile_line {
-        padding-left: 0;
-        margin-right: 0;
+.mx_EventTile_keyRequestInfo {
+    font-size: $font-12px;
 }
 
-    .mx_EventTile_line span {
-        padding: 4px 8px;
+.mx_EventTile_keyRequestInfo_text {
+    opacity: 0.5;
 }
 
-    a {
-        margin-left: 1em;
+.mx_EventTile_keyRequestInfo_text a {
+    color: $primary-fg-color;
+    text-decoration: underline;
+    cursor: pointer;
 }
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p {
+    text-align: auto;
+    margin-left: 3px;
+    margin-right: 3px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child {
+    margin-top: 0px;
+}
+
+.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child {
+    margin-bottom: 0px;
 }
 
 @media only screen and (max-width: 480px) {

src/components/views/elements/EventListSummary.tsx

@@ -63,7 +63,7 @@ const EventListSummary: React.FC<IProps> = ({
     // If we are only given few events then just pass them through
     if (events.length < threshold) {
         return (
-            <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true}>
                 { children }
             </li>
         );
@@ -92,7 +92,7 @@ const EventListSummary: React.FC<IProps> = ({
     }
 
     return (
-        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""}>
             <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                 { expanded ? _t('collapse') : _t('expand') }
             </AccessibleButton>
@@ -101,4 +101,8 @@ const EventListSummary: React.FC<IProps> = ({
     );
 };
 
+EventListSummary.defaultProps = {
+    startExpanded: false,
+};
+
 export default EventListSummary;

src/components/views/messages/UnknownBody.js

@@ -17,11 +17,12 @@ limitations under the License.
 
 import React, {forwardRef} from "react";
 
-export default forwardRef(({mxEvent}, ref) => {
+export default forwardRef(({mxEvent, children}, ref) => {
     const text = mxEvent.getContent().body;
     return (
         <span className="mx_UnknownBody" ref={ref}>
             { text }
+            { children }
         </span>
     );
 });

src/components/views/rooms/EventTile.tsx

@@ -988,8 +988,13 @@ export default class EventTile extends React.Component<IProps, IState> {
             onFocusChange={this.onActionBarFocusChange}
         /> : undefined;
 
-        const showTimestamp = this.props.mxEvent.getTs() &&
-            (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused);
+        const showTimestamp = this.props.mxEvent.getTs()
+            && (this.props.alwaysShowTimestamps
+            || this.props.last
+            || this.state.hover
+            || this.state.actionBarFocused)
+            || this.props.layout === Layout.Bubble;
+
         const timestamp = showTimestamp ?
             <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
@@ -1168,6 +1173,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                     this.props.alwaysShowTimestamps || this.state.hover,
                 );
 
+                const isOwnEvent = this.props.mxEvent.sender.userId === MatrixClientPeg.get().getUserId();
+
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return (
                     React.createElement(this.props.as || "li", {
@@ -1177,6 +1184,8 @@ export default class EventTile extends React.Component<IProps, IState> {
                         "aria-live": ariaLive,
                         "aria-atomic": "true",
                         "data-scroll-tokens": scrollToken,
+                        "data-layout": this.props.layout,
+                        "data-self": isOwnEvent,
                         "onMouseEnter": () => this.setState({ hover: true }),
                         "onMouseLeave": () => this.setState({ hover: false }),
                     }, [
@@ -1198,9 +1207,9 @@ export default class EventTile extends React.Component<IProps, IState> {
                                 onHeightChanged={this.props.onHeightChanged}
                             />
                             { keyRequestInfo }
-                            { reactionsRow }
                             { actionBar }
                         </div>,
+                        reactionsRow,
                         msgOption,
                         avatar,