Move thread element creation out of group

Change-Id: Ifdbd9a948c73906880d3987269c1dcc24e49c4c0
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js
index 1299def..b6524ec 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host.js
@@ -456,8 +456,10 @@
 
     /** @param {CustomEvent} e */
     _handleCreateComment(e) {
-      const {threadGroupEl, lineNum, side, range} = e.detail;
-      const threadEl = this._getOrCreateThread(threadGroupEl, side, range);
+      const {threadGroupEl, lineNum, side, range, isOnParent,
+          patchForNewThreads} = e.detail;
+      const threadEl = this._getOrCreateThread(threadGroupEl, side, range,
+          isOnParent, patchForNewThreads);
       threadEl.addOrEditDraft(lineNum, range);
       this.$.reporting.recordDraftInteraction();
     },
@@ -466,18 +468,27 @@
      * Gets or creates a comment thread from a specific thread group.
      * May include a range, if the comment is a range comment.
      *
-     * @param {!Object} threadGroupEl
+     * @param {!Node} threadGroupEl
      * @param {string} commentSide
-     * @param {!Object=} range
+     * @param {?Object} range
+     * @param {boolean} isOnParent
+     * @param {string} patchForNewThreads
      * @return {!Object}
      */
-    _getOrCreateThread(threadGroupEl, commentSide, range=undefined) {
+    _getOrCreateThread(threadGroupEl, commentSide, range, isOnParent,
+        patchForNewThreads) {
       let threadEl = threadGroupEl.getThreadEl(commentSide, range);
 
       if (!threadEl) {
-        threadGroupEl.addNewThread(commentSide, range);
-        Polymer.dom.flush();
-        threadEl = threadGroupEl.getThreadEl(commentSide, range);
+        threadEl = Gerrit.createThreadElement(
+            {
+              comments: [],
+              commentSide,
+              patchNum: patchForNewThreads,
+              range,
+            }, isOnParent, this._parentIndex, this.changeNum,
+            this.path, this.projectName);
+        Polymer.dom(threadGroupEl).appendChild(threadEl);
       }
       return threadEl;
     },
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.html b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.html
index 24afe87..7117574 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-host/gr-diff-host_test.html
@@ -777,7 +777,17 @@
       const commentSide = 'left';
 
       assert.isOk(element._getOrCreateThread(threadGroupEl,
-          commentSide));
+          commentSide, undefined, false, '2'));
+
+      let threads = Polymer.dom(threadGroupEl)
+          .queryDistributedElements('gr-diff-comment-thread');
+
+      assert.equal(threads.length, 1);
+      assert.equal(threads[0].commentSide, commentSide);
+      assert.equal(threads[0].range, undefined);
+      assert.equal(threads[0].isOnParent, false);
+      assert.equal(threads[0].patchNum, 2);
+
 
       // Try to fetch a thread with a different range.
       range = {
@@ -788,10 +798,16 @@
       };
 
       assert.isOk(element._getOrCreateThread(
-          threadGroupEl, commentSide, range));
-      const threadCount = Polymer.dom(threadGroupEl.root).
-            querySelectorAll('gr-diff-comment-thread').length;
-      assert.equal(threadCount, 2);
+          threadGroupEl, commentSide, range, true, '3'));
+
+      threads = Polymer.dom(threadGroupEl)
+          .queryDistributedElements('gr-diff-comment-thread');
+
+      assert.equal(threads.length, 2);
+      assert.equal(threads[1].commentSide, commentSide);
+      assert.equal(threads[1].range, range);
+      assert.equal(threads[1].isOnParent, true);
+      assert.equal(threads[1].patchNum, 3);
     });
 
     suite('_translateChunksToIgnore', () => {