Linkify comments in the change view

+ Fix issue where the proper Shady DOM helper was not being
  used to add the anchors to the DOM [1].

[1]: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

Bug: Issue 3839
Change-Id: Ia2cc41d9b5eb96491dbe8380be53a4fba4c17388

polygerrit-ui/app/elements/gr-change-view.html

@@ -256,7 +256,8 @@ limitations under the License.
       <gr-messages-list id="messageList"
           change-num="[[_changeNum]]"
           messages="[[_change.messages]]"
-          comments="[[_comments]]"></gr-messages-list>
+          comments="[[_comments]]"
+          project-config="[[_projectConfig]]"></gr-messages-list>
     </div>
   </template>
   <script>

polygerrit-ui/app/elements/gr-linked-text.html

@@ -20,12 +20,20 @@ limitations under the License.
 <dom-module id="gr-linked-text">
   <template>
     <style>
-      :host([pre]) div {
+      :host {
+        display: block;
+      }
+      :host([pre]) span {
         white-space: pre-wrap;
         word-wrap: break-word;
       }
+      :host([disabled]) a {
+        color: inherit;
+        text-decoration: none;
+        pointer-events: none;
+      }
     </style>
-    <div id="output"></div>
+    <span id="output"></span>
   </template>
   <script>
     'use strict';
@@ -38,6 +46,16 @@ limitations under the License.
           type: String,
           observer: '_contentChanged',
         },
+        pre: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+        disabled: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
         config: Object,
       },
 
@@ -54,7 +72,7 @@ limitations under the License.
       },
 
       _contentOrConfigChanged: function(content, config) {
-        var output = this.$.output;
+        var output = Polymer.dom(this.$.output);
         output.textContent = '';
         var parser = new GrLinkTextParser(config, function(text, href, html) {
           if (href) {

polygerrit-ui/app/elements/gr-message.html

@@ -18,6 +18,7 @@ limitations under the License.
 <link rel="import" href="gr-account-link.html">
 <link rel="import" href="gr-comment-list.html">
 <link rel="import" href="gr-date-formatter.html">
+<link rel="import" href="gr-linked-text.html">
 
 <dom-module id="gr-message">
   <template>
@@ -80,10 +81,6 @@ limitations under the License.
       .expanded .name {
         cursor: pointer;
       }
-      .expanded .message {
-        white-space: pre-wrap;
-        word-wrap: break-word;
-      }
       .date {
         color: #666;
         position: absolute;
@@ -96,7 +93,11 @@ limitations under the License.
       <div class="contentContainer">
         <div class="name" id="name">[[message.author.name]]</div>
         <div class="content">
-          <div class="message">[[message.message]]</div>
+          <gr-linked-text class="message"
+              pre="[[expanded]]"
+              content="[[message.message]]"
+              disabled="[[!expanded]]"
+              config="[[projectConfig.commentlinks]]"></gr-linked-text>
           <gr-comment-list
               comments="[[comments]]"
               change-num="[[changeNum]]"
@@ -142,6 +143,7 @@ limitations under the License.
           type: Boolean,
           value: false,
         },
+        projectConfig: Object,
       },
 
       ready: function() {

polygerrit-ui/app/elements/gr-messages-list.html

@@ -43,6 +43,7 @@ limitations under the License.
       <gr-message change-num="[[changeNum]]"
                   message="[[message]]"
                   comments="[[_computeCommentsForMessage(comments, message, index)]]"
+                  project-config="[[projectConfig]]"
                   on-scroll-to="_handleScrollTo"
                   data-message-id$="[[message.id]]"></gr-message>
     </template>
@@ -61,6 +62,7 @@ limitations under the License.
           value: function() { return []; },
         },
         comments: Object,
+        projectConfig: Object,
         topMargin: Number,
       },
 

polygerrit-ui/app/test/gr-linked-text-test.html

@@ -126,15 +126,17 @@ limitations under the License.
 
     test('html field in link config', function() {
       element.content = 'google:do a barrel roll';
-      assert.equal(element.$.output.innerHTML,
-          '<a href="https://google.com/search?q=do a barrel roll">' +
-              'do a barrel roll</a>');
+      var linkEl = element.$.output.childNodes[0];
+      assert.equal(linkEl.href,
+          'https://google.com/search?q=do%20a%20barrel%20roll');
+      assert.equal(linkEl.textContent, 'do a barrel roll');
     });
 
     test('removing hash from links', function() {
       element.content = 'hash:foo';
-      assert.equal(element.$.output.innerHTML,
-          '<a href="/awesomesauce">foo</a>');
+      var linkEl = element.$.output.childNodes[0];
+      assert.isTrue(linkEl.href.endsWith('/awesomesauce'));
+      assert.equal(linkEl.textContent, 'foo');
     });
 
     test('disabled config', function() {