Fix encryption badge layouts and replies.

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

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