Display a loading bar until the NaCl plugin is loaded

index.html

@@ -16,10 +16,6 @@
                 <span class="mdl-layout-title">Moonlight</span>
                 <!-- Add spacer, to align navigation to the right -->
                 <div class="mdl-layout-spacer"></div>
-                <!-- Navigation. We hide it in small screens. -->
-                <ul class='mdl-list'>
-                    <li>Chrome App Status: <code id="statusField">NO-STATUS</code></li>
-                </ul>
             </div>
         </header>
         <main id="main-content" class="mdl-layout__content">
@@ -70,6 +66,10 @@
             <div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
                 <h5 id="loadingMessage"></h5>
             </div>
+
+            <div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
+                <h5 id="naclSpinnerMessage"></h5>
+            </div>
         </main>
     </div>
     <script defer src="static/js/jquery-2.2.0.min.js"></script>

static/css/style.css

@@ -18,6 +18,16 @@
     padding: 20px 24px 24px 24px;
     color: rgba(0,0,0, 0.54); 
 }
+#naclSpinner {
+    display: none;
+    z-index: 2;
+    position: fixed;
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, -50%);
+    margin: 0 auto;
+    text-align: center;
+}
 #loadingSpinner {
     display: none;
     z-index: 1;

static/js/index.js

@@ -6,6 +6,8 @@ var api;
 
 // Called by the common.js module.
 function attachListeners() {
+    changeUiModeForNaClLoad();
+
     $('#selectResolution').on('change', saveResolution);
     $('#selectFramerate').on('change', saveFramerate);
     $('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
@@ -33,6 +35,19 @@ function fullscreenChromeWindow() {
     chrome.app.window.current().fullscreen();
 }
 
+function changeUiModeForNaClLoad() {
+    $("#main-content").children().not("#listener, #naclSpinner").hide();
+
+    $('#naclSpinnerMessage').text('Loading Moonlight plugin...');
+    $('#naclSpinner').css('display', 'inline-block');
+}
+
+function restoreUiAfterNaClLoad() {
+    $("#main-content").children().not("#listener, #naclSpinner, #gameSelection").show();
+    $('#naclSpinner').hide();
+    $('#loadingSpinner').css('display', 'none');
+}
+
 function snackbarLog(givenMessage) {
     console.log(givenMessage);
     var data = {
@@ -63,15 +78,17 @@ function moduleDidLoad() {
             console.log('ERROR: failed to generate new cert!');
             console.log('Returned error was: ' + failedCert);            
         }).then(function (ret) {
-            sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]);
+            sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
+            restoreUiAfterNaClLoad();
         }, function (failedInit) {
             console.log('ERROR: failed httpInit!');
             console.log('Returned error was: ' + failedInit);
         });
+        });
     }
     else {
         sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
-            snackbarLog('Initialization complete.');
+            restoreUiAfterNaClLoad();
         }, function (failedInit) {
             console.log('ERROR: failed httpInit!');
             console.log('Returned error was: ' + failedInit);
@@ -91,16 +108,6 @@ function updateHost() {
     }
 }
 
-// we want the user to progress through the streaming process
-// but to save from the PITA of inter-chrome-app-page JS message passing,
-// I'm opting to do it in a single page, and keep the data around.
-function hideAllWorkflowDivs() {
-    $('#streamSettings').css('display', 'inline-block');
-    $('#hostSettings').css('display', 'inline-block');
-    $('#gameSelection').css('display', 'none');
-    // do NOT hide the nacl module. you can't interact with it then
-}
-
 // pair to the given hostname or IP.  Returns whether pairing was successful.
 function pairTo(host) {
     if(!pairingCert) {
@@ -233,7 +240,7 @@ function showApps() {
 function showAppsMode() {
     console.log("entering show apps mode.");
     $(".mdl-layout__header").show();
-    $("#main-content").children().not("#listener, #loadingSpinner").show();
+    $("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
     $("#main-content").removeClass("fullscreen");
     $("#listener").removeClass("fullscreen");
     $("body").css('backgroundColor', 'white');