remoting/webapp/main.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2012 The Chromium Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style license that can be
   5 found in the LICENSE file.
   6 -->
   7
   8 <html>
   9   <head>
  10     <meta charset="utf-8">
  11     <link rel="icon" type="image/png" href="chromoting16.webp">
  12     <link rel="stylesheet" href="open_sans.css">
  13     <link rel="stylesheet" href="connection_stats.css">
  14     <link rel="stylesheet" href="connection_history.css">
  15     <link rel="stylesheet" href="main.css">
  16     <link rel="stylesheet" href="menu_button.css">
  17     <link rel="stylesheet" href="toolbar.css">
  18     <script src="client_plugin.js"></script>
  19     <script src="client_plugin_async.js"></script>
  20     <script src="client_screen.js"></script>
  21     <script src="client_session.js"></script>
  22     <script src="clipboard.js"></script>
  23     <script src="connection_history.js"></script>
  24     <script src="connection_stats.js"></script>
  25     <script src="error.js"></script>
  26     <script src="event_handlers.js"></script>
  27     <script src="format_iq.js"></script>
  28     <script src="host.js"></script>
  29     <script src="host_controller.js"></script>
  30     <script src="host_list.js"></script>
  31     <script src="host_native_messaging.js"></script>
  32     <script src="host_plugin_wrapper.js"></script>
  33     <script src="host_screen.js"></script>
  34     <script src="host_session.js"></script>
  35     <script src="host_settings.js"></script>
  36     <script src="host_setup_dialog.js"></script>
  37     <script src="host_table_entry.js"></script>
  38     <script src="l10n.js"></script>
  39     <script src="log_to_server.js"></script>
  40     <script src="menu_button.js"></script>
  41     <script src="oauth2.js"></script>
  42     <script src="plugin_settings.js"></script>
  43     <script src="remoting.js"></script>
  44     <script src="session_connector.js"></script>
  45     <script src="server_log_entry.js"></script>
  46     <script src="stats_accumulator.js"></script>
  47     <script src="storage.js"></script>
  48     <script src="survey.js"></script>
  49     <script src="toolbar.js"></script>
  50     <script src="ui_mode.js"></script>
  51     <script src="xhr.js"></script>
  52     <script src="wcs_sandbox_container.js"></script>
  53     <title i18n-content="PRODUCT_NAME"></title>
  54   </head>
  55
  56   <body>
  57
  58     <!-- loading-mode is initially visible, but becomes hidden as soon as an
  59          AppMode is selected by remoting.init. All other divs are initially
  60          hidden, but are shown appropriately when the mode changes. -->
  61     <section id="loading-mode" data-ui-mode="">
  62       <em>Loading&hellip;</em>
  63     </section> <!-- loading-mode -->
  64
  65     <div id="daemon-plugin-container"></div>
  66
  67     <iframe id="wcs-sandbox" src="wcs_sandbox.html" hidden></iframe>
  68
  69     <header data-ui-mode="home" hidden>
  70       <div>
  71         <img src="chromoting48.webp">
  72         <h1 class="icon-label" i18n-content="PRODUCT_NAME"></h1>
  73       </div>
  74       <div class="box-spacer"></div>
  75       <div id="top-secondary">
  76         <span id="current-email"></span>
  77         <span data-ui-mode="home">
  78           <a id="sign-out" href="#" i18n-content="SIGN_OUT_BUTTON"></a> |
  79           <!-- TODO(jamiewalch): Add this back in when we support it.
  80           <a id="connection-history"
  81              i18n-content="CONNECTION_HISTORY_BUTTON"></a> |
  82           -->
  83         </span>
  84         <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
  85            target="_blank" i18n-content="HELP"></a>
  86       </div>
  87     </header>
  88
  89     <div id="survey-opt-in" class="butter-bar" hidden>
  90       <p>
  91         <span i18n-content="SURVEY_INVITATION"></span>
  92         <a id="survey-accept"
  93            href="http://goo.gl/njH2q"
  94            target="_blank"
  95            i18n-content="SIGN_ME_UP"></a>
  96         <a id="survey-decline" href="#">
  97           <img src="icon_cross.webp" class="close-icon"></img>
  98         </a>
  99       </p>
 100     </div>
 101
 102     <div data-ui-mode="home" hidden>
 103
 104       <section>
 105         <h2 i18n-content="MODE_IT2ME"></h2>
 106         <div id="it2me-first-run">
 107           <div>
 108             <p class="infographic-description"
 109                i18n-content="IT2ME_FIRST_RUN"></p>
 110             <button id="get-started-it2me"
 111                     i18n-content="GET_STARTED"
 112                     disabled></button>
 113           </div>
 114           <div class="infographic">
 115             <img src="infographic_remote_assistance.webp">
 116           </div>
 117         </div>
 118         <div id="it2me-content">
 119           <p id="webapp-description"
 120              i18n-content="DESCRIPTION_HOME"
 121              i18n-value-1="<a href='https://chrome.google.com/remotedesktop' target='_blank'>chrome.google.com/remotedesktop</a>"></p>
 122           <div>
 123             <div class="section-row">
 124               <div class="box-spacer">
 125                 <div i18n-content="HOME_SHARE_DESCRIPTION"></div>
 126                 <div id="chrome-os-no-share"
 127                      i18n-content="HOME_SHARE_DESCRIPTION_CHROME_OS"
 128                      class="small-print"></div>
 129               </div>
 130               <div>
 131                 <button id="share-button"
 132                         i18n-content="HOME_SHARE_BUTTON"
 133                         class="kd-button-share"
 134                         type="button">
 135                 </button>
 136               </div>
 137             </div>
 138           </div>
 139           <div class="section-row">
 140             <div i18n-content="HOME_ACCESS_DESCRIPTION"
 141                  class="box-spacer"></div>
 142             <div>
 143               <button id="access-mode-button"
 144                       i18n-content="HOME_ACCESS_BUTTON"
 145                       type="button">
 146               </button>
 147             </div>
 148           </div>
 149         </div> <!-- it2me-content -->
 150       </section> <!-- Remote Assistance -->
 151
 152       <section id="host-list-div" class="host-list-container">
 153         <h2 i18n-content="MODE_ME2ME"></h2>
 154         <div id="me2me-first-run">
 155           <div>
 156             <p class="infographic-description"
 157                i18n-content="ME2ME_FIRST_RUN"></p>
 158             <button id="get-started-me2me"
 159                     i18n-content="GET_STARTED"
 160                     disabled></button>
 161           </div>
 162           <div class="infographic">
 163             <img src="infographic_my_computers.webp">
 164           </div>
 165         </div>
 166         <div id="me2me-content">
 167           <div id="host-list" hidden></div>
 168           <div id="host-list-error" class="box" hidden>
 169             <div id="host-list-error-message" class="error-state"></div>
 170             <div class="box-spacer"></div>
 171             <button type="button"
 172                     id="host-list-refresh-failed-button"></button>
 173           </div>
 174           <div id="daemon-control" data-daemon-state="enabled disabled" hidden>
 175             <div class="section-row no-non-local-hosts"
 176                  data-daemon-state="disabled">
 177               <img src="icon_host.webp" class="host-list-main-icon">
 178               <div class="box-spacer host-list-label"
 179                    id="start-daemon-message"
 180                    i18n-content="HOME_DAEMON_START_MESSAGE"></div>
 181               <div id="this-host-spacer" class="box-spacer"></div>
 182               <button type="button"
 183                       id="start-daemon"
 184                       i18n-content="HOME_DAEMON_START_BUTTON">
 185               </button>
 186             </div> <!-- disabled -->
 187             <div id="this-host-connect"
 188                  class="section-row clickable no-non-local-hosts"
 189                  data-daemon-state="enabled">
 190               <div class="host-list-main-icon">
 191                 <span id="this-host-warning"></span>
 192                 <img id="this-host-icon"
 193                      src="icon_host.webp">
 194               </div>
 195               <div id="this-host-name" class="box-spacer"></div>
 196               <span id="this-host-rename"
 197                     class="host-list-edit"
 198                     tabIndex="0">
 199                 <img id="this-host-rename"
 200                      class="host-list-rename-icon"
 201                      src="icon_pencil.webp">
 202               </span>
 203               <button type="button"
 204                       id="stop-daemon"
 205                       i18n-content="HOME_DAEMON_STOP_BUTTON">
 206               </button>
 207             </div> <!-- enabled -->
 208             <div data-daemon-state="enabled">
 209               <span i18n-content="HOME_DAEMON_ACTIVE_MESSAGE"></span>
 210               <a id="change-daemon-pin"
 211                  href="#"
 212                  i18n-content="HOME_DAEMON_CHANGE_PIN_LINK"></a>
 213             </div>
 214           </div> <!-- daemon-control -->
 215           <div id="host-list-empty" hidden>
 216             <div id="host-list-empty-hosting-supported"
 217                  class="host-list-empty-instructions"
 218                  i18n-content="HOST_LIST_EMPTY_HOSTING_SUPPORTED"
 219                  i18n-value-name-1="HOME_DAEMON_START_BUTTON">
 220             </div>
 221             <div id="host-list-empty-hosting-unsupported"
 222                  class="host-list-empty-instructions"
 223                  i18n-content="HOST_LIST_EMPTY_HOSTING_UNSUPPORTED"
 224                  i18n-value-name-1="HOME_DAEMON_START_BUTTON">
 225             </div>
 226           </div>
 227         </div> <!-- me2me-content -->
 228       </section> <!-- host-list-div -->
 229     </div> <!-- home -->
 230
 231     <div id="auth-dialog" hidden>
 232       <div class="dialog-screen"></div>
 233       <div class="dialog-container">
 234         <div class="box-spacer"></div>
 235         <div class="kd-modaldialog">
 236           <h2 i18n-content="MODE_AUTHORIZE"></h2>
 237           <p id="auth-error-message"
 238              i18n-content="DESCRIPTION_AUTHORIZE"
 239              class="message"></p>
 240           <div class="centered">
 241             <button id="auth-button"
 242                     type="button"
 243                     autofocus="autofocus"
 244                     i18n-content="CONTINUE_BUTTON">
 245             </button>
 246           </div>
 247         </div>
 248         <div class="box-spacer"></div>
 249       </div>
 250     </div> <!-- auth-dialog -->
 251
 252     <div class="dialog-screen"
 253          data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed"
 254          hidden></div>
 255
 256     <div class="dialog-container"
 257          data-ui-mode="home.host home.client home.history home.confirm-host-delete home.host-setup home.token-refresh-failed"
 258          hidden>
 259
 260       <div class="box-spacer"></div>
 261
 262       <!-- TODO(jamiewalch): Refactor the various error-state divs -->
 263       <div class="kd-modaldialog" data-ui-mode="home.token-refresh-failed">
 264         <div class="message">
 265           <span id="token-refresh-error-message" class="error-state"></span>
 266         </div>
 267         <div id="token-refresh-auth-failed" class="box">
 268           <div class="box-spacer"></div>
 269           <button id="token-refresh-error-sign-in"
 270                   type="button"
 271                   i18n-content="SIGN_IN_BUTTON"></button>
 272         </div>
 273         <div id="token-refresh-other-error" class="box">
 274           <div class="box-spacer"></div>
 275           <button id="token-refresh-error-ok"
 276                   type="button"
 277                   i18n-content="OK"></button>
 278         </div>
 279       </div> <!-- home.token-refresh-failed -->
 280
 281       <div id="host-setup-dialog"
 282            class="kd-modaldialog"
 283            data-ui-mode="home.host-setup">
 284         <form id="ask-pin-form"
 285               data-ui-mode="home.host-setup.ask-pin"
 286               action="">
 287           <p class="message">
 288             <span i18n-content="HOST_SETUP_DIALOG_DESCRIPTION"
 289                   i18n-value-1="<b>"
 290                   i18n-value-2="</b>"></span>
 291             <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
 292                target="_blank"
 293                i18n-content="WHY_IS_THIS_SAFE"></a>
 294           </p>
 295           <table id="set-pin-table">
 296             <tr>
 297               <td class="table-label">
 298                 <label for="daemon-pin-entry"
 299                        i18n-content="ASK_PIN_DIALOG_LABEL"
 300                        class="editbox-label"></label>
 301               </td>
 302               <td>
 303                 <input id="daemon-pin-entry"
 304                        autofocus="autofocus"
 305                        type="password">
 306               </td>
 307             </tr>
 308             <tr>
 309               <td class="table-label">
 310                 <label for="daemon-pin-confirm"
 311                        i18n-content="ASK_PIN_DIALOG_CONFIRM_LABEL"
 312                        class="editbox-label"></label>
 313               </td>
 314               <td>
 315                 <input id="daemon-pin-confirm" type="password">
 316               </td>
 317             <tr>
 318           </table>
 319           <div id="daemon-pin-error-div" class="message centered" hidden>
 320             <span id="daemon-pin-error-message" class="error-state">
 321             </span>
 322           </div>
 323           <div id="usagestats-consent" hidden>
 324             <label class="checkbox-label">
 325               <input id="usagestats-consent-checkbox" type="checkbox">
 326               <span i18n-content="HOST_SETUP_CRASH_REPORTING_MESSAGE"></span>
 327             </label>
 328           </div>
 329           <div class="box">
 330             <div class="box-spacer"></div>
 331             <button id="daemon-pin-ok" type="submit" i18n-content="OK">
 332             </button>
 333             <button id="daemon-pin-cancel" type="button" i18n-content="CANCEL">
 334             </button>
 335           </div>
 336         </form>
 337         <div data-ui-mode="home.host-setup.processing"
 338              class="box"
 339              hidden>
 340           <span class="waiting prominent"
 341                 id="host-setup-processing-message">
 342           </span>
 343         </div>
 344         <div data-ui-mode="home.host-setup.done" hidden>
 345           <div id="host-setup-done-message" class="message"></div>
 346           <div id="host-setup-done-message-2" class="message"></div>
 347           <div class="box">
 348             <div class="box-spacer"></div>
 349             <button id="host-config-done-dismiss"
 350                     autofocus="autofocus"
 351                     i18n-content="OK"></button>
 352           </div>
 353         </div>
 354         <div data-ui-mode="home.host-setup.error" hidden>
 355           <div id="host-setup-error-message" class="error-state"></div>
 356           <div class="box">
 357             <div class="box-spacer"></div>
 358             <button id="host-config-error-dismiss"
 359                     autofocus="autofocus"
 360                     i18n-content="OK"></button>
 361           </div>
 362         </div>
 363         <div data-ui-mode="home.host-setup.install" hidden>
 364           <div class="message" i18n-content="HOST_SETUP_INSTALL"></div>
 365           <div class="box">
 366             <div class="box-spacer"></div>
 367             <button id="host-config-install-continue"
 368                     autofocus="autofocus"
 369                     i18n-content="OK"></button>
 370             <button id="host-config-install-dismiss"
 371                     i18n-content="CANCEL"></button>
 372           </div>
 373         </div>
 374         <div data-ui-mode="home.host-setup.install-pending" hidden>
 375           <div class="message"
 376                     i18n-content="HOST_SETUP_INSTALL_PENDING"></div>
 377           <div class="box">
 378             <div class="box-spacer"></div>
 379             <button id="host-config-install-retry"
 380                     autofocus="autofocus"
 381                     i18n-content="OK"></button>
 382             </div>
 383         </div>
 384       </div> <!-- host-setup-dialog -->
 385
 386       <div id="host-dialog"
 387            class="kd-modaldialog"
 388            data-ui-mode="home.host">
 389
 390         <div data-ui-mode="home.host.waiting-for-code" class="message centered"
 391              i18n-content="MESSAGE_GENERATING">
 392         </div> <!-- host.waiting-for-code -->
 393
 394         <div data-ui-mode="home.host.waiting-for-connection">
 395           <div i18n-content="INSTRUCTIONS_SHARE_ABOVE"></div>
 396           <div id="access-code-display" dir="ltr" class="selectable"></div>
 397           <div id="access-code-countdown-container">
 398             <div id="access-code-countdown" class="expiring" hidden>
 399               <span id="seconds-remaining"
 400                     i18n-content="ACCESS_CODE_TIMER"></span>
 401             </div>
 402           </div>
 403           <div i18n-content="INSTRUCTIONS_SHARE_BELOW"></div>
 404         </div> <!-- host.waiting-for-connection -->
 405
 406         <div data-ui-mode="home.host.shared">
 407           <div id="host-shared-message" class="message centered"
 408                i18n-content="MESSAGE_SHARED"></div>
 409           <div class="centered">
 410             <button id="stop-sharing-button"
 411                     type="button"
 412                     i18n-content="STOP_SHARING_BUTTON">
 413             </button>
 414           </div>
 415         </div> <!-- host.shared -->
 416
 417         <div data-ui-mode="home.host.share-failed" class="message centered">
 418           <span id="host-plugin-error" class="error-state"></span>
 419         </div> <!-- host.share-failed -->
 420
 421         <div data-ui-mode="home.host.share-finished" class="message centered"
 422              i18n-content="MESSAGE_SESSION_FINISHED">
 423         </div> <!-- host.share-finished -->
 424
 425         <div class="centered"
 426              data-ui-mode="home.host.share-failed home.host.share-finished">
 427           <button id="host-finished-button"
 428                   type="button"
 429                   autofocus="autofocus"
 430                   i18n-content="OK">
 431           </button>
 432         </div>
 433
 434         <div id="nat-box"
 435              class="information-box"
 436              data-ui-mode="home.host.waiting-for-connection"
 437              i18n-content="WARNING_NAT_DISABLED">
 438         </div> <!-- nat-box -->
 439
 440         <div data-ui-mode="home.host.waiting-for-connection home.host.waiting-for-code"
 441              class="box space-before">
 442           <span class="waiting" i18n-content="FOOTER_WAITING"></span>
 443           <div class="box-spacer"></div>
 444           <button id="cancel-share-button" i18n-content="CANCEL"></button>
 445         </div>
 446
 447         <div id="host-plugin-container"></div>
 448
 449       </div> <!-- host dialog -->
 450
 451       <div id="client-dialog"
 452            class="kd-modaldialog"
 453            data-ui-mode="home.client">
 454
 455         <div data-ui-mode="home.client.unconnected">
 456           <div i18n-content="DESCRIPTION_CONNECT"></div>
 457           <div id="access-code-entry-row">
 458             <form id="access-code-form" action="">
 459               <div class="box">
 460                 <div class="box-spacer"></div>
 461                 <label for="access-code-entry"
 462                        i18n-content="ACCESS_CODE"
 463                        class="editbox-label">
 464                 </label>
 465                 <input id="access-code-entry"
 466                        type="text"
 467                        autofocus="autofocus"
 468                        autocomplete="off"/>
 469                 <div class="box-spacer"></div>
 470               </div>
 471               <div class="box space-before">
 472                 <div class="box-spacer"></div>
 473                 <button id="connect-button"
 474                         type="submit"
 475                         i18n-content="CONNECT_BUTTON">
 476                 </button>
 477                 <button id="cancel-access-code-button"
 478                         type="button"
 479                         i18n-content="CANCEL">
 480                 </button>
 481               </div>
 482             </form>
 483           </div> <!-- code-entry-row -->
 484           <div id="startup-mode-box-it2me" class="information-box" hidden>
 485             <span i18n-content="WARNING_NOT_WINDOWED"></span>
 486             <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
 487                target="_blank"
 488                i18n-content="LEARN_HOW"></a>
 489           </div> <!-- startup-mode-box-it2me -->
 490
 491         </div> <!-- client.unconnected -->
 492
 493         <div data-ui-mode="home.client.connecting" class="box">
 494           <span class="waiting prominent"
 495                 i18n-content="FOOTER_CONNECTING"></span>
 496           <div class="box-spacer"></div>
 497           <button id="cancel-connect-button" i18n-content="CANCEL"></button>
 498         </div> <!-- client.connecting -->
 499
 500         <div data-ui-mode="home.client.host-needs-upgrade">
 501           <div id="host-needs-update-message"
 502                class="message error-state multi-line-error-state">
 503           </div>
 504           <div class="message">
 505             <span i18n-content="HOST_NEEDS_UPDATE_DETAIL"></span>
 506             <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
 507                target="_blank"
 508                i18n-content="LEARN_HOW"></a>
 509           </div>
 510           <div class="box">
 511             <div class="box-spacer"></div>
 512             <button id="host-needs-update-connect-button"
 513                     type="button"
 514                     i18n-content="CONNECT_ANYWAY"
 515                     autofocus="autofocus">
 516             </button>
 517             <button id="host-needs-update-cancel-button"
 518                     type="button"
 519                     i18n-content="CANCEL">
 520             </button>
 521           </div>
 522         </div> <!-- home.client.host-needs-upgrade -->
 523
 524         <div data-ui-mode="home.client.pin-prompt" class="centered">
 525           <div id="pin-message"
 526                i18n-content="PIN_MESSAGE"
 527                class="message"></div>
 528           <div>
 529             <form id="pin-form" action="">
 530               <label for="pin-entry"
 531                      i18n-content="PIN"
 532                      class="editbox-label"></label>
 533               <input id="pin-entry"
 534                      type="password"
 535                      autofocus="autofocus"
 536                      autocomplete="off"/>
 537               <button id="connect-button"
 538                       type="submit"
 539                       i18n-content="CONNECT_BUTTON">
 540               </button>
 541               <button id="cancel-pin-entry-button"
 542                       type="button"
 543                       i18n-content="CANCEL">
 544               </button>
 545             </form>
 546             <div id="startup-mode-box-me2me" class="information-box" hidden>
 547               <span i18n-content="WARNING_NOT_WINDOWED"></span>
 548               <a href="http://support.google.com/chrome/bin/answer.py?hl=en&answer=1649523"
 549                  target="_blank"
 550                  i18n-content="LEARN_HOW"></a>
 551             </div> <!-- startup-mode-box-it2me -->
 552           </div>
 553         </div> <!-- client.pin-prompt -->
 554
 555         <div data-ui-mode="home.client.connect-failed"
 556              class="message centered">
 557           <span id="connect-error-message" class="error-state"></span>
 558         </div> <!-- client.connect-failed -->
 559
 560         <div data-ui-mode="home.client.session-finished"
 561              class="message centered" i18n-content="MESSAGE_SESSION_FINISHED">
 562         </div> <!-- client.session-finished -->
 563
 564         <div data-ui-mode="home.client.connect-failed.it2me home.client.session-finished.it2me"
 565              class="centered">
 566           <button id="client-finished-it2me-button"
 567                   type="button"
 568                   i18n-content="OK"
 569                   autofocus="autofocus">
 570           </button>
 571         </div> <!-- connect-failed.it2me session-finished.it2me -->
 572
 573         <div data-ui-mode="home.client.connect-failed.me2me home.client.session-finished.me2me"
 574              class="centered">
 575           <button id="client-reconnect-button"
 576                   type="button"
 577                   i18n-content="RETRY"
 578                   autofocus="autofocus">
 579           </button>
 580           <button id="client-finished-me2me-button"
 581                   type="button"
 582                   i18n-content="CANCEL">
 583           </button>
 584         </div> <!-- connect-failed.me2me session-finished.me2me -->
 585
 586       </div> <!-- client-dialog -->
 587
 588       <div id="connection-history-dialog"
 589            class="kd-modaldialog"
 590            data-ui-mode="home.history"
 591            hidden>
 592         <div class="internal-frame-of-reference">
 593           <h2 i18n-content="CONNECTION_HISTORY_TITLE"></h2>
 594           <div id="connection-history-options">
 595             <div class="link-list">
 596               <a id="history-view-all"
 597                  i18n-content="ALL_CONNECTIONS"
 598                  class="no-link"></a>
 599               <a id="history-view-outgoing"
 600                  i18n-content="OUTGOING_CONNECTIONS"></a>
 601               <a id="history-view-incoming"
 602                  i18n-content="INCOMING_CONNECTIONS"></a>
 603             </div>
 604             <div class="box-spacer"></div>
 605             <a id="clear-connection-history" i18n-content="CLEAR_HISTORY"></a>
 606           </div>
 607           <div id="connection-history-scroller">
 608             <table id="connection-history-table">
 609               <thead>
 610                 <tr>
 611                   <td></td>
 612                   <td i18n-content="TIME_HEADER"></td>
 613                   <td></td>
 614                   <td i18n-content="CONNECTION_FROM_HEADER"></td>
 615                   <td i18n-content="CONNECTION_TO_HEADER"></td>
 616                   <td i18n-content="DURATION_HEADER"></td>
 617                 </tr>
 618               </thead>
 619               <tbody id="connection-history-entries" class="selectable">
 620               </tbody>
 621             </table>
 622           </div>
 623           <button id="close-connection-history"
 624                   i18n-content="CLOSE"
 625                   type="button"></button>
 626         </div>
 627       </div> <!-- connection-history-dialog -->
 628
 629       <div id="confirm-host-delete-dialog"
 630            class="kd-modaldialog"
 631            data-ui-mode="home.confirm-host-delete"
 632            hidden>
 633         <p id="confirm-host-delete-message"
 634            i18n-content="CONFIRM_HOST_DELETE"
 635            class="message">
 636         </p>
 637         <div class="centered">
 638           <button id="confirm-host-delete"
 639                   i18n-content="DISABLE_HOST"
 640                   type="button">
 641           </button>
 642           <button id="cancel-host-delete"
 643                   i18n-content="CANCEL"
 644                   autofocus="autofocus"
 645                   type="button">
 646           </button>
 647         </div>
 648       </div> <!-- home.confirm-host-delete -->
 649
 650       <div class="box-spacer"></div>
 651
 652     </div> <!-- dialog-container -->
 653
 654     <div id="session-mode" data-ui-mode="in-session home.client" hidden>
 655       <div id="session-toolbar"
 656            data-ui-mode="in-session"
 657            class="toolbar-container"
 658            hidden>
 659         <div class="toolbar-border">
 660           <div id="session-status-message"
 661                 i18n-content="LABEL_CONNECTED"></div>
 662           <div id="connected-to" class="box-spacer"></div>
 663           <button id="toolbar-disconnect"
 664                   type="button"
 665                   i18n-content="DISCONNECT_MYSELF_BUTTON">
 666           </button>
 667           <span class="menu-button" id="send-keys-menu">
 668             <button>
 669               <span i18n-content="SEND_KEYS"></span>
 670               <img src="disclosure_arrow_down.webp"
 671                    class="kd-disclosureindicator">
 672             </button>
 673             <ul>
 674               <li id="send-ctrl-alt-del" i18n-content="SEND_CTRL_ALT_DEL"></li>
 675               <li id="send-print-screen" i18n-content="SEND_PRINT_SCREEN"></li>
 676             </ul>
 677           </span>
 678           <span class="menu-button" id="screen-options-menu">
 679             <button>
 680               <span i18n-content="SCREEN_OPTIONS"></span>
 681               <img src="disclosure_arrow_down.webp"
 682                    class="kd-disclosureindicator">
 683             </button>
 684             <ul>
 685               <li id="screen-resize-to-client"
 686                   i18n-content="RESIZE_TO_CLIENT"></li>
 687               <li id="screen-shrink-to-fit" i18n-content="SHRINK_TO_FIT"></li>
 688               <li class="menu-separator"></li>
 689               <li id="toggle-full-screen" i18n-content="FULL_SCREEN"></li>
 690             </ul>
 691           </span>
 692         </div>
 693         <div class="toolbar-stub" id="toolbar-stub">
 694           <div class="arrow-down"></div>
 695         </div>
 696       </div> <!-- session-toolbar -->
 697     </div> <!-- session-mode -->
 698
 699     <div id="statistics" dir="ltr" class="selectable" hidden>
 700     </div> <!-- statistics -->
 701
 702   </body>
 703 </html>