[Chromoting] Add AppRemoting webapp support.

This cl includes the new files necessary to build the app_remoting sample
webapp and a few changes to make the core chromoting code aware of
app_remoting (AR, as opposed to the standard CRD webapp)

This does not add the app_remoting sample target to all.gyp, so to build
it you will need to manually update your GYP config (for now).

BUG=

Review URL: https://codereview.chromium.org/789253009

Cr-Commit-Position: refs/heads/master@{#310202}

42 files changed, 2844 insertions, 26 deletions

diff --git a/remoting/app_remoting_webapp.gyp b/remoting/app_remoting_webapp.gyp
new file mode 100644
index 0000000..639d84f
--- /dev/null
+++ b/remoting/app_remoting_webapp.gyp
@@ -0,0 +1,18 @@
+# Copyright 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.
+
+{
+  'includes': [
+    'app_remoting_webapp_build.gypi',
+  ],
+
+  'targets': [
+    {
+      'target_name': 'ar_sample_app',
+      'app_id': 'ljacajndfccfgnfohlgkdphmbnpkjflk',
+      'app_name': 'App Remoting Client',
+      'app_description': 'App Remoting client',
+    },
+  ],  # end of targets
+}
diff --git a/remoting/app_remoting_webapp_build.gypi b/remoting/app_remoting_webapp_build.gypi
new file mode 100644
index 0000000..3ea39a9
--- /dev/null
+++ b/remoting/app_remoting_webapp_build.gypi
@@ -0,0 +1,305 @@
+# Copyright 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.
+
+{
+  'includes': [
+    'remoting_version.gypi',
+    'remoting_webapp_files.gypi',
+  ],
+
+  'variables': {
+    'chromium_code': 1,
+
+    'run_jscompile%': 0,
+
+    # This variable is used to define the target environment for the app
+    # being built.  The allowed values are dev, test, staging, and prod.
+    'ar_service_environment%': 'dev',
+
+    # Identify internal vs. public build targets.
+    'ar_internal%': 0,
+
+    'remoting_localize_path': 'tools/build/remoting_localize.py',
+
+    # TODO(wez): Split into shared-stub and app-specific resources.
+    'webapp_locale_dir': '<(SHARED_INTERMEDIATE_DIR)/remoting/webapp/_locales',
+    'remoting_locales': [
+      'en',
+    ],
+    'remoting_webapp_locale_files': [
+      # Build the list of .json files generated from remoting_strings.grd.
+      '<!@pymod_do_main(remoting_localize --locale_output '
+          '"<(webapp_locale_dir)/@{json_suffix}/messages.json" '
+          '--print_only <(remoting_locales))',
+    ],
+
+    'ar_shared_resource_files': [
+      'webapp/app_remoting/html/ar_dialog.css',
+      'webapp/app_remoting/html/feedback_consent.css',
+      'webapp/app_remoting/html/feedback_consent.html',
+      'webapp/app_remoting/html/context_menu.css',
+      'resources/drag.webp',
+      '<@(remoting_webapp_resource_files)',
+    ],
+
+    # Variables for main.html.
+    # These template files are used to construct the webapp html files.
+    'ar_main_template':
+      'webapp/app_remoting/html/template_lg.html',
+    'ar_main_template_files': [
+      'webapp/base/html/client_plugin.html',
+      'webapp/base/html/dialog_auth.html',
+      'webapp/app_remoting/html/context_menu.html',
+      'webapp/app_remoting/html/idle_dialog.html',
+    ],
+    'ar_main_js_files': [
+      'webapp/app_remoting/js/application_context_menu.js',
+      'webapp/app_remoting/js/app_remoting.js',
+      'webapp/app_remoting/js/ar_main.js',
+      'webapp/app_remoting/js/context_menu_adapter.js',
+      'webapp/app_remoting/js/context_menu_chrome.js',
+      'webapp/app_remoting/js/context_menu_dom.js',
+      'webapp/app_remoting/js/drag_and_drop.js',
+      'webapp/app_remoting/js/idle_detector.js',
+      'webapp/app_remoting/js/keyboard_layouts_menu.js',
+      'webapp/app_remoting/js/loading_window.js',
+      'webapp/app_remoting/js/submenu_manager.js',
+      'webapp/app_remoting/js/window_activation_menu.js',
+      'webapp/base/js/application.js',
+      'webapp/base/js/auth_dialog.js',
+      'webapp/base/js/base.js',
+      'webapp/base/js/message_window_helper.js',
+      'webapp/base/js/message_window_manager.js',
+      '<@(remoting_webapp_js_auth_client2host_files)',
+      '<@(remoting_webapp_js_auth_google_files)',
+      '<@(remoting_webapp_js_cast_extension_files)',
+      '<@(remoting_webapp_js_client_files)',
+      '<@(remoting_webapp_js_core_files)',
+      '<@(remoting_webapp_js_gnubby_auth_files)',
+      '<@(remoting_webapp_js_host_files)',
+      '<@(remoting_webapp_js_logging_files)',
+      '<@(remoting_webapp_js_signaling_files)',
+      '<@(remoting_webapp_js_ui_files)',
+    ],
+
+    'ar_background_js_files': [
+      'webapp/app_remoting/js/ar_background.js',
+      'webapp/base/js/platform.js',
+    ],
+
+    'ar_all_js_files': [
+      '<@(ar_main_js_files)',
+      # Referenced from wcs_sandbox.html.
+      '<@(remoting_webapp_js_wcs_sandbox_files)',
+      # Referenced from the manifest.
+      '<@(ar_background_js_files)',
+      # Referenced from feedback_consent.html.
+      'webapp/app_remoting/js/feedback_consent.js',
+      # Referenced from message_window.html.
+      'webapp/base/js/message_window.js',
+    ],
+  },  # end of variables
+
+  'target_defaults': {
+    'type': 'none',
+
+    'dependencies': [
+      # TODO(wez): Create proper resources for shared-stub and app-specific
+      # stubs.
+      '../remoting/remoting.gyp:remoting_resources',
+    ],
+
+    'locale_files': [
+      '<@(remoting_webapp_locale_files)',
+    ],
+
+    'includes': [
+      '../chrome/js_unittest_vars.gypi',
+    ],
+
+    'variables': {
+      'ar_app_manifest_app':
+        '>(ar_app_path)/manifest.json.jinja2',
+      'ar_app_manifest_common':
+        'webapp/app_remoting/manifest_common.json.jinja2',
+      'ar_app_specific_files': [
+        '>(ar_app_path)/icon16.png',
+        '>(ar_app_path)/icon48.png',
+        '>(ar_app_path)/icon128.png',
+      ],
+      'ar_generated_html_files': [
+        '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html',
+        '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html',
+      ],
+      'ar_webapp_files': [
+        '<@(ar_app_specific_files)',
+        '<@(ar_shared_resource_files)',
+        '<@(ar_all_js_files)',
+        '<@(ar_generated_html_files)',
+      ],
+      'output_dir': '<(PRODUCT_DIR)/app_streaming/<@(ar_service_environment)/>(_target_name)',
+      'zip_path': '<(PRODUCT_DIR)/app_streaming/<@(ar_service_environment)/>(_target_name).zip',
+      'remoting_app_id': [],
+      'remoting_app_name': '>(_app_name)',
+      'remoting_app_description': '>(_app_description)',
+
+      'conditions': [
+        ['ar_internal != 1', {
+          'ar_app_name': 'sample_app',
+          'ar_app_path': 'webapp/app_remoting/apps/>(ar_app_name)',
+        }, {
+          # This takes target names of the form 'ar_vvv_xxx_xxx' and extracts
+          # the vendor ('vvv') and the app name ('xxx_xxx').
+          'ar_app_vendor': '>!(python -c "import sys; print sys.argv[1].split(\'_\')[1]" >(_target_name))',
+          'ar_app_name': '>!(python -c "import sys; print \'_\'.join(sys.argv[1].split(\'_\')[2:])" >(_target_name))',
+          'ar_app_path': 'webapp/app_remoting/apps/internal/>(ar_app_vendor)/>(ar_app_name)',
+        }],
+      ],  # conditions
+
+    },  # variables
+
+    'actions': [
+      {
+        'action_name': 'Build ">(ar_app_name)" application stub',
+        'inputs': [
+          'webapp/build-webapp.py',
+          '<(chrome_version_path)',
+          '<(remoting_version_path)',
+          '<@(ar_webapp_files)',
+          '<@(remoting_webapp_locale_files)',
+          '<@(ar_generated_html_files)',
+          '<(ar_app_manifest_app)',
+          '<(ar_app_manifest_common)',
+       ],
+        'outputs': [
+          '<(output_dir)',
+          '<(zip_path)',
+        ],
+        'action': [
+          'python', 'webapp/build-webapp.py',
+          '<(buildtype)',
+          '<(version_full)',
+          '<(output_dir)',
+          '<(zip_path)',
+          '<(ar_app_manifest_app)', # Manifest template
+          'app_remoting',  # Web app type
+          '<@(ar_webapp_files)',
+          '<@(ar_generated_html_files)',
+          '--locales',
+          '<@(remoting_webapp_locale_files)',
+          '--jinja_paths',
+          'webapp/app_remoting',
+          '<@(remoting_app_id)',
+          '--app_name',
+          '<(remoting_app_name)',
+          '--app_description',
+          '<(remoting_app_description)',
+          '--service_environment',
+          '<@(ar_service_environment)',
+        ],
+      },
+      {
+        'action_name': 'Build ">(ar_app_name)" main.html',
+        'inputs': [
+          'webapp/build-html.py',
+          '<(ar_main_template)',
+          '<@(ar_main_template_files)',
+        ],
+        'outputs': [
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html',
+        ],
+        'action': [
+          'python', 'webapp/build-html.py',
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/main.html',
+          '<(ar_main_template)',
+          '--template',
+          '<@(ar_main_template_files)',
+          '--js',
+          '<@(ar_main_js_files)',
+        ],
+      },
+      {
+        'action_name': 'Build ">(ar_app_name)" wcs_sandbox.html',
+        'inputs': [
+          'webapp/build-html.py',
+          '<(remoting_webapp_template_wcs_sandbox)',
+        ],
+        'outputs': [
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html',
+        ],
+        'action': [
+          'python', 'webapp/build-html.py',
+          '<(SHARED_INTERMEDIATE_DIR)/>(_target_name)/wcs_sandbox.html',
+          '<(remoting_webapp_template_wcs_sandbox)',
+          '--js',
+          '<@(remoting_webapp_wcs_sandbox_html_js_files)',
+        ],
+      },
+    ],  # actions
+    'conditions': [
+      ['buildtype == "Dev"', {
+        # Normally, the app-id for the orchestrator is automatically extracted
+        # from the webapp's extension id, but that approach doesn't work for
+        # dev webapp builds (since they all share the same dev extension id).
+        # The --appid arg will create a webapp that registers the given app-id
+        # rather than using the extension id.
+        # This is only done for Dev apps because the app-id for Release apps
+        # *must* match the extension id.
+        'variables': {
+          'remoting_app_id': ['--appid', '>(_app_id)'],
+        },
+      }],
+      ['run_jscompile != 0', {
+        'actions': [
+          {
+            'action_name': 'Verify >(ar_app_name) main.html',
+            'variables': {
+              'success_stamp': '<(PRODUCT_DIR)/>(_target_name)_main_jscompile.stamp',
+            },
+            'inputs': [
+              'tools/jscompile.py',
+              '<@(ar_main_js_files)',
+              '<@(remoting_webapp_js_proto_files)',
+              # Include zip as input so that this action is run after the build.
+              '<(zip_path)',
+            ],
+            'outputs': [
+              '<(success_stamp)',
+            ],
+            'action': [
+              'python', 'tools/jscompile.py',
+              '<@(ar_main_js_files)',
+              '<@(remoting_webapp_js_proto_files)',
+              '--success-stamp',
+              '<(success_stamp)'
+            ],
+          },
+          {
+            'action_name': 'Verify >(ar_app_name) background.js',
+            'variables': {
+              'success_stamp': '<(PRODUCT_DIR)/>(_target_name)_background_jscompile.stamp',
+            },
+            'inputs': [
+              'tools/jscompile.py',
+              '<@(ar_background_js_files)',
+              '<@(remoting_webapp_js_proto_files)',
+              # Include zip as input so that this action is run after the build.
+              '<(zip_path)',
+            ],
+            'outputs': [
+              '<(success_stamp)',
+            ],
+            'action': [
+              'python', 'tools/jscompile.py',
+              '<@(ar_background_js_files)',
+              '<@(remoting_webapp_js_proto_files)',
+              '--success-stamp',
+              '<(success_stamp)'
+            ],
+          },
+        ],  # actions
+      }],
+    ],  # conditions
+  },  # target_defaults
+}
diff --git a/remoting/resources/remoting_strings.grd b/remoting/resources/remoting_strings.grd
index e2f95a3..868f158 100644
--- a/remoting/resources/remoting_strings.grd
+++ b/remoting/resources/remoting_strings.grd
@@ -298,6 +298,9 @@
         <message desc="Error displayed when an operation is attempted that requires a signed-in user, but no-one is currently signed in." name="IDS_ERROR_NOT_AUTHENTICATED">
           You are not signed in to Chrome Remote Desktop. Please sign in and try again.
         </message>
+        <message desc="Error displayed when a user attempts to connect to an application that they have not been authorized to access." name="IDS_ERROR_NOT_AUTHORIZED">
+          You are not authorized to access this application.
+        </message>
         <message desc="Error displayed if the client plugin fails to load." name="IDS_ERROR_MISSING_PLUGIN">
           Some components required for Chrome Remote Desktop are missing. Please make sure you're running the latest version of Chrome and try again.
         </message>
diff --git a/remoting/webapp/app_remoting/apps/sample_app/icon128.png b/remoting/webapp/app_remoting/apps/sample_app/icon128.png
new file mode 100644
index 0000000..9f705cb
--- /dev/null
+++ b/remoting/webapp/app_remoting/apps/sample_app/icon128.png
diff --git a/remoting/webapp/app_remoting/apps/sample_app/icon16.png b/remoting/webapp/app_remoting/apps/sample_app/icon16.png
new file mode 100644
index 0000000..bc70a0c
--- /dev/null
+++ b/remoting/webapp/app_remoting/apps/sample_app/icon16.png
diff --git a/remoting/webapp/app_remoting/apps/sample_app/icon48.png b/remoting/webapp/app_remoting/apps/sample_app/icon48.png
new file mode 100644
index 0000000..ad0bf76
--- /dev/null
+++ b/remoting/webapp/app_remoting/apps/sample_app/icon48.png
diff --git a/remoting/webapp/app_remoting/apps/sample_app/manifest.json.jinja2 b/remoting/webapp/app_remoting/apps/sample_app/manifest.json.jinja2
new file mode 100644
index 0000000..bad2739
--- /dev/null
+++ b/remoting/webapp/app_remoting/apps/sample_app/manifest.json.jinja2
@@ -0,0 +1,3 @@
+{
+  {% include "manifest_common.json.jinja2" %}
+}
diff --git a/remoting/webapp/app_remoting/html/ar_dialog.css b/remoting/webapp/app_remoting/html/ar_dialog.css
new file mode 100644
index 0000000..9258578
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/ar_dialog.css
@@ -0,0 +1,19 @@
+/* Copyright 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.
+ */
+
+#idle-dialog {
+  position: absolute;
+  top: 100px;
+  width: 100%;
+}
+
+#idle-dialog .kd-modaldialog,
+#auth-dialog .kd-modaldialog {
+  /*
+   * kd-modaldialog uses outline, which doesn't affect the bounding box, and so
+   * doesn't work well when adjusting the window shape.
+   */
+  border: 1px solid gray;
+}
diff --git a/remoting/webapp/app_remoting/html/context_menu.css b/remoting/webapp/app_remoting/html/context_menu.css
new file mode 100644
index 0000000..ba3e0c1
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/context_menu.css
@@ -0,0 +1,125 @@
+/* Copyright 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.
+ */
+
+#context-menu {
+  position: fixed;
+  bottom: 0;  /* The vertical position is controlled by context_menu_dom.js */
+  left: -48px;
+  background-color: #c4c4c4;
+  border: 1px solid #a6a6a6;
+  z-index: 101;
+  transition-property: left;
+  transition-duration: 0.3s;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
+  opacity: 0.8;
+}
+
+#context-menu:hover,
+#context-menu.opened,
+#context-menu.menu-opened {
+  left: 0;
+  opacity: 1;
+}
+
+.no-gaps {
+  font-size: 0;
+}
+
+.context-menu-icon {
+  margin-top: 2px;
+}
+
+.context-menu-icon:hover,
+.context-menu-stub:hover {
+  background-color: #d5d5d5;
+}
+
+#context-menu.opened .context-menu-stub,
+.context-menu-icon:active {
+  background-color: #a6a6a6;
+}
+
+.context-menu-stub {
+  display: inline-block;
+  width: 12px;
+  height: 50px;
+  background: url("drag.webp");
+  cursor: move;
+}
+
+.etched {
+  position: relative;
+}
+
+.etched:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+#context-menu ul {
+  visibility: hidden;
+  position: absolute;
+  left: 24px;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  background: white;
+  outline: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 0 0 6px;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+  z-index: 102;
+}
+
+#context-menu ul.menu-align-bottom {
+  bottom: 24px;
+}
+
+#context-menu ul:not(.menu-align-bottom) {
+  top: 24px;
+}
+
+#context-menu ul.opened {
+  visibility: visible;
+}
+
+#context-menu li {
+  padding: 6px 44px 6px 30px;
+  white-space: nowrap;
+}
+
+#context-menu li:hover {
+  background-color: #EEE;
+}
+
+#context-menu li.selected {
+  background-image: url('tick.webp');
+  background-position: left center;
+  background-repeat: no-repeat;
+}
+
+#context-menu li.menu-group-header {
+  pointer-events: none;
+  font-style: italic;
+  color: gray;
+}
+
+#context-menu li.menu-group-item {
+  margin-left: 16px;
+}
+
+.context-menu-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
diff --git a/remoting/webapp/app_remoting/html/context_menu.html b/remoting/webapp/app_remoting/html/context_menu.html
new file mode 100644
index 0000000..ebc056e
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/context_menu.html
@@ -0,0 +1,15 @@
+<!--
+Copyright 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.
+-->
+
+<div id="context-menu" draggable="true" hidden>
+  <div class="no-gaps">
+    <img src="icon48.png" class="context-menu-icon">
+    <span class="context-menu-stub etched"></span>
+  </div>
+  <ul>
+  </ul>
+  <div class="context-menu-screen" hidden></div>
+</div>
diff --git a/remoting/webapp/app_remoting/html/feedback_consent.css b/remoting/webapp/app_remoting/html/feedback_consent.css
new file mode 100644
index 0000000..3e02a05
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/feedback_consent.css
@@ -0,0 +1,22 @@
+/* Copyright 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.
+ */
+
+#privacy-info {
+  margin-top: 12px;
+}
+
+a.disabled {
+  color: #888;
+  pointer-events: none;
+}
+
+.information-box > p {
+  text-align: left;
+  margin-top: 8px;
+}
+
+.information-box > p:first-child {
+  margin-top: 0;
+}
\ No newline at end of file
diff --git a/remoting/webapp/app_remoting/html/feedback_consent.html b/remoting/webapp/app_remoting/html/feedback_consent.html
new file mode 100644
index 0000000..5cd53a0
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/feedback_consent.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<!--
+Copyright 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.
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/png" href="icon16.png">
+    <link rel="stylesheet" href="open_sans.css">
+    <link rel="stylesheet" href="feedback_consent.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="message_window.css">
+    <script src="error.js"></script>
+    <script src="feedback_consent.js"></script>
+    <script src="oauth2_api.js"></script>
+    <script src="plugin_settings.js"></script>
+    <script src="l10n.js"></script>
+    <script src="xhr.js"></script>
+    <title i18n-content="FEEDBACK_CONSENT_TITLE"></title>
+  </head>
+  <body>
+    <h2 i18n-content="FEEDBACK_CONSENT_TITLE"></h2>
+    <p i18n-content="FEEDBACK_CONSENT"
+       class="message"></p>
+    <div id="form-body">
+      <label class="checkbox-label"
+             id="abandon-host-label">
+        <input id="abandon-host"
+               type="checkbox">
+        <span i18n-content="FEEDBACK_ABANDON_HOST"></span>
+      </label>
+      <label class="checkbox-label checkbox-indent disabled"
+             id="include-logs-label">
+        <input id="include-logs"
+               type="checkbox"
+               disabled>
+        <span i18n-content="FEEDBACK_INCLUDE_LOGS"></span>
+        <a id="learn-more"
+           i18n-content="LEARN_MORE"
+           class="disabled"></a>
+      </label>
+      <div id="privacy-info"
+           class="information-box"
+           hidden>
+        <p i18n-content="FEEDBACK_PRIVACY_INFORMATION1"></p>
+        <p i18n-content="FEEDBACK_PRIVACY_INFORMATION2"></p>
+      </div>
+    </div>  <!-- form-body -->
+    <div id="abandon-failed"
+         class="message error-state multi-line-error-state"
+         i18n-content="FEEDBACK_ABANDON_FAILED"
+         hidden></div>
+    <div class="button-row">
+      <span id="working"
+            class="waiting"
+            i18n-content="WORKING"
+            hidden></span>
+      <button id="feedback-consent-ok"
+              i18n-content="OK"
+              autofocus="autofocus"></button>
+      <button id="feedback-consent-cancel"
+              i18n-content="CANCEL"></button>
+    </div>
+  </body>
+</html>
diff --git a/remoting/webapp/app_remoting/html/idle_dialog.html b/remoting/webapp/app_remoting/html/idle_dialog.html
new file mode 100644
index 0000000..bcca6bb
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/idle_dialog.html
@@ -0,0 +1,12 @@
+<div id="idle-dialog" class="horizontally-centered" hidden>
+  <div class="kd-modaldialog">
+    <p class="idle-warning-message"
+       i18n-content="IDLE_TIMEOUT_WARNING"></p>
+    <div class="button-row">
+      <button class="idle-dialog-continue"
+              i18n-content="IDLE_CONTINUE"></button>
+      <button class="idle-dialog-disconnect"
+              i18n-content="IDLE_DISCONNECT"></button>
+    </div>
+  </div>
+</div>
diff --git a/remoting/webapp/app_remoting/html/template_lg.html b/remoting/webapp/app_remoting/html/template_lg.html
new file mode 100644
index 0000000..b6827e1
--- /dev/null
+++ b/remoting/webapp/app_remoting/html/template_lg.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<!--
+Copyright (c) 2012 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.
+-->
+
+<html class="full-height">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/png" href="icon16.png">
+    <link rel="stylesheet" href="open_sans.css">
+    <link rel="stylesheet" href="connection_stats.css">
+    <link rel="stylesheet" href="context_menu.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="menu_button.css">
+
+    <meta-include type="javascript"/>
+
+    <title i18n-content="PRODUCT_NAME"></title>
+  </head>
+
+  <body class="full-height">
+
+    <div id="host-plugin-container"></div>
+
+    <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
+
+    <meta-include src="webapp/base/html/dialog_auth.html"/>
+
+    <div id="session-mode"
+         data-ui-mode="in-session home.client"
+         class="full-height"
+         hidden>
+
+      <meta-include src="webapp/base/html/client_plugin.html"/>
+
+    </div> <!-- session-mode -->
+
+    <meta-include src="webapp/app_remoting/html/context_menu.html"/>
+    <meta-include src="webapp/app_remoting/html/idle_dialog.html"/>
+
+    <div id="statistics" dir="ltr" class="selectable" hidden>
+    </div> <!-- statistics -->
+
+  </body>
+</html>
diff --git a/remoting/webapp/app_remoting/js/app_remoting.js b/remoting/webapp/app_remoting/js/app_remoting.js
new file mode 100644
index 0000000..319a2e0
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/app_remoting.js
@@ -0,0 +1,360 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * This class implements the functionality that is specific to application
+ * remoting ("AppRemoting" or AR).
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {remoting.Application} app The main app that owns this delegate.
+ * @constructor
+ * @implements {remoting.Application.Delegate}
+ */
+remoting.AppRemoting = function(app) {
+  app.setDelegate(this);
+
+  /**
+   * @type {remoting.ApplicationContextMenu}
+   * @private
+   */
+  this.contextMenu_ = null;
+
+  /**
+   * @type {remoting.KeyboardLayoutsMenu}
+   * @private
+   */
+  this.keyboardLayoutsMenu_ = null;
+
+  /**
+   * @type {remoting.WindowActivationMenu}
+   * @private
+   */
+  this.windowActivationMenu_ = null;
+};
+
+/**
+ * Type definition for the RunApplicationResponse returned by the API.
+ *
+ * @constructor
+ * @private
+ */
+remoting.AppRemoting.AppHostResponse = function() {
+  /** @type {string} */
+  this.status = '';
+  /** @type {string} */
+  this.hostJid = '';
+  /** @type {string} */
+  this.authorizationCode = '';
+  /** @type {string} */
+  this.sharedSecret = '';
+
+  this.host = {
+    /** @type {string} */
+    applicationId: '',
+
+    /** @type {string} */
+    hostId: ''};
+};
+
+/**
+ * Callback for when the userinfo (email and user name) is available from
+ * the identity API.
+ *
+ * @param {string} email The user's email address.
+ * @param {string} fullName The user's full name.
+ * @return {void} Nothing.
+ */
+remoting.onUserInfoAvailable = function(email, fullName) {
+};
+
+/**
+ * Initialize the application and register all event handlers. After this
+ * is called, the app is running and waiting for user events.
+ *
+ * @param {remoting.SessionConnector} connector
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.init = function(connector) {
+  remoting.initGlobalObjects();
+  remoting.initIdentity(remoting.onUserInfoAvailable);
+
+  remoting.initGlobalEventHandlers();
+
+  var restoreHostWindows = function() {
+    if (remoting.clientSession) {
+      remoting.clientSession.sendClientMessage('restoreAllWindows', '');
+    }
+  };
+  chrome.app.window.current().onRestored.addListener(restoreHostWindows);
+
+  remoting.windowShape.updateClientWindowShape();
+
+  // Initialize the context menus.
+  if (remoting.platformIsChromeOS()) {
+    var adapter = new remoting.ContextMenuChrome();
+  } else {
+    var adapter = new remoting.ContextMenuDom(
+        document.getElementById('context-menu'));
+  }
+  this.contextMenu_ = new remoting.ApplicationContextMenu(adapter);
+  this.keyboardLayoutsMenu_ = new remoting.KeyboardLayoutsMenu(adapter);
+  this.windowActivationMenu_ = new remoting.WindowActivationMenu(adapter);
+
+  /** @type {remoting.AppRemoting} */
+  var that = this;
+
+  /** @param {XMLHttpRequest} xhr */
+  var parseAppHostResponse = function(xhr) {
+    if (xhr.status == 200) {
+      var response = /** @type {remoting.AppRemoting.AppHostResponse} */
+          (base.jsonParseSafe(xhr.responseText));
+      if (response &&
+          response.status &&
+          response.status == 'done' &&
+          response.hostJid &&
+          response.authorizationCode &&
+          response.sharedSecret &&
+          response.host &&
+          response.host.hostId) {
+        var hostJid = response.hostJid;
+        that.contextMenu_.setHostId(response.host.hostId);
+        var host = new remoting.Host;
+        host.hostId = response.host.hostId;
+        host.jabberId = hostJid;
+        host.authorizationCode = response.authorizationCode;
+        host.sharedSecret = response.sharedSecret;
+
+        remoting.setMode(remoting.AppMode.CLIENT_CONNECTING);
+
+        var idleDetector = new remoting.IdleDetector(
+            document.getElementById('idle-dialog'),
+            remoting.disconnect);
+
+        /**
+         * @param {string} tokenUrl Token-issue URL received from the host.
+         * @param {string} hostPublicKey Host public key (DER and Base64
+         *     encoded).
+         * @param {string} scope OAuth scope to request the token for.
+         * @param {function(string, string):void} onThirdPartyTokenFetched
+         *     Callback.
+         */
+        var fetchThirdPartyToken = function(
+            tokenUrl, hostPublicKey, scope, onThirdPartyTokenFetched) {
+          // Use the authentication tokens returned by the app-remoting server.
+          onThirdPartyTokenFetched(host['authorizationCode'],
+                                   host['sharedSecret']);
+        };
+
+        connector.connectMe2App(host, fetchThirdPartyToken);
+      } else if (response && response.status == 'pending') {
+        that.handleError(remoting.Error.SERVICE_UNAVAILABLE);
+      }
+    } else {
+      console.error('Invalid "runApplication" response from server.');
+      // TODO(garykac) Start using remoting.Error.fromHttpError once it has
+      // been updated to properly report 'unknown' errors (rather than
+      // reporting them as AUTHENTICATION_FAILED).
+      if (xhr.status == 0) {
+        that.handleError(remoting.Error.NETWORK_FAILURE);
+      } else if (xhr.status == 401) {
+        that.handleError(remoting.Error.AUTHENTICATION_FAILED);
+      } else if (xhr.status == 403) {
+        that.handleError(remoting.Error.NOT_AUTHORIZED);
+      } else if (xhr.status == 502 || xhr.status == 503) {
+        that.handleError(remoting.Error.SERVICE_UNAVAILABLE);
+      } else {
+        that.handleError(remoting.Error.UNEXPECTED);
+      }
+    }
+  };
+
+  /** @param {string} token */
+  var getAppHost = function(token) {
+    var headers = { 'Authorization': 'OAuth ' + token };
+    remoting.xhr.post(
+        that.runApplicationUrl(), parseAppHostResponse, '', headers);
+  };
+
+  /** @param {remoting.Error} error */
+  var onError = function(error) {
+    that.handleError(error);
+  };
+
+  remoting.LoadingWindow.show();
+
+  remoting.identity.callWithToken(getAppHost, onError);
+}
+
+/**
+ * @return {string} The default remap keys for the current platform.
+ */
+remoting.AppRemoting.prototype.getDefaultRemapKeys = function() {
+  // Map Cmd to Ctrl on Mac since hosts typically use Ctrl for keyboard
+  // shortcuts, but we want them to act as natively as possible.
+  if (remoting.platformIsMac()) {
+    return '0x0700e3>0x0700e0,0x0700e7>0x0700e4';
+  }
+  return '';
+};
+
+/**
+ * @return {Array.<string>} A list of |ClientSession.Capability|s required
+ *     by this application.
+ */
+remoting.AppRemoting.prototype.getRequiredCapabilities = function() {
+  return [
+    remoting.ClientSession.Capability.SEND_INITIAL_RESOLUTION,
+    remoting.ClientSession.Capability.RATE_LIMIT_RESIZE_REQUESTS,
+    remoting.ClientSession.Capability.VIDEO_RECORDER,
+    remoting.ClientSession.Capability.GOOGLE_DRIVE
+  ];
+};
+
+/**
+ * Called when a new session has been connected.
+ *
+ * @param {remoting.ClientSession} clientSession
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.handleConnected = function(clientSession) {
+  remoting.clientSession.sendClientMessage(
+      'setUserDisplayInfo',
+      JSON.stringify({fullName: remoting.identity.getCachedUserFullName()}));
+
+  // Set up a ping at 10-second intervals to test the connection speed.
+  function ping() {
+    var message = { timestamp: new Date().getTime() };
+    clientSession.sendClientMessage('pingRequest', JSON.stringify(message));
+  };
+  ping();
+  var timerId = window.setInterval(ping, 10 * 1000);
+
+  // Cancel the ping when the connection closes.
+  clientSession.addEventListener(
+      remoting.ClientSession.Events.stateChanged,
+      /** @param {remoting.ClientSession.StateEvent} state */
+      function(state) {
+        if (state.current === remoting.ClientSession.State.CLOSED ||
+            state.current === remoting.ClientSession.State.FAILED) {
+          window.clearInterval(timerId);
+        }
+      });
+};
+
+/**
+ * Called when the current session has been disconnected.
+ *
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.handleDisconnected = function() {
+  chrome.app.window.current().close();
+};
+
+/**
+ * Called when the current session's connection has failed.
+ *
+ * @param {remoting.SessionConnector} connector
+ * @param {remoting.Error} error
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.handleConnectionFailed = function(
+    connector, error) {
+  this.handleError(error);
+};
+
+/**
+ * Called when the current session has reached the point where the host has
+ * started streaming video frames to the client.
+ *
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.handleVideoStreamingStarted = function() {
+  remoting.LoadingWindow.close();
+};
+
+/**
+ * Called when an extension message needs to be handled.
+ *
+ * @param {string} type The type of the extension message.
+ * @param {string} data The payload of the extension message.
+ * @return {boolean} True if the extension message was recognized.
+ */
+remoting.AppRemoting.prototype.handleExtensionMessage = function(type, data) {
+  var request = /** @type {Object} */base.jsonParseSafe(data);
+  if (typeof request != 'object') {
+    return false;
+  }
+
+  switch (type) {
+
+    case 'openURL':
+      // URL requests from the hosted app are untrusted, so disallow anything
+      // other than HTTP or HTTPS.
+      var url = getStringAttr(request, 'url');
+      if (url.indexOf('http:') != 0 && url.indexOf('https:') != 0) {
+        console.error('Bad URL: ' + url);
+      } else {
+        window.open(url);
+      }
+      return true;
+
+    case 'onWindowRemoved':
+      var id = getNumberAttr(request, 'id');
+      this.windowActivationMenu_.remove(id);
+      return true;
+
+    case 'onWindowAdded':
+      var id = getNumberAttr(request, 'id');
+      var title = getStringAttr(request, 'title');
+      this.windowActivationMenu_.add(id, title);
+      return true;
+
+    case 'onAllWindowsMinimized':
+      chrome.app.window.current().minimize();
+      return true;
+
+    case 'setKeyboardLayouts':
+      var supportedLayouts = getArrayAttr(request, 'supportedLayouts');
+      var currentLayout = getStringAttr(request, 'currentLayout');
+      console.log('Current host keyboard layout: ' + currentLayout);
+      console.log('Supported host keyboard layouts: ' + supportedLayouts);
+      this.keyboardLayoutsMenu_.setLayouts(supportedLayouts, currentLayout);
+      return true;
+
+    case 'pingResponse':
+      var then = getNumberAttr(request, 'timestamp');
+      var now = new Date().getTime();
+      this.contextMenu_.updateConnectionRTT(now - then);
+      return true;
+  }
+
+  return false;
+};
+
+/**
+ * Called when an error needs to be displayed to the user.
+ *
+ * @param {remoting.Error} errorTag The error to be localized and displayed.
+ * @return {void} Nothing.
+ */
+remoting.AppRemoting.prototype.handleError = function(errorTag) {
+  console.error('Connection failed: ' + errorTag);
+  remoting.LoadingWindow.close();
+  remoting.MessageWindow.showErrorMessage(
+      chrome.i18n.getMessage(/**i18n-content*/'CONNECTION_FAILED'),
+      chrome.i18n.getMessage(/** @type {string} */ (errorTag)));
+};
+
+/** @return {string} */
+remoting.AppRemoting.prototype.runApplicationUrl = function() {
+  return remoting.settings.APP_REMOTING_API_BASE_URL + '/applications/' +
+      remoting.settings.getAppRemotingApplicationId() + '/run';
+};
diff --git a/remoting/webapp/app_remoting/js/application_context_menu.js b/remoting/webapp/app_remoting/js/application_context_menu.js
new file mode 100644
index 0000000..2e467b9
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/application_context_menu.js
@@ -0,0 +1,113 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Class representing the application's context menu.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {remoting.ContextMenuAdapter} adapter
+ * @constructor
+ */
+remoting.ApplicationContextMenu = function(adapter) {
+  /**
+   * @type {remoting.ContextMenuAdapter}
+   * @private
+   */
+  this.adapter_ = adapter;
+
+  this.adapter_.create(
+      remoting.ApplicationContextMenu.kSendFeedbackId,
+      l10n.getTranslationOrError(/*i18n-content*/'SEND_FEEDBACK'),
+      false);
+  this.adapter_.create(
+      remoting.ApplicationContextMenu.kShowStatsId,
+      l10n.getTranslationOrError(/*i18n-content*/'SHOW_STATS'),
+      true);
+  this.adapter_.addListener(this.onClicked_.bind(this));
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.hostId_ = '';
+};
+
+/**
+ * @param {string} hostId
+ */
+remoting.ApplicationContextMenu.prototype.setHostId = function(hostId) {
+  this.hostId_ = hostId;
+}
+
+/**
+ * Add an indication of the connection RTT to the 'Show statistics' menu item.
+ *
+ * @param {number} rttMs The RTT of the connection, in ms.
+ */
+remoting.ApplicationContextMenu.prototype.updateConnectionRTT =
+    function(rttMs) {
+  var rttText =
+      rttMs < 50  ? /*i18n-content*/'CONNECTION_QUALITY_GOOD' :
+      rttMs < 100 ? /*i18n-content*/'CONNECTION_QUALITY_FAIR' :
+                    /*i18n-content*/'CONNECTION_QUALITY_POOR';
+  rttText = l10n.getTranslationOrError(rttText);
+  this.adapter_.updateTitle(
+      remoting.ApplicationContextMenu.kShowStatsId,
+      l10n.getTranslationOrError(/*i18n-content*/'SHOW_STATS_WITH_RTT',
+                                 rttText));
+};
+
+/** @param {OnClickData} info */
+remoting.ApplicationContextMenu.prototype.onClicked_ = function(info) {
+  switch (info.menuItemId) {
+
+    case remoting.ApplicationContextMenu.kSendFeedbackId:
+      var windowAttributes = {
+        bounds: {
+          width: 400,
+          height: 100
+        },
+        resizable: false
+      };
+
+      /** @type {remoting.ApplicationContextMenu} */
+      var that = this;
+
+      /** @param {AppWindow} consentWindow */
+      var onCreate = function(consentWindow) {
+        var onLoad = function() {
+          var message = {
+            method: 'init',
+            hostId: that.hostId_,
+            connectionStats: JSON.stringify(remoting.stats.mostRecent())
+          };
+          consentWindow.contentWindow.postMessage(message, '*');
+        };
+        consentWindow.contentWindow.addEventListener('load', onLoad, false);
+      };
+      chrome.app.window.create(
+          'feedback_consent.html', windowAttributes, onCreate);
+      break;
+
+    case remoting.ApplicationContextMenu.kShowStatsId:
+      if (remoting.stats) {
+        remoting.stats.show(info.checked);
+      }
+      break;
+  }
+};
+
+
+/** @type {string} */
+remoting.ApplicationContextMenu.kSendFeedbackId = 'send-feedback';
+
+/** @type {string} */
+remoting.ApplicationContextMenu.kShowStatsId = 'show-stats';
diff --git a/remoting/webapp/app_remoting/js/ar_background.js b/remoting/webapp/app_remoting/js/ar_background.js
new file mode 100644
index 0000000..8106517
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/ar_background.js
@@ -0,0 +1,73 @@
+// Copyright 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.
+
+/** @type {AppWindow} */
+var mainWindow = null;
+
+/**
+ * The main window cannot delete its context menu entries on close because it
+ * is being torn down at that point and doesn't have access to the necessary
+ * APIs. Instead, it notifies the background page of the entries it creates,
+ * and the background pages deletes them when the window is closed.
+ *
+ * @type {!Object}
+ */
+var contextMenuIds = {};
+
+/** @param {LaunchData=} opt_launchData */
+function createWindow(opt_launchData) {
+  // If there is already a window, give it focus.
+  if (mainWindow) {
+    mainWindow.focus();
+    return;
+  }
+
+  var typed_screen = /** @type {{width: number, height: number}} */ (screen);
+
+  var windowAttributes = {
+    resizable: false,
+    frame: 'none',
+    bounds: {
+      width: typed_screen.width,
+      height: typed_screen.height
+    }
+  };
+
+  function onClosed() {
+    mainWindow = null;
+    var ids = Object.keys(contextMenuIds);
+    for (var i = 0; i < ids.length; ++i) {
+      chrome.contextMenus.remove(ids[i]);
+    }
+    contextMenuIds = {};
+  };
+
+  /** @param {AppWindow} appWindow */
+  function onCreate(appWindow) {
+    // Set the global window.
+    mainWindow = appWindow;
+
+    // Clean up the windows sub-menu when the application quits.
+    appWindow.onClosed.addListener(onClosed);
+  };
+
+  chrome.app.window.create('main.html', windowAttributes, onCreate);
+};
+
+/** @param {Event} event */
+function onWindowMessage(event) {
+  var method = /** @type {string} */ (event.data['method']);
+  var id = /** @type {string} */ (event.data['id']);
+  switch (method) {
+    case 'addContextMenuId':
+      contextMenuIds[id] = true;
+      break;
+    case 'removeContextMenuId':
+      delete contextMenuIds[id];
+      break;
+  }
+};
+
+chrome.app.runtime.onLaunched.addListener(createWindow);
+window.addEventListener('message', onWindowMessage, false);
diff --git a/remoting/webapp/app_remoting/js/ar_main.js b/remoting/webapp/app_remoting/js/ar_main.js
new file mode 100644
index 0000000..b15cdff
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/ar_main.js
@@ -0,0 +1,19 @@
+// Copyright 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.
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * Entry point ('load' handler) for App Remoting webapp.
+ */
+remoting.startAppRemoting = function() {
+  remoting.app = new remoting.Application();
+  var app_remoting = new remoting.AppRemoting(remoting.app);
+  remoting.app.start();
+};
+
+window.addEventListener('load', remoting.startAppRemoting, false);
diff --git a/remoting/webapp/app_remoting/js/context_menu_adapter.js b/remoting/webapp/app_remoting/js/context_menu_adapter.js
new file mode 100644
index 0000000..4f77286
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/context_menu_adapter.js
@@ -0,0 +1,56 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Wrapper interface for chrome.contextMenus.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/** @interface */
+remoting.ContextMenuAdapter = function() {
+};
+
+/**
+ * @param {string} id An identifier for the menu entry.
+ * @param {string} title The text to display in the menu.
+ * @param {boolean} isCheckable True if the state of this menu entry should
+ *     have a check-box and manage its toggle state automatically. Note that
+ *     checkable menu entries always start off unchecked; use updateCheckState
+ *     to programmatically change the state.
+ * @param {string=} opt_parentId The id of the parent menu item for submenus.
+ */
+remoting.ContextMenuAdapter.prototype.create = function(
+    id, title, isCheckable, opt_parentId) {
+};
+
+/**
+ * @param {string} id
+ * @param {string} title
+ */
+remoting.ContextMenuAdapter.prototype.updateTitle = function(id, title) {
+};
+
+/**
+ * @param {string} id
+ * @param {boolean} checked
+ */
+remoting.ContextMenuAdapter.prototype.updateCheckState = function(id, checked) {
+};
+
+/**
+ * @param {string} id
+ */
+remoting.ContextMenuAdapter.prototype.remove = function(id) {
+};
+
+/**
+ * @param {function(OnClickData):void} listener
+ */
+remoting.ContextMenuAdapter.prototype.addListener = function(listener) {
+};
diff --git a/remoting/webapp/app_remoting/js/context_menu_chrome.js b/remoting/webapp/app_remoting/js/context_menu_chrome.js
new file mode 100644
index 0000000..c468386
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/context_menu_chrome.js
@@ -0,0 +1,92 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * remoting.ContextMenuAdapter implementation backed by chrome.contextMenus.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ * @implements {remoting.ContextMenuAdapter}
+ */
+remoting.ContextMenuChrome = function() {
+};
+
+/**
+ * @param {string} id An identifier for the menu entry.
+ * @param {string} title The text to display in the menu.
+ * @param {boolean} isCheckable True if the state of this menu entry should
+ *     have a check-box and manage its toggle state automatically.
+ * @param {string=} opt_parentId The id of the parent menu item for submenus.
+ */
+remoting.ContextMenuChrome.prototype.create = function(
+    id, title, isCheckable, opt_parentId) {
+  if (!opt_parentId) {
+    var message = {
+      method: 'addContextMenuId',
+      id: id
+    };
+    chrome.runtime.getBackgroundPage(this.postMessage_.bind(this, message));
+  }
+  var params = {
+    id: id,
+    contexts: ['launcher'],
+    title: title,
+    parentId: opt_parentId
+  };
+  if (isCheckable) {
+    params.type = 'checkbox';
+  }
+  chrome.contextMenus.create(params);
+};
+
+/**
+ * @param {string} id
+ * @param {string} title
+ */
+remoting.ContextMenuChrome.prototype.updateTitle = function(id, title) {
+  chrome.contextMenus.update(id, {title: title});
+};
+
+/**
+ * @param {string} id
+ * @param {boolean} checked
+ */
+remoting.ContextMenuChrome.prototype.updateCheckState = function(id, checked) {
+  chrome.contextMenus.update(id, {checked: checked});
+};
+
+/**
+ * @param {string} id
+ */
+remoting.ContextMenuChrome.prototype.remove = function(id) {
+  chrome.contextMenus.remove(id);
+  var message = {
+    method: 'removeContextMenuId',
+    id: id
+  };
+  chrome.runtime.getBackgroundPage(this.postMessage_.bind(this, message));
+};
+
+/**
+ * @param {function(OnClickData):void} listener
+ */
+remoting.ContextMenuChrome.prototype.addListener = function(listener) {
+  chrome.contextMenus.onClicked.addListener(listener);
+};
+
+/**
+ * @param {*} message
+ * @param {Window} backgroundPage
+ */
+remoting.ContextMenuChrome.prototype.postMessage_ = function(
+    message, backgroundPage) {
+  backgroundPage.postMessage(message, '*');
+};
\ No newline at end of file
diff --git a/remoting/webapp/app_remoting/js/context_menu_dom.js b/remoting/webapp/app_remoting/js/context_menu_dom.js
new file mode 100644
index 0000000..c81482e
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/context_menu_dom.js
@@ -0,0 +1,328 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Provide an alternative location for the application's context menu items
+ * on platforms that don't provide it.
+ *
+ * To mimic the behaviour of an OS-provided context menu, the menu is dismissed
+ * in three situations:
+ *
+ * 1. When the window loses focus (i.e, the user has clicked on another window
+ *    or on the desktop).
+ * 2. When the user selects an option from the menu.
+ * 3. When the user clicks on another part of the same window; this is achieved
+ *    using an invisible screen element behind the menu, but in front of all
+ *    other DOM.
+ *
+ * TODO(jamiewalch): Fold this functionality into remoting.MenuButton.
+ */
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ * @implements {remoting.WindowShape.ClientUI}
+ * @implements {remoting.ContextMenuAdapter}
+ * @param {HTMLElement} root The root of the context menu DOM.
+ */
+remoting.ContextMenuDom = function(root) {
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.root_ = root;
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.stub_ = /** @type {HTMLElement} */
+      this.root_.querySelector('.context-menu-stub');
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.icon_ = /** @type {HTMLElement} */
+      this.root_.querySelector('.context-menu-icon');
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.screen_ = /** @type {HTMLElement} */
+      this.root_.querySelector('.context-menu-screen');
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.menu_ = /** @type {HTMLElement} */ this.root_.querySelector('ul');
+  /**
+   * @type {number}
+   * @private
+   */
+  this.bottom_ = 8;
+  /**
+   * @type {base.EventSource}
+   * @private
+   */
+  this.eventSource_ = new base.EventSource();
+  /**
+   * @type {string}
+   * @private
+   */
+  this.eventName_ = '_click';
+  /**
+   * Since the same element is used to lock the icon open and to drag it, we
+   * must keep track of drag events so that the corresponding click event can
+   * be ignored.
+   *
+   * @type {boolean}
+   * @private
+   */
+  this.stubDragged_ = false;
+
+  /*
+   * @private
+   */
+  this.dragAndDrop_ = new remoting.DragAndDrop(
+      this.stub_, this.onDragUpdate_.bind(this));
+
+  this.eventSource_.defineEvents([this.eventName_]);
+  this.root_.addEventListener(
+      'transitionend', this.onTransitionEnd_.bind(this), false);
+  this.stub_.addEventListener('click', this.onStubClick_.bind(this), false);
+  this.icon_.addEventListener('click', this.onIconClick_.bind(this), false);
+  this.screen_.addEventListener('click', this.onIconClick_.bind(this), false);
+
+  this.root_.hidden = false;
+  this.root_.style.bottom = this.bottom_ + 'px';
+  remoting.windowShape.addCallback(this);
+};
+
+/**
+ * @param {Array.<{left: number, top: number, width: number, height: number}>}
+ *     rects List of rectangles.
+ */
+remoting.ContextMenuDom.prototype.addToRegion = function(rects) {
+  var rect = /** @type {ClientRect} */ (this.root_.getBoundingClientRect());
+  // Clip the menu position to the main window in case the screen size has
+  // changed or a recent drag event tried to move it out of bounds.
+  if (rect.top < 0) {
+    this.bottom_ += rect.top;
+    this.root_.style.bottom = this.bottom_ + 'px';
+    rect = this.root_.getBoundingClientRect();
+  }
+
+  rects.push(rect);
+  if (this.root_.classList.contains('menu-opened')) {
+    var menuRect =
+        /** @type {ClientRect} */ (this.menu_.getBoundingClientRect());
+    rects.push(menuRect);
+  }
+};
+
+/**
+ * @param {string} id An identifier for the menu entry.
+ * @param {string} title The text to display in the menu.
+ * @param {boolean} isCheckable True if the state of this menu entry should
+ *     have a check-box and manage its toggle state automatically. Note that
+ *     checkable menu entries always start off unchecked.
+ * @param {string=} opt_parentId The id of the parent menu item for submenus.
+ */
+remoting.ContextMenuDom.prototype.create = function(
+    id, title, isCheckable, opt_parentId) {
+  var menuEntry = /** @type {HTMLElement} */ (document.createElement('li'));
+  menuEntry.innerText = title;
+  menuEntry.setAttribute('data-id', id);
+  if (isCheckable) {
+    menuEntry.setAttribute('data-checkable', true);
+  }
+  menuEntry.addEventListener('click', this.onClick_.bind(this), false);
+  /** @type {Node} */
+  var insertBefore = null;
+  if (opt_parentId) {
+    var parent = /** @type {HTMLElement} */
+        (this.menu_.querySelector('[data-id="' + opt_parentId + '"]'));
+    base.debug.assert(parent != null);
+    base.debug.assert(!parent.classList.contains('menu-group-item'));
+    parent.classList.add('menu-group-header');
+    menuEntry.classList.add('menu-group-item');
+    insertBefore = this.getInsertionPointForParent(
+        /** @type {string} */(opt_parentId));
+  }
+  this.menu_.insertBefore(menuEntry, insertBefore);
+};
+
+/**
+ * @param {string} id
+ * @param {string} title
+ */
+remoting.ContextMenuDom.prototype.updateTitle = function(id, title) {
+  var node = this.menu_.querySelector('[data-id="' + id + '"]');
+  if (node) {
+    node.innerText = title;
+  }
+};
+
+/**
+ * @param {string} id
+ * @param {boolean} checked
+ */
+remoting.ContextMenuDom.prototype.updateCheckState = function(id, checked) {
+  var node = /** @type {HTMLElement} */
+      (this.menu_.querySelector('[data-id="' + id + '"]'));
+  if (node) {
+    if (checked) {
+      node.classList.add('selected');
+    } else {
+      node.classList.remove('selected');
+    }
+  }
+};
+
+/**
+ * @param {string} id
+ */
+remoting.ContextMenuDom.prototype.remove = function(id) {
+  var node = this.menu_.querySelector('[data-id="' + id + '"]');
+  if (node) {
+    this.menu_.removeChild(node);
+  }
+};
+
+/**
+ * @param {function(OnClickData):void} listener
+ */
+remoting.ContextMenuDom.prototype.addListener = function(listener) {
+  this.eventSource_.addEventListener(this.eventName_, listener);
+};
+
+/**
+ * @param {Event} event
+ * @private
+ */
+remoting.ContextMenuDom.prototype.onClick_ = function(event) {
+  var element = /** @type {HTMLElement} */ (event.target);
+  if (element.getAttribute('data-checkable')) {
+    element.classList.toggle('selected')
+  }
+  var clickData = {
+    menuItemId: element.getAttribute('data-id'),
+    checked: element.classList.contains('selected')
+  };
+  this.eventSource_.raiseEvent(this.eventName_, clickData);
+  this.onIconClick_();
+};
+
+/**
+ * Get the insertion point for the specified sub-menu. This is the menu item
+ * immediately following the last child of that menu group, or null if there
+ * are no menu items after that group.
+ *
+ * @param {string} parentId
+ * @return {Node?}
+ */
+remoting.ContextMenuDom.prototype.getInsertionPointForParent = function(
+    parentId) {
+  var parentNode = this.menu_.querySelector('[data-id="' + parentId + '"]');
+  base.debug.assert(parentNode != null);
+  var childNode = /** @type {HTMLElement} */ (parentNode.nextSibling);
+  while (childNode != null && childNode.classList.contains('menu-group-item')) {
+    childNode = childNode.nextSibling;
+  }
+  return childNode;
+};
+
+/**
+ * Called when the CSS show/hide transition completes. Since this changes the
+ * visible dimensions of the context menu, the visible region of the window
+ * needs to be recomputed.
+ *
+ * @private
+ */
+remoting.ContextMenuDom.prototype.onTransitionEnd_ = function() {
+  remoting.windowShape.updateClientWindowShape();
+};
+
+/**
+ * Toggle the visibility of the context menu icon.
+ *
+ * @private
+ */
+remoting.ContextMenuDom.prototype.onStubClick_ = function() {
+  if (this.stubDragged_) {
+    this.stubDragged_ = false;
+    return;
+  }
+  this.root_.classList.toggle('opened');
+};
+
+/**
+ * Toggle the visibility of the context menu.
+ *
+ * @private
+ */
+remoting.ContextMenuDom.prototype.onIconClick_ = function() {
+  this.showMenu_(!this.menu_.classList.contains('opened'));
+};
+
+/**
+ * Explicitly show or hide the context menu.
+ *
+ * @param {boolean} show True to show the menu; false to hide it.
+ * @private
+ */
+remoting.ContextMenuDom.prototype.showMenu_ = function(show) {
+  if (show) {
+    // Ensure that the menu doesn't extend off the top or bottom of the
+    // screen by aligning it to the top or bottom of the icon, depending
+    // on the latter's vertical position.
+    var menuRect =
+        /** @type {ClientRect} */ (this.menu_.getBoundingClientRect());
+    if (menuRect.bottom > window.innerHeight) {
+      this.menu_.classList.add('menu-align-bottom');
+    } else {
+      this.menu_.classList.remove('menu-align-bottom');
+    }
+
+    /** @type {remoting.ContextMenuDom} */
+    var that = this;
+    var onBlur = function() {
+      that.showMenu_(false);
+      window.removeEventListener('blur', onBlur, false);
+    };
+    window.addEventListener('blur', onBlur, false);
+
+    // Show the menu and prevent the icon from auto-hiding on mouse-out.
+    this.menu_.classList.add('opened');
+    this.root_.classList.add('menu-opened');
+
+  } else {  // if (!show)
+    this.menu_.classList.remove('opened');
+    this.root_.classList.remove('menu-opened');
+  }
+
+  this.screen_.hidden = !show;
+  remoting.windowShape.updateClientWindowShape();
+};
+
+/**
+ * @param {number} deltaX
+ * @param {number} deltaY
+ * @private
+ */
+remoting.ContextMenuDom.prototype.onDragUpdate_ = function(deltaX, deltaY) {
+  this.stubDragged_ = true;
+  this.bottom_ -= deltaY;
+  this.root_.style.bottom = this.bottom_ + 'px';
+  // Deferring the window shape update until the DOM update has completed
+  // helps keep the position of the context menu consistent with the window
+  // shape (though it's still not perfect).
+  window.requestAnimationFrame(
+      function() {
+        remoting.windowShape.updateClientWindowShape();
+      });
+};
diff --git a/remoting/webapp/app_remoting/js/drag_and_drop.js b/remoting/webapp/app_remoting/js/drag_and_drop.js
new file mode 100644
index 0000000..2f01db0
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/drag_and_drop.js
@@ -0,0 +1,142 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Provide support for drag-and-drop operations in shaped windows. The
+ * standard API doesn't work because no "dragover" events are generated
+ * if the mouse moves outside the window region.
+ */
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ * @param {Element} element The element to register for drag and drop.
+ * @param {function(number, number):void} dragUpdate Callback to receive the
+ *     X and Y deltas as the element is dragged.
+ * @param {function():void=} opt_dragStart Initiation callback.
+ * @param {function():void=} opt_dragEnd Completion callback.
+ */
+remoting.DragAndDrop = function(element, dragUpdate,
+                                opt_dragStart, opt_dragEnd) {
+  /**
+   * @private
+   */
+  this.element_ = element;
+
+  /**
+   * @private
+   */
+  this.dragUpdate_ = dragUpdate;
+
+  /**
+   * @private
+   */
+  this.dragStart_ = opt_dragStart;
+
+  /**
+   * @private
+   */
+  this.dragEnd_ = opt_dragEnd;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.previousDeltaX_ = 0;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.previousDeltaY_ = 0;
+
+  /**
+   * @type {boolean}
+   */
+  this.seenNonZeroDelta_ = false;
+
+  /**
+   * @type {function():void}
+   * @private
+   */
+  this.callOnMouseUp_ = this.onMouseUp_.bind(this);
+
+  /**
+   * @type {function():void}
+   * @private
+   */
+  this.callOnMouseMove_ = this.onMouseMove_.bind(this);
+
+  element.addEventListener('mousedown', this.onMouseDown_.bind(this), false);
+};
+
+/**
+ * @param {Event} event
+ */
+remoting.DragAndDrop.prototype.onMouseDown_ = function(event) {
+  if (event.button != 0) {
+    return;
+  }
+  this.previousDeltaX_ = 0;
+  this.previousDeltaY_ = 0;
+  this.seenNonZeroDelta_ = false;
+  this.element_.addEventListener('mousemove', this.callOnMouseMove_, false);
+  this.element_.addEventListener('mouseup', this.callOnMouseUp_, false);
+  this.element_.requestPointerLock();
+  if (this.dragStart_) {
+    this.dragStart_();
+  }
+};
+
+/**
+ * TODO(jamiewalch): Remove the workarounds in this method once the pointer-lock
+ * API is fixed (crbug.com/419562).
+ *
+ * @param {Event} event
+ */
+remoting.DragAndDrop.prototype.onMouseMove_ = function(event) {
+  // Ignore the first non-zero delta. A click event will generate a bogus
+  // mousemove event, even if the mouse doesn't move.
+  if (!this.seenNonZeroDelta_ &&
+      (event.movementX != 0 || event.movementY != 0)) {
+    this.seenNonZeroDelta_ = true;
+  }
+
+  /**
+   * The mouse lock API is buggy when used with shaped windows, and occasionally
+   * generates single, large deltas that must be filtered out.
+   *
+   * @param {number} previous
+   * @param {number} current
+   * @return {number}
+   */
+  var adjustDelta = function(previous, current) {
+    var THRESHOLD = 100;  // Based on observed values.
+    if (Math.abs(previous < THRESHOLD) && Math.abs(current) >= THRESHOLD) {
+      return 0;
+    }
+    return current;
+  };
+  this.previousDeltaX_ = adjustDelta(this.previousDeltaX_, event.movementX);
+  this.previousDeltaY_ = adjustDelta(this.previousDeltaY_, event.movementY);
+  if (this.previousDeltaX_ != 0 || this.previousDeltaY_ != 0) {
+    this.dragUpdate_(this.previousDeltaX_, this.previousDeltaY_);
+  }
+};
+
+/**
+ * @param {Event} event
+ */
+remoting.DragAndDrop.prototype.onMouseUp_ = function(event) {
+  this.element_.removeEventListener('mousemove', this.callOnMouseMove_, false);
+  this.element_.removeEventListener('mouseup', this.callOnMouseUp_, false);
+  document.exitPointerLock();
+  if (this.dragEnd_) {
+    this.dragEnd_();
+  }
+};
\ No newline at end of file
diff --git a/remoting/webapp/app_remoting/js/feedback_consent.js b/remoting/webapp/app_remoting/js/feedback_consent.js
new file mode 100644
index 0000000..7bc7d3d
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/feedback_consent.js
@@ -0,0 +1,229 @@
+// Copyright 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.
+
+'use strict';
+
+/**
+ * @type {string} The host id corresponding to the user's VM. The @pending
+ *     place-holder instructs the Orchestrator to abandon any pending host,
+ *     and is used if no host id is provided by the main window.
+ */
+var hostId = '@pending';
+
+/**
+ * @type {string} The network stats at the time the feedback consent dialog
+ *     was shown.
+ */
+var connectionStats = null;
+
+/**
+ * @type {string} "no" => user did not request a VM reset; "yes" => VM was
+ *     successfully reset; "failed" => user requested a reset, but it failed.
+ */
+var abandonHost = 'no';
+
+/**
+ * @type {Window} The main application window.
+ */
+var applicationWindow = null;
+
+/**
+ * @type {string} An unique identifier that links the feedback post with the
+ *     logs uploaded by the host.
+ */
+var crashServiceReportId = '';
+
+/**
+ * @param {string} email
+ * @param {string} realName
+ */
+function onUserInfo(email, realName) {
+  /** @type {number} Identifies this product to Google Feedback. **/
+  var productId = 93407;
+
+  /** @type {string} The base URL for Google Feedback. */
+  var url = 'https://www.google.com/tools/feedback/survey/xhtml';
+
+  /** @type {string} The feedback 'bucket', used for clustering. */
+  var bucket = 'feedback';
+
+  /** @type {string} The user's locale, used to localize the feedback page. */
+  var locale = chrome.i18n.getMessage('@@ui_locale');
+
+  window.open(url +
+              '?productId=' + productId +
+              '&bucket=' + escape(bucket) +
+              '&hl=' + escape(locale) +
+              '&psd_email=' + escape(email) +
+              '&psd_hostId=' + escape(hostId) +
+              '&psd_abandonHost=' + escape(abandonHost) +
+              '&psd_crashServiceReportId=' + escape(crashServiceReportId) +
+              '&psd_connectionStats=' + escape(connectionStats));
+  window.close();
+
+  // If the VM was successfully abandoned, close the application.
+  if (abandonHost == 'yes') {
+    applicationWindow.close();
+  }
+};
+
+/**
+ * @param {boolean} waiting
+ */
+function setWaiting(waiting) {
+  var ok = document.getElementById('feedback-consent-ok');
+  var cancel = document.getElementById('feedback-consent-cancel');
+  var abandon = document.getElementById('abandon-host');
+  var working = document.getElementById('working');
+  ok.disabled = waiting;
+  cancel.disabled = waiting;
+  abandon.disabled = waiting;
+  working.hidden = !waiting;
+}
+
+function showError() {
+  setWaiting(false);
+  var error = document.getElementById('abandon-failed');
+  var abandon = document.getElementById('abandon-host');
+  var logs = document.getElementById('include-logs');
+  var formBody = document.getElementById('form-body');
+  error.hidden = false;
+  abandon.checked = false;
+  logs.checked = false;
+  abandonHost = 'failed';
+  crashServiceReportId = '';
+  formBody.hidden = true;
+  resizeWindow();
+}
+
+/**
+ * @return {string} A random string ID.
+ */
+function generateId() {
+  var idArray = new Uint8Array(20);
+  crypto.getRandomValues(idArray);
+  return btoa(String.fromCharCode.apply(null, idArray));
+}
+
+/**
+ * @param {string} token
+ */
+function onToken(token) {
+  var getUserInfo = function() {
+    remoting.OAuth2Api.getUserInfo(
+        onUserInfo, onUserInfo.bind(null, 'unknown', 'unknown'), token);
+  };
+  if (!token) {
+    onUserInfo('unknown', 'unknown');
+  } else {
+    if (abandonHost == 'yes') {
+      var body = {
+        'abandonHost': 'true',
+        'crashServiceReportId': crashServiceReportId
+      };
+      var headers = {
+        'Authorization': 'OAuth ' + token,
+        'Content-type': 'application/json'
+      };
+      var uri = remoting.settings.APP_REMOTING_API_BASE_URL +
+          '/applications/' + remoting.settings.getAppRemotingApplicationId() +
+          '/hosts/'  + hostId +
+          '/reportIssue';
+      /** @param {XMLHttpRequest} xhr */
+      var onDone = function(xhr) {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          getUserInfo();
+        } else {
+          showError();
+        }
+      };
+      remoting.xhr.post(uri, onDone, JSON.stringify(body), headers);
+    } else {
+      getUserInfo();
+    }
+  }
+}
+
+function onOk() {
+  setWaiting(true);
+  var abandon = /** @type {HTMLInputElement} */
+      (document.getElementById('abandon-host'));
+  if (abandon.checked) {
+    abandonHost = 'yes';
+  }
+  chrome.identity.getAuthToken({ 'interactive': false }, onToken);
+}
+
+function onCancel() {
+  window.close();
+}
+
+function onToggleAbandon() {
+  var abandon = document.getElementById('abandon-host');
+  var includeLogs = document.getElementById('include-logs');
+  var includeLogsLabel = document.getElementById('include-logs-label');
+  var learnMoreLink = document.getElementById('learn-more');
+  includeLogs.disabled = !abandon.checked;
+  if (abandon.checked) {
+    includeLogsLabel.classList.remove('disabled');
+    learnMoreLink.classList.remove('disabled');
+  } else {
+    includeLogsLabel.classList.add('disabled');
+    learnMoreLink.classList.add('disabled');
+  }
+}
+
+function onToggleLogs() {
+  var includeLogs = document.getElementById('include-logs');
+  if (includeLogs.checked) {
+    crashServiceReportId = generateId();
+  } else {
+    crashServiceReportId = '';
+  }
+}
+
+function onLearnMore(event) {
+  event.preventDefault();  // Clicking the link should not tick the checkbox.
+  var learnMoreLink = document.getElementById('learn-more');
+  var learnMoreInfobox = document.getElementById('privacy-info');
+  learnMoreLink.hidden = true;
+  learnMoreInfobox.hidden = false;
+  resizeWindow();
+}
+
+function resizeWindow() {
+  var borderY = window.outerHeight - window.innerHeight;
+  window.resizeTo(window.outerWidth, document.body.clientHeight + borderY);
+}
+
+function onLoad() {
+  window.addEventListener('message', onWindowMessage, false);
+  remoting.settings = new remoting.Settings();
+  l10n.localize();
+  var ok = document.getElementById('feedback-consent-ok');
+  var cancel = document.getElementById('feedback-consent-cancel');
+  var abandon = document.getElementById('abandon-host-label');
+  var includeLogs = document.getElementById('include-logs-label');
+  var learnMoreLink = document.getElementById('learn-more');
+  ok.addEventListener('click', onOk, false);
+  cancel.addEventListener('click', onCancel, false);
+  abandon.addEventListener('click', onToggleAbandon, false);
+  includeLogs.addEventListener('click', onToggleLogs, false);
+  learnMoreLink.addEventListener('click', onLearnMore, false);
+  resizeWindow();
+}
+
+/** @param {Event} event */
+function onWindowMessage(event) {
+  applicationWindow = event.source;
+  var method = /** @type {string} */ (event.data['method']);
+  if (method == 'init') {
+    if (event.data['hostId']) {
+      hostId = /** @type {string} */ (event.data['hostId']);
+    }
+    connectionStats = /** @type {string} */ (event.data['connectionStats']);
+  }
+};
+
+window.addEventListener('load', onLoad, false);
diff --git a/remoting/webapp/app_remoting/js/idle_detector.js b/remoting/webapp/app_remoting/js/idle_detector.js
new file mode 100644
index 0000000..58b982d
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/idle_detector.js
@@ -0,0 +1,166 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Class for detecting when the application is idle. Note that chrome.idle is
+ * not suitable for this purpose because it detects when the computer is idle,
+ * and we'd like to close the application and free up VM resources even if the
+ * user has been using another application for a long time.
+ *
+ * There are two idle timeouts. The first controls the visibility of the idle
+ * timeout warning dialog and is reset on mouse input; when it expires, the
+ * idle warning dialog is displayed. The second controls the length of time
+ * for which the idle warning dialog is displayed; when it expires, the ctor
+ * callback is invoked, which it is assumed will exit the application--no
+ * further idle detection is done.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {HTMLElement} idleWarning The idle warning dialog.
+ * @param {function():void} callback Called when the idle warning dialog has
+ *     timed out or the user has explicitly indicated that they are no longer
+ *     using the session.
+ * @constructor
+ * @implements {remoting.WindowShape.ClientUI}
+ */
+remoting.IdleDetector = function(idleWarning, callback) {
+  /** @private */
+  this.idleWarning_ = idleWarning;
+
+  /** @private */
+  this.callback_ = callback;
+
+  /**
+   * @type {number?} The id of the running timer, or null if no timer is
+   *     running.
+   * @private
+   */
+  this.timerId_ = null;
+
+  /**
+   * @type {?function():void}
+   * @private
+   */
+  this.resetTimeoutRef_ = null;
+
+  var manifest = chrome.runtime.getManifest();
+  var message = this.idleWarning_.querySelector('.idle-warning-message');
+  l10n.localizeElement(message, manifest.name);
+
+  var cont = this.idleWarning_.querySelector('.idle-dialog-continue');
+  cont.addEventListener('click', this.onContinue_.bind(this), false);
+  var quit = this.idleWarning_.querySelector('.idle-dialog-disconnect');
+  quit.addEventListener('click', this.onDisconnect_.bind(this), false);
+
+  remoting.windowShape.addCallback(this);
+  this.resetTimeout_();
+};
+
+/**
+ * @param {boolean} register True to register the callbacks; false to remove
+ *     them.
+ * @private
+ */
+remoting.IdleDetector.prototype.registerInputDetectionCallbacks_ =
+    function(register) {
+  var events = [ 'mousemove', 'mousedown', 'mouseup', 'click',
+                 'keyup', 'keydown', 'keypress' ];
+  if (register) {
+    base.debug.assert(this.resetTimeoutRef_ == null);
+    this.resetTimeoutRef_ = this.resetTimeout_.bind(this);
+    for (var i = 0; i < events.length; ++i) {
+      document.body.addEventListener(events[i], this.resetTimeoutRef_, true);
+    }
+  } else {
+    base.debug.assert(this.resetTimeoutRef_ != null);
+    for (var i = 0; i < events.length; ++i) {
+      document.body.removeEventListener(events[i], this.resetTimeoutRef_, true);
+    }
+    this.resetTimeoutRef_ = null;
+  }
+}
+
+/**
+ * @private
+ */
+remoting.IdleDetector.prototype.resetTimeout_ = function() {
+  if (this.timerId_ !== null) {
+    window.clearTimeout(this.timerId_);
+  }
+  if (this.resetTimeoutRef_ == null) {
+    this.registerInputDetectionCallbacks_(true);
+  }
+  this.timerId_ = window.setTimeout(this.onIdleTimeout_.bind(this),
+                                    remoting.IdleDetector.kIdleTimeoutMs);
+};
+
+/**
+ * @private
+ */
+remoting.IdleDetector.prototype.onIdleTimeout_ = function() {
+  this.registerInputDetectionCallbacks_(false);
+  this.showIdleWarning_(true);
+  this.timerId_ = window.setTimeout(this.onDialogTimeout_.bind(this),
+                                    remoting.IdleDetector.kDialogTimeoutMs);
+};
+
+/**
+ * @private
+ */
+remoting.IdleDetector.prototype.onDialogTimeout_ = function() {
+  this.timerId_ = null;
+  this.showIdleWarning_(false);
+  this.callback_();
+};
+
+/**
+ * @private
+ */
+remoting.IdleDetector.prototype.onContinue_ = function() {
+  this.showIdleWarning_(false);
+  this.resetTimeout_();
+};
+
+/**
+ * @private
+ */
+remoting.IdleDetector.prototype.onDisconnect_ = function() {
+  if (this.timerId_ !== null) {
+    window.clearTimeout(this.timerId_);
+  }
+  this.onDialogTimeout_();
+};
+
+/**
+ * @param {boolean} show True to show the warning dialog; false to hide it.
+ * @private
+ */
+remoting.IdleDetector.prototype.showIdleWarning_ = function(show) {
+  this.idleWarning_.hidden = !show;
+  remoting.windowShape.updateClientWindowShape();
+}
+
+/**
+ * @param {Array.<{left: number, top: number, width: number, height: number}>}
+ *     rects List of rectangles.
+ */
+remoting.IdleDetector.prototype.addToRegion = function(rects) {
+  if (!this.idleWarning_.hidden) {
+    var dialog = this.idleWarning_.querySelector('.kd-modaldialog');
+    var rect = /** @type {ClientRect} */ (dialog.getBoundingClientRect());
+    rects.push(rect);
+  }
+};
+
+// Time-out after 1hr of no activity.
+remoting.IdleDetector.kIdleTimeoutMs = 60 * 60 * 1000;
+
+// Show the idle warning dialog for 2 minutes.
+remoting.IdleDetector.kDialogTimeoutMs = 2 * 60 * 1000;
diff --git a/remoting/webapp/app_remoting/js/keyboard_layouts_menu.js b/remoting/webapp/app_remoting/js/keyboard_layouts_menu.js
new file mode 100644
index 0000000..c16fd35
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/keyboard_layouts_menu.js
@@ -0,0 +1,185 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Class managing the host's available keyboard layouts, allowing the user to
+ * select one that matches the local layout, or auto-selecting based on the
+ * current locale.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {remoting.ContextMenuAdapter} adapter
+ * @constructor
+ */
+remoting.KeyboardLayoutsMenu = function(adapter) {
+  /**
+   * @type {remoting.ContextMenuAdapter}
+   * @private
+   */
+  this.adapter_ = adapter;
+  /**
+   * @type {remoting.SubmenuManager}
+   * @private
+   */
+  this.submenuManager_ = new remoting.SubmenuManager(
+      adapter,
+      chrome.i18n.getMessage(/*i18n-content*/'KEYBOARD_LAYOUTS_SUBMENU_TITLE'),
+      true);
+  /**
+   * @type {string}
+   * @private
+   */
+  this.currentLayout_ = '';
+
+  adapter.addListener(this.onContextMenu_.bind(this));
+};
+
+/**
+ * @param {Array.<string>} layouts The keyboard layouts available on the host,
+ *   for example en-US, de-DE
+ * @param {string} currentLayout The layout currently active on the host.
+ */
+remoting.KeyboardLayoutsMenu.prototype.setLayouts =
+    function(layouts, currentLayout) {
+  this.submenuManager_.removeAll();
+  this.currentLayout_ = '';
+  for (var i = 0; i < layouts.length; ++i) {
+    this.submenuManager_.add(this.makeMenuId_(layouts[i]), layouts[i]);
+  }
+  // Pick a suitable default layout.
+  this.getBestLayout_(layouts, currentLayout,
+                      this.setLayout_.bind(this, false));
+};
+
+/**
+ * Notify the host that a new keyboard layout has been selected.
+ *
+ * @param {boolean} saveToLocalStorage If true, save the specified layout to
+ *     local storage.
+ * @param {string} layout The new keyboard layout.
+ * @private
+ */
+remoting.KeyboardLayoutsMenu.prototype.setLayout_ =
+    function(saveToLocalStorage, layout) {
+  if (this.currentLayout_ != '') {
+    this.adapter_.updateCheckState(
+        this.makeMenuId_(this.currentLayout_), false);
+  }
+  this.adapter_.updateCheckState(this.makeMenuId_(layout), true);
+  this.currentLayout_ = layout;
+
+  console.log("Setting the keyboard layout to '" + layout + "'");
+  remoting.clientSession.sendClientMessage(
+      'setKeyboardLayout',
+      JSON.stringify({layout: layout}));
+  if (saveToLocalStorage) {
+    var params = {};
+    params[remoting.KeyboardLayoutsMenu.KEY_] = layout;
+    chrome.storage.local.set(params);
+  }
+};
+
+/**
+ * Choose the best keyboard from the alternatives, based on the following
+ * algorithm:
+ *   - Search local storage by for a preferred keyboard layout for the app;
+ *     if it is found, prefer it over the current locale, falling back on the
+ *     latter only if no match is found.
+ *   - If the candidate layout matches one of the supported layouts, use it.
+ *   - Otherwise, if the language portion of the candidate matches that of
+ *     any of the supported layouts, use the first such layout (e.g, en-AU
+ *     will match either en-US or en-GB, whichever appears first).
+ *   - Otherwise, use the host's current layout.
+ *
+ * @param {Array.<string>} layouts
+ * @param {string} currentHostLayout
+ * @param {function(string):void} onDone
+ * @private
+ */
+remoting.KeyboardLayoutsMenu.prototype.getBestLayout_ =
+    function(layouts, currentHostLayout, onDone) {
+  /**
+   * Extract the language id from a string that is either "language" (e.g.
+   * "de") or "language-region" (e.g. "en-US").
+   *
+   * @param {string} layout
+   * @return {string}
+   */
+  var getLanguage = function(layout) {
+    var languageAndRegion = layout.split('-');
+    switch (languageAndRegion.length) {
+      case 1:
+      case 2:
+        return languageAndRegion[0];
+      default:
+        return '';
+    }
+  };
+
+  /** @param {Object.<string>} storage */
+  var chooseLayout = function(storage) {
+    var configuredLayout = storage[remoting.KeyboardLayoutsMenu.KEY_];
+    var tryLayouts = [ chrome.i18n.getUILanguage() ];
+    if (configuredLayout && typeof(configuredLayout) == 'string') {
+      tryLayouts.unshift(configuredLayout);
+    }
+    for (var i = 0; i < tryLayouts.length; ++i) {
+      if (layouts.indexOf(tryLayouts[i]) != -1) {
+        onDone(tryLayouts[i]);
+        return;
+      }
+      var language = getLanguage(tryLayouts[i]);
+      if (language) {
+        for (var j = 0; j < layouts.length; ++j) {
+          if (language == getLanguage(layouts[j])) {
+            onDone(layouts[j]);
+            return;
+          }
+        }
+      }
+    }
+    // Neither the stored layout nor UI locale was suitable.
+    onDone(currentHostLayout);
+  };
+
+  chrome.storage.local.get(remoting.KeyboardLayoutsMenu.KEY_, chooseLayout);
+};
+
+/**
+ * Create a menu id from the given keyboard layout.
+ *
+ * @param {string} layout Keyboard layout
+ * @return {string}
+ * @private
+ */
+remoting.KeyboardLayoutsMenu.prototype.makeMenuId_ = function(layout) {
+  return 'layout@' + layout;
+};
+
+/**
+ * Handle a click on the application's context menu.
+ *
+ * @param {OnClickData} info
+ * @private
+ */
+remoting.KeyboardLayoutsMenu.prototype.onContextMenu_ = function(info) {
+  /** @type {Array.<string>} */
+  var components = info.menuItemId.split('@');
+  if (components.length == 2 &&
+      this.makeMenuId_(components[1]) == info.menuItemId) {
+    this.setLayout_(true, components[1]);
+  }
+};
+
+/**
+ * @type {string}
+ * @private
+ */
+remoting.KeyboardLayoutsMenu.KEY_ = 'preferred-keyboard-layout';
diff --git a/remoting/webapp/app_remoting/js/loading_window.js b/remoting/webapp/app_remoting/js/loading_window.js
new file mode 100644
index 0000000..e7f8d55
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/loading_window.js
@@ -0,0 +1,71 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Loading dialog for AppRemoting apps.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * Namespace for loading window functions.
+ * @type {Object}
+ */
+remoting.LoadingWindow = function() {};
+
+/**
+ * When the loading window times out, replace it with a generic
+ * "Service Unavailable" message.
+ * @private
+ */
+remoting.LoadingWindow.onTimeout_ = function() {
+  remoting.MessageWindow.showErrorMessage(
+      chrome.i18n.getMessage(/**i18n-content*/'PRODUCT_NAME'),
+      chrome.i18n.getMessage(remoting.Error.SERVICE_UNAVAILABLE));
+};
+
+/**
+ * Show the loading dialog and start a timer When the timer expires, an error
+ * message will be displayed and the application will quit.
+ */
+remoting.LoadingWindow.show = function() {
+  if (remoting.loadingWindow_) {
+    return;
+  }
+
+  // TODO(garykac): Choose better default timeout.
+  // Timeout is currently 15min to handle when we need to spin up a new VM.
+  var kConnectionTimeout = 15 * 60 * 1000;
+
+  var transparencyWarning = '';
+  if (navigator.platform.indexOf('Mac') != -1) {
+    transparencyWarning =
+        chrome.i18n.getMessage(/**i18n-content*/'NO_TRANSPARENCY_WARNING');
+  }
+  remoting.loadingWindow_ = remoting.MessageWindow.showTimedMessageWindow(
+      chrome.i18n.getMessage(/**i18n-content*/'PRODUCT_NAME'),
+      chrome.i18n.getMessage(/**i18n-content*/'FOOTER_CONNECTING'),
+      transparencyWarning,
+      chrome.i18n.getMessage(/**i18n-content*/'CANCEL'),
+      remoting.MessageWindow.quitApp,
+      kConnectionTimeout,
+      remoting.LoadingWindow.onTimeout_);
+};
+
+/**
+ * Close the loading window.
+ */
+remoting.LoadingWindow.close = function() {
+  if (remoting.loadingWindow_) {
+    remoting.loadingWindow_.close();
+  }
+  remoting.loadingWindow_ = null;
+};
+
+/** @type {remoting.MessageWindow} */
+remoting.loadingWindow_ = null;
diff --git a/remoting/webapp/app_remoting/js/submenu_manager.js b/remoting/webapp/app_remoting/js/submenu_manager.js
new file mode 100644
index 0000000..d5f4a8f
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/submenu_manager.js
@@ -0,0 +1,109 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Helper class for submenus that should add or remove the parent menu entry
+ * depending on whether or not any child items exist.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {remoting.ContextMenuAdapter} adapter
+ * @param {string} title The title of the parent menu item.
+ * @param {boolean} checkable True if the child menus should be checkable.
+ * @constructor
+ */
+remoting.SubmenuManager = function(adapter, title, checkable) {
+  /**
+   * @type {remoting.ContextMenuAdapter}
+   * @private
+   */
+  this.adapter_ = adapter;
+  /**
+   * @type {string}
+   * @private
+   */
+  this.title_ = title;
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.checkable_ = checkable;
+  /**
+   * @type {!Object}
+   * @private
+   */
+  this.childIds_ = {};
+  /**
+   * @type {string}
+   * @private
+   */
+  this.parentId_ = '';
+};
+
+/**
+ * Add a submenu item, or update the title of an existing submenu item.
+ *
+ * @param {string} id The child id.
+ * @param {string} title The window title.
+ * @return {boolean} True if a new menu item was created, false if an existing
+ *     menu item was renamed.
+ */
+remoting.SubmenuManager.prototype.add = function(id, title) {
+  if (id in this.childIds_) {
+    this.adapter_.updateTitle(id, title);
+    return false;
+  } else {
+    this.childIds_[id] = true;
+    this.addOrRemoveParent_();
+    this.adapter_.create(id, title, this.checkable_, this.parentId_);
+    return true;
+  }
+};
+
+/**
+ * Remove a submenu item.
+ *
+ * @param {string} id The child id.
+ */
+remoting.SubmenuManager.prototype.remove = function(id) {
+  this.adapter_.remove(id);
+  delete this.childIds_[id];
+  this.addOrRemoveParent_();
+};
+
+/**
+ * Remove all submenu items.
+ */
+remoting.SubmenuManager.prototype.removeAll = function() {
+  var submenus = Object.keys(this.childIds_);
+  for (var i = 0; i < submenus.length; ++i) {
+    this.remove(submenus[i]);
+  }
+};
+
+/**
+ * Add the parent menu item if it doesn't exist but there are submenus items,
+ * or remove it if it exists but there are no submenus.
+ *
+ * @private
+ */
+remoting.SubmenuManager.prototype.addOrRemoveParent_ = function() {
+  if (Object.getOwnPropertyNames(this.childIds_).length != 0) {
+    if (!this.parentId_) {
+      this.parentId_ = base.generateXsrfToken();  // Use a random id
+      this.adapter_.create(this.parentId_, this.title_, false);
+    }
+  } else {
+    if (this.parentId_) {
+      this.adapter_.remove(this.parentId_);
+      this.parentId_ = '';
+    }
+  }
+};
diff --git a/remoting/webapp/app_remoting/js/window_activation_menu.js b/remoting/webapp/app_remoting/js/window_activation_menu.js
new file mode 100644
index 0000000..dfef499
--- /dev/null
+++ b/remoting/webapp/app_remoting/js/window_activation_menu.js
@@ -0,0 +1,84 @@
+// Copyright 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.
+
+/**
+ * @fileoverview
+ * Class to update the application's context menu to include host-side windows
+ * and to notify the host when one of these menu items is selected.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {remoting.ContextMenuAdapter} adapter
+ * @constructor
+ */
+remoting.WindowActivationMenu = function(adapter) {
+  /**
+   * @type {remoting.SubmenuManager}
+   * @private
+   */
+  this.submenuManager_ = new remoting.SubmenuManager(
+      adapter,
+      chrome.i18n.getMessage(/*i18n-content*/'WINDOWS_SUBMENU_TITLE'),
+      false);
+
+  adapter.addListener(this.onContextMenu_.bind(this));
+};
+
+/**
+ * Add a window to the application's context menu, or update the title of an
+ * existing window.
+ *
+ * @param {number} id The window id.
+ * @param {string} title The window title.
+ */
+remoting.WindowActivationMenu.prototype.add = function(id, title) {
+  this.submenuManager_.add(this.makeMenuId_(id), title);
+  // TODO(jamiewalch): Once crbug.com/426283 is fixed, call drawAttention()
+  // here if the window does not have focus.
+};
+
+/**
+ * Remove a window from the application's context menu.
+ *
+ * @param {number} id The window id.
+ */
+remoting.WindowActivationMenu.prototype.remove = function(id) {
+  this.submenuManager_.remove(this.makeMenuId_(id));
+};
+
+/**
+ * Create a menu id from the given window id.
+ *
+ * @param {number} windowId
+ * @return {string}
+ * @private
+ */
+remoting.WindowActivationMenu.prototype.makeMenuId_ = function(windowId) {
+  return 'window-' + windowId;
+};
+
+/**
+ * Handle a click on the application's context menu.
+ *
+ * @param {OnClickData} info
+ * @private
+ */
+remoting.WindowActivationMenu.prototype.onContextMenu_ = function(info) {
+  /** @type {Array.<string>} */
+  var components = info.menuItemId.split('-');
+  if (components.length == 2 &&
+      this.makeMenuId_(parseInt(components[1], 10)) == info.menuItemId) {
+    remoting.clientSession.sendClientMessage(
+        'activateWindow',
+        JSON.stringify({ id: parseInt(components[1], 0) }));
+    if (chrome.app.window.current().isMinimized()) {
+      chrome.app.window.current().restore();
+    }
+  }
+};
diff --git a/remoting/webapp/app_remoting/manifest_common.json.jinja2 b/remoting/webapp/app_remoting/manifest_common.json.jinja2
new file mode 100644
index 0000000..aca325c
--- /dev/null
+++ b/remoting/webapp/app_remoting/manifest_common.json.jinja2
@@ -0,0 +1,46 @@
+  {{ MANIFEST_KEY_FOR_UNOFFICIAL_BUILD }}
+  "name": "{{APP_NAME}}",
+  "description": "{{APP_DESCRIPTION}}",
+  "version": "{{ FULL_APP_VERSION }}",
+  "manifest_version": 2,
+  "default_locale": "en",
+  "app": {
+    "background": {
+      "scripts": ["ar_background.js", "platform.js"]
+    }
+  },
+  "icons": {
+    "128": "icon128.png",
+    "48": "icon48.png",
+    "16": "icon16.png"
+  },
+  "optional_permissions": [
+    "<all_urls>"
+  ],
+  "permissions": [
+    "{{ APP_REMOTING_API_BASE_URL }}/*",
+    "{{ DIRECTORY_API_BASE_URL }}/*",
+    "{{ OAUTH2_ACCOUNTS_HOST }}/*",
+    "{{ OAUTH2_API_BASE_URL }}/*",
+    "{{ TALK_GADGET_HOST }}/talkgadget/*",
+    "app.window.shape",
+    "clipboardRead",
+    "clipboardWrite",
+    "contextMenus",
+    "experimental",
+    "fileSystem",
+    "fullscreen",
+    "https://relay.google.com/*",
+    "identity",
+    "pointerLock",
+    "storage"
+  ],
+  "oauth2": {
+    "client_id": "{{ REMOTING_IDENTITY_API_CLIENT_ID }}",
+    "scopes": [
+      "https://www.googleapis.com/auth/appremoting.runapplication https://www.googleapis.com/auth/googletalk https://www.googleapis.com/auth/userinfo#email https://www.googleapis.com/auth/userinfo.profile https://docs.google.com/feeds/ https://www.googleapis.com/auth/drive"
+    ]
+  },
+  "sandbox": {
+    "pages": [ "wcs_sandbox.html" ]
+  }
diff --git a/remoting/webapp/base/html/main.css b/remoting/webapp/base/html/main.css
index 150ce45..5a6cd7e 100644
--- a/remoting/webapp/base/html/main.css
+++ b/remoting/webapp/base/html/main.css
@@ -561,6 +561,10 @@ button {
   margin-top: 12px;
 }
 
+.checkbox-label.disabled {
+  color: #888;
+}
+
 .checkbox-label input[type=checkbox] {
   float: __MSG_@@bidi_start_edge__;
   margin-__MSG_@@bidi_start_edge__: -20px;
@@ -569,6 +573,10 @@ button {
   margin-top: 2px;
 }
 
+.checkbox-indent {
+  margin-left: 18px;
+}
+
 #current-email {
   color: rgba(0, 0, 0, 0.5);
 }
diff --git a/remoting/webapp/base/html/message_window.html b/remoting/webapp/base/html/message_window.html
index 2e7074b..4b34c0a 100644
--- a/remoting/webapp/base/html/message_window.html
+++ b/remoting/webapp/base/html/message_window.html
@@ -20,7 +20,7 @@ found in the LICENSE file.
     <p id="infobox" class="information-box"></p>
     <p id="message"></p>
     <div class="button-row">
-      <button id="button-primary"></button>
+      <button id="button-primary" autofocus="autofocus"></button>
       <button id="button-secondary"></button>
     </div>
   </body>
diff --git a/remoting/webapp/base/js/application.js b/remoting/webapp/base/js/application.js
index 82bef0f..29ffa88 100644
--- a/remoting/webapp/base/js/application.js
+++ b/remoting/webapp/base/js/application.js
@@ -44,7 +44,16 @@ remoting.Application.prototype.setDelegate = function(appDelegate) {
  * @return {void} Nothing.
  */
 remoting.Application.prototype.start = function() {
-  this.delegate_.init();
+  // Create global objects.
+  remoting.ClientPlugin.factory = new remoting.DefaultClientPluginFactory();
+  remoting.SessionConnector.factory =
+      new remoting.DefaultSessionConnectorFactory();
+
+  // TODO(garykac): This should be owned properly rather than living in the
+  // global 'remoting' namespace.
+  remoting.settings = new remoting.Settings();
+
+  this.delegate_.init(this.getSessionConnector());
 };
 
 /**
@@ -155,9 +164,10 @@ remoting.Application.Delegate = function() {};
  * Initialize the application and register all event handlers. After this
  * is called, the app is running and waiting for user events.
  *
+ * @param {remoting.SessionConnector} connector
  * @return {void} Nothing.
  */
-remoting.Application.Delegate.prototype.init = function() {};
+remoting.Application.Delegate.prototype.init = function(connector) {};
 
 /**
  * @return {string} The default remap keys for the current platform.
diff --git a/remoting/webapp/browser_test/mock_session_connector.js b/remoting/webapp/browser_test/mock_session_connector.js
index 7ef5b50..f8cd341 100644
--- a/remoting/webapp/browser_test/mock_session_connector.js
+++ b/remoting/webapp/browser_test/mock_session_connector.js
@@ -37,6 +37,19 @@ remoting.MockSessionConnector.prototype.connectMe2Me =
   this.connect_();
 };
 
+remoting.MockSessionConnector.prototype.retryConnectMe2Me =
+    function(host, fetchPin, fetchThirdPartyToken,
+             clientPairingId, clientPairedSecret) {
+  this.mode_ = remoting.ClientSession.Mode.ME2ME;
+  this.connect_();
+};
+
+remoting.MockSessionConnector.prototype.connectMe2App =
+    function(host, fetchThirdPartyToken) {
+  this.mode_ = remoting.ClientSession.Mode.ME2APP;
+  this.connect_();
+};
+
 remoting.MockSessionConnector.prototype.updatePairingInfo =
     function(clientId, sharedSecret) {
 };
@@ -117,4 +130,4 @@ remoting.MockSessionConnectorFactory.prototype.createConnector =
     function(clientContainer, onConnected, onError, onExtensionMessage) {
   return new remoting.MockSessionConnector(
       clientContainer, onConnected, onError, onExtensionMessage);
-};
\ No newline at end of file
+};
diff --git a/remoting/webapp/crd/js/client_session.js b/remoting/webapp/crd/js/client_session.js
index f3ae7ce..bdbca7f 100644
--- a/remoting/webapp/crd/js/client_session.js
+++ b/remoting/webapp/crd/js/client_session.js
@@ -340,7 +340,8 @@ remoting.ClientSession.ConnectionError.fromString = function(error) {
 /** @enum {number} */
 remoting.ClientSession.Mode = {
   IT2ME: 0,
-  ME2ME: 1
+  ME2ME: 1,
+  APP_REMOTING: 2
 };
 
 /**
@@ -552,7 +553,8 @@ remoting.ClientSession.prototype.onPluginInitialized_ = function(initialized) {
           remoting.ClientPlugin.Feature.INJECT_KEY_EVENT)) {
     var sendKeysElement = document.getElementById('send-keys-menu');
     sendKeysElement.hidden = true;
-  } else if (this.mode_ != remoting.ClientSession.Mode.ME2ME) {
+  } else if (this.mode_ != remoting.ClientSession.Mode.ME2ME &&
+      this.mode_ != remoting.ClientSession.Mode.APP_REMOTING) {
     var sendCadElement = document.getElementById('send-ctrl-alt-del');
     sendCadElement.hidden = true;
   }
diff --git a/remoting/webapp/crd/js/connection_stats.js b/remoting/webapp/crd/js/connection_stats.js
index 8b144c4..3da3993 100644
--- a/remoting/webapp/crd/js/connection_stats.js
+++ b/remoting/webapp/crd/js/connection_stats.js
@@ -48,6 +48,14 @@ remoting.ConnectionStats.prototype.toggle = function() {
 };
 
 /**
+ * Show or hide the connection stats div.
+ * @param {boolean} show
+ */
+remoting.ConnectionStats.prototype.show = function(show) {
+  this.statsElement_.hidden = !show;
+};
+
+/**
  * If the stats panel is visible, add its bounding rectangle to the specified
  * region.
  * @param {Array.<{left: number, top: number, width: number, height: number}>}
diff --git a/remoting/webapp/crd/js/error.js b/remoting/webapp/crd/js/error.js
index 8c4a0e1..6da496d 100644
--- a/remoting/webapp/crd/js/error.js
+++ b/remoting/webapp/crd/js/error.js
@@ -31,7 +31,8 @@ remoting.Error = {
   NOT_AUTHENTICATED: /*i18n-content*/'ERROR_NOT_AUTHENTICATED',
   INVALID_HOST_DOMAIN: /*i18n-content*/'ERROR_INVALID_HOST_DOMAIN',
   P2P_FAILURE: /*i18n-content*/'ERROR_P2P_FAILURE',
-  REGISTRATION_FAILED: /*i18n-content*/'ERROR_HOST_REGISTRATION_FAILED'
+  REGISTRATION_FAILED: /*i18n-content*/'ERROR_HOST_REGISTRATION_FAILED',
+  NOT_AUTHORIZED: /*i18n-content*/'ERROR_NOT_AUTHORIZED'
 };
 
 /**
diff --git a/remoting/webapp/crd/js/plugin_settings.js b/remoting/webapp/crd/js/plugin_settings.js
index bb571bc..9aff0e6 100644
--- a/remoting/webapp/crd/js/plugin_settings.js
+++ b/remoting/webapp/crd/js/plugin_settings.js
@@ -43,6 +43,22 @@ remoting.Settings.prototype.OAUTH2_REDIRECT_URL = function() {
   return 'OAUTH2_REDIRECT_URL';
 }
 
+/** @type {string} Base URL for the App Remoting API. */
+remoting.Settings.prototype.APP_REMOTING_API_BASE_URL =
+    'APP_REMOTING_API_BASE_URL';
+
+/**
+ * Return this app's Application ID.
+ *
+ * This is a function rather than a constant because the build script may
+ * replace this string with code to calculate the app id dynamically.
+ *
+ * @return {string} The Application ID.
+ */
+remoting.Settings.prototype.getAppRemotingApplicationId = function() {
+  return 'APP_REMOTING_APPLICATION_ID';
+};
+
 /** @type {string} XMPP JID for the remoting directory server bot. */
 remoting.Settings.prototype.DIRECTORY_BOT_JID = 'DIRECTORY_BOT_JID';
 
diff --git a/remoting/webapp/crd/js/remoting.js b/remoting/webapp/crd/js/remoting.js
index 96c39bb..d08287e 100644
--- a/remoting/webapp/crd/js/remoting.js
+++ b/remoting/webapp/crd/js/remoting.js
@@ -28,12 +28,6 @@ remoting.initGlobalObjects = function() {
   console.log(remoting.getExtensionInfo());
   l10n.localize();
 
-  // Create global objects.
-  remoting.ClientPlugin.factory = new remoting.DefaultClientPluginFactory();
-  remoting.SessionConnector.factory =
-      new remoting.DefaultSessionConnectorFactory();
-  remoting.settings = new remoting.Settings();
-
   if (base.isAppsV2()) {
     remoting.fullscreen = new remoting.FullscreenAppsV2();
   } else {
@@ -101,19 +95,18 @@ remoting.getExtensionInfo = function() {
  * the more intuitive way to end a Me2Me session, and re-connecting is easy.
  */
 remoting.promptClose = function() {
-  if (!remoting.clientSession ||
-      remoting.clientSession.getMode() == remoting.ClientSession.Mode.ME2ME) {
-    return null;
-  }
-  switch (remoting.currentMode) {
-    case remoting.AppMode.CLIENT_CONNECTING:
-    case remoting.AppMode.HOST_WAITING_FOR_CODE:
-    case remoting.AppMode.HOST_WAITING_FOR_CONNECTION:
-    case remoting.AppMode.HOST_SHARED:
-    case remoting.AppMode.IN_SESSION:
-      return chrome.i18n.getMessage(/*i18n-content*/'CLOSE_PROMPT');
-    default:
-      return null;
+  if (remoting.clientSession &&
+      remoting.clientSession.getMode() == remoting.ClientSession.Mode.IT2ME) {
+    switch (remoting.currentMode) {
+      case remoting.AppMode.CLIENT_CONNECTING:
+      case remoting.AppMode.HOST_WAITING_FOR_CODE:
+      case remoting.AppMode.HOST_WAITING_FOR_CONNECTION:
+      case remoting.AppMode.HOST_SHARED:
+      case remoting.AppMode.IN_SESSION:
+        return chrome.i18n.getMessage(/*i18n-content*/'CLOSE_PROMPT');
+      default:
+        return null;
+    }
   }
 };
 
diff --git a/remoting/webapp/crd/js/server_log_entry.js b/remoting/webapp/crd/js/server_log_entry.js
index 93f1661..6813206 100644
--- a/remoting/webapp/crd/js/server_log_entry.js
+++ b/remoting/webapp/crd/js/server_log_entry.js
@@ -164,6 +164,8 @@ remoting.ServerLogEntry.VALUE_MODE_IT2ME_ = 'it2me';
 /** @private */
 remoting.ServerLogEntry.VALUE_MODE_ME2ME_ = 'me2me';
 /** @private */
+remoting.ServerLogEntry.VALUE_MODE_APP_REMOTING_ = 'lgapp';
+/** @private */
 remoting.ServerLogEntry.VALUE_MODE_UNKNOWN_ = 'unknown';
 
 /**
@@ -471,6 +473,8 @@ remoting.ServerLogEntry.getModeField = function(mode) {
       return remoting.ServerLogEntry.VALUE_MODE_IT2ME_;
     case remoting.ClientSession.Mode.ME2ME:
       return remoting.ServerLogEntry.VALUE_MODE_ME2ME_;
+    case remoting.ClientSession.Mode.APP_REMOTING:
+      return remoting.ServerLogEntry.VALUE_MODE_APP_REMOTING_;
     default:
       return remoting.ServerLogEntry.VALUE_MODE_UNKNOWN_;
   }
diff --git a/remoting/webapp/crd/js/session_connector.js b/remoting/webapp/crd/js/session_connector.js
index 84b8d3b..529e75a 100644
--- a/remoting/webapp/crd/js/session_connector.js
+++ b/remoting/webapp/crd/js/session_connector.js
@@ -52,6 +52,19 @@ remoting.SessionConnector.prototype.connectMe2Me =
 remoting.SessionConnector.prototype.retryConnectMe2Me = function(host) {};
 
 /**
+ * Initiate a Me2App connection.
+ *
+ * @param {remoting.Host} host The Me2Me host to which to connect.
+ * @param {function(string, string, string,
+ *                  function(string, string): void): void}
+ *     fetchThirdPartyToken Function to obtain a token from a third party
+ *     authentication server.
+ * @return {void} Nothing.
+ */
+remoting.SessionConnector.prototype.connectMe2App =
+    function(host, fetchThirdPartyToken) {};
+
+/**
  * Update the pairing info so that the reconnect function will work correctly.
  *
  * @param {string} clientId The paired client id.
diff --git a/remoting/webapp/crd/js/session_connector_impl.js b/remoting/webapp/crd/js/session_connector_impl.js
index c6f5bb1..0056554 100644
--- a/remoting/webapp/crd/js/session_connector_impl.js
+++ b/remoting/webapp/crd/js/session_connector_impl.js
@@ -256,6 +256,25 @@ remoting.SessionConnectorImpl.prototype.retryConnectMe2Me = function(host) {
 };
 
 /**
+ * Initiate a Me2App connection.
+ *
+ * @param {remoting.Host} host The Me2Me host to which to connect.
+ * @param {function(string, string, string,
+ *                  function(string, string): void): void}
+ *     fetchThirdPartyToken Function to obtain a token from a third party
+ *     authenticaiton server.
+ * @return {void} Nothing.
+ */
+remoting.SessionConnectorImpl.prototype.connectMe2App =
+    function(host, fetchThirdPartyToken) {
+  this.connectionMode_ = remoting.ClientSession.Mode.APP_REMOTING;
+  this.logHostOfflineErrors_ = true;
+  this.connectMe2MeInternal_(
+      host.hostId, host.jabberId, host.publicKey, host.hostName,
+      function() {}, fetchThirdPartyToken, '', '');
+};
+
+/**
  * Update the pairing info so that the reconnect function will work correctly.
  *
  * @param {string} clientId The paired client id.
diff --git a/remoting/webapp/js_proto/dom_proto.js b/remoting/webapp/js_proto/dom_proto.js
index 668b88a..19d5c6a 100644
--- a/remoting/webapp/js_proto/dom_proto.js
+++ b/remoting/webapp/js_proto/dom_proto.js
@@ -21,6 +21,9 @@ Document.prototype.execCommand = function(command) {};
 /** @return {void} Nothing. */
 Document.prototype.webkitCancelFullScreen = function() {};
 
+/** @return {void} Nothing. */
+Document.prototype.exitPointerLock = function() {};
+
 /** @type {boolean} */
 Document.prototype.webkitIsFullScreen;
 
@@ -37,6 +40,9 @@ Element.ALLOW_KEYBOARD_INPUT;
 /** @return {void} Nothing. */
 Element.prototype.webkitRequestFullScreen = function(flags) {};
 
+/** @return {void} Nothing. */
+Element.prototype.requestPointerLock = function() {};
+
 /** @type {boolean} */
 Element.prototype.hidden;
 
@@ -122,6 +128,11 @@ MutationRecord.prototype.type;
 /** @type {{getRandomValues: function((Uint16Array|Uint8Array)):void}} */
 Window.prototype.crypto;
 
+/**
+ * @param {function():void} callback
+ */
+Window.prototype.requestAnimationFrame = function(callback) {};
+
 
 /**
  * @constructor
@@ -234,6 +245,16 @@ Promise.resolve = function (value) {};
 Event.prototype.dataTransfer = null;
 
 /**
+ * @type {number}
+ */
+Event.prototype.movementX = 0;
+
+/**
+ * @type {number}
+ */
+Event.prototype.movementY = 0;
+
+/**
  * @param {string} type
  * @param {boolean} canBubble
  * @param {boolean} cancelable