A few fixes for the contact detail screen (#2374)

* Only show 'send message' on contact detail when user has account

* Make contact detail headers visible in dark mode

* Fix vertical scrolling for very large contact in detail pane

* Fix a couple comment typos

_locales/en/messages.json

@@ -751,7 +751,7 @@
     },
     "notificationMostRecent": {
         "message": "Most recent:",
-        "description": "Displayed in notifications when setting is 'name and message' and "
+        "description": "Displayed in notifications when setting is 'name and message' and more than one message is waiting"
     },
     "messageNotSent": {
         "message": "Message not sent.",

js/views/conversation_view.js

@@ -1007,19 +1007,20 @@
       this.listenBack(view);
     },
 
-    showContactDetail(contact) {
+    showContactDetail({ contact, hasSignalAccount }) {
       const regionCode = storage.get('regionCode');
       const { contactSelector } = Signal.Types.Contact;
       const { getAbsoluteAttachmentPath } = window.Signal.Migrations;
 
       const view = new Whisper.ReactWrapperView({
         Component: Signal.Components.ContactDetail,
+        className: 'contact-detail-pane panel',
         props: {
           contact: contactSelector(contact, {
             regionCode,
             getAbsoluteAttachmentPath,
           }),
-          hasSignalAccount: true,
+          hasSignalAccount,
           onSendMessage: () => {
             const number =
               contact.number && contact.number[0] && contact.number[0].value;

js/views/message_view.js

@@ -457,15 +457,27 @@
         contact.number && contact.number[0] && contact.number[0].value;
       const haveConversation =
         number && Boolean(window.ConversationController.get(number));
-      const hasLocalSignalAccount = number && haveConversation;
+      const hasLocalSignalAccount =
+        this.contactHasSignalAccount || (number && haveConversation);
+
+      // We store this value on this. because a re-render shouldn't kick off another
+      //   profile check, going to the web.
+      this.contactHasSignalAccount = hasLocalSignalAccount;
 
       const onSendMessage = number
         ? () => {
             this.model.trigger('open-conversation', number);
           }
         : null;
-      const onOpenContact = () => {
+      const onOpenContact = async () => {
-        this.model.trigger('show-contact-detail', contact);
+        // First let's finish our check with the central server to see if this user has
+        //   a signal account. Then we won't have to do it a second time for the detail
+        //   screen.
+        await this.checkingProfile;
+        this.model.trigger('show-contact-detail', {
+          contact,
+          hasSignalAccount: this.contactHasSignalAccount,
+        });
       };
 
       const getProps = ({ hasSignalAccount }) => ({
@@ -496,18 +508,21 @@
       // If we can't verify a signal account locally, we'll go to the Signal Server.
       if (number && !hasLocalSignalAccount) {
         // eslint-disable-next-line more/no-then
-        window.textsecure.messaging
+        this.checkingProfile = window.textsecure.messaging
           .getProfile(number)
           .then(() => {
+            this.contactHasSignalAccount = true;
+
             if (!this.contactView) {
               return;
             }
-
             this.contactView.update(getProps({ hasSignalAccount: true }));
           })
           .catch(() => {
             // No account available, or network connectivity problem
           });
+      } else {
+        this.checkingProfile = Promise.resolve();
       }
     },
     isImageWithoutCaption() {

stylesheets/_conversation.scss

@@ -862,6 +862,10 @@ span.status {
   margin-top: -2px;
 }
 
+.contact-detail-pane {
+  overflow-y: scroll;
+}
+
 .contact-detail {
   text-align: center;
   max-width: 300px;

stylesheets/android-dark.scss

@@ -284,6 +284,12 @@ $text-dark_l2: darken($text-dark, 30%);
     }
   }
 
+  .contact-detail {
+    .additional-contact .type {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
   .outgoing .quoted-message {
     background: rgba(255, 255, 255, 0.38);