From 3f25928380b36834e0cbe249938581ede9dc3c6e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 2 May 2017 16:34:39 +0100
Subject: [PATCH] Fix jumping to an unread event when in MELS

This adds the `data-contained-scroll-tokens` API to elements in `ScrollPanel` which allows arbitrary containers of elements with scroll tokens to declare their contained scroll tokens. When jumping to a scroll token inside a container, the `ScrollPanel` will act as if it is scrolling to the container itself, not the child.

MELS has been modified such that it exposes the scroll tokens of all events that exist within it.This means "Jump to unread message" will work if the unread event is within a MELS (which is any member event, because even individual member events surrounded by other events are put inside a MELS).
---
 src/components/structures/MessagePanel.js               | 1 -
 src/components/structures/ScrollPanel.js                | 5 +++++
 src/components/views/elements/MemberEventListSummary.js | 5 +++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js
index 246f351841..74aec61511 100644
--- a/src/components/structures/MessagePanel.js
+++ b/src/components/structures/MessagePanel.js
@@ -354,7 +354,6 @@ module.exports = React.createClass({
                     <MemberEventListSummary
                         key={key}
                         events={summarisedEvents}
-                        data-scroll-token={eventId}
                         onToggle={this._onWidgetLoad} // Update scroll state
                     >
                             {eventTiles}
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
index d43e22e2f1..da3b303d89 100644
--- a/src/components/structures/ScrollPanel.js
+++ b/src/components/structures/ScrollPanel.js
@@ -551,6 +551,11 @@ module.exports = React.createClass({
         var messages = this.refs.itemlist.children;
         for (var i = messages.length-1; i >= 0; --i) {
             var m = messages[i];
+            if (m.dataset.containedScrollTokens &&
+                m.dataset.containedScrollTokens.indexOf(scrollToken) !== -1) {
+                node = m;
+                break;
+            }
             if (!m.dataset.scrollToken) continue;
             if (m.dataset.scrollToken == scrollToken) {
                 node = m;
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 63bd2a7c39..a24e19577d 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -369,6 +369,7 @@ module.exports = React.createClass({
 
     render: function() {
         const eventsToRender = this.props.events;
+        const eventIds = eventsToRender.map(e => e.getId());
         const fewEvents = eventsToRender.length < this.props.threshold;
         const expanded = this.state.expanded || fewEvents;
 
@@ -379,7 +380,7 @@ module.exports = React.createClass({
 
         if (fewEvents) {
             return (
-                <div className="mx_MemberEventListSummary">
+                <div className="mx_MemberEventListSummary" data-contained-scroll-tokens={eventIds}>
                     {expandedEvents}
                 </div>
             );
@@ -437,7 +438,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberEventListSummary">
+            <div className="mx_MemberEventListSummary" data-contained-scroll-tokens={eventIds}>
                 {toggleButton}
                 {summaryContainer}
                 {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}