Added first-run infographic screens for IT2Me and Me2Me.

BUG=120184
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/9903008

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

10 files changed, 149 insertions, 82 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index da11395..02354b7 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -166,6 +166,8 @@
       'resources/chromoting128.png',
       'resources/disclosure_arrow_down.png',
       'resources/disclosure_arrow_right.png',
+      'resources/infographic_my_computers.png',
+      'resources/infographic_remote_assistance.png',
       'resources/tick.png',
     ],
   },
diff --git a/remoting/resources/infographic_my_computers.png b/remoting/resources/infographic_my_computers.png
new file mode 100644
index 0000000..81d4543
--- /dev/null
+++ b/remoting/resources/infographic_my_computers.png
diff --git a/remoting/resources/infographic_remote_assistance.png b/remoting/resources/infographic_remote_assistance.png
new file mode 100644
index 0000000..4c7726a
--- /dev/null
+++ b/remoting/resources/infographic_remote_assistance.png
diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index b309742..ee8791b 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -186,6 +186,10 @@
     "message": "Full screen",
     "description": "Menu option for toggle full-screen mode. Equivalent to using the Wrench menu to do the same thing."
   },
+  "GET_STARTED": {
+    "message": "Get started",
+    "description": "Button displayed underneath explanatory text for app features. Clicking causes the text, infographic and the button itself to be replaced by the actual UI for that feature."
+  },
   "HELP": {
     "message": "Help",
     "description": "Help link, displayed in the top-left (assuming ltr layout) corner of the main screen. Clicking this takes the user to our FAQ."
@@ -242,10 +246,18 @@
     "message": "Once they enter the code your sharing session will begin.",
     "description": "Instructions shown below the access code when it is ready to be conveyed to the client."
   },
+  "IT2ME_FIRST_RUN": {
+    "message": "User-to-user screen sharing—perfect for remote technical support.",
+    "description": "Description of the 'IT2Me' remote support functionality, displayed until the user clicks a 'get started' button, at which point it is replaced by the actual UI for that functionality."
+  },
   "LABEL_CONNECTED": {
     "message": "Connected:",
     "description": "String displayed in front of the host when a connection is active informing the client user who they are connected to."
   },
+  "ME2ME_FIRST_RUN": {
+    "message": "Access your own computer from anywhere.",
+    "description": "Description of the 'Me2Me' remote access functionality, displayed until the user clicks a 'get started' button, at which point it is replaced by the actual UI for that functionality."
+  },
   "MESSAGE_GENERATING": {
     "message": "Generating access code\u2026",
     "description": "Text shown while generating an access code."
diff --git a/remoting/webapp/event_handlers.js b/remoting/webapp/event_handlers.js
index 6df8f0f..a245908 100644
--- a/remoting/webapp/event_handlers.js
+++ b/remoting/webapp/event_handlers.js
@@ -71,7 +71,11 @@ function onLoad() {
         fn: function() { remoting.askPinDialog.showForPin(); } },
       { event: 'click', id: 'stop-daemon', fn: stopDaemon },
       { event: 'submit', id: 'access-code-form', fn: sendAccessCode },
-      { event: 'submit', id: 'pin-form', fn: connectHostWithPin }
+      { event: 'submit', id: 'pin-form', fn: connectHostWithPin },
+      { event: 'click', id: 'get-started-it2me',
+        fn: remoting.showIt2MeUiAndSave },
+      { event: 'click', id: 'get-started-me2me',
+        fn: remoting.showMe2MeUiAndSave }
   ];
 
   for (var i = 0; i < actions.length; ++i) {
diff --git a/remoting/webapp/host_list.js b/remoting/webapp/host_list.js
index c7df0bb..2362d05 100644
--- a/remoting/webapp/host_list.js
+++ b/remoting/webapp/host_list.js
@@ -200,20 +200,6 @@ remoting.HostList.prototype.display = function() {
     l10n.localizeElementFromTag(this.errorDiv_, this.lastError_);
   }
   this.errorDiv_.hidden = (this.lastError_ == '');
-
-  this.showOrHide_(this.hosts_.length != 0 || this.lastError_ != '');
-};
-
-/**
- * Show or hide the host-list UI.
- *
- * @param {boolean} show True to show the UI, or false to hide it.
- * @return {void} Nothing.
- * @private
- */
-remoting.HostList.prototype.showOrHide_ = function(show) {
-  var parent = /** @type {Element} */ (this.table_.parentNode);
-  parent.hidden = !show;
 };
 
 /**
@@ -238,8 +224,6 @@ remoting.HostList.prototype.deleteHost_ = function(hostTableEntry) {
         function() {}, '', headers);
   }
   remoting.oauth2.callWithToken(deleteHost);
-
-  this.showOrHide_(this.hostTableEntries_.length != 0);
 };
 
 /**
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index b5db83f..8c2b153 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -219,6 +219,8 @@ h1.icon-label {
   color: #aaa;
   font-family: "Open sans", "Ariel", sans-serif;
   line-height: 24px;
+  display: inline-block;
+  margin-__MSG_@@bidi_start_edge__: 10px;
 }
 
 h2 {
@@ -255,9 +257,9 @@ section {
   padding: 20px 30px 20px 30px;
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.07);
+  position: relative;
 }
 
-
 .access-code-digit-group {
   /*
     Used for each of the four-digit components of the access code as
@@ -304,15 +306,21 @@ section {
 }
 
 .expiring {
-    color: #900 !important;
+  color: #900 !important;
 }
 
-.icon-label {
-  display: inline-block;
-  vertical-align: top;
-  margin-__MSG_@@bidi_start_edge__: 10px;
+.infographic {
+  position: absolute;
+  right: 22px;
+  top: 24px;
 }
 
+.infographic-description {
+  height: 80px;
+  width: 400px;
+  padding-top: 2em;
+};
+
 .information-box {
   background-color: #f9edbe;
   border: 1px solid #f0c36d;
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 9bc8950..9a3826a 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -86,76 +86,101 @@ found in the LICENSE file.
 
       <section>
         <h2 i18n-content="MODE_IT2ME"></h2>
-        <div>
-          <div class="section-row">
-            <div class="box-spacer">
-              <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
-              <div id="chrome-os-no-share"
-                   i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
-                   class="small-print"></div>
+        <div id="it2me-first-run">
+          <div>
+            <p class="infographic-description"
+               i18n-content="IT2ME_FIRST_RUN"></p>
+            <button id="get-started-it2me" i18n-content="GET_STARTED"></button>
+          </div>
+          <div class="infographic">
+            <img src="infographic_remote_assistance.png">
+          </div>
+        </div>
+        <div id="it2me-content">
+          <div>
+            <div class="section-row">
+              <div class="box-spacer">
+                <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
+                <div id="chrome-os-no-share"
+                     i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
+                     class="small-print"></div>
+              </div>
+              <div>
+                <button id="share-button"
+                        i18n-content="HOME_SHARE_BUTTON"
+                        class="kd-button-share"
+                        type="button">
+                </button>
+              </div>
             </div>
+          </div>
+          <div class="section-row">
+            <div i18n-content="HOME_ACCESS_DESCRIPTION"
+                 class="box-spacer"></div>
             <div>
-              <button id="share-button"
-                      i18n-content="HOME_SHARE_BUTTON"
-                      class="kd-button-share"
+              <button id="access-mode-button"
+                      i18n-content="HOME_ACCESS_BUTTON"
                       type="button">
               </button>
             </div>
           </div>
-        </div>
-        <div class="section-row">
-          <div i18n-content="HOME_ACCESS_DESCRIPTION" class="box-spacer"></div>
-          <div>
-            <button id="access-mode-button"
-                    i18n-content="HOME_ACCESS_BUTTON"
-                    type="button">
-            </button>
-          </div>
-        </div>
+        </div> <!-- it2me-content -->
       </section> <!-- Remote Assistance -->
 
-      <section id="host-list-div" class="host-list-container" hidden>
+      <section id="host-list-div" class="host-list-container">
         <h2 i18n-content="MODE_ME2ME"></h2>
-        <div id="host-list"></div>
-        <div id="host-list-error" class="error-state"></div>
-        <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
-          <table class="host-list-table">
-            <!-- TODO(jamiewalch): Rewrite this using flex boxes and apply the
-                 host-offline style if the daemon is not running -->
-            <tr>
-              <td class="host-list-main-icon">
-                <img src="icon_host.png">
-              </td>
-              <td class="host-list-label">
-                <span id="this-computer-name"
-                      data-daemon-state="enabled">
-                  My computer <!-- Placeholder until daemon mode is finished -->
-                </span>
-                <span i18n-content="HOME_DAEMON_START_MESSAGE"
-                      data-daemon-state="disabled">
-                </span>
-              </td>
-              <td class="mode-select-button-column">
-                <button type="button"
-                        id="stop-daemon"
-                        i18n-content="HOME_DAEMON_STOP_BUTTON"
+        <div id="me2me-first-run">
+          <div>
+            <p class="infographic-description"
+               i18n-content="ME2ME_FIRST_RUN"></p>
+            <button id="get-started-me2me" i18n-content="GET_STARTED"></button>
+          </div>
+          <div class="infographic">
+            <img src="infographic_my_computers.png">
+          </div>
+        </div>
+        <div id="me2me-content">
+          <div id="host-list"></div>
+          <div id="host-list-error" class="error-state"></div>
+          <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
+            <table class="host-list-table">
+              <!-- TODO(jamiewalch): Rewrite this using flex boxes and apply the
+                   host-offline style if the daemon is not running -->
+              <tr>
+                <td class="host-list-main-icon">
+                  <img src="icon_host.png">
+                </td>
+                <td class="host-list-label">
+                  <span id="this-computer-name"
                         data-daemon-state="enabled">
-                </button>
-                <button type="button"
-                        id="start-daemon"
-                        i18n-content="HOME_DAEMON_START_BUTTON"
+                    My computer <!-- Placeholder until daemon mode is finished -->
+                  </span>
+                  <span i18n-content="HOME_DAEMON_START_MESSAGE"
                         data-daemon-state="disabled">
-                </button>
-              </td>
-            </tr>
-          </table>
-          <div data-daemon-state="enabled">
-            <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
-            <a id="change-daemon-pin"
-               href="#"
-               i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
-          </div>
-        </div> <!-- daemon-control -->
+                  </span>
+                </td>
+                <td class="mode-select-button-column">
+                  <button type="button"
+                          id="stop-daemon"
+                          i18n-content="HOME_DAEMON_STOP_BUTTON"
+                          data-daemon-state="enabled">
+                  </button>
+                  <button type="button"
+                          id="start-daemon"
+                          i18n-content="HOME_DAEMON_START_BUTTON"
+                          data-daemon-state="disabled">
+                  </button>
+                </td>
+              </tr>
+            </table>
+            <div data-daemon-state="enabled">
+              <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
+              <a id="change-daemon-pin"
+                 href="#"
+                 i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
+            </div>
+          </div> <!-- daemon-control -->
+        </div> <!-- me2me-content -->
       </section> <!-- host-list-div -->
     </div> <!-- home -->
 
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index 4122b09..6ec9694 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -51,6 +51,9 @@ remoting.init = function() {
     document.getElementById('current-email').innerText = email;
   }
 
+  remoting.showOrHideIt2MeUi();
+  remoting.showOrHideMe2MeUi();
+
   // The plugin's onFocus handler sends a paste command to |window|, because
   // it can't send one to the plugin element itself.
   window.addEventListener('paste', pluginGotPaste_, false);
diff --git a/remoting/webapp/ui_mode.js b/remoting/webapp/ui_mode.js
index 30a7c44..ecb5d57 100644
--- a/remoting/webapp/ui_mode.js
+++ b/remoting/webapp/ui_mode.js
@@ -119,3 +119,32 @@ remoting.setMode = function(mode) {
 remoting.getMajorMode = function() {
   return remoting.currentMode.split('.')[0];
 };
+
+remoting.showOrHideIt2MeUi = function() {
+  var visited = !!window.localStorage.getItem('it2me-visited');
+  document.getElementById('it2me-first-run').hidden = visited;
+  document.getElementById('it2me-content').hidden = !visited;
+};
+
+remoting.showOrHideMe2MeUi = function() {
+  var visited = !!window.localStorage.getItem('me2me-visited');
+  document.getElementById('me2me-first-run').hidden = visited;
+  document.getElementById('me2me-content').hidden = !visited;
+};
+
+remoting.showIt2MeUiAndSave = function() {
+  window.localStorage.setItem('it2me-visited', true);
+  remoting.showOrHideIt2MeUi();
+};
+
+remoting.showMe2MeUiAndSave = function() {
+  window.localStorage.setItem('me2me-visited', true);
+  remoting.showOrHideMe2MeUi();
+};
+
+remoting.resetInfographics = function() {
+  window.localStorage.removeItem('it2me-visited');
+  window.localStorage.removeItem('me2me-visited');
+  remoting.showOrHideIt2MeUi();
+  remoting.showOrHideMe2MeUi();
+}