fix(participants): bcc field displays properly

Can also select text by clicking on the participant

internal_packages/message-list/lib/message-participants.cjsx

@@ -20,11 +20,11 @@ MessageParticipants = React.createClass
       <span className="participant-name from-contact">{@_shortNames(@props.from)}</span>
       <span className="participant-label to-label">&nbsp;>&nbsp;</span>
       <span className="participant-name to-contact">{@_shortNames(@props.to)}</span>
-      <span style={if @props.cc.length > 0 then display:"inline" else display:"none"}>
+      <span style={if @props.cc?.length > 0 then display:"inline" else display:"none"}>
         <span className="participant-label cc-label">Cc:&nbsp;</span>
         <span className="participant-name cc-contact">{@_shortNames(@props.cc)}</span>
       </span>
-      <span style={if @props.bcc.length > 0 then display:"inline" else display:"none"}>
+      <span style={if @props.bcc?.length > 0 then display:"inline" else display:"none"}>
         <span className="participant-label bcc-label">Bcc:&nbsp;</span>
         <span className="participant-name cc-contact">{@_shortNames(@props.bcc)}</span>
       </span>
@@ -43,13 +43,13 @@ MessageParticipants = React.createClass
       </div>
 
       <div className="participant-type"
-           style={if @props.cc.length > 0 then display:"block" else display:"none"}>
+           style={if @props.cc?.length > 0 then display:"block" else display:"none"}>
         <div className="participant-label cc-label">Cc:&nbsp;</div>
         <div className="participant-name cc-contact">{@_fullContact(@props.cc)}</div>
       </div>
 
       <div className="participant-type"
-           style={if @props.bcc.length > 0 then display:"block" else display:"none"}>
+           style={if @props.bcc?.length > 0 then display:"block" else display:"none"}>
         <div className="participant-label bcc-label">Bcc:&nbsp;</div>
         <div className="participant-name cc-contact">{@_fullContact(@props.bcc)}</div>
       </div>
@@ -59,14 +59,43 @@ MessageParticipants = React.createClass
     _.map(contacts, (c) -> c.displayFirstName()).join(", ")
 
   _fullContact: (contacts=[]) ->
-    _.map(contacts, (c) ->
-      if c.name?.length > 0 and c.name isnt c.email
-        <div key={c.email} className="participant">
-          <span className="participant-primary">{c.name}</span>&nbsp;
-          <span className="participant-secondary"><{c.email}></span>
-        </div>
-      else
-        <div key={c.email} className="participant">
-          <span className="participant-primary">{c.email}</span>
-        </div>
-    )
+    if contacts.length is 0
+      # This is necessary to make the floats work properly
+      <div>&nbsp;</div>
+    else
+      _.map(contacts, (c, i) =>
+        if contacts.length is 1 then comma = ""
+        else if i is contacts.length-1 then comma = ""
+        else comma = ","
+
+        if c.name?.length > 0 and c.name isnt c.email
+          <div key={c.email} className="participant">
+            <span className="participant-primary" onClick={@_selectPlainText}>{c.name}</span>&nbsp;
+            <span className="participant-secondary" onClick={@_selectBracketedText}><{c.email}>{comma}</span>&nbsp;
+          </div>
+        else
+          <div key={c.email} className="participant">
+            <span className="participant-primary" onClick={@_selectCommaText}>{c.email}{comma}</span>&nbsp;
+          </div>
+      )
+
+  _selectPlainText: (e) ->
+    textNode = e.currentTarget.childNodes[0]
+    @_selectText(textNode)
+
+  _selectCommaText: (e) ->
+    textNode = e.currentTarget.childNodes[0].childNodes[0]
+    @_selectText(textNode)
+
+  _selectBracketedText: (e) ->
+    textNode = e.currentTarget.childNodes[1].childNodes[0] # because of React rendering
+    @_selectText(textNode)
+
+  _selectText: (textNode) ->
+    range = document.createRange()
+    range.setStart(textNode, 0)
+    range.setEnd(textNode, textNode.length)
+    selection = document.getSelection()
+    selection.removeAllRanges()
+    selection.addRange(range)
+

internal_packages/message-list/spec/message-participants-spec.cjsx

@@ -90,7 +90,7 @@ describe "MessageParticipants", ->
 
     it "uses full names", ->
       to = ReactTestUtils.findRenderedDOMComponentWithClass(@participants, "to-contact")
-      expect(to.getDOMNode().innerText).toEqual "User Two <user2@nilas.com>"
+      expect(to.getDOMNode().innerText.trim()).toEqual "User Two <user2@nilas.com>"
 
 
   # TODO: We no longer display "to everyone"

internal_packages/message-list/stylesheets/message-list.less

@@ -166,6 +166,11 @@
     position: relative;
     padding-right: 1.2em;
 
+    .participant {
+      display: inline-block;
+      margin-right: 0.5em;
+    }
+
     .participant-type {
       margin-top: 0.5em;
       &:first-child {margin-top: 0;}