From 05681ce35b1aab8293adf385bd76b5ee841946a2 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Tue, 19 Jan 2016 19:01:47 -0800
Subject: [PATCH] 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                   |  7 +++----
 js/views/key_verification_view.js | 10 +++-------
 stylesheets/_conversation.scss    |  9 +++++----
 stylesheets/manifest.css          |  8 ++++----
 4 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/background.html b/background.html
index fbe456ae..3d9ff300 100644
--- a/background.html
+++ b/background.html
@@ -217,12 +217,11 @@
     </div>
     <div class='container'>
       <p> {{theirIdentity}} </p>
-      <div class='key placeholder'>
-        {{ #their_key_unknown }} <span>{{ their_key_unknown }}</span>{{ /their_key_unknown }}
-      </div>
+      {{ ^their_key }}
+        <div class='placeholder'>{{ their_key_unknown }}</div>
+      {{ /their_key }}
       <div class='key'>
         {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
-
       </div>
       <p> {{yourIdentity}} </p>
       <div class='key'>
diff --git a/js/views/key_verification_view.js b/js/views/key_verification_view.js
index 0f38dba4..8e145a4b 100644
--- a/js/views/key_verification_view.js
+++ b/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;
         }
     });
 })();
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ee834982..87c73faf 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -49,13 +49,14 @@
   p {
     padding: 1em;
   }
-  .key {
-    font-family: monospace;
+  .key, .placeholder {
     padding: 0 1em;
     -webkit-user-select: text;
   }
-  .key.placeholder {
-    font-family: inherit;
+  .key {
+    font-family: monospace;
+  }
+  .placeholder {
     font-weight: bold;
   }
   .container {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 44f992e6..0c89b8eb 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -616,12 +616,12 @@ input.search {
   background: white; }
   .key-verification p {
     padding: 1em; }
-  .key-verification .key {
-    font-family: monospace;
+  .key-verification .key, .key-verification .placeholder {
     padding: 0 1em;
     -webkit-user-select: text; }
-  .key-verification .key.placeholder {
-    font-family: inherit;
+  .key-verification .key {
+    font-family: monospace; }
+  .key-verification .placeholder {
     font-weight: bold; }
   .key-verification .container {
     height: calc(100% - (36px + 5px + 1px + 4px)); }