Clean-up key tester.

remoting/tools/javascript_key_tester/main.css

 /* Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 body {
   height: calc(100% - 12px);
   overflow: auto;
 }
 
 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 {
   background-color: #DFD;
 }
 
 .key-up::before {
-  content: "-";
+  content: "\2011";  /** non-breaking hyphen */
 }
 
 .key-down {
   background-color: #FDD;
 }
 
 .key-down::before {
   content: "+";
 }
 
@@ skipping 15 matching lines @@
 
 .chord-div.all-keys-released::after {
   content: " \2714";  /* tick */
   color: green;
 }
 
 .chord-div.some-keys-still-pressed::after {
   content: " \2716";  /* cross */
   color: red;
 }
+
+.controls {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}