Correct logic for matching a new comment to its thread in a group

When a new comment is being added to a line, Gerrit checks to see if
there is an existing thread on the same line (and same range, if any) so
that the comment can be appended to it if so. Otherwise, a new thread is
created.

However, following I4f7804ac02, the logic to identify the appropriate
thread by range was refactored to not use range location strings, but
use range objects instead. Problematically, there were two flaws in this
code:
1)  The range object references were compared rather than their values.
2)  Only new threads were being rendered with their corresponding ranges
    whereas existing threads were not.

As a result, if the user attempted to add a line comment on a line with
an existing ranged comment, the ranged comment's thread would be
identified as the destination (because the new comment has no range and
the existing thread's range was not being set). Appending the range-less
comment to a ranged thread resulted in incoherent data and the draft
would be unsavable.

With this change, the logic uses value equality to match ranges and the
`gr-diff-comment-thread-group#_getThreads` method is updated to set the
range on existing threads.

Bug: Issue 8410
Change-Id: If34e0d46a5c1af81bec82125217088fb574a2f61

polygerrit-ui/app/elements/diff/gr-diff-comment-thread-group/gr-diff-comment-thread-group.js

@@ -76,18 +76,35 @@
      * @return {!Object|undefined}
      */
     getThread(opt_range) {
-      const threads = [].filter.call(
-          Polymer.dom(this.root).querySelectorAll('gr-diff-comment-thread'),
-          thread => {
-            return thread.range === opt_range;
-          });
+      const threadEls =
+          Polymer.dom(this.root).querySelectorAll('gr-diff-comment-thread');
+      const threads = [].filter.call(threadEls,
+          thread => this._rangesEqual(thread.range, opt_range));
       if (threads.length === 1) {
         return threads[0];
       }
     },
 
+    /**
+     * Compare two ranges. Either argument may be falsy, but will only return
+     * true if both are falsy or if neither are falsy and have the same position
+     * values.
+     *
+     * @param {Object=} a range 1
+     * @param {Object=} b range 2
+     * @return {boolean}
+     */
+    _rangesEqual(a, b) {
+      if (!a && !b) { return true; }
+      if (!a || !b) { return false; }
+      return a.startLine === b.startLine &&
+          a.startChar === b.startChar &&
+          a.endLine === b.endLine &&
+          a.endChar === b.endChar;
+    },
+
     _commentsChanged() {
-      this._threads = this._getThreadGroups(this.comments);
+      this._threads = this._getThreads(this.comments);
     },
 
     _sortByDate(threadGroups) {
@@ -124,7 +141,7 @@
       return comment.patchNum || this.patchForNewThreads;
     },
 
-    _getThreadGroups(comments) {
+    _getThreads(comments) {
       const sortedComments = comments.slice(0).sort((a, b) =>
           util.parseDate(a.updated) - util.parseDate(b.updated));
 
@@ -142,13 +159,17 @@
         }
 
         // Otherwise, this comment starts its own thread.
-        threads.push({
+        const newThread = {
           start_datetime: comment.updated,
           comments: [comment],
           commentSide: comment.__commentSide,
           patchNum: this._getPatchNum(comment),
           rootId: comment.id,
-        });
+        };
+        if (comment.range) {
+          newThread.range = Object.assign({}, comment.range);
+        }
+        threads.push(newThread);
       }
       return threads;
     },

polygerrit-ui/app/elements/diff/gr-diff-comment-thread-group/gr-diff-comment-thread-group_test.html

@@ -50,7 +50,7 @@ limitations under the License.
       sandbox.restore();
     });
 
-    test('_getThreadGroups', () => {
+    test('_getThreads', () => {
       element.patchForNewThreads = 3;
       const comments = [
         {
@@ -88,8 +88,7 @@ limitations under the License.
         },
       ];
 
-      assert.deepEqual(element._getThreadGroups(comments),
-          expectedThreadGroups);
+      assert.deepEqual(element._getThreads(comments), expectedThreadGroups);
 
       // Patch num should get inherited from comment rather
       comments.push({
@@ -141,11 +140,16 @@ limitations under the License.
           }],
           patchNum: 3,
           rootId: 'betsys_confession',
+          range: {
+            start_line: 1,
+            start_character: 1,
+            end_line: 1,
+            end_character: 2,
+          },
         },
       ];
 
-      assert.deepEqual(element._getThreadGroups(comments),
-          expectedThreadGroups);
+      assert.deepEqual(element._getThreads(comments), expectedThreadGroups);
     });
 
     test('multiple comments at same location but not threaded', () => {
@@ -163,7 +167,7 @@ limitations under the License.
           __commentSide: 'left',
         },
       ];
-      assert.equal(element._getThreadGroups(comments).length, 2);
+      assert.equal(element._getThreads(comments).length, 2);
     });
 
     test('_sortByDate', () => {
@@ -277,5 +281,23 @@ limitations under the License.
       flushAsynchronousOperations();
       assert(element._threads.length, 1);
     });
+
+    test('_rangesEqual', () => {
+      const range1 =
+          {startLine: 123, startChar: 345, endLine: 234, endChar: 456};
+      const range2 =
+          {startLine: 1, startChar: 2, endLine: 3, endChar: 4};
+
+      assert.isTrue(element._rangesEqual(null, null));
+      assert.isTrue(element._rangesEqual(null, undefined));
+      assert.isTrue(element._rangesEqual(undefined, null));
+      assert.isTrue(element._rangesEqual(undefined, undefined));
+
+      assert.isFalse(element._rangesEqual(range1, null));
+      assert.isFalse(element._rangesEqual(null, range1));
+      assert.isFalse(element._rangesEqual(range1, range2));
+
+      assert.isTrue(element._rangesEqual(range1, Object.assign({}, range1)));
+    });
   });
 </script>

polygerrit-ui/app/elements/diff/gr-diff-comment-thread/gr-diff-comment-thread.js

@@ -32,7 +32,7 @@
         type: Array,
         value() { return []; },
       },
-      locationRange: String,
+      range: Object,
       keyEventTarget: {
         type: Object,
         value() { return document.body; },