Fix encryption badge layouts and replies.

Begin removing dependence on slider.
Move settings to labs.
Username disambiguation.

res/css/views/rooms/_IRCLayout.scss

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-$name-width: 50px;
+$name-width: 70px;
 $icon-width: 14px;
 $timestamp-width: 45px;
 $right-padding: 5px;
 
 .mx_IRCLayout {
 
-    line-height: $font-22px !important;
+    line-height: $font-20px !important;
 
     .mx_EventTile {
         display: flex;
@@ -46,11 +46,13 @@ $right-padding: 5px;
             text-align: right;
             display: flex;
             align-items: center;
+            overflow: visible;
         }
 
         > .mx_EventTile_line {
             order: 3;
             flex-grow: 1;
+            margin-bottom: -6px;
         }
 
         > .mx_EventTile_avatar {
@@ -90,10 +92,13 @@ $right-padding: 5px;
             padding: 0;
         }
 
-        .mx_EventTile_line .mx_EventTile_content,
+        .mx_EventTile_line {
-        .mx_EventTile_line .mx_EventTile_e2eIcon,
+            .mx_EventTile_e2eIcon,
-        .mx_EventTile_line .mx_ReplyThread_wrapper_empty {
+            .mx_TextualEvent,
-            display: inline-block;
+            .mx_MTextBody,
+            .mx_ReplyThread_wrapper_empty {
+                display: inline-block;
+            }
         }
 
         .mx_EvenTile_line .mx_MessageActionBar,
@@ -104,6 +109,10 @@ $right-padding: 5px;
         .mx_EventTile_reply {
             order: 3;
         }
+
+        .mx_EditMessageComposer_buttons {
+            position: relative;
+        }
     }
 
     .mx_EventListSummary {
@@ -144,4 +153,17 @@ $right-padding: 5px;
         padding-left: 0;
         border-left: 0;
     }
+
+    .mx_SenderProfile_hover {
+        background-color: $primary-bg-color;
+        overflow: hidden;
+        width: $name-width;
+        transition: width 2s;
+    }
+
+    .mx_SenderProfile_hover:hover {
+        overflow: visible;
+        width: auto;
+        z-index: 10;
+    }
 }

src/components/structures/MessagePanel.js

@@ -117,7 +117,8 @@ export default class MessagePanel extends React.Component {
             // display 'ghost' read markers that are animating away
             ghostReadMarkers: [],
             showTypingNotifications: SettingsStore.getValue("showTypingNotifications"),
-            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
         };
 
         // opaque readreceipt info for each userId; used by ReadReceiptMarker
@@ -171,7 +172,8 @@ export default class MessagePanel extends React.Component {
         this._showTypingNotificationsWatcherRef =
             SettingsStore.watchSetting("showTypingNotifications", null, this.onShowTypingNotificationsChange);
 
-        this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
+        this._layoutWatcherRef = SettingsStore.watchSetting("feature_irc_ui", null, this.onLayoutChange);
+        this._displayAvatarsWatcherRef = SettingsStore.watchSetting("feature_no_timeline_avatars", null, this.onDisplayAvatarsChange);
     }
 
     componentDidMount() {
@@ -182,6 +184,7 @@ export default class MessagePanel extends React.Component {
         this._isMounted = false;
         SettingsStore.unwatchSetting(this._showTypingNotificationsWatcherRef);
         SettingsStore.unwatchSetting(this._layoutWatcherRef);
+        SettingsStore.unwatchSetting(this._displayAvatarsWatcherRef);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -202,7 +205,13 @@ export default class MessagePanel extends React.Component {
 
     onLayoutChange = () => {
         this.setState({
-            useIRCLayout: SettingsStore.getValue("useIRCLayout"),
+            useIRCLayout: SettingsStore.getValue("feature_irc_ui"),
+        });
+    }
+
+    onDisplayAvatarsChange = () => {
+        this.setState({
+            displayAvatars: SettingsStore.getValue("feature_no_timeline_avatars"),
         });
     }
 
@@ -608,6 +617,7 @@ export default class MessagePanel extends React.Component {
                         getRelationsForEvent={this.props.getRelationsForEvent}
                         showReactions={this.props.showReactions}
                         useIRCLayout={this.state.useIRCLayout}
+                        displayAvatars={this.state.displayAvatars}
                     />
                 </TileErrorBoundary>
             </li>,

src/components/views/elements/ReplyThread.js

@@ -39,6 +39,8 @@ export default class ReplyThread extends React.Component {
         permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
         // Specifies which layout to use.
         useIRCLayout: PropTypes.bool,
+        // Specifies whether to display avatars.
+        displayAvatars: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -178,12 +180,12 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref, useIRCLayout, displayAvatars) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div className="mx_ReplyThread_wrapper_empty" />;
         }
         return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
-            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} />;
+            ref={ref} permalinkCreator={permalinkCreator} useIRCLayout={useIRCLayout} displayAvatars={displayAvatars} />;
     }
 
     componentDidMount() {
@@ -334,7 +336,9 @@ export default class ReplyThread extends React.Component {
                     permalinkCreator={this.props.permalinkCreator}
                     isRedacted={ev.isRedacted()}
                     isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")}
-                    useIRCLayout={this.props.useIRCLayout} />
+                    useIRCLayout={this.props.useIRCLayout}
+                    displayAvatars={this.props.displayAvatars}
+                />
             </blockquote>;
         });
 

src/components/views/messages/SenderProfile.js

@@ -131,7 +131,10 @@ export default createReactClass({
 
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
+                <div className="mx_SenderProfile_hover">
+                    { content }
                 { content }
+                </div>
             </div>
         );
     },

src/components/views/rooms/EventTile.js

@@ -209,6 +209,9 @@ export default createReactClass({
 
         // whether to use the irc layout
         useIRCLayout: PropTypes.bool,
+
+        // whether to display avatars
+        displayAvatars: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -713,7 +716,7 @@ export default createReactClass({
             needsSenderProfile = true;
         }
 
-        if (this.props.mxEvent.sender && avatarSize) {
+        if (this.props.mxEvent.sender && avatarSize && this.props.displayAvatars) {
             avatar = (
                     <div className="mx_EventTile_avatar">
                         <MemberAvatar member={this.props.mxEvent.sender}
@@ -897,6 +900,7 @@ export default createReactClass({
                     this.props.permalinkCreator,
                     this._replyThread,
                     this.props.useIRCLayout,
+                    this.props.displayAvatars,
                 );
 
                 // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers

src/i18n/strings/en_EN.json

@@ -409,6 +409,7 @@
     "Show info about bridges in room settings": "Show info about bridges in room settings",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use IRC layout": "Use IRC layout",
+    "Display user avatars on messages": "Display user avatars on messages",
     "Use compact timeline layout": "Use compact timeline layout",
     "Show a placeholder for removed messages": "Show a placeholder for removed messages",
     "Show join/leave messages (invites/kicks/bans unaffected)": "Show join/leave messages (invites/kicks/bans unaffected)",

src/settings/Settings.js

@@ -143,6 +143,18 @@ export const SETTINGS = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_irc_ui": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Use IRC layout'),
+        default: false,
+        isFeature: true,
+    },
+    "feature_no_timeline_avatars": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td('Display user avatars on messages'),
+        default: true,
+        isFeature: true,
+    },
     "mjolnirRooms": {
         supportedLevels: ['account'],
         default: [],
@@ -170,11 +182,6 @@ export const SETTINGS = {
         default: true,
         invertedSettingName: 'MessageComposerInput.dontSuggestEmoji',
     },
-    "useIRCLayout": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        displayName: _td('Use IRC layout'),
-        default: false,
-    },
     "useCompactLayout": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td('Use compact timeline layout'),