Don't render placeholder markup unless necessary

Rather than always rendering divs for the key and placeholder, render
the placeholder only if the key is missing.

// FREEBIE

background.html

@@ -217,12 +217,11 @@
     </div>
     <div class='container'>
       <p> {{theirIdentity}} </p>
-      <div class='key placeholder'>
+      {{ ^their_key }}
-        {{ #their_key_unknown }} <span>{{ their_key_unknown }}</span>{{ /their_key_unknown }}
+        <div class='placeholder'>{{ their_key_unknown }}</div>
-      </div>
+      {{ /their_key }}
       <div class='key'>
         {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
-
       </div>
       <p> {{yourIdentity}} </p>
       <div class='key'>

js/views/key_verification_view.js

@@ -25,18 +25,14 @@
             return octets;
         },
         render_attributes: function() {
-            var attributes = {
+            return {
                 verifyIdentity: i18n('verifyIdentity'),
                 yourIdentity: i18n('yourIdentity'),
                 theirIdentity: i18n('theirIdentity'),
+                their_key_unknown: i18n('theirIdentityUnknown'),
                 your_key: this.splitKey(this.model.your_key),
+                their_key: this.splitKey(this.model.their_key)
             };
-            if(this.model.their_key) {
-                attributes.their_key = this.splitKey(this.model.their_key);
-            } else {
-                attributes.their_key_unknown = i18n('theirIdentityUnknown');
-            }
-            return attributes;
         }
     });
 })();

stylesheets/_conversation.scss

@@ -49,13 +49,14 @@
   p {
     padding: 1em;
   }
-  .key {
+  .key, .placeholder {
-    font-family: monospace;
     padding: 0 1em;
     -webkit-user-select: text;
   }
-  .key.placeholder {
+  .key {
-    font-family: inherit;
+    font-family: monospace;
+  }
+  .placeholder {
     font-weight: bold;
   }
   .container {

stylesheets/manifest.css

@@ -616,12 +616,12 @@ input.search {
   background: white; }
   .key-verification p {
     padding: 1em; }
-  .key-verification .key {
+  .key-verification .key, .key-verification .placeholder {
-    font-family: monospace;
     padding: 0 1em;
     -webkit-user-select: text; }
-  .key-verification .key.placeholder {
+  .key-verification .key {
-    font-family: inherit;
+    font-family: monospace; }
+  .key-verification .placeholder {
     font-weight: bold; }
   .key-verification .container {
     height: calc(100% - (36px + 5px + 1px + 4px)); }