Python script to generate Chromoting's main.html.

With this change, it will be much easier to make changes to the UX (since
the dialogs will be easier to manage) and the set of JavaScript includes
will be guaranteed to match the gyp target.

This change also auto-generates the wcs_sandbox.html file.

BUG=
R=jamiewalch@chromium.org

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

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

25 files changed, 1082 insertions, 829 deletions

diff --git a/remoting/webapp/build-html.py b/remoting/webapp/build-html.py
new file mode 100755
index 0000000..ccf0a82
--- /dev/null
+++ b/remoting/webapp/build-html.py
@@ -0,0 +1,106 @@
+#!/usr/bin/env python
+# 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.
+
+"""Builds the complete main.html file from the basic components.
+"""
+
+from HTMLParser import HTMLParser
+import os
+import re
+import sys
+
+
+def error(msg):
+  print 'Error: %s' % msg
+  sys.exit(1)
+
+
+class HtmlChecker(HTMLParser):
+  def __init__(self):
+    HTMLParser.__init__(self)
+    self.ids = set()
+
+  def handle_starttag(self, tag, attrs):
+    for (name, value) in attrs:
+      if name == 'id':
+        if value in self.ids:
+          error('Duplicate id: %s' % value)
+        self.ids.add(value)
+
+
+class GenerateWebappHtml:
+  def __init__(self, js_files):
+    self.js_files = js_files
+
+  def includeJavascript(self, output):
+    for js_path in sorted(self.js_files):
+      js_file = os.path.basename(js_path)
+      output.write('    <script src="' + js_file + '"></script>\n')
+
+  def processTemplate(self, output, template_file, indent):
+    with open(template_file, 'r') as input:
+      first_line = True
+      skip_header_comment = False
+
+      for line in input:
+        # If the first line is the start of a copyright notice, then
+        # skip over the entire comment.
+        # This will remove the copyright info from the included files,
+        # but leave the one on the main template.
+        if first_line and re.match(r'<!--', line):
+          skip_header_comment = True
+        first_line = False
+        if skip_header_comment:
+          if re.search(r'-->', line):
+            skip_header_comment = False
+          continue
+
+        m = re.match(
+            r'^(\s*)<meta-include src="(.+)"\s*/>\s*$',
+            line)
+        if m:
+          self.processTemplate(output, m.group(2), indent + len(m.group(1)))
+          continue
+
+        m = re.match(r'^\s*<meta-include type="javascript"\s*/>\s*$', line)
+        if m:
+          self.includeJavascript(output)
+          continue
+
+        if line.strip() == '':
+          output.write('\n')
+        else:
+          output.write((' ' * indent) + line)
+
+
+def show_usage():
+  print 'Usage: %s <output-file> <input-template> <js-file>+' % sys.argv[0]
+  print '  <output-file> Path to HTML output file'
+  print '  <input-template> Path to input template'
+  print '  <js-file> One or more Javascript files to include in HTML output'
+
+
+def main():
+  if len(sys.argv) < 4:
+    show_usage()
+    error('Not enough arguments')
+
+  out_file = sys.argv[1]
+  main_template_file = sys.argv[2]
+  js_files = sys.argv[3:]
+
+  # Generate the main HTML file from the templates.
+  with open(out_file, 'w') as output:
+    gen = GenerateWebappHtml(js_files)
+    gen.processTemplate(output, main_template_file, 0)
+
+  # Verify that the generated HTML file is valid.
+  with open(out_file, 'r') as input:
+    parser = HtmlChecker()
+    parser.feed(input.read())
+
+
+if __name__ == '__main__':
+  sys.exit(main())
diff --git a/remoting/webapp/html/butterbar.html b/remoting/webapp/html/butterbar.html
new file mode 100644
index 0000000..7417508
--- /dev/null
+++ b/remoting/webapp/html/butterbar.html
@@ -0,0 +1,15 @@
+<!--
+Copyright (c) 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 data-ui-mode="home">
+  <div id="butter-bar" hidden>
+    <p>
+      <span id="butter-bar-message"></span>
+      <a id="butter-bar-dismiss" href="#">
+        <img src="icon_cross.webp" class="close-icon">
+      </a>
+    </p>
+  </div>
+</div>
diff --git a/remoting/webapp/html/client_plugin.html b/remoting/webapp/html/client_plugin.html
new file mode 100644
index 0000000..628c6fa
--- /dev/null
+++ b/remoting/webapp/html/client_plugin.html
@@ -0,0 +1,13 @@
+<!--
+Copyright (c) 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 class="vertically-centered">
+  <div class="horizontally-centered">
+    <div id="video-container">
+      <video id="mediasource-video-output"></video>
+      <div id="client-plugin-container"></div>
+    </div>
+  </div>
+</div>
diff --git a/remoting/webapp/html/dialog_auth.html b/remoting/webapp/html/dialog_auth.html
new file mode 100644
index 0000000..92c3764
--- /dev/null
+++ b/remoting/webapp/html/dialog_auth.html
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 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="auth-dialog" hidden>
+
+  <div class="dialog-screen"></div>
+
+  <div class="dialog-container">
+    <div class="box-spacer"></div>
+    <div class="kd-modaldialog">
+      <h2 i18n-content="MODE_AUTHORIZE"></h2>
+      <p id="auth-error-message"
+         i18n-content="DESCRIPTION_AUTHORIZE"
+         class="message"></p>
+      <div class="button-row">
+        <button id="auth-button"
+                type="button"
+                autofocus="autofocus"
+                i18n-content="CONTINUE_BUTTON">
+        </button>
+      </div>
+    </div>
+    <div class="box-spacer"></div>
+  </div>
+
+</div> <!-- auth-dialog -->
diff --git a/remoting/webapp/html/dialog_client.html b/remoting/webapp/html/dialog_client.html
new file mode 100644
index 0000000..eedea18
--- /dev/null
+++ b/remoting/webapp/html/dialog_client.html
@@ -0,0 +1,32 @@
+<!--
+Copyright (c) 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="client-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.client">
+
+  <meta-include src="webapp/html/dialog_client_unconnected.html"/>
+
+  <div data-ui-mode="home.client.connecting" class="box">
+    <span class="waiting prominent"
+          i18n-content="FOOTER_CONNECTING"></span>
+    <div class="box-spacer"></div>
+    <button id="cancel-connect-button" i18n-content="CANCEL"></button>
+  </div> <!-- client.connecting -->
+
+  <meta-include src="webapp/html/dialog_client_host_needs_upgrade.html"/>
+
+  <meta-include src="webapp/html/dialog_client_pin_prompt.html"/>
+
+  <meta-include src="webapp/html/dialog_client_third_party_auth.html"/>
+
+  <div data-ui-mode="home.client.connect-failed"
+       class="message">
+    <span id="connect-error-message" class="error-state"></span>
+  </div> <!-- client.connect-failed -->
+
+  <meta-include src="webapp/html/dialog_client_session_finished.html"/>
+
+</div> <!-- client-dialog -->
diff --git a/remoting/webapp/html/dialog_client_host_needs_upgrade.html b/remoting/webapp/html/dialog_client_host_needs_upgrade.html
new file mode 100644
index 0000000..3c26b48
--- /dev/null
+++ b/remoting/webapp/html/dialog_client_host_needs_upgrade.html
@@ -0,0 +1,27 @@
+<!--
+Copyright (c) 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 data-ui-mode="home.client.host-needs-upgrade">
+  <div id="host-needs-update-message"
+       class="message error-state multi-line-error-state">
+  </div>
+  <div class="message">
+    <span i18n-content="HOST_NEEDS_UPDATE_DETAIL"></span>
+    <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
+       target="_blank"
+       i18n-content="LEARN_HOW"></a>
+  </div>
+  <div class="button-row">
+    <button id="host-needs-update-connect-button"
+            type="button"
+            i18n-content="CONNECT_ANYWAY"
+            autofocus="autofocus">
+    </button>
+    <button id="host-needs-update-cancel-button"
+            type="button"
+            i18n-content="CANCEL">
+    </button>
+  </div>
+</div> <!-- home.client.host-needs-upgrade -->
diff --git a/remoting/webapp/html/dialog_client_pin_prompt.html b/remoting/webapp/html/dialog_client_pin_prompt.html
new file mode 100644
index 0000000..992b1e9
--- /dev/null
+++ b/remoting/webapp/html/dialog_client_pin_prompt.html
@@ -0,0 +1,57 @@
+<!--
+Copyright (c) 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 data-ui-mode="home.client.pin-prompt">
+  <div id="pin-message"
+       i18n-content="PIN_MESSAGE"
+       class="message"></div>
+
+  <form id="pin-form" action="">
+    <table class="centered">
+      <tr>
+        <td>
+          <label for="pin-entry"
+                 i18n-content="PIN"
+                 class="editbox-label"></label>
+        </td>
+        <td>
+          <input id="pin-entry"
+                 type="password"
+                 autofocus="autofocus"
+                 autocomplete="off"/>
+          <button id="pin-connect-button"
+                  type="submit"
+                  i18n-content="CONNECT_BUTTON">
+          </button>
+          <button id="cancel-pin-entry-button"
+                  type="button"
+                  i18n-content="CANCEL">
+          </button>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <!-- Empty cell to align the checkbox and PIN entry. -->
+        </td>
+        <td>
+          <label id="remember-pin" class="checkbox-label">
+            <input id="remember-pin-checkbox" type="checkbox">
+            <span i18n-content="REMEMBER_PIN"></span>
+          </label>
+        </td>
+      </tr>
+    </table>
+  </form>
+
+  <div id="startup-mode-box-me2me"
+       class="information-box centered"
+       hidden>
+    <span i18n-content="WARNING_NOT_WINDOWED"></span>
+    <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
+       target="_blank"
+       i18n-content="LEARN_HOW"></a>
+  </div> <!-- startup-mode-box-it2me -->
+
+</div> <!-- client.pin-prompt -->
diff --git a/remoting/webapp/html/dialog_client_session_finished.html b/remoting/webapp/html/dialog_client_session_finished.html
new file mode 100644
index 0000000..1ad126a
--- /dev/null
+++ b/remoting/webapp/html/dialog_client_session_finished.html
@@ -0,0 +1,30 @@
+<!--
+Copyright (c) 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 data-ui-mode="home.client.session-finished"
+     class="message" i18n-content="MESSAGE_SESSION_FINISHED">
+</div> <!-- client.session-finished -->
+
+<div data-ui-mode="home.client.connect-failed.it2me home.client.session-finished.it2me"
+     class="button-row">
+  <button id="client-finished-it2me-button"
+          type="button"
+          i18n-content="OK"
+          autofocus="autofocus">
+  </button>
+</div> <!-- connect-failed.it2me session-finished.it2me -->
+
+<div data-ui-mode="home.client.connect-failed.me2me home.client.session-finished.me2me"
+     class="button-row">
+  <button id="client-reconnect-button"
+          type="button"
+          i18n-content="RETRY"
+          autofocus="autofocus">
+  </button>
+  <button id="client-finished-me2me-button"
+          type="button"
+          i18n-content="CANCEL">
+  </button>
+</div> <!-- connect-failed.me2me session-finished.me2me -->
diff --git a/remoting/webapp/html/dialog_client_third_party_auth.html b/remoting/webapp/html/dialog_client_third_party_auth.html
new file mode 100644
index 0000000..8e3eb82
--- /dev/null
+++ b/remoting/webapp/html/dialog_client_third_party_auth.html
@@ -0,0 +1,19 @@
+<!--
+Copyright (c) 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 data-ui-mode="home.client.third-party-auth" class="centered">
+  <div id="third-party-auth-message"
+       i18n-content="DESCRIPTION_THIRD_PARTY_AUTH"
+       class="message"></div>
+  <div id="third-party-auth-url"
+       class="message"></div>
+  <div class="button-row">
+    <button id="third-party-auth-button"
+            type="button"
+            autofocus="autofocus"
+            i18n-content="CONTINUE_BUTTON">
+    </button>
+  </div>
+</div> <!-- third-party-auth-dialog -->
diff --git a/remoting/webapp/html/dialog_client_unconnected.html b/remoting/webapp/html/dialog_client_unconnected.html
new file mode 100644
index 0000000..fa91bca
--- /dev/null
+++ b/remoting/webapp/html/dialog_client_unconnected.html
@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 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 data-ui-mode="home.client.unconnected">
+
+  <div i18n-content="DESCRIPTION_CONNECT"></div>
+
+  <div id="access-code-entry-row">
+    <form id="access-code-form" action="">
+      <div class="box">
+        <div class="box-spacer"></div>
+        <label for="access-code-entry"
+               i18n-content="ACCESS_CODE"
+               class="editbox-label">
+        </label>
+        <input id="access-code-entry"
+               type="text"
+               autofocus="autofocus"
+               autocomplete="off"/>
+        <div class="box-spacer"></div>
+      </div>
+      <div class="button-row">
+        <button id="connect-button"
+                type="submit"
+                i18n-content="CONNECT_BUTTON">
+        </button>
+        <button id="cancel-access-code-button"
+                type="button"
+                i18n-content="CANCEL">
+        </button>
+      </div>
+    </form>
+  </div> <!-- code-entry-row -->
+
+  <div id="startup-mode-box-it2me" class="information-box" hidden>
+    <span i18n-content="WARNING_NOT_WINDOWED"></span>
+    <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
+       target="_blank"
+       i18n-content="LEARN_HOW"></a>
+  </div> <!-- startup-mode-box-it2me -->
+
+</div> <!-- client.unconnected -->
diff --git a/remoting/webapp/html/dialog_confirm_host_delete.html b/remoting/webapp/html/dialog_confirm_host_delete.html
new file mode 100644
index 0000000..d3eb491
--- /dev/null
+++ b/remoting/webapp/html/dialog_confirm_host_delete.html
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 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="confirm-host-delete-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.confirm-host-delete"
+     hidden>
+
+  <p id="confirm-host-delete-message"
+     i18n-content="CONFIRM_HOST_DELETE"
+     class="message">
+  </p>
+
+  <div class="button-row">
+    <button id="confirm-host-delete"
+            i18n-content="DISABLE_HOST"
+            type="button">
+    </button>
+    <button id="cancel-host-delete"
+            i18n-content="CANCEL"
+            autofocus="autofocus"
+            type="button">
+    </button>
+  </div>
+
+</div> <!-- home.confirm-host-delete -->
diff --git a/remoting/webapp/html/dialog_connection_history.html b/remoting/webapp/html/dialog_connection_history.html
new file mode 100644
index 0000000..63796cf
--- /dev/null
+++ b/remoting/webapp/html/dialog_connection_history.html
@@ -0,0 +1,52 @@
+<!--
+Copyright (c) 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="connection-history-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.history"
+     hidden>
+
+  <div class="internal-frame-of-reference">
+
+    <h2 i18n-content="CONNECTION_HISTORY_TITLE"></h2>
+
+    <div id="connection-history-options">
+      <div class="link-list">
+        <a id="history-view-all"
+           i18n-content="ALL_CONNECTIONS"
+           class="no-link"></a>
+        <a id="history-view-outgoing"
+           i18n-content="OUTGOING_CONNECTIONS"></a>
+        <a id="history-view-incoming"
+           i18n-content="INCOMING_CONNECTIONS"></a>
+      </div>
+      <div class="box-spacer"></div>
+      <a id="clear-connection-history" i18n-content="CLEAR_HISTORY"></a>
+    </div>
+
+    <div id="connection-history-scroller">
+      <table id="connection-history-table">
+        <thead>
+          <tr>
+            <td></td>
+            <td i18n-content="TIME_HEADER"></td>
+            <td></td>
+            <td i18n-content="CONNECTION_FROM_HEADER"></td>
+            <td i18n-content="CONNECTION_TO_HEADER"></td>
+            <td i18n-content="DURATION_HEADER"></td>
+          </tr>
+        </thead>
+        <tbody id="connection-history-entries" class="selectable">
+        </tbody>
+      </table>
+    </div>
+
+    <button id="close-connection-history"
+            i18n-content="CLOSE"
+            type="button"></button>
+
+  </div>
+
+</div> <!-- connection-history-dialog -->
diff --git a/remoting/webapp/html/dialog_host.html b/remoting/webapp/html/dialog_host.html
new file mode 100644
index 0000000..7e05472
--- /dev/null
+++ b/remoting/webapp/html/dialog_host.html
@@ -0,0 +1,67 @@
+<!--
+Copyright (c) 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.
+-->
+<!-- It2Me Sharing -->
+<div id="host-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.host">
+
+  <div data-ui-mode="home.host.waiting-for-code" class="message"
+       i18n-content="MESSAGE_GENERATING">
+  </div> <!-- host.waiting-for-code -->
+
+  <div data-ui-mode="home.host.waiting-for-connection">
+    <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
+    <div id="access-code-display" dir="ltr" class="selectable"></div>
+    <div id="access-code-countdown-container">
+      <div id="access-code-countdown" class="expiring" hidden>
+        <span id="seconds-remaining"
+              i18n-content="ACCESS_CODE_TIMER"></span>
+      </div>
+    </div>
+    <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
+  </div> <!-- host.waiting-for-connection -->
+
+  <div data-ui-mode="home.host.shared">
+    <div id="host-shared-message" class="message"
+         i18n-content="MESSAGE_SHARED"></div>
+    <div class="button-row">
+      <button id="stop-sharing-button"
+              type="button"
+              i18n-content="STOP_SHARING_BUTTON">
+      </button>
+    </div>
+  </div> <!-- host.shared -->
+
+  <div data-ui-mode="home.host.share-failed" class="message">
+    <span id="host-plugin-error" class="error-state"></span>
+  </div> <!-- host.share-failed -->
+
+  <div data-ui-mode="home.host.share-finished" class="message"
+       i18n-content="MESSAGE_SESSION_FINISHED">
+  </div> <!-- host.share-finished -->
+
+  <div data-ui-mode="home.host.share-failed home.host.share-finished"
+       class="button-row">
+    <button id="host-finished-button"
+            type="button"
+            autofocus="autofocus"
+            i18n-content="OK">
+    </button>
+  </div>
+
+  <div id="nat-box"
+       class="information-box"
+       data-ui-mode="home.host.waiting-for-connection"
+       i18n-content="WARNING_NAT_DISABLED">
+  </div> <!-- nat-box -->
+
+  <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
+       class="button-row">
+    <span class="waiting" i18n-content="FOOTER_WAITING"></span>
+    <button id="cancel-share-button" i18n-content="CANCEL"></button>
+  </div>
+
+</div> <!-- host dialog -->
diff --git a/remoting/webapp/html/dialog_host_install.html b/remoting/webapp/html/dialog_host_install.html
new file mode 100644
index 0000000..5ef87b9
--- /dev/null
+++ b/remoting/webapp/html/dialog_host_install.html
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 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="host-install-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.host-install">
+  <div data-ui-mode="home.host-install.prompt" hidden>
+    <div class="message" i18n-content="HOST_SETUP_INSTALL"></div>
+    <div class="button-row">
+      <button id="host-install-continue"
+              autofocus="autofocus"
+              i18n-content="OK"></button>
+      <button id="host-install-dismiss"
+              i18n-content="CANCEL"></button>
+    </div>
+  </div>
+  <div data-ui-mode="home.host-install.pending" hidden>
+    <div class="message"
+         i18n-content="HOST_SETUP_INSTALL_PENDING"></div>
+    <div class="button-row">
+      <button id="host-install-retry"
+              autofocus="autofocus"
+              i18n-content="OK"></button>
+    </div>
+  </div>
+</div> <!-- host-install-dialog -->
diff --git a/remoting/webapp/html/dialog_host_setup.html b/remoting/webapp/html/dialog_host_setup.html
new file mode 100644
index 0000000..48e6a20
--- /dev/null
+++ b/remoting/webapp/html/dialog_host_setup.html
@@ -0,0 +1,96 @@
+<!--
+Copyright (c) 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="host-setup-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.host-setup">
+
+  <form id="ask-pin-form"
+        data-ui-mode="home.host-setup.ask-pin"
+        action="">
+
+    <p class="message">
+      <span i18n-content="HOST_SETUP_DIALOG_DESCRIPTION"
+            i18n-value-1="<b>"
+            i18n-value-2="</b>"></span>
+      <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
+         target="_blank"
+         i18n-content="WHY_IS_THIS_SAFE"></a>
+    </p>
+
+    <table id="set-pin-table">
+      <tr>
+        <td class="table-label">
+          <label for="daemon-pin-entry"
+                 i18n-content="ASK_PIN_DIALOG_LABEL"
+                 class="editbox-label"></label>
+        </td>
+        <td>
+          <input id="daemon-pin-entry"
+                 autofocus="autofocus"
+                 type="password">
+        </td>
+      </tr>
+      <tr>
+        <td class="table-label">
+          <label for="daemon-pin-confirm"
+                 i18n-content="ASK_PIN_DIALOG_CONFIRM_LABEL"
+                 class="editbox-label"></label>
+        </td>
+        <td>
+          <input id="daemon-pin-confirm" type="password">
+        </td>
+      <tr>
+    </table>
+
+    <div id="daemon-pin-error-div" class="message" hidden>
+      <span id="daemon-pin-error-message" class="error-state">
+      </span>
+    </div>
+
+    <div id="usagestats-consent" hidden>
+      <label class="checkbox-label">
+        <input id="usagestats-consent-checkbox" type="checkbox">
+        <span i18n-content="HOST_SETUP_CRASH_REPORTING_MESSAGE"></span>
+      </label>
+    </div>
+
+    <div class="button-row">
+      <button id="daemon-pin-ok" type="submit" i18n-content="OK">
+      </button>
+      <button id="daemon-pin-cancel" type="button" i18n-content="CANCEL">
+      </button>
+    </div>
+
+  </form>
+
+  <div data-ui-mode="home.host-setup.processing"
+       class="box"
+       hidden>
+    <span class="waiting prominent"
+          id="host-setup-processing-message">
+    </span>
+  </div>
+
+  <div data-ui-mode="home.host-setup.done" hidden>
+    <div id="host-setup-done-message" class="message"></div>
+    <div id="host-setup-done-message-2" class="message"></div>
+    <div class="button-row">
+      <button id="host-config-done-dismiss"
+              autofocus="autofocus"
+              i18n-content="OK"></button>
+    </div>
+  </div>
+
+  <div data-ui-mode="home.host-setup.error" hidden>
+    <div id="host-setup-error-message" class="error-state"></div>
+    <div class="button-row">
+      <button id="host-config-error-dismiss"
+              autofocus="autofocus"
+              i18n-content="OK"></button>
+    </div>
+  </div>
+
+</div> <!-- host-setup-dialog -->
diff --git a/remoting/webapp/html/dialog_manage_pairings.html b/remoting/webapp/html/dialog_manage_pairings.html
new file mode 100644
index 0000000..bdead44
--- /dev/null
+++ b/remoting/webapp/html/dialog_manage_pairings.html
@@ -0,0 +1,49 @@
+<!--
+Copyright (c) 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="paired-client-manager-dialog"
+     class="kd-modaldialog"
+     data-ui-mode="home.manage-pairings"
+     hidden>
+
+  <p i18n-content="PAIRED_CLIENTS_INTRODUCTION"
+     class="message">
+  </p>
+
+  <div id="paired-clients-list">
+    <table>
+      <thead>
+        <tr>
+          <td i18n-content="PAIRED_CLIENT_DATE"></td>
+          <td i18n-content="PAIRED_CLIENT_NAME"></td>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
+    <p id="no-paired-clients">
+      <em i18n-content="NO_PAIRED_CLIENTS"></em>
+    </p>
+  </div> <!-- paired-clients-list -->
+
+  <p id="paired-client-manager-dialog-error"
+     class="error-state"
+     hidden>
+  </p>
+
+  <div class="button-row">
+    <span id="paired-client-manager-dialog-working"
+          class="waiting"
+          i18n-content="WORKING"
+          hidden></span>
+    <button id="delete-all-paired-clients"
+            i18n-content="DELETE_ALL_PAIRED_CLIENTS">
+    </button>
+    <button id="close-paired-client-manager-dialog"
+            i18n-content="CLOSE">
+    </button>
+  </div>
+
+</div> <!-- home.manage-pairings -->
diff --git a/remoting/webapp/html/dialog_token_refresh_failed.html b/remoting/webapp/html/dialog_token_refresh_failed.html
new file mode 100644
index 0000000..016823c
--- /dev/null
+++ b/remoting/webapp/html/dialog_token_refresh_failed.html
@@ -0,0 +1,25 @@
+<!--
+Copyright (c) 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.
+-->
+<!-- TODO(jamiewalch): Refactor the various error-state divs -->
+<div class="kd-modaldialog" data-ui-mode="home.token-refresh-failed">
+
+  <div class="message">
+    <span id="token-refresh-error-message" class="error-state"></span>
+  </div>
+
+  <div id="token-refresh-auth-failed" class="button-row">
+    <button id="token-refresh-error-sign-in"
+            type="button"
+            i18n-content="SIGN_IN_BUTTON"></button>
+  </div>
+
+  <div id="token-refresh-other-error" class="button-row">
+    <button id="token-refresh-error-ok"
+            type="button"
+            i18n-content="OK"></button>
+  </div>
+
+</div> <!-- home.token-refresh-failed -->
diff --git a/remoting/webapp/html/template_main.html b/remoting/webapp/html/template_main.html
new file mode 100644
index 0000000..7db84fc
--- /dev/null
+++ b/remoting/webapp/html/template_main.html
@@ -0,0 +1,96 @@
+<!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="scrollable full-height">
+  <head>
+    <meta charset="utf-8">
+    <link rel="icon" type="image/png" href="chromoting16.webp">
+    <link rel="stylesheet" href="open_sans.css">
+    <link rel="stylesheet" href="connection_stats.css">
+    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="menu_button.css">
+    <link rel="stylesheet" href="toolbar.css">
+
+    <meta-include type="javascript"/>
+
+    <title i18n-content="PRODUCT_NAME"></title>
+  </head>
+
+  <body class="full-height">
+
+    <!-- loading-mode is initially visible, but becomes hidden as soon as an
+         AppMode is selected by remoting.init. All other divs are initially
+         hidden, but are shown appropriately when the mode changes. -->
+    <section id="loading-mode" data-ui-mode="">
+      <em>Loading&hellip;</em>
+    </section> <!-- loading-mode -->
+
+    <div id="daemon-plugin-container"></div>
+    <div id="host-plugin-container"></div>
+
+    <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
+
+    <div class="inset" data-ui-mode="home" hidden>
+
+      <meta-include src="webapp/html/ui_header.html"/>
+
+      <meta-include src="webapp/html/butterbar.html"/>
+
+      <meta-include src="webapp/html/ui_it2me.html"/>
+
+      <meta-include src="webapp/html/ui_me2me.html"/>
+
+    </div> <!-- inset -->
+
+    <meta-include src="webapp/html/dialog_auth.html"/>
+
+    <div class="dialog-screen"
+         data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings"
+         hidden></div>
+
+    <div class="dialog-container"
+         data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-install home.host-setup home.token-refresh-failed home.manage-pairings"
+         hidden>
+
+      <div class="box-spacer"></div>
+
+      <meta-include src="webapp/html/dialog_token_refresh_failed.html"/>
+
+      <meta-include src="webapp/html/dialog_host_setup.html"/>
+
+      <meta-include src="webapp/html/dialog_host_install.html"/>
+
+      <meta-include src="webapp/html/dialog_host.html"/>
+
+      <meta-include src="webapp/html/dialog_client.html"/>
+
+      <meta-include src="webapp/html/dialog_connection_history.html"/>
+
+      <meta-include src="webapp/html/dialog_confirm_host_delete.html"/>
+
+      <meta-include src="webapp/html/dialog_manage_pairings.html"/>
+
+      <div class="box-spacer"></div>
+
+    </div> <!-- dialog-container -->
+
+    <div id="session-mode"
+         data-ui-mode="in-session home.client"
+         class="full-height"
+         hidden>
+
+      <meta-include src="webapp/html/toolbar.html"/>
+
+      <meta-include src="webapp/html/client_plugin.html"/>
+
+    </div> <!-- session-mode -->
+
+    <div id="statistics" dir="ltr" class="selectable" hidden>
+    </div> <!-- statistics -->
+
+  </body>
+</html>
diff --git a/remoting/webapp/html/template_wcs_sandbox.html b/remoting/webapp/html/template_wcs_sandbox.html
new file mode 100644
index 0000000..11916ae
--- /dev/null
+++ b/remoting/webapp/html/template_wcs_sandbox.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<!--
+Copyright (c) 2013 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">
+
+    <meta-include type="javascript"/>
+
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/remoting/webapp/html/toolbar.html b/remoting/webapp/html/toolbar.html
new file mode 100644
index 0000000..6838f49
--- /dev/null
+++ b/remoting/webapp/html/toolbar.html
@@ -0,0 +1,62 @@
+<!--
+Copyright (c) 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="session-toolbar"
+     data-ui-mode="in-session"
+     class="toolbar-container"
+     hidden>
+
+  <div class="toolbar-border">
+
+    <div id="session-status-message"
+         i18n-content="LABEL_CONNECTED"></div>
+
+    <div id="connected-to"></div>
+
+    <div id="new-connection" class="icon-black apps-v2-only">
+      <img src="plus.webp" i18n-title="NEW_CONNECTION">
+    </div>
+
+    <div class="box-spacer"></div>
+
+    <button id="toolbar-disconnect"
+            type="button"
+            i18n-content="DISCONNECT_MYSELF_BUTTON">
+    </button>
+
+    <span class="menu-button" id="send-keys-menu">
+      <button>
+        <span i18n-content="SEND_KEYS"></span>
+        <img src="disclosure_arrow_down.webp"
+             class="kd-disclosureindicator">
+      </button>
+      <ul>
+        <li id="send-ctrl-alt-del" i18n-content="SEND_CTRL_ALT_DEL"></li>
+        <li id="send-print-screen" i18n-content="SEND_PRINT_SCREEN"></li>
+      </ul>
+    </span>
+
+    <span class="menu-button" id="screen-options-menu">
+      <button>
+        <span i18n-content="SCREEN_OPTIONS"></span>
+        <img src="disclosure_arrow_down.webp"
+             class="kd-disclosureindicator">
+      </button>
+      <ul>
+        <li id="screen-resize-to-client"
+            i18n-content="RESIZE_TO_CLIENT"></li>
+        <li id="screen-shrink-to-fit" i18n-content="SHRINK_TO_FIT"></li>
+        <li class="menu-separator"></li>
+        <li id="toggle-full-screen" i18n-content="FULL_SCREEN"></li>
+      </ul>
+    </span>
+
+  </div>
+
+  <div class="toolbar-stub" id="toolbar-stub">
+    <div class="arrow-down"></div>
+  </div>
+
+</div> <!-- session-toolbar -->
diff --git a/remoting/webapp/html/ui_header.html b/remoting/webapp/html/ui_header.html
new file mode 100644
index 0000000..ba366a8
--- /dev/null
+++ b/remoting/webapp/html/ui_header.html
@@ -0,0 +1,28 @@
+<!--
+Copyright (c) 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.
+-->
+<header>
+
+  <div>
+    <img src="chromoting48.webp">
+    <h1 class="icon-label" i18n-content="PRODUCT_NAME"></h1>
+  </div>
+
+  <div class="box-spacer"></div>
+
+  <div id="top-secondary">
+    <span id="current-email"></span>
+    <span data-ui-mode="home" class="apps-v1-only">
+      <a id="sign-out" href="#" i18n-content="SIGN_OUT_BUTTON"></a>
+      <!-- TODO(jamiewalch): Add this back in when we support it.
+           <a id="connection-history"
+              i18n-content="CONNECTION_HISTORY_BUTTON"></a> |
+           -->
+    </span> |
+    <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
+       target="_blank" i18n-content="HELP"></a>
+  </div>
+
+</header>
diff --git a/remoting/webapp/html/ui_it2me.html b/remoting/webapp/html/ui_it2me.html
new file mode 100644
index 0000000..15a3b10
--- /dev/null
+++ b/remoting/webapp/html/ui_it2me.html
@@ -0,0 +1,56 @@
+<!--
+Copyright (c) 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.
+-->
+<section>
+
+  <h2 i18n-content="MODE_IT2ME"></h2>
+
+  <div id="it2me-first-run">
+    <div>
+      <p class="infographic-description"
+         i18n-content="IT2ME_FIRST_RUN"></p>
+      <button id="get-started-it2me"
+              i18n-content="GET_STARTED"
+              disabled></button>
+    </div>
+    <div class="infographic">
+      <img src="infographic_remote_assistance.webp">
+    </div>
+  </div>
+
+  <div id="it2me-content">
+    <p id="webapp-description"
+       i18n-content="DESCRIPTION_HOME"
+       i18n-value-1="<a href='https://chrome.google.com/remotedesktop' target='_blank'>chrome.google.com/remotedesktop</a>"></p>
+    <div>
+      <div class="section-row">
+        <div class="box-spacer">
+          <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
+          <div id="chrome-os-no-share"
+               i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
+               class="small-print"></div>
+        </div>
+        <div>
+          <button id="share-button"
+                  i18n-content="HOME_SHARE_BUTTON"
+                  class="kd-button-share"
+                  type="button">
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="section-row">
+      <div i18n-content="HOME_ACCESS_DESCRIPTION"
+           class="box-spacer"></div>
+      <div>
+        <button id="access-mode-button"
+                i18n-content="HOME_ACCESS_BUTTON"
+                type="button">
+        </button>
+      </div>
+    </div>
+  </div> <!-- it2me-content -->
+
+</section> <!-- Remote Assistance -->
diff --git a/remoting/webapp/html/ui_me2me.html b/remoting/webapp/html/ui_me2me.html
new file mode 100644
index 0000000..057157a
--- /dev/null
+++ b/remoting/webapp/html/ui_me2me.html
@@ -0,0 +1,107 @@
+<!--
+Copyright (c) 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.
+-->
+<section id="host-list-div" class="host-list-container">
+
+  <div id="me2me-first-run">
+    <h2 i18n-content="MODE_ME2ME"></h2>
+    <div>
+      <p class="infographic-description"
+         i18n-content="ME2ME_FIRST_RUN"></p>
+      <button id="get-started-me2me"
+              i18n-content="GET_STARTED"
+              disabled></button>
+    </div>
+    <div class="infographic">
+      <img src="infographic_my_computers.webp">
+    </div>
+  </div>
+
+  <div id="me2me-content">
+    <h2>
+      <span i18n-content="MODE_ME2ME"></span>
+      <span class="h2-secondary" id="host-list-loading-indicator">
+        <a href="#" id="host-list-reload"
+           class="icon-black"
+           i18n-title="TOOLTIP_REFRESH">
+          <img src="reload.webp">
+        </a>
+        <img src="spinner.gif" id="host-list-loading">
+      </span>
+    </h2>
+
+    <div id="host-list" hidden></div>
+
+    <div id="host-list-error" class="box" hidden>
+      <div id="host-list-error-message" class="error-state"></div>
+      <div class="box-spacer"></div>
+      <button type="button"
+              id="host-list-refresh-failed-button"></button>
+    </div>
+
+    <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
+      <div class="section-row no-non-local-hosts"
+           data-daemon-state="disabled">
+        <img src="icon_host.webp" class="host-list-main-icon">
+        <div class="box-spacer host-list-label"
+             id="start-daemon-message"
+             i18n-content="HOME_DAEMON_START_MESSAGE"></div>
+        <button type="button"
+                id="start-daemon"
+                i18n-content="HOME_DAEMON_START_BUTTON">
+        </button>
+      </div> <!-- disabled -->
+      <div id="this-host-connect"
+           class="section-row clickable no-non-local-hosts"
+           data-daemon-state="enabled">
+        <div class="host-list-main-icon">
+          <span id="this-host-warning" hidden></span>
+          <img id="this-host-icon"
+               src="icon_host.webp">
+        </div>
+        <div id="this-host-name" class="box-spacer"></div>
+        <span id="this-host-rename"
+              class="host-list-edit"
+              tabIndex="0"
+              i18n-title="TOOLTIP_RENAME">
+          <img class="host-list-rename-icon"
+               src="icon_pencil.webp">
+        </span>
+        <button type="button"
+                id="stop-daemon"
+                i18n-content="HOME_DAEMON_STOP_BUTTON">
+        </button>
+      </div> <!-- this-host-connect -->
+      <div data-daemon-state="enabled">
+        <div>
+          <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
+          <a id="change-daemon-pin"
+             href="#"
+             i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
+        </div>
+        <div id="paired-client-manager-message" hidden>
+          <span i18n-content="HOME_DAEMON_PAIRED_MESSAGE"></span>
+          <a href="#"
+             id="open-paired-client-manager-dialog"
+             i18n-content="HOME_DAEMON_MANAGE_PAIRINGS"></a>
+        </div>
+      </div> <!-- enabled -->
+      <div id="host-list-empty" hidden>
+        <div id="host-list-empty-hosting-supported"
+             class="host-list-empty-instructions"
+             i18n-content="HOST_LIST_EMPTY_HOSTING_SUPPORTED"
+             i18n-value-name-1="HOME_DAEMON_START_BUTTON">
+        </div>
+        <div id="host-list-empty-hosting-unsupported"
+             class="host-list-empty-instructions"
+             i18n-content="HOST_LIST_EMPTY_HOSTING_UNSUPPORTED"
+             i18n-value-name-1="HOME_DAEMON_START_BUTTON">
+        </div>
+      </div>
+    </div> <!-- daemon-control -->
+
+  </div> <!-- me2me-content -->
+
+</section> <!-- host-list-div -->
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
deleted file mode 100644
index 32ff10a..0000000
--- a/remoting/webapp/main.html
+++ /dev/null
@@ -1,809 +0,0 @@
-<!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="scrollable full-height">
-  <head>
-    <meta charset="utf-8">
-    <link rel="icon" type="image/png" href="chromoting16.webp">
-    <link rel="stylesheet" href="open_sans.css">
-    <link rel="stylesheet" href="connection_stats.css">
-    <link rel="stylesheet" href="main.css">
-    <link rel="stylesheet" href="menu_button.css">
-    <link rel="stylesheet" href="toolbar.css">
-    <script src="butter_bar.js"></script>
-    <script src="client_plugin.js"></script>
-    <script src="client_screen.js"></script>
-    <script src="client_session.js"></script>
-    <script src="clipboard.js"></script>
-    <script src="connection_stats.js"></script>
-    <script src="error.js"></script>
-    <script src="event_handlers.js"></script>
-    <script src="format_iq.js"></script>
-    <script src="host.js"></script>
-    <script src="host_controller.js"></script>
-    <script src="host_dispatcher.js"></script>
-    <script src="host_install_dialog.js"></script>
-    <script src="host_it2me_dispatcher.js"></script>
-    <script src="host_it2me_native_messaging.js"></script>
-    <script src="host_list.js"></script>
-    <script src="host_native_messaging.js"></script>
-    <script src="host_screen.js"></script>
-    <script src="host_session.js"></script>
-    <script src="host_settings.js"></script>
-    <script src="host_setup_dialog.js"></script>
-    <script src="host_table_entry.js"></script>
-    <script src="identity.js"></script>
-    <script src="l10n.js"></script>
-    <script src="log_to_server.js"></script>
-    <script src="media_source_renderer.js"></script>
-    <script src="menu_button.js"></script>
-    <script src="oauth2.js"></script>
-    <script src="oauth2_api.js"></script>
-    <script src="paired_client_manager.js"></script>
-    <script src="plugin_settings.js"></script>
-    <script src="remoting.js"></script>
-    <script src="server_log_entry.js"></script>
-    <script src="session_connector.js"></script>
-    <script src="stats_accumulator.js"></script>
-    <script src="third_party_host_permissions.js"></script>
-    <script src="third_party_token_fetcher.js"></script>
-    <script src="toolbar.js"></script>
-    <script src="typecheck.js"></script>
-    <script src="ui_mode.js"></script>
-    <script src="xhr.js"></script>
-    <script src="wcs_sandbox_container.js"></script>
-    <title i18n-content="PRODUCT_NAME"></title>
-  </head>
-
-  <body class="full-height">
-
-    <!-- loading-mode is initially visible, but becomes hidden as soon as an
-         AppMode is selected by remoting.init. All other divs are initially
-         hidden, but are shown appropriately when the mode changes. -->
-    <section id="loading-mode" data-ui-mode="">
-      <em>Loading&hellip;</em>
-    </section> <!-- loading-mode -->
-
-    <div id="daemon-plugin-container"></div>
-    <div id="host-plugin-container"></div>
-
-    <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
-
-    <div class="inset" data-ui-mode="home" hidden>
-
-      <header>
-        <div>
-          <img src="chromoting48.webp">
-          <h1 class="icon-label" i18n-content="PRODUCT_NAME"></h1>
-        </div>
-        <div class="box-spacer"></div>
-        <div id="top-secondary">
-          <span id="current-email"></span>
-          <span data-ui-mode="home" class="apps-v1-only">
-            <a id="sign-out" href="#" i18n-content="SIGN_OUT_BUTTON"></a>
-            <!-- TODO(jamiewalch): Add this back in when we support it.
-                 <a id="connection-history"
-                    i18n-content="CONNECTION_HISTORY_BUTTON"></a> |
-                 -->
-          </span> |
-          <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
-             target="_blank" i18n-content="HELP"></a>
-        </div>
-      </header>
-
-      <div data-ui-mode="home">
-        <div id="butter-bar" hidden>
-          <p>
-            <span id="butter-bar-message"></span>
-            <a id="butter-bar-dismiss" href="#">
-              <img src="icon_cross.webp" class="close-icon">
-            </a>
-          </p>
-        </div>
-      </div>
-
-      <section>
-        <h2 i18n-content="MODE_IT2ME"></h2>
-        <div id="it2me-first-run">
-          <div>
-            <p class="infographic-description"
-               i18n-content="IT2ME_FIRST_RUN"></p>
-            <button id="get-started-it2me"
-                    i18n-content="GET_STARTED"
-                    disabled></button>
-          </div>
-          <div class="infographic">
-            <img src="infographic_remote_assistance.webp">
-          </div>
-        </div>
-        <div id="it2me-content">
-          <p id="webapp-description"
-             i18n-content="DESCRIPTION_HOME"
-             i18n-value-1="<a href='https://chrome.google.com/remotedesktop' target='_blank'>chrome.google.com/remotedesktop</a>"></p>
-          <div>
-            <div class="section-row">
-              <div class="box-spacer">
-                <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
-                <div id="chrome-os-no-share"
-                     i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
-                     class="small-print"></div>
-              </div>
-              <div>
-                <button id="share-button"
-                        i18n-content="HOME_SHARE_BUTTON"
-                        class="kd-button-share"
-                        type="button">
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="section-row">
-            <div i18n-content="HOME_ACCESS_DESCRIPTION"
-                 class="box-spacer"></div>
-            <div>
-              <button id="access-mode-button"
-                      i18n-content="HOME_ACCESS_BUTTON"
-                      type="button">
-              </button>
-            </div>
-          </div>
-        </div> <!-- it2me-content -->
-      </section> <!-- Remote Assistance -->
-
-      <section id="host-list-div" class="host-list-container">
-        <div id="me2me-first-run">
-          <h2 i18n-content="MODE_ME2ME"></h2>
-          <div>
-            <p class="infographic-description"
-               i18n-content="ME2ME_FIRST_RUN"></p>
-            <button id="get-started-me2me"
-                    i18n-content="GET_STARTED"
-                    disabled></button>
-          </div>
-          <div class="infographic">
-            <img src="infographic_my_computers.webp">
-          </div>
-        </div>
-        <div id="me2me-content">
-          <h2>
-            <span i18n-content="MODE_ME2ME"></span>
-            <span class="h2-secondary" id="host-list-loading-indicator">
-              <a href="#" id="host-list-reload"
-                 class="icon-black"
-                 i18n-title="TOOLTIP_REFRESH">
-                <img src="reload.webp">
-              </a>
-              <img src="spinner.gif" id="host-list-loading">
-            </span>
-          </h2>
-          <div id="host-list" hidden></div>
-          <div id="host-list-error" class="box" hidden>
-            <div id="host-list-error-message" class="error-state"></div>
-            <div class="box-spacer"></div>
-            <button type="button"
-                    id="host-list-refresh-failed-button"></button>
-          </div>
-          <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
-            <div class="section-row no-non-local-hosts"
-                 data-daemon-state="disabled">
-              <img src="icon_host.webp" class="host-list-main-icon">
-              <div class="box-spacer host-list-label"
-                   id="start-daemon-message"
-                   i18n-content="HOME_DAEMON_START_MESSAGE"></div>
-              <button type="button"
-                      id="start-daemon"
-                      i18n-content="HOME_DAEMON_START_BUTTON">
-              </button>
-            </div> <!-- disabled -->
-            <div id="this-host-connect"
-                 class="section-row clickable no-non-local-hosts"
-                 data-daemon-state="enabled">
-              <div class="host-list-main-icon">
-                <span id="this-host-warning" hidden></span>
-                <img id="this-host-icon"
-                     src="icon_host.webp">
-              </div>
-              <div id="this-host-name" class="box-spacer"></div>
-              <span id="this-host-rename"
-                    class="host-list-edit"
-                    tabIndex="0"
-                    i18n-title="TOOLTIP_RENAME">
-                <img class="host-list-rename-icon"
-                     src="icon_pencil.webp">
-              </span>
-              <button type="button"
-                      id="stop-daemon"
-                      i18n-content="HOME_DAEMON_STOP_BUTTON">
-              </button>
-            </div> <!-- this-host-connect -->
-            <div data-daemon-state="enabled">
-              <div>
-                <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
-                <a id="change-daemon-pin"
-                   href="#"
-                   i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
-              </div>
-              <div id="paired-client-manager-message" hidden>
-                <span i18n-content="HOME_DAEMON_PAIRED_MESSAGE"></span>
-                <a href="#"
-                   id="open-paired-client-manager-dialog"
-                   i18n-content="HOME_DAEMON_MANAGE_PAIRINGS"></a>
-              </div>
-            </div> <!-- enabled -->
-            <div id="host-list-empty" hidden>
-              <div id="host-list-empty-hosting-supported"
-                   class="host-list-empty-instructions"
-                   i18n-content="HOST_LIST_EMPTY_HOSTING_SUPPORTED"
-                   i18n-value-name-1="HOME_DAEMON_START_BUTTON">
-              </div>
-              <div id="host-list-empty-hosting-unsupported"
-                   class="host-list-empty-instructions"
-                   i18n-content="HOST_LIST_EMPTY_HOSTING_UNSUPPORTED"
-                   i18n-value-name-1="HOME_DAEMON_START_BUTTON">
-              </div>
-            </div>
-          </div> <!-- daemon-control -->
-        </div> <!-- me2me-content -->
-      </section> <!-- host-list-div -->
-    </div> <!-- inset -->
-
-    <div id="auth-dialog" hidden>
-      <div class="dialog-screen"></div>
-      <div class="dialog-container">
-        <div class="box-spacer"></div>
-        <div class="kd-modaldialog">
-          <h2 i18n-content="MODE_AUTHORIZE"></h2>
-          <p id="auth-error-message"
-             i18n-content="DESCRIPTION_AUTHORIZE"
-             class="message"></p>
-          <div class="button-row">
-            <button id="auth-button"
-                    type="button"
-                    autofocus="autofocus"
-                    i18n-content="CONTINUE_BUTTON">
-            </button>
-          </div>
-        </div>
-        <div class="box-spacer"></div>
-      </div>
-    </div> <!-- auth-dialog -->
-
-    <div class="dialog-screen"
-         data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed home.manage-pairings"
-         hidden></div>
-
-    <div class="dialog-container"
-         data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-install home.host-setup home.token-refresh-failed home.manage-pairings"
-         hidden>
-
-      <div class="box-spacer"></div>
-
-      <!-- TODO(jamiewalch): Refactor the various error-state divs -->
-      <div class="kd-modaldialog" data-ui-mode="home.token-refresh-failed">
-        <div class="message">
-          <span id="token-refresh-error-message" class="error-state"></span>
-        </div>
-        <div id="token-refresh-auth-failed" class="button-row">
-          <button id="token-refresh-error-sign-in"
-                  type="button"
-                  i18n-content="SIGN_IN_BUTTON"></button>
-        </div>
-        <div id="token-refresh-other-error" class="button-row">
-          <button id="token-refresh-error-ok"
-                  type="button"
-                  i18n-content="OK"></button>
-        </div>
-      </div> <!-- home.token-refresh-failed -->
-
-      <div id="host-setup-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.host-setup">
-        <form id="ask-pin-form"
-              data-ui-mode="home.host-setup.ask-pin"
-              action="">
-          <p class="message">
-            <span i18n-content="HOST_SETUP_DIALOG_DESCRIPTION"
-                  i18n-value-1="<b>"
-                  i18n-value-2="</b>"></span>
-            <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
-               target="_blank"
-               i18n-content="WHY_IS_THIS_SAFE"></a>
-          </p>
-          <table id="set-pin-table">
-            <tr>
-              <td class="table-label">
-                <label for="daemon-pin-entry"
-                       i18n-content="ASK_PIN_DIALOG_LABEL"
-                       class="editbox-label"></label>
-              </td>
-              <td>
-                <input id="daemon-pin-entry"
-                       autofocus="autofocus"
-                       type="password">
-              </td>
-            </tr>
-            <tr>
-              <td class="table-label">
-                <label for="daemon-pin-confirm"
-                       i18n-content="ASK_PIN_DIALOG_CONFIRM_LABEL"
-                       class="editbox-label"></label>
-              </td>
-              <td>
-                <input id="daemon-pin-confirm" type="password">
-              </td>
-            <tr>
-          </table>
-          <div id="daemon-pin-error-div" class="message" hidden>
-            <span id="daemon-pin-error-message" class="error-state">
-            </span>
-          </div>
-          <div id="usagestats-consent" hidden>
-            <label class="checkbox-label">
-              <input id="usagestats-consent-checkbox" type="checkbox">
-              <span i18n-content="HOST_SETUP_CRASH_REPORTING_MESSAGE"></span>
-            </label>
-          </div>
-          <div class="button-row">
-            <button id="daemon-pin-ok" type="submit" i18n-content="OK">
-            </button>
-            <button id="daemon-pin-cancel" type="button" i18n-content="CANCEL">
-            </button>
-          </div>
-        </form>
-        <div data-ui-mode="home.host-setup.processing"
-             class="box"
-             hidden>
-          <span class="waiting prominent"
-                id="host-setup-processing-message">
-          </span>
-        </div>
-        <div data-ui-mode="home.host-setup.done" hidden>
-          <div id="host-setup-done-message" class="message"></div>
-          <div id="host-setup-done-message-2" class="message"></div>
-          <div class="button-row">
-            <button id="host-config-done-dismiss"
-                    autofocus="autofocus"
-                    i18n-content="OK"></button>
-          </div>
-        </div>
-        <div data-ui-mode="home.host-setup.error" hidden>
-          <div id="host-setup-error-message" class="error-state"></div>
-          <div class="button-row">
-            <button id="host-config-error-dismiss"
-                    autofocus="autofocus"
-                    i18n-content="OK"></button>
-          </div>
-        </div>
-      </div> <!-- host-setup-dialog -->
-
-      <div id="host-install-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.host-install">
-        <div data-ui-mode="home.host-install.prompt" hidden>
-          <div class="message" i18n-content="HOST_SETUP_INSTALL"></div>
-          <div class="button-row">
-            <button id="host-install-continue"
-                    autofocus="autofocus"
-                    i18n-content="OK"></button>
-            <button id="host-install-dismiss"
-                    i18n-content="CANCEL"></button>
-          </div>
-        </div>
-        <div data-ui-mode="home.host-install.pending" hidden>
-          <div class="message"
-               i18n-content="HOST_SETUP_INSTALL_PENDING"></div>
-          <div class="button-row">
-            <button id="host-install-retry"
-                    autofocus="autofocus"
-                    i18n-content="OK"></button>
-          </div>
-        </div>
-      </div> <!-- host-install-dialog -->
-
-      <!-- It2Me Sharing -->
-      <div id="host-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.host">
-
-        <div data-ui-mode="home.host.waiting-for-code" class="message"
-             i18n-content="MESSAGE_GENERATING">
-        </div> <!-- host.waiting-for-code -->
-
-        <div data-ui-mode="home.host.waiting-for-connection">
-          <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
-          <div id="access-code-display" dir="ltr" class="selectable"></div>
-          <div id="access-code-countdown-container">
-            <div id="access-code-countdown" class="expiring" hidden>
-              <span id="seconds-remaining"
-                    i18n-content="ACCESS_CODE_TIMER"></span>
-            </div>
-          </div>
-          <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
-        </div> <!-- host.waiting-for-connection -->
-
-        <div data-ui-mode="home.host.shared">
-          <div id="host-shared-message" class="message"
-               i18n-content="MESSAGE_SHARED"></div>
-          <div class="button-row">
-            <button id="stop-sharing-button"
-                    type="button"
-                    i18n-content="STOP_SHARING_BUTTON">
-            </button>
-          </div>
-        </div> <!-- host.shared -->
-
-        <div data-ui-mode="home.host.share-failed" class="message">
-          <span id="host-plugin-error" class="error-state"></span>
-        </div> <!-- host.share-failed -->
-
-        <div data-ui-mode="home.host.share-finished" class="message"
-             i18n-content="MESSAGE_SESSION_FINISHED">
-        </div> <!-- host.share-finished -->
-
-        <div data-ui-mode="home.host.share-failed home.host.share-finished"
-             class="button-row">
-          <button id="host-finished-button"
-                  type="button"
-                  autofocus="autofocus"
-                  i18n-content="OK">
-          </button>
-        </div>
-
-        <div id="nat-box"
-             class="information-box"
-             data-ui-mode="home.host.waiting-for-connection"
-             i18n-content="WARNING_NAT_DISABLED">
-        </div> <!-- nat-box -->
-
-        <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
-             class="button-row">
-          <span class="waiting" i18n-content="FOOTER_WAITING"></span>
-          <button id="cancel-share-button" i18n-content="CANCEL"></button>
-        </div>
-
-      </div> <!-- host dialog -->
-
-      <div id="client-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.client">
-
-        <div data-ui-mode="home.client.unconnected">
-          <div i18n-content="DESCRIPTION_CONNECT"></div>
-          <div id="access-code-entry-row">
-            <form id="access-code-form" action="">
-              <div class="box">
-                <div class="box-spacer"></div>
-                <label for="access-code-entry"
-                       i18n-content="ACCESS_CODE"
-                       class="editbox-label">
-                </label>
-                <input id="access-code-entry"
-                       type="text"
-                       autofocus="autofocus"
-                       autocomplete="off"/>
-                <div class="box-spacer"></div>
-              </div>
-              <div class="button-row">
-                <button id="connect-button"
-                        type="submit"
-                        i18n-content="CONNECT_BUTTON">
-                </button>
-                <button id="cancel-access-code-button"
-                        type="button"
-                        i18n-content="CANCEL">
-                </button>
-              </div>
-            </form>
-          </div> <!-- code-entry-row -->
-          <div id="startup-mode-box-it2me" class="information-box" hidden>
-            <span i18n-content="WARNING_NOT_WINDOWED"></span>
-            <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
-               target="_blank"
-               i18n-content="LEARN_HOW"></a>
-          </div> <!-- startup-mode-box-it2me -->
-
-        </div> <!-- client.unconnected -->
-
-        <div data-ui-mode="home.client.connecting" class="box">
-          <span class="waiting prominent"
-                i18n-content="FOOTER_CONNECTING"></span>
-          <div class="box-spacer"></div>
-          <button id="cancel-connect-button" i18n-content="CANCEL"></button>
-        </div> <!-- client.connecting -->
-
-        <div data-ui-mode="home.client.host-needs-upgrade">
-          <div id="host-needs-update-message"
-               class="message error-state multi-line-error-state">
-          </div>
-          <div class="message">
-            <span i18n-content="HOST_NEEDS_UPDATE_DETAIL"></span>
-            <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
-               target="_blank"
-               i18n-content="LEARN_HOW"></a>
-          </div>
-          <div class="button-row">
-            <button id="host-needs-update-connect-button"
-                    type="button"
-                    i18n-content="CONNECT_ANYWAY"
-                    autofocus="autofocus">
-            </button>
-            <button id="host-needs-update-cancel-button"
-                    type="button"
-                    i18n-content="CANCEL">
-            </button>
-          </div>
-        </div> <!-- home.client.host-needs-upgrade -->
-
-        <div data-ui-mode="home.client.pin-prompt">
-          <div id="pin-message"
-               i18n-content="PIN_MESSAGE"
-               class="message"></div>
-          <form id="pin-form" action="">
-            <table class="centered">
-              <tr>
-                <td>
-                  <label for="pin-entry"
-                         i18n-content="PIN"
-                         class="editbox-label"></label>
-                </td>
-                <td>
-                  <input id="pin-entry"
-                         type="password"
-                         autofocus="autofocus"
-                         autocomplete="off"/>
-                  <button id="pin-connect-button"
-                          type="submit"
-                          i18n-content="CONNECT_BUTTON">
-                  </button>
-                  <button id="cancel-pin-entry-button"
-                          type="button"
-                          i18n-content="CANCEL">
-                  </button>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <!-- Empty cell to align the checkbox and PIN entry. -->
-                </td>
-                <td>
-                  <label id="remember-pin" class="checkbox-label">
-                    <input id="remember-pin-checkbox" type="checkbox">
-                    <span i18n-content="REMEMBER_PIN"></span>
-                  </label>
-                </td>
-              </tr>
-            </table>
-          </form>
-          <div id="startup-mode-box-me2me"
-               class="information-box centered"
-               hidden>
-            <span i18n-content="WARNING_NOT_WINDOWED"></span>
-            <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
-               target="_blank"
-               i18n-content="LEARN_HOW"></a>
-          </div> <!-- startup-mode-box-it2me -->
-        </div> <!-- client.pin-prompt -->
-
-        <div data-ui-mode="home.client.third-party-auth" class="centered">
-          <div id="third-party-auth-message"
-               i18n-content="DESCRIPTION_THIRD_PARTY_AUTH"
-               class="message"></div>
-          <div id="third-party-auth-url"
-               class="message"></div>
-          <div class="button-row">
-            <button id="third-party-auth-button"
-                    type="button"
-                    autofocus="autofocus"
-                    i18n-content="CONTINUE_BUTTON">
-            </button>
-          </div>
-        </div> <!-- third-party-auth-dialog -->
-
-        <div data-ui-mode="home.client.connect-failed"
-             class="message">
-          <span id="connect-error-message" class="error-state"></span>
-        </div> <!-- client.connect-failed -->
-
-        <div data-ui-mode="home.client.session-finished"
-             class="message" i18n-content="MESSAGE_SESSION_FINISHED">
-        </div> <!-- client.session-finished -->
-
-        <div data-ui-mode="home.client.connect-failed.it2me home.client.session-finished.it2me"
-             class="button-row">
-          <button id="client-finished-it2me-button"
-                  type="button"
-                  i18n-content="OK"
-                  autofocus="autofocus">
-          </button>
-        </div> <!-- connect-failed.it2me session-finished.it2me -->
-
-        <div data-ui-mode="home.client.connect-failed.me2me home.client.session-finished.me2me"
-             class="button-row">
-          <button id="client-reconnect-button"
-                  type="button"
-                  i18n-content="RETRY"
-                  autofocus="autofocus">
-          </button>
-          <button id="client-finished-me2me-button"
-                  type="button"
-                  i18n-content="CANCEL">
-          </button>
-        </div> <!-- connect-failed.me2me session-finished.me2me -->
-
-      </div> <!-- client-dialog -->
-
-      <div id="connection-history-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.history"
-           hidden>
-        <div class="internal-frame-of-reference">
-          <h2 i18n-content="CONNECTION_HISTORY_TITLE"></h2>
-          <div id="connection-history-options">
-            <div class="link-list">
-              <a id="history-view-all"
-                 i18n-content="ALL_CONNECTIONS"
-                 class="no-link"></a>
-              <a id="history-view-outgoing"
-                 i18n-content="OUTGOING_CONNECTIONS"></a>
-              <a id="history-view-incoming"
-                 i18n-content="INCOMING_CONNECTIONS"></a>
-            </div>
-            <div class="box-spacer"></div>
-            <a id="clear-connection-history" i18n-content="CLEAR_HISTORY"></a>
-          </div>
-          <div id="connection-history-scroller">
-            <table id="connection-history-table">
-              <thead>
-                <tr>
-                  <td></td>
-                  <td i18n-content="TIME_HEADER"></td>
-                  <td></td>
-                  <td i18n-content="CONNECTION_FROM_HEADER"></td>
-                  <td i18n-content="CONNECTION_TO_HEADER"></td>
-                  <td i18n-content="DURATION_HEADER"></td>
-                </tr>
-              </thead>
-              <tbody id="connection-history-entries" class="selectable">
-              </tbody>
-            </table>
-          </div>
-          <button id="close-connection-history"
-                  i18n-content="CLOSE"
-                  type="button"></button>
-        </div>
-      </div> <!-- connection-history-dialog -->
-
-      <div id="confirm-host-delete-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.confirm-host-delete"
-           hidden>
-        <p id="confirm-host-delete-message"
-           i18n-content="CONFIRM_HOST_DELETE"
-           class="message">
-        </p>
-        <div class="button-row">
-          <button id="confirm-host-delete"
-                  i18n-content="DISABLE_HOST"
-                  type="button">
-          </button>
-          <button id="cancel-host-delete"
-                  i18n-content="CANCEL"
-                  autofocus="autofocus"
-                  type="button">
-          </button>
-        </div>
-      </div> <!-- home.confirm-host-delete -->
-
-      <div id="paired-client-manager-dialog"
-           class="kd-modaldialog"
-           data-ui-mode="home.manage-pairings"
-           hidden>
-        <p i18n-content="PAIRED_CLIENTS_INTRODUCTION"
-           class="message">
-        </p>
-        <div id="paired-clients-list">
-          <table>
-            <thead>
-              <tr>
-                <td i18n-content="PAIRED_CLIENT_DATE"></td>
-                <td i18n-content="PAIRED_CLIENT_NAME"></td>
-              </tr>
-            </thead>
-            <tbody>
-            </tbody>
-          </table>
-          <p id="no-paired-clients">
-            <em i18n-content="NO_PAIRED_CLIENTS"></em>
-          </p>
-        </div> <!-- paired-clients-list -->
-        <p id="paired-client-manager-dialog-error"
-           class="error-state"
-           hidden>
-        </p>
-        <div class="button-row">
-          <span id="paired-client-manager-dialog-working"
-                class="waiting"
-                i18n-content="WORKING"
-                hidden></span>
-          <button id="delete-all-paired-clients"
-                  i18n-content="DELETE_ALL_PAIRED_CLIENTS">
-          </button>
-          <button id="close-paired-client-manager-dialog"
-                  i18n-content="CLOSE">
-          </button>
-        </div>
-      </div> <!-- home.manage-pairings -->
-
-      <div class="box-spacer"></div>
-
-    </div> <!-- dialog-container -->
-
-    <div id="session-mode"
-         data-ui-mode="in-session home.client"
-         class="full-height"
-         hidden>
-      <div id="session-toolbar"
-           data-ui-mode="in-session"
-           class="toolbar-container"
-           hidden>
-        <div class="toolbar-border">
-          <div id="session-status-message"
-               i18n-content="LABEL_CONNECTED"></div>
-          <div id="connected-to"></div>
-          <div id="new-connection" class="icon-black apps-v2-only">
-            <img src="plus.webp" i18n-title="NEW_CONNECTION">
-          </div>
-          <div class="box-spacer"></div>
-          <button id="toolbar-disconnect"
-                  type="button"
-                  i18n-content="DISCONNECT_MYSELF_BUTTON">
-          </button>
-          <span class="menu-button" id="send-keys-menu">
-            <button>
-              <span i18n-content="SEND_KEYS"></span>
-              <img src="disclosure_arrow_down.webp"
-                   class="kd-disclosureindicator">
-            </button>
-            <ul>
-              <li id="send-ctrl-alt-del" i18n-content="SEND_CTRL_ALT_DEL"></li>
-              <li id="send-print-screen" i18n-content="SEND_PRINT_SCREEN"></li>
-            </ul>
-          </span>
-          <span class="menu-button" id="screen-options-menu">
-            <button>
-              <span i18n-content="SCREEN_OPTIONS"></span>
-              <img src="disclosure_arrow_down.webp"
-                   class="kd-disclosureindicator">
-            </button>
-            <ul>
-              <li id="screen-resize-to-client"
-                  i18n-content="RESIZE_TO_CLIENT"></li>
-              <li id="screen-shrink-to-fit" i18n-content="SHRINK_TO_FIT"></li>
-              <li class="menu-separator"></li>
-              <li id="toggle-full-screen" i18n-content="FULL_SCREEN"></li>
-            </ul>
-          </span>
-        </div>
-        <div class="toolbar-stub" id="toolbar-stub">
-          <div class="arrow-down"></div>
-        </div>
-      </div> <!-- session-toolbar -->
-      <div class="vertically-centered">
-        <div class="horizontally-centered">
-          <div id="video-container">
-            <video id="mediasource-video-output"></video>
-            <div id="client-plugin-container"></div>
-          </div>
-        </div>
-      </div>
-    </div> <!-- session-mode -->
-
-    <div id="statistics" dir="ltr" class="selectable" hidden>
-    </div> <!-- statistics -->
-
-  </body>
-</html>
diff --git a/remoting/webapp/wcs_sandbox.html b/remoting/webapp/wcs_sandbox.html
deleted file mode 100644
index b768d05..0000000
--- a/remoting/webapp/wcs_sandbox.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<!--
-Copyright 2013 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">
-    <script src="error.js"></script>
-    <script src="plugin_settings.js"></script>
-    <script src="xhr_proxy.js"></script>
-    <script src="wcs.js"></script>
-    <script src="wcs_loader.js"></script>
-    <script src="wcs_sandbox_content.js"></script>
-  </head>
-  <body>
-  </body>
-</html>