Clean-up key tester.

remoting/tools/javascript_key_tester/main.css

Index: remoting/tools/javascript_key_tester/main.css
diff --git a/remoting/tools/javascript_key_tester/main.css b/remoting/tools/javascript_key_tester/main.css
index 8010f619b543947c9fe481b25d321dbfd7272eb2..0c6f4e5ac49f9bca8625bc49e968a8d287c179b2 100644
--- a/remoting/tools/javascript_key_tester/main.css
+++ b/remoting/tools/javascript_key_tester/main.css
@@ -12,44 +12,44 @@ html {
   height: 100%;
 }
 
-#pnacl-plugin {
-  background-color: gray;
-  border: 1px solid
-}
-
-#pnacl-plugin:focus {
-  background-color: yellow;
-}
-
 .summary-log-container {
   width: 50%;
-  height: 50vh;
+  height: 100%;
   overflow-y: auto;
   float: left;
 }
 
-.text-log-container {
-  width: 100%;
-  max-height: 25vh;
-  overflow-y: auto;
-  float: left;
+#text-log-container {
+  position: fixed;
+  top: 32px;
+  left: 16px;
+  right: 16px;
+  bottom: 32px;
+  border: 1px solid gray;
+  box-shadow: 0px 4px 10px 4px rgba(0,0,0,0.3);
+  background-color: white;
+  overflow: scroll;
 }
 
-.char-event,
-.key-down,
-.key-up {
+#text-log {
+  padding: 8px;
+}
+
+.selectable {
+  -webkit-user-select: text;
+  cursor: text;
+}
+
+.key-div {
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.3);
   padding: 2px;
   margin-right: 2px;
+  display: inline-block;
 }
 
 .char-event {
-  background-color: yellow;
-}
-
-.char-event::before {
-  content: "char:";
+  background-color: #DDF;
 }
 
 .key-up {
@@ -57,7 +57,7 @@ html {
 }
 
 .key-up::before {
-  content: "-";
+  content: "\2011";  /** non-breaking hyphen */
 }
 
 .key-down {
@@ -93,3 +93,9 @@ html {
   content: " \2716";  /* cross */
   color: red;
 }
+
+.controls {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}