Hide divs until initialised to avoid flashing uninitialised state.

BUG=
TEST=Load the page in a debug build or on a slow computer. The page internals (specifically the access code) should not be visible even momentarily until the correct point in the UX flow.

Review URL: http://codereview.chromium.org/7111040

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@88036 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 23 insertions, 2 deletions

diff --git a/remoting/webapp/me2mom/choice.css b/remoting/webapp/me2mom/choice.css
index d9487b7..82e4bab 100644
--- a/remoting/webapp/me2mom/choice.css
+++ b/remoting/webapp/me2mom/choice.css
@@ -123,6 +123,10 @@ section {
   */
 }
 
+.hidden {
+  display: none;
+}
+
 /* Ids */
 #auth-panel {
   border-bottom: 2px solid gray;
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index c2e8ebe..e53b8f2 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -49,7 +49,7 @@ found in the LICENSE file.
 
     </div> <!-- auth-panel -->
 
-    <div id="main-panel">
+    <div id="main-panel" class="hidden">
       <header>
         <img id="icon" src="chromoting128.png">
         <h1 class="icon-label host-element display-inline">
@@ -187,6 +187,11 @@ found in the LICENSE file.
         </div> <!-- host-footer -->
       </footer>
     </div> <!-- main-panel -->
+
+    <div id="loading-panel">
+      <em>Loading&hellip;</em>
+    </div>
+
     <div id="plugin-wrapper">
     </div>
   </body>
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index fb254f0..0640d73 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -19,7 +19,17 @@ remoting.HOST_PLUGIN_ID = 'host-plugin-id';
 window.addEventListener("load", init_, false);
 
 function hasClass(element, cls) {
-  return element.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
+  return element.className.match(new RegExp('\\b' + cls + '\\b'));
+}
+
+function addClass(element, cls) {
+  if (!hasClass(element, cls))
+    element.className = element.className + ' ' + cls;
+}
+
+function removeClass(element, cls) {
+  element.className =
+      element.className.replace(new RegExp('\\b' + cls + '\\b', 'g'), '');
 }
 
 function showElement(element, visible) {
@@ -127,6 +137,8 @@ function init_() {
   setHostMode('unshared');
   setClientMode('unconnected');
   setGlobalMode(remoting.getItem('startup-mode', remoting.HOST_MODE));
+  addClass(document.getElementById('loading-panel'), 'hidden');
+  removeClass(document.getElementById('main-panel'), 'hidden');
 }
 
 function setGlobalMode(mode) {