VulpesOS/gaia/tv_apps/smart-system/index.html
OverSu b38dea0597 Publish Vulpes Preview 15 sources for desktop, Android and Tundra
Share Gaia assets and adapters, keep private profiles and development documents local, and update both public READMEs.
2026-09-30 23:13:03 +02:00

793 lines
37 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta charset="utf-8">
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
<!-- Init Logo -->
<link rel="stylesheet" type="text/css" href="style/system/initlogo.css">
<!-- Shared code -->
<script src="shared/js/l10n.js"></script>
<script src="shared/js/l10n_date.js"></script>
<script src="shared/js/idletimer.js"></script>
<script src="shared/js/dump.js"></script>
<script src="shared/js/sanitizer.js"></script>
<script defer src="shared/js/gesture_detector.js"></script>
<script defer src="shared/js/settings_listener.js"></script>
<script defer src="shared/js/custom_dialog.js"></script>
<script defer src="shared/js/notification_helper.js"></script>
<!-- We need this before we can show the boot animation -->
<script src="shared/js/async_storage.js"></script>
<script src="shared/js/smart-screen/settings_cache.js"></script>
<script src="shared/js/smart-screen/animations.js"></script>
<!-- focus manager -->
<script src="js/focus_manager.js"></script>
<script defer src="shared/js/smart-screen/shared_utils.js"></script>
<script defer src="bower_components/evt/index.js"></script>
<script defer src="shared/js/manifest_helper.js"></script>
<script defer src="shared/js/mime_mapper.js"></script>
<script defer src="shared/js/settings_url.js"></script>
<script defer src="shared/js/advanced_timer.js"></script>
<script defer src="shared/js/lazy_loader.js"></script>
<script defer src="shared/js/screen_layout.js"></script>
<script defer src="shared/js/iac_handler.js"></script>
<script defer src="shared/js/utilities.js"></script>
<script defer src="shared/js/font_size_utils.js"></script>
<!-- XXX can be removed while gecko support navigator.mozHour12 API -->
<script defer src="shared/js/date_time_helper.js"></script>
<script defer src="shared/js/smart-screen/simple_key_navigation.js"></script>
<script defer src="shared/js/smart-screen/key_navigation_adapter.js"></script>
<script defer src="shared/js/smart-screen/f_t_e_wizard.js"></script>
<script defer src="js/service.js"></script>
<script defer src="js/base_ui.js"></script>
<script defer src="js/audio_channel_controller.js"></script>
<script defer src="js/orientation_manager.js"></script>
<!--
<script defer src="shared/js/input_mgmt/input_app_list.js"></script>
<script defer src="shared/js/input_mgmt/input_app_list.js"></script>
<script defer src="shared/js/keyboard_helper.js"></script>
<script defer src="shared/js/template.js"></script>
-->
<!-- Wrapper -->
<link rel="stylesheet" type="text/css" href="style/wrapper/wrapper.css">
<link rel="stylesheet" type="text/css" href="style/chrome/chrome.css">
<link rel="stylesheet" href="shared/elements/gaia_overflow_menu/style/external.css">
<!--
<script defer src="shared/js/bookmarks_database.js"></script>
<script defer src="shared/elements/gaia_overflow_menu/script.js"></script>
-->
<link rel="stylesheet" type="text/css" href="style/definitions.css">
<link rel="stylesheet" type="text/css" href="style/attention_indicator.css">
<link rel="stylesheet" type="text/css" href="shared/style/smart-screen/navigation.css">
<link rel="stylesheet" type="text/css" href="shared/style/smart-screen/animations.css">
<!-- System -->
<link rel="stylesheet" type="text/css" href="style/system/system.css">
<link rel="stylesheet" type="text/css" href="style/system/keyboard.css">
<link rel="stylesheet" type="text/css" href="style/sound_manager/sound_manager.css">
<link rel="stylesheet" type="text/css" href="style/ime_menu.css">
<!-- Include shared building blocks -->
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css"/>
<link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
<link rel="stylesheet" type="text/css" href="shared/style/switches.css"/>
<link rel="stylesheet" type="text/css" href="shared/style/value_selector.css">
<link rel="stylesheet" type="text/css" href="shared/style/date_selector.css">
<link rel="stylesheet" type="text/css" href="shared/style/time_selector.css">
<link rel="stylesheet" type="text/css" href="shared/style/object_menu.css">
<!-- Include shared web components -->
<link rel="stylesheet" type="text/css" href="shared/elements/gaia_progress/style/external.css">
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-theme/gaia-theme.css">
<link rel="stylesheet" type="text/css" href="shared/elements/gaia-icons/gaia-icons.css">
<!-- Include tv shared web components -->
<link rel="stylesheet" type="text/css" href="bower_components/smart-icons/smart-icons.css">
<link rel="stylesheet" type="text/css" href="bower_components/smart-button/style.css">
<link rel="stylesheet" type="text/css" href="bower_components/smart-banner/style.css">
<link rel="stylesheet" type="text/css" href="bower_components/smart-dialog/style.css">
<link rel="stylesheet" type="text/css" href="bower_components/smart-bubbles/style.css">
<link rel="stylesheet" type="text/css" href="bower_components/smart-modal-dialog/style.css">
<link rel="stylesheet" type="text/css" href="style/fake-notification.css"/>
<script defer src="shared/elements/config.js"></script>
<script defer src="shared/js/component_utils.js"></script>
<!-- <script defer src="/shared/js/homescreens/confirm_dialog_helper.js"></script> -->
<!-- <script defer src="/shared/elements/gaia_confirm/script.js"></script> -->
<!-- <script defer src="/shared/elements/gaia_menu/script.js"></script> -->
<script defer src="shared/elements/gaia_buttons/script.js"></script>
<script defer src="shared/elements/gaia_progress/script.js"></script>
<script defer src="shared/elements/gaia_subheader/script.js"></script>
<script defer src="shared/elements/gaia-header/dist/gaia-header.js"></script>
<!-- Include tv shared web components -->
<script defer src="bower_components/smart-button/script.js"></script>
<script defer src="bower_components/smart-banner/script.js"></script>
<script defer src="bower_components/smart-dialog/script.js"></script>
<script defer src="bower_components/smart-bubbles/script.js"></script>
<script defer src="bower_components/smart-modal-dialog/script.js"></script>
<script defer src="bower_components/smart-modal-dialog/smart-input-dialog.js"></script>
<!-- Include shared resources
<link rel="resource" type="application/json" href="shared/resources/apn.json"/>
<link rel="resource" type="image/png" href="shared/resources/branding/initlogo.png"/>
<link rel="resource" type="image/png" href="shared/resources/branding/initlogo_large.png"/>
<link rel="resource" type="audio/ogg" href="shared/resources/media/notifications/notifier_firefox.opus"/>
-->
<link rel="resource" type="image/png" href="shared/resources/branding/browser_84.png"/>
<link rel="resource" type="image/png" href="shared/resources/branding/browser_126.png"/>
<!-- applications.js must not be deferred
in order to catch webapps-registry-ready mozChromeEvent -->
<script src="js/applications.js"></script>
<!-- Not deferring the following to show startup logo/animation as soon as possible. -->
<script src="js/logo_loader.js"></script>
<script src="js/init_logo_handler.js"></script>
<script defer src="js/base_module.js"></script>
<script defer src="js/core.js"></script>
<script defer src="js/screen_manager.js"></script>
<script defer src="js/activities.js"></script>
<script defer src="js/usb_storage.js"></script>
<script defer src="js/external_storage_monitor.js"></script>
<script defer src="js/bootstrap.js"></script>
<script defer src="js/screenshot.js"></script>
<script defer src="shared/js/async_semaphore.js"></script>
<script defer src="js/sound_manager.js"></script>
<script defer src="js/browser_key_event_manager.js"></script>
<script defer src="js/hardware_buttons.js"></script>
<script defer src="js/system_banner.js"></script>
<script defer src="js/home_gesture.js"></script>
<script defer src="js/wallpaper_manager.js"></script>
<!-- WallpaperManager lazily loads this script if needed
<script defer src="shared/js/image_utils.js"></script>
-->
<!-- TTL View -->
<link rel="stylesheet" type="text/css" href="style/ttlview/ttlview.css">
<script defer src="js/ttlview.js"></script>
<!-- Accessibility -->
<link rel="stylesheet" type="text/css" href="style/accessibility/accessibility.css">
<script defer src="js/accessibility.js"></script>
<!-- Sleep Menu -->
<link rel="stylesheet" type="text/css" href="style/sleep_menu/sleep_menu.css">
<script defer src="js/sleep_menu.js"></script>
<!-- Battery Manager -->
<link rel="stylesheet" type="text/css" href="style/battery_manager/battery_manager.css">
<script defer src="js/battery_manager.js"></script>
<!-- Keyboard -->
<script defer src="js/input_transition.js"></script>
<script defer src="js/input_frame_manager.js"></script>
<script defer src="js/input_layouts.js"></script>
<script defer src="js/keyboard_manager.js"></script>
<!-- Action Menu -->
<link rel="stylesheet" type="text/css" href="shared/style/action_menu.css">
<link rel="stylesheet" type="text/css" href="style/action_menu/action_menu_extended.css">
<script defer src="js/action_menu.js"></script>
<!-- Date and Time Selector Extension -->
<link rel="stylesheet" type="text/css" href="style/date_selector/date_selector_extended.css">
<link rel="stylesheet" type="text/css" href="style/time_selector/time_selector_extended.css">
<!-- Ime Menu -->
<script defer src="js/ime_menu.js"></script>
<!-- FTU launcher -->
<script defer src="js/ftu_launcher.js"></script>
<!-- FTU ping -->
<script defer src="/shared/js/uuid.js"></script>
<script defer src="js/ftu_ping.js"></script>
<!-- Airplane Mode -->
<script defer src="js/airplane_mode.js"></script>
<!-- Modal Dialog -->
<link rel="stylesheet" type="text/css" href="style/modal_dialog/prompt.css">
<link rel="stylesheet" type="text/css" href="style/modal_dialog/modal_dialog.css">
<script defer src="js/modal_dialog.js"></script>
<!-- Authentication Dialog -->
<link rel="stylesheet" type="text/css" href="style/authentication_dialog.css">
<!-- Value selector -->
<link rel="stylesheet" type="text/css" href="style/value_selector/value_selector.css">
<script defer src="js/value_selector/value_picker.js"></script>
<script defer src="js/value_selector/spin_date_picker.js"></script>
<script defer src="js/value_selector/value_selector.js"></script>
<script defer src="shared/js/input_parser.js"></script>
<!-- Trusted UI -->
<link rel="stylesheet" type="text/css" href="style/trusted_ui/trusted_ui.css">
<script defer src="js/trusted_ui.js"></script>
<!-- Permission Manager -->
<link rel="stylesheet" type="text/css" href="style/permission_manager/permission_manager.css">
<script defer src="js/permission_manager.js"></script>
<!-- App Install -->
<link rel="stylesheet" type="text/css" href="style/app_install_manager/app_install_manager.css">
<script defer src="js/app_install_dialogs.js"></script>
<script defer src="js/app_install_manager.js"></script>
<!-- Notifications -->
<link rel="stylesheet" type="text/css" href="style/notifications/notifications.css">
<script defer src="js/notifications.js"></script>
<script defer src="js/interactive_notifications.js"></script>
<script defer src="js/notification_connector.js"></script>
<!-- Bluetooth -->
<script defer src="js/bluetooth.js"></script>
<script defer src="js/bluetooth_transfer.js"></script>
<link rel="stylesheet" type="text/css" href="style/bluetooth_transfer/bluetooth_transfer.css">
<!-- Wifi -->
<script defer src="js/wifi.js"></script>
<!-- Update Manager -->
<script defer src="js/updatable.js"></script>
<script defer src="js/update_manager.js"></script>
<link rel="stylesheet" type="text/css" href="style/update_manager/update_manager.css">
<!-- Media Recording Logic without UI-->
<script defer src="js/media_recording.js"></script>
<!-- Theme and localization -->
<link rel="stylesheet" type="text/css" href="style/themes/default/system.css">
<link rel="stylesheet" type="text/css" href="style/themes/default/core.css">
<link rel="stylesheet" type="text/css" href="style/themes/default/menus.css">
<link rel="stylesheet" type="text/css" href="style/themes/default/buttons.css">
<link rel="stylesheet" type="text/css" href="style/themes/default/banner.css">
<meta name="defaultLanguage" content="en-US">
<meta name="availableLanguages" content="en-US">
<link rel="localization" href="/shared/locales/branding/branding.{locale}.properties">
<link rel="localization" href="locales/system.{locale}.properties">
<link rel="localization" href="locales/accessibility.{locale}.properties">
<link rel="localization" href="/shared/locales/date/date.{locale}.properties">
<link rel="localization" href="/shared/locales/permissions/permissions.{locale}.properties">
<link rel="localization" href="/shared/locales/download/download.{locale}.properties">
<link rel="localization" href="/shared/elements/gaia_menu/locales/gaia_menu.{locale}.properties">
<!-- Identity -->
<script defer src="js/identity.js"></script>
<!-- Crash Reporter -->
<link rel="stylesheet" type="text/css" href="style/crash_reporter/crash_reporter.css">
<script defer src="js/crash_reporter.js"></script>
<!-- Browser class -->
<link rel="stylesheet" type="text/css" href="style/browser_frame/browser_frame.css">
<script defer src="js/browser_config_helper.js"></script>
<script defer src="js/browser_frame.js"></script>
<!-- Captive Portal Login -->
<script defer src="js/captive_portal.js"></script>
<!-- Windows -->
<!-- Any module that wants to intercept the Home button and prevent the -->
<!-- homescreen from being displayed must come before this script. -->
<link rel="stylesheet" type="text/css" href="style/window_layout.css">
<link rel="stylesheet" type="text/css" href="style/window.css">
<link rel="stylesheet" type="text/css" href="style/app_titlebar.css">
<link rel="stylesheet" type="text/css" href="style/browser_context_menu/browser_context_menu.css">
<link rel="stylesheet" type="text/css" href="style/fte/fte.css">
<script defer src="js/base_ui.js"></script>
<script defer src="shared/js/smart-screen/scrollable.js"></script>
<script defer src="js/browser_context_menu.js"></script>
<script defer src="js/child_window_factory.js"></script>
<script defer src="js/app_modal_dialog.js"></script>
<script defer src="js/app_chrome.js"></script>
<script defer src="js/attention_toaster.js"></script>
<script defer src="js/app_transition_controller.js"></script>
<script defer src="js/app_authentication_dialog.js"></script>
<script defer src="js/app_window.js"></script>
<script defer src="js/popup_window.js"></script>
<script defer src="js/preview_window.js"></script>
<script defer src="js/browser_mixin.js"></script>
<script defer src="js/wrapper_factory.js"></script>
<script defer src="js/homescreen_window.js"></script>
<script defer src="js/homescreen_launcher.js"></script>
<script defer src="js/landing_app_window.js"></script>
<script defer src="js/landing_app_launcher.js"></script>
<script defer src="js/homescreen_window_manager.js"></script>
<script defer src="js/activity_window.js"></script>
<script defer src="js/activity_window_manager.js"></script>
<script defer src="js/app_window_factory.js"></script>
<script defer src="js/attention_window.js"></script>
<script defer src="js/attention_indicator.js"></script>
<script defer src="js/attention_window_manager.js"></script>
<script defer src="js/app_window_manager.js"></script>
<script defer src="js/system_dialog.js"></script>
<script defer src="js/system_dialog_manager.js"></script>
<script defer src="js/fxa_dialog.js"></script>
<script defer src="js/visibility_manager.js"></script>
<script defer src="js/layout_manager.js"></script>
<script defer src="js/suspending_app_priority_manager.js"></script>
<!-- Stack Manager -->
<script defer src="js/stack_manager.js"></script>
<!-- Entry Sheet -->
<link rel="stylesheet" type="text/css" href="style/entry_sheet/entry_sheet.css">
<script defer src="js/entry_sheet.js"></script>
<!-- Developer Tools -->
<script defer src="js/remote_debugger.js"></script>
<script defer src="js/devtools/logshake.js"></script>
<script defer src="js/devtools/developer_hud.js"></script>
<link rel="stylesheet" type="text/css" href="style/devtools/developer_hud.css">
<!-- z-indexes of all the overlays in the system -->
<link rel="stylesheet" type="text/css" href="style/zindex.css">
<!-- Rocketbar -->
<script defer src="js/browser.js"></script>
<script defer src="shared/js/url_helper.js"></script>
<!-- <script defer src="shared/js/icons_helper.js"></script> -->
<!-- Navigation -->
<script defer src="shared/js/smart-screen/spatial_navigator.js"></script>
<script defer src="shared/js/smart-screen/init_gesture.js"></script>
<!-- API Services -->
<script defer src="js/screenshot_service.js"></script>
<!-- Firefox Accounts -->
<link rel="stylesheet" type="text/css" href="style/firefox_account/firefox_account_container.css">
<script defer src="js/fx_accounts_u_i.js"></script>
<script defer src="js/fx_accounts_manager.js"></script>
<!-- App Usage Metrics -->
<script defer src="js/app_usage_metrics.js"></script>
<!-- AppUsageMetrics lazily loads this script if needed
<script defer src="shared/js/telemetry.js"></script>
-->
<!-- Sync -->
<!--IFDEF_FIREFOX_SYNC
<script defer src="js/sync_state_machine.js"></script>
<script defer src="js/sync_manager.js"></script>
<link rel="localization" href="/shared/locales/firefox_sync/firefox_sync.{locale}.properties">
ENDIF_FIREFOX_SYNC-->
<!-- <script defer src="shared/js/sync/errors.js"></script> -->
<!-- Remote Control -->
<script defer src="js/remote_control.js"></script>
<!-- Bookmark Manager -->
<script defer src="shared/js/smart-screen/piped_promise.js"></script>
<script defer src="shared/js/smart-screen/card_store.js"></script>
<script defer src="shared/js/smart-screen/bookmark_manager.js"></script>
</head>
<body class="theme-settings" role="application">
<div id="screen" aria-hidden="true">
<div id="os-logo" data-z-index-level="initlogo">
<div id="carrier-logo"></div>
</div>
<div id="windows" data-z-index-level="app">
<!-- application windows are added here -->
</div>
<div id="dialog-overlay" data-z-index-level="dialog-overlay">
<!-- Crash reporter -->
<div id="crash-dialog">
<form role="dialog" class="generic-dialog" data-type="confirm">
<section id="crash-dialog-contents">
<h1 id="crash-dialog-title"></h1>
<p data-l10n-id="crash-dialog-message">Would you like to send Mozilla a report about the crash to help us fix the problem? (Reports are sent over Wi-Fi only)</p>
<p><a id="crash-info-link" data-l10n-id="crash-info-link">What's in a crash report?</a></p>
<p>
<input id="always-send" type="checkbox" checked="true"/>
<label for="always-send" data-l10n-id="crash-always-report">Always send Mozilla a report when a crash occurs.</label>
<p>
</section>
<menu data-items="2">
<button id="dont-send-report" disabled="true" data-l10n-id="crash-dont-send">Don't Send</button>
<button id="send-report" class="recommend" data-l10n-id="crash-end">Send Report</button>
</menu>
</form>
<!-- "Crash Reports" information page -->
<section role="region">
<gaia-header ignore-dir id="crash-reports-header" action="close">
<h1 data-l10n-id="crashReports"></h1>
</gaia-header>
<div>
<ul>
<li class="description" data-l10n-id="crash-reports-description-1">
A crash report contains some details about the crash and your device, as well as a snapshot of the state of your device when it crashed.</li>
<li class="description" data-l10n-id="crash-reports-description-2">This may include things like open pages and apps, text typed into forms and the content of open messages, recent browsing history, or geolocation used by an open app.</li>
<li class="description">
<span data-l10n-id="crash-reports-description-3-start">We use crash reports to try to fix problems and improve our products. We handle your information as we describe in our </span><span data-l10n-id="crash-reports-description-3-privacy">privacy policy</span><span data-l10n-id="crash-reports-description-3-end">.</span>
</li>
</ul>
</div>
</section>
</div>
<div id="trustedui-container" class="up theme-settings">
<div id="trustedui-inner">
<section role="region" class="title-container skin-organic">
<gaia-header ignore-dir id="trustedui-header" action="close">
<h1 id="trustedui-title"></h1>
</gaia-header>
<div id="trustedui-throbber"></div>
</section>
<div id="trustedui-frame-container">
<div id="trustedui-error-dialog" role="dialog" class="generic-dialog">
<div class="inner">
<h3 data-l10n-id="error-title" id="trustedui-error-title">Error</h3>
<p>
<span data-l10n-id="error-message" id="trustedui-error-message">The app has encountered an error.</span>
</p>
</div>
<menu data-items="1">
<button id="trustedui-error-close" data-l10n-id="close">Close</button>
</menu>
</div>
</div>
</div>
</div>
<!-- Firefox Account Dialog -->
<!-- <div id="fxa-dialog"></div> Add the dialog via SystemDialog dynamically. -->
<div id="modal-dialog">
<div id="modal-dialog-alert" role="dialog" class="generic-dialog" tabindex="-1">
<div class="modal-dialog-message-container inner">
<h3 id="modal-dialog-alert-title"></h3>
<p>
<span id="modal-dialog-alert-message"></span>
</p>
</div>
<menu>
<button id="modal-dialog-alert-ok" data-l10n-id="ok" class="affirmative">OK</button>
</menu>
</div>
<div id="modal-dialog-confirm" role="dialog" class="generic-dialog" tabindex="-1">
<div class="modal-dialog-message-container inner">
<h3 id="modal-dialog-confirm-title"></h3>
<p>
<span id="modal-dialog-confirm-message"></span>
</p>
</div>
<menu data-items="2">
<button id="modal-dialog-confirm-cancel" data-l10n-id="cancel">Cancel</button>
<button id="modal-dialog-confirm-ok" data-l10n-id="ok" class="affirmative">OK</button>
</menu>
</div>
<div id="modal-dialog-prompt" role="dialog" class="generic-dialog" tabindex="-1">
<div class="modal-dialog-message-container inner">
<h3 id="modal-dialog-prompt-title"></h3>
<p>
<span id="modal-dialog-prompt-message"></span>
<input id="modal-dialog-prompt-input" />
</p>
</div>
<menu data-items="2">
<button id="modal-dialog-prompt-cancel" data-l10n-id="cancel">Cancel</button>
<button id="modal-dialog-prompt-ok" data-l10n-id="ok" class="affirmative">OK</button>
</menu>
</div>
<div id="modal-dialog-select-one" role="dialog" class="generic-dialog" tabindex="-1">
<div class="modal-dialog-message-container inner">
<h3 id="modal-dialog-select-one-title"></h3>
<ul id="modal-dialog-select-one-menu"></ul>
</div>
<menu>
<button id="modal-dialog-select-one-cancel" data-l10n-id="cancel">Cancel</button>
</menu>
</div>
</div> <!-- end of #modal-dialog -->
</div> <!-- end of #overlay-dialog -->
<div id="value-selector-template" hidden>
<!--
<div data-z-index-level="value-selector" class="value-selector" id="${id}">
<form class="value-selector-select-option-popup" role="dialog" data-type="value-selector" hidden>
<section class="value-selector-container">
<h1 class="value-selector-options-title" data-l10n-id="choose-option">Choose your option</h1>
<ol class="value-selector-options-container" role="listbox"></ol>
</section>
<menu class="value-selector-select-options-buttons value-selector-buttons">
<button class="value-option-confirm affirmative full" data-type="ok" data-l10n-id="ok">OK</button>
</menu>
</form>
<div class="value-selector-time-picker-popup" role="dialog" data-type="time-selector" hidden>
<h1 data-l10n-id="select-time">Select time</h1>
<div class="value-selector-time-picker">
<div class="value-selector-time-picker-container picker-container">
<div class="picker-bar-background"></div>
<div class="value-picker-hours-wrapper">
<div class="value-picker-hours animation-on"></div>
</div>
<div class="value-picker-minutes-wrapper">
<div class="value-picker-minutes animation-on"></div>
</div>
<div class="value-picker-hour24-wrapper">
<div class="value-picker-hour24-state animation-on"></div>
</div>
<div class="value-indicator">
<div aria-hidden="true" class="value-indicator-colon hours-minutes-separator">:</div>
</div>
</div>
</div>
<menu class="value-selector-time-picker-buttons value-selector-buttons" data-items="2">
<button class="value-selector-cancel" data-type="cancel" data-l10n-id="cancel">Cancel</button>
<button class="value-selector-confirm affirmative" data-type="ok" data-l10n-id="ok">OK</button>
</menu>
</div>
<div role="dialog" data-type="date-selector" class="value-selector-spin-date-picker-popup" hidden>
<h1 data-l10n-id="select-day">Select day</h1>
<div class="value-selector-spin-date-picker">
<div class="picker-container">
<div class="picker-bar-background"></div>
<div class="value-picker-date-wrapper">
<div class="value-picker-date animation-on"></div>
<div class="value-picker-date animation-on"></div>
<div class="value-picker-date animation-on"></div>
<div class="value-picker-date animation-on"></div>
</div>
<div class="value-picker-month-wrapper">
<div class="value-picker-month animation-on"></div>
</div>
<div class="value-picker-year-wrapper">
<div class="value-picker-year animation-on"></div>
</div>
<div class="value-indicator"></div>
</div>
</div>
<menu class="value-selector-spin-date-picker-buttons value-selector-buttons" data-items="2">
<button class="value-selector-cancel" data-type="cancel" data-l10n-id="cancel">Cancel</button>
<button class="value-option-confirm affirmative" data-type="ok" data-l10n-id="ok">OK</button>
</menu>
</div>
</div>
-->
</div>
<div id="value-selector-groupoption-template" hidden>
<!--
<li role="subheader">
<label role="presentation">
<span>${text}</span>
</label>
</li>
-->
</div>
<div id="value-selector-option-template" hidden>
<!--
<li role="option" data-option-index="${index}" aria-selected="${checked}">
<label role="presentation" for="${for}">
<span>${text}</span>
</label>
</li>
-->
</div>
<div id="permission-screen" data-z-index-level="permission-screen">
<div id="permission-dialog" role="dialog" class="generic-dialog">
<div class="inner">
<h1 id="permission-title"></h1>
<div id="permission-icon"></div>
<h2 id="permission-message"></h2>
<div id="permission-more-info" class="hidden">
<smart-button id="permission-more-info-link" type="simple-text" data-l10n-id="more-info" href="#">More Info…</smart-button>
<div id="permission-more-info-box"> </div>
</div>
<div id="permission-remember-section" class="hidden" tabIndex="0">
<label class="pack-checkbox">
<input type="checkbox" id="permission-remember-checkbox" />
<span></span>
</label>
<a data-l10n-id="remember-my-choice" id="permission-remember-label">Remember my choice</a>
</div>
<div id="permission-device-selector"></div>
<ul id="permission-devices">
</ul>
<menu id="permission-buttons" data-items="2">
<smart-button id="permission-no" type="circle-text"></smart-button>
<smart-button id="permission-yes" type="circle-text" class="affirmative"></smart-button>
</menu>
<smart-button id="permission-hide-info-link" type="circle-text" data-l10n-id="hide-info">Hide Info</smart-button>
</div>
</div>
</div>
<div id="device-list-item-tmpl" class="hide">
<!--
<label class="device-list deviceEnable">
<input class="input-enable" id="${id}" type="checkbox" ${checked}>
<span></span>
</label>
<span class="device-item" data-l10n-id="${label}"></span>
-->
</div>
<div id="app-install-dialogs" data-z-index-level="app-install-dialog">
</div>
<form id="updates-download-dialog" data-type="confirm" role="dialog"
data-z-index-level="updates-download-dialog" data-nowifi="false"
class="generic-dialog">
<section>
<h1>
Updates
</h1>
<ul>
</ul>
</section>
<p id="updates-offline-warning" data-l10n-id="downloadOfflineWarning">
Connection unavailable. Connect to a network to download updates.
</p>
<menu data-items="2">
<button id="updates-later-button" type="reset"
data-l10n-id="later">Later</button>
<button id="updates-download-button" type="submit"
data-l10n-id="download">Download</button>
</menu>
</form>
<form id="ime-layout-dialog" class="ime-layout-dialog"
data-type="confirm" role="dialog"
data-z-index-level="ime-layout-dialog">
<section>
<h1 data-l10n-id="ime-addkeyboards">Add keyboards</h1>
<!-- template for selecting IME layout after 3rd-party keyboard installed -->
<div id="ime-list-template" hidden>
<!--
<li>
<a>${displayName}</a>
<label class="pack-checkbox ime">
<input type="checkbox" name="keyboards" value="${imeName}">
<span></span>
</label>
</li>
-->
</div>
<ul id="ime-list">
</ul>
<menu data-items="2">
<button id="ime-cancel-button" type="button" data-l10n-id="cancel">Cancel</button>
<button id="ime-confirm-button" class="recommend" type="button" data-l10n-id="confirm">Confirm</button>
</menu>
</section>
</form>
<div id="update-manager-toaster" data-z-index-level="notification-toaster" aria-live="assertive" aria-atomic="true">
<div class="icon">
</div>
<div class="message">
</div>
</div>
<!-- keyboard -->
<div id="keyboards" class="hide" data-z-index-level="keyboards"></div>
<!-- template for IME Menu. -->
<div id="ime-menu-template" hidden>
<!--
<form role="dialog" data-type="value-selector" class="ime-menu value-selector-container" data-z-index-level="action-menu">
<section>
<h1 data-l10n-id="${title}"></h1>
<ol class="value-selector-options-container ime-menu-list" aria-multiselectable="false" role="listbox">
</ol>
</section>
<menu class="ime-menu-button-container">
<button class="ime-menu-button" data-type="cancel" data-action="cancel" data-l10n-id="${cancelLabel}"></button>
</menu>
</div>
-->
</div> <!-- end of template for IME Menu. -->
<!-- template for each IME item. -->
<div id="ime-menu-item-template" hidden>
<!--
<li role="option" aria-selected="${selected}" data-id="${layoutId}">
<label role="presentation">
<span class="item-label">${layoutName}</span>
<span class="item-note">${appName}</span>
</label>
</li>
-->
</div> <!-- end of template for each IME item. -->
<div id="sleep-menu" data-z-index-level="sleep-menu">
<div id="sleep-menu-container" role="dialog" data-type="object">
<header>
<h1 data-l10n-id="deviceMenu">Device menu</h1>
</header>
<section>
<ul role="menu">
</ul>
</section>
<gaia-buttons skin="dark">
<button data-l10n-id="cancel">Cancel</button>
</gaia-buttons>
</div>
</div>
<!-- notification ui -->
<smart-banner id="notification-container" class="hidden closed" data-z-index-level="system-notification-banner">
<div class="notification-message">
<span id="notification-title" class="notification-title"></span>
<span id="notification-body" class="notification-body"></span>
</div>
<menu id="notification-button-group" class="notification-button-group">
<smart-button id="notification-button-0" type="simple-text"></smart-button>
<smart-button id="notification-button-1" type="simple-text"></smart-button>
</menu>
</smart-banner>
<div id="system-overlay" data-z-index-level="system-overlay">
<div id="battery">
<span class="icon-battery"></span>
<div class="battery-notification">
<span data-l10n-id="battery-almost-empty3">Battery almost empty.</span>
<span data-l10n-id="plug-in-your-charger">Plug in your charger.</span>
</div>
</div>
<div id="volume" class="vibration">
<span class="channel-type"></span>
<section>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</div>
<div id="top-panel" class="gesture-panel" data-z-index-level="gesture-panel"></div>
<div id="left-panel" class="gesture-panel disabled" data-z-index-level="gesture-panel"></div>
<div id="right-panel" class="gesture-panel disabled" data-z-index-level="gesture-panel"></div>
<div id="bottom-panel" class="gesture-panel" data-z-index-level="gesture-panel"></div>
<div id="fte_template" hidden>
<!--
<section class="fte-page">
<section class="fte-content">
<smart-button class="focused demo" type="contextmenu" data-icon="pin" aria-hidden="true">
<span data-l10n-id="pin-to-home"></span>
</smart-button>
<div class="fte-description" data-l10n-id="fte-pin-to-home-description"></div>
</section>
<section class="fte-panel">
<smart-button data-behavior="finish" type="rounded-corner-text" class="fte-button primary" data-l10n-id="ok"></smart-button>
</section>
</section>
-->
</div>
</div> <!-- end of #screen -->
</body>
</html>