RN: Style Tweaks to Chrome Debugger UI

packager/debugger.html

@@ -23,7 +23,7 @@ window.localStorage.removeItem('sessionID');
 window.onbeforeunload = function() {
   if (sessionID) {
     return 'If you reload this page, it is going to break the debugging session. ' +
-      'You should ⌘+R in the iOS simulator to reload.';
+      'You should press ⌘R in simulator to reload.';
   }
 };
 
@@ -76,10 +76,10 @@ function connectToDebuggerProxy() {
 
   ws.onopen = function() {
     if (sessionID) {
-      setStatus('Debugger session #' + sessionID + ' active');
+      setStatus('Debugger session #' + sessionID + ' active.');
       ws.send(JSON.stringify({replyID: parseInt(sessionID, 10)}));
     } else {
-      setStatus('Waiting, press ⌘R in simulator to reload and connect');
+      setStatus('Waiting, press <span class="shortcut">⌘R</span> in simulator to reload and connect.');
     }
   };
 
@@ -126,7 +126,8 @@ function loadScript(src, callback) {
     font-weight: 200;
   }
   .shortcut {
-    font-family: monospace;
+    font-family: "Monaco", monospace;
+    font-size: medium;
     color: #eee;
     background-color: #333;
     padding: 4px;
@@ -175,10 +176,10 @@ function loadScript(src, callback) {
   </div>
   <div class="content">
     <p>
-      React Native JS code runs inside this Chrome tab
+      React Native JS code runs inside this Chrome tab.
     </p>
     <p>Press <span class="shortcut">⌘⌥J</span> to open Developer Tools. Enable <a href="http://stackoverflow.com/a/17324511/232122" target="_blank">Pause On Caught Exceptions</a> for a better debugging experience.</p>
-    <p>Status: <span id="status">Loading</span></p>
+    <p>Status: <span id="status">Loading...</span></p>
   </div>
 </body>
 </html>