Reflect lineNum, side and range to attributes

This is a prerequisite for making the thread widget configurable:
When the thread elements will be created outside of gr-diff and passed
in (to allow different callers using different widgets), we need some
way by which gr-diff can tell where to place these widgets. The plan is
to use these attributes to do that, and require all comment thread
elements passed in via slotting to have these set.

Change-Id: I91162ca2237934c53e6eaba37327e60f1142dfbc

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

@@ -35,18 +35,47 @@
      * @event thread-changed
      */
 
+     /**
+      * gr-diff-comment-thread exposes the following attributes that allow a
+      * diff widget like gr-diff to show the thread in the right location:
+      *
+      * line-num:
+      *     1-based line number or undefined if it refers to the entire file.
+      *
+      * comment-side:
+      *     "left" or "right". These indicate which of the two diffed versions
+      *     the comment relates to. In the case of unified diff, the left
+      *     version is the one whose line number column is further to the left.
+      *
+      * range:
+      *     The range of text that the comment refers to (startLine, startChar,
+      *     endLine, endChar), serialized as JSON. If set, range's startLine
+      *     will have the same value as line-num. Line numbers are 1-based,
+      *     char numbers are 0-based. The start position (startLine, startChar)
+      *     is inclusive, and the end position (endLine, endChar) is exclusive.
+      */
     properties: {
       changeNum: String,
       comments: {
         type: Array,
         value() { return []; },
       },
-      range: Object,
+      /**
+       * @type {?{startLine: number, startChar: number, endLine: number,
+       *          endChar: number}}
+       */
+      range: {
+        type: Object,
+        reflectToAttribute: true,
+      },
       keyEventTarget: {
         type: Object,
         value() { return document.body; },
       },
-      commentSide: String,
+      commentSide: {
+        type: String,
+        reflectToAttribute: true,
+      },
       patchNum: String,
       path: String,
       projectName: {
@@ -79,8 +108,11 @@
         type: Boolean,
         value: false,
       },
-      /** Necessary only if showFilePath is true */
-      lineNum: Number,
+      /** Necessary only if showFilePath is true or when used with gr-diff */
+      lineNum: {
+        type: Number,
+        reflectToAttribute: true,
+      },
       unresolved: {
         type: Boolean,
         notify: true,

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

@@ -714,5 +714,28 @@ limitations under the License.
       assert.equal(element._orderedComments[1].id, '2');
       assert.equal(element._orderedComments[2].id, '3');
     });
+
+    test('reflects lineNum and commentSide to attributes', () => {
+      element.lineNum = 7;
+      element.commentSide = 'left';
+
+      assert.equal(element.getAttribute('line-num'), '7');
+      assert.equal(element.getAttribute('comment-side'), 'left');
+    });
+
+    test('reflects range to JSON serialized attribute if set', () => {
+      element.range = {startLine: 4, endLine: 5, startChar: 6, endChar: 7};
+
+      assert.deepEqual(
+          JSON.parse(element.getAttribute('range')),
+          {startLine: 4, endLine: 5, startChar: 6, endChar: 7});
+    });
+
+    test('removes range attribute if range is unset', () => {
+      element.range = {startLine: 4, endLine: 5, startChar: 6, endChar: 7};
+      element.range = undefined;
+
+      assert.notOk(element.hasAttribute('range'));
+    });
   });
 </script>