<!doctype html>
<!-- Copyright 2019 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html>
<head>
<title>$i18n{name}</title>
<meta charset="utf-8">
<link rel="icon" href="/images/camera_app_icons_48.png">
<link rel="stylesheet" href="chrome://theme/typography.css">
<!-- main.css contains all :root styles require to be loaded first. -->
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/menu.css">
<link rel="stylesheet" href="/css/button.css">
<link rel="stylesheet" href="/css/custom_toast.css">
<link rel="stylesheet" href="/css/flash.css">
<link rel="stylesheet" href="/css/inkdrop.css">
<link rel="stylesheet" href="/css/mode/mode.css">
<link rel="stylesheet" href="/css/mode/scan.css">
<link rel="stylesheet" href="/css/mode/video.css">
<link rel="stylesheet" href="/css/ptz_panel.css">
<link rel="stylesheet" href="/css/review.css">
<link rel="stylesheet" href="/css/views/settings.css">
<script type="module" src="/js/init.js"></script>
</head>
<body class="sound mirror view-splash">
<div id="spoken_msg" class="centered-overlay" tabindex="-1"
aria-live="polite"></div>
<div id="view-camera">
<div id="preview-box">
<div id="preview-viewport">
<video id="preview-video" class="preview-content"></video>
<div id="expert-controls">
<div id="preview-info" class="expert-control-row metadata-row
mode-on">
<span class="title">Info</span>
<div id="preview-resolution" class="metadata value"></div>
<div id="preview-device-name" class="metadata value"></div>
</div>
<div id="preview-stat" class="expert-control-row metadata-row
mode-on">
<span class="title">Stat</span>
<div id="preview-fps" class="metadata value"></div>
<div id="preview-num-faces" class="metadata value"></div>
</div>
<div id="preview-af" class="expert-control-row metadata-row">
<span class="title">AF</span>
<div id="preview-focus-distance" class="metadata value"></div>
<div id="preview-af-state" class="metadata value"></div>
</div>
<div id="preview-ae" class="expert-control-row metadata-row">
<span class="title">AE</span>
<div id="preview-sensitivity" class="metadata value"></div>
<div id="preview-exposure-time" class="metadata value"></div>
<div id="preview-frame-duration" class="metadata value"></div>
<div id="preview-ae-antibanding-mode" class="metadata value">
</div>
<div id="preview-ae-state" class="metadata value"></div>
</div>
<div id="preview-awb" class="expert-control-row metadata-row">
<span class="title">AWB</span>
<div id="preview-wb-gain-red" class="metadata value"></div>
<div id="preview-wb-gain-blue" class="metadata value"></div>
<div id="preview-awb-state" class="metadata value"></div>
</div>
<div id="preview-ptz" class="expert-control-row metadata-row">
<span class="title">PTZ</span>
<div id="preview-ptz-pan" class="metadata value"></div>
<div id="preview-ptz-tilt" class="metadata value"></div>
<div id="preview-ptz-zoom" class="metadata value"></div>
</div>
<div class="video-option-row expert-control-row">
<span class="title">Profile</span>
<select id="video-profile" tabindex="0">
<!-- Generate in runtime -->
</select>
</div>
<div id="bitrate-slider" class="video-option-row
expert-control-row">
<span class="title">Bitrate</span>
<input type="range" min="1" tabindex="0">
<div id="bitrate-multiplier" class="value"></div>
<div id="bitrate-number" class="value"></div>
</div>
</div>
<canvas id="preview-face-overlay" class="preview-content"></canvas>
<div id="preview-grid">
<div id="preview-grid-horizontal"></div>
<div id="preview-grid-vertical"></div>
</div>
<div id="preview-focus">
<svg-wrapper id="preview-focus-aim" name="camera_focus_aim.svg"
hidden></svg-wrapper>
</div>
<div id="preview-document-corner-overlay">
<div class="no-document-toast" tabindex="0" aria-live="polite"
i18n-text="no_document_guide_msg"></div>
<div class="corner-container"></div>
</div>
<div class="barcode-scan-box centered-overlay"></div>
<div id="camera-mode" class="centered-overlay">
<svg-wrapper name="camera_mode_photo.svg" class="photo">
</svg-wrapper>
<svg-wrapper name="camera_mode_scan.svg" class="scan">
</svg-wrapper>
<svg-wrapper name="camera_mode_video.svg" class="video">
</svg-wrapper>
<svg-wrapper name="camera_mode_portrait.svg" class="portrait">
</svg-wrapper>
</div>
</div>
<div id="barcode-chip-url-container"
class="invisible barcode-chip-container"
role="dialog"
i18n-aria="label_barcode_url">
<button id="barcode-chip-url"
class="barcode-chip-button" tabindex="0">
<svg-wrapper name="barcode_url.svg"></svg-wrapper>
<span id="barcode-chip-url-content"
class="barcode-chip-button-content"></span>
</button>
<div class="circle">
<button class="barcode-copy-button" tabindex="0"
data-svg="barcode_copy.svg"
i18n-aria="barcode_copy_link_button"></button>
</div>
</div>
<div id="barcode-chip-text-container"
class="invisible barcode-chip-container"
role="dialog"
aria-describedby="barcode-chip-text-description"
i18n-aria="label_barcode_text">
<div class="barcode-chip-text">
<span id="barcode-chip-text-content"></span>
<button id="barcode-chip-text-expand"
aria-expanded="false"
i18n-aria="label_expand_detected_content_button"
tabindex="0">
<svg-wrapper name="barcode_chevron_up.svg" class="up-icon">
</svg-wrapper>
<svg-wrapper name="barcode_chevron_down.svg" class="down-icon">
</svg-wrapper>
</button>
</div>
<div class="circle">
<button class="barcode-copy-button" tabindex="0"
data-svg="barcode_copy.svg"
i18n-aria="barcode_copy_text_button"></button>
</div>
<div id="barcode-chip-text-description" hidden></div>
</div>
<div id="barcode-chip-wifi-container"
class="invisible barcode-chip-container"
role="dialog"
i18n-aria="label_barcode_wifi">
<button id="barcode-chip-wifi"
class="barcode-chip-button" tabindex="0">
<svg-wrapper name="wifi.svg"></svg-wrapper>
<span id="barcode-chip-wifi-content"
class="barcode-chip-button-content"></span>
</button>
</div>
</div>
<div class="top-stripe left-stripe buttons circle">
<button id="open-settings" tabindex="0"
i18n-label="settings_button" aria-haspopup="true"
data-svg="camera_button_settings.svg"></button>
</div>
<div class="top-stripe left-stripe buttons circle">
<button id="back-to-review-document" tabindex="0"
i18n-label="back_button" data-svg="settings_button_back.svg">
</button>
</div>
<div class="top-stripe right-stripe circle buttons">
<button id="toggle-mic" role="checkbox" tabindex="0"
i18n-label="toggle_mic_button" i18n-aria="aria_mute_off">
<svg-wrapper name="camera_button_mic_off.svg"
class="off-icon"></svg-wrapper>
<svg-wrapper name="camera_button_mic_on.svg"
class="on-icon"></svg-wrapper>
</button>
</div>
<div id="options-group" class="left-stripe buttons circle">
<!--
TODO(pihsun): These should be icon-button when jellybean is ready.
-->
<button id="open-mirror-panel" tabindex="0" aria-haspopup="true">
<svg-wrapper name="camera_button_mirror_off.svg"
class="off-icon"></svg-wrapper>
<svg-wrapper name="camera_button_mirror_on.svg"
class="on-icon"></svg-wrapper>
</button>
<button id="open-grid-panel" tabindex="0" aria-haspopup="true">
<svg-wrapper name="camera_button_grid_off.svg"
class="off-icon"></svg-wrapper>
<svg-wrapper name="camera_button_grid_on.svg"
class="on-icon"></svg-wrapper>
</button>
<button id="open-timer-panel" tabindex="0" aria-haspopup="true">
<svg-wrapper name="camera_button_timer_off.svg"
class="off-icon"></svg-wrapper>
<svg-wrapper name="camera_button_timer_on_3s.svg"
class="on-3s-icon"></svg-wrapper>
<svg-wrapper name="camera_button_timer_on_10s.svg"
class="on-10s-icon"></svg-wrapper>
</button>
<button id="open-ptz-panel" tabindex="0" aria-haspopup="true"
i18n-label="open_ptz_panel_button"
data-svg="camera_button_ptz_panel.svg">
<div id="notify-super-res-indicator"></div>
</button>
</div>
<div id="scan-modes-group" class="mode-subgroup" role="radiogroup"
i18n-aria="aria_scan_type_group">
<div id="scan-document-option" class="item disabled">
<input id="scan-document" type="radio" tabindex="0"
name="scan-type" data-scantype="document"
i18n-aria="scan_document_option" disabled>
<div class="label" i18n-text="label_scan_document_option"
aria-hidden="true"></div>
</div>
<div class="item">
<input id="scan-barcode" type="radio" tabindex="0"
name="scan-type" data-scantype="barcode"
i18n-aria="scan_qrcode_option">
<div class="label" i18n-text="label_scan_qrcode_option"
aria-hidden="true"></div>
</div>
</div>
<div id="record-types-group" class="mode-subgroup" role="radiogroup"
i18n-aria="aria_record_type_group">
<div class="item">
<input type="radio" tabindex="0" name="record-type"
data-state="record-type-normal"
i18n-aria="record_normal_video_option" checked>
<div class="label" i18n-text="label_record_normal_video_option"
aria-hidden="true"></div>
</div>
<div class="item">
<input type="radio" tabindex="0" name="record-type"
data-state="record-type-gif"
i18n-aria="record_gif_video_option">
<div class="label" i18n-text="label_record_gif_video_option"
aria-hidden="true"></div>
</div>
<div class="item" id="time-lapse-mode">
<input type="radio" tabindex="0" name="record-type"
data-state="record-type-time-lapse"
i18n-aria="record_time_lapse_video_option">
<div class="label" i18n-text="label_record_time_lapse_video_option"
aria-hidden="true"></div>
</div>
</div>
<div id="video-snapshot-holder" class="buttons right-stripe circle">
<button id="video-snapshot" class="inkdrop" tabindex="0"
i18n-label="take_video_snapshot_button"
data-svg="camera_shutter_video_snapshot.svg"></button>
</div>
<div id="shutters-group" class="buttons right-stripe circle">
<div id="recordvideo-container">
<button id="recordvideo" class="shutter inkdrop" tabindex="0"
i18n-label="record_video_start_button">
<div class="red-dot"></div>
<div class="white-square"></div>
</button>
<svg id="shutter-progress-bar">
<circle></circle>
</svg>
<svg id="time-lapse-progress">
<mask id="loop-mask">
<circle></circle>
</mask>
<circle class="ticks"></circle>
</svg>
</div>
<button id="start-takephoto" class="shutter inkdrop" tabindex="0"
i18n-label="take_photo_button"
data-svg="camera_shutter_photo_start.svg"></button>
<button id="stop-takephoto" class="shutter inkdrop" tabindex="0"
i18n-label="take_photo_cancel_button"
data-svg="camera_shutter_photo_stop.svg"></button>
</div>
<div id="pause-recordvideo-holder" class="buttons right-stripe circle">
<button id="pause-recordvideo" tabindex="0"
i18n-label="record_video_pause_button" class="inkdrop">
<div class="red-dot"></div>
<div class="two-bars" data-svg="camera_shutter_video_pause.svg"></div>
</button>
</div>
<switch-device-button tabindex="0" class="bottom-stripe left-stripe">
</switch-device-button>
<mode-selector i18n-new-feature="new_preview_ocr_toast"
class="bottom-stripe"
tabindex="0"></mode-selector>
<div id="document-page-count" class="bottom-stripe"></div>
<gallery-button class="bottom-stripe right-stripe" tabindex="0">
</gallery-button>
<record-time-chip hidden></record-time-chip>
<div class="centered-overlay">
<div id="timer-tick-msg"></div>
</div>
<div id="nudge" tabindex="0" role="alert" hidden>
<div class="warning-icon" data-svg="circle_warning_icon.svg"></div>
<div class="warning-msg"
i18n-text="low_storage_nudge_warning_msg"></div>
</div>
</div>
<div id="view-settings" class="settings">
<div class="menu">
<div class="menu-header circle">
<button class="icon" tabindex="0" i18n-aria="back_button"
data-svg="settings_button_back.svg"></button>
<div id="settings-header" i18n-text="settings_button"></div>
</div>
<button id="settings-photo-resolution" class="menu-item inkdrop
expandable" tabindex="0">
<div class="icon" data-svg="settings_resolution.svg"></div>
<div>
<div i18n-text="photo_resolution_button"></div>
<div class="description">
<span></span>
</div>
</div>
<div class="expand" data-svg="settings_button_expand.svg"></div>
</button>
<button id="settings-video-resolution" class="menu-item inkdrop
expandable" tabindex="0">
<div class="icon" data-svg="settings_resolution.svg"></div>
<div>
<div i18n-text="video_resolution_button"></div>
<div class="description">
<span></span>
</div>
</div>
<div class="expand" data-svg="settings_button_expand.svg"></div>
</button>
<button id="settings-photo-aspect-ratio" class="menu-item inkdrop
expandable" tabindex="0">
<div class="icon" data-svg="settings_aspect_ratio.svg"></div>
<div>
<div i18n-text="photo_aspect_ratio_button"></div>
<div class="description">
<span></span>
</div>
</div>
<div class="expand" data-svg="settings_button_expand.svg"></div>
</button>
<button id="settings-expert" class="menu-item inkdrop expandable"
tabindex="0">
<div class="icon" data-svg="settings_expert.svg"></div>
<div i18n-text="expert_mode_button">
</div>
<div class="expand" data-svg="settings_button_expand.svg"></div>
</button>
<label class="menu-item inkdrop" id="settings-preview-ocr">
<div class="icon" data-svg="preview_ocr_icon.svg"></div>
<div>
<div i18n-text="preview_ocr_option"></div>
<div class="description"
i18n-text="preview_ocr_option_description"></div>
</div>
<div id="settings-preview-ocr-option">
<input class="icon" type="checkbox" tabindex="0"
data-state="enable-preview-ocr" data-key="enablePreviewOcr">
<svg-wrapper class="icon" name="check_mark.svg"></svg-wrapper>
</div>
</label>
<button id="settings-feedback" class="menu-item inkdrop" tabindex="0">
<div class="icon" data-svg="settings_feedback.svg"></div>
<div i18n-text="feedback_button"></div>
</button>
<button id="settings-help" class="menu-item inkdrop" tabindex="0">
<div class="icon" data-svg="settings_help.svg"></div>
<div i18n-text="help_button"></div>
</button>
</div>
</div>
<div id="view-photo-resolution-settings" class="settings">
<div class="menu">
<div class="menu-header circle">
<button class="icon" tabindex="0" i18n-aria="back_button"
data-svg="settings_button_back.svg"></button>
<div i18n-text="photo_resolution_button"></div>
</div>
</div>
</div>
<div id="view-photo-aspect-ratio-settings" class="settings">
<div class="menu" data-name="aspectratios">
<div class="menu-header circle">
<button class="icon" tabindex="0" i18n-aria="back_button"
data-svg="settings_button_back.svg"></button>
<div i18n-text="photo_aspect_ratio_button"></div>
</div>
</div>
</div>
<div id="view-video-resolution-settings" class="settings">
<div class="menu" data-name="videores">
<div class="menu-header circle">
<button class="icon" tabindex="0" i18n-aria="back_button"
data-svg="settings_button_back.svg"></button>
<div i18n-text="video_resolution_button"></div>
</div>
</div>
</div>
<div id="view-expert-settings" class="settings">
<div class="menu">
<div class="menu-header circle">
<button class="icon" tabindex="0" i18n-aria="back_button"
data-svg="settings_button_back.svg"></button>
<div i18n-text="expert_mode_button"></div>
</div>
<label class="menu-item inkdrop require-chromeos-vcd">
<input id="expert-show-metadata" class="icon" type="checkbox"
tabindex="0" data-state="show-metadata"
data-key="showMetadata">
<span i18n-text="expert_preview_metadata"></span>
</label>
<label class="menu-item inkdrop require-chromeos-vcd">
<input id="expert-save-metadata" class="icon" type="checkbox"
tabindex="0" data-state="save-metadata"
data-key="saveMetadata">
<span i18n-text="expert_save_metadata"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-print-performance-logs" class="icon" type="checkbox"
tabindex="0" data-state="print-performance-logs"
data-key="printPerformanceLogs">
<span i18n-text="expert_print_performance_logs"></span>
</label>
<label class="menu-item inkdrop">
<input class="icon" id="custom-video-parameters"
type="checkbox" tabindex="0"
data-state="custom-video-parameters"
data-key="customVideoParameters">
<span i18n-text="expert_custom_video_parameters"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-enable-full-sized-video-snapshot" class="icon"
type="checkbox" tabindex="0"
data-state="enable-full-sized-video-snapshot"
data-key="enableFullSizedVideoSnapshot">
<span i18n-text="expert_enable_full_sized_video_snapshot"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-enable-fps-picker-for-builtin" class="icon"
type="checkbox" tabindex="0"
data-state="enable-fps-picker-for-builtin"
data-key="enableFPSPicker">
<span i18n-text="expert_enable_fps_picker_for_builtin"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-show-all-resolutions" class="icon"
type="checkbox" tabindex="0"
data-state="show-all-resolutions"
data-key="showAllResolutions">
<span i18n-text="expert_show_all_resolutions"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-enable-ptz-for-builtin" class="icon"
type="checkbox" tabindex="0"
data-state="enable-ptz-for-builtin"
data-key="enablePTZForBuiltin">
<span i18n-text="expert_enable_ptz_for_builtin"></span>
</label>
<label class="menu-item inkdrop">
<input id="expert-enable-expert-mode" class="icon" type="checkbox"
tabindex="0" data-state="expert"
data-key="expert">
<span i18n-text="expert_enable_expert_mode"></span>
</label>
</div>
</div>
<div id="view-option-panel">
<div id="option-panel" class="panel">
<div id="option-title" class="text"></div>
<div id="options-container"></div>
</div>
</div>
<div id="view-ptz-panel">
<div id="ptz-panel">
<div id="reset-all-container" class="panel">
<button id="ptz-reset-all" class="inkdrop" tabindex="0">
<div class="icon" data-svg="ptz_reset_all.svg"></div>
<div class="text" i18n-text="ptz_reset_all_button"></div>
</button>
</div>
<div id="ptz-panel-container" class="panel">
<button id="tilt-up" class="inkdrop" i18n-label="tilt_up_button"
tabindex="0" data-svg="ptz_tilt_up.svg"
data-tooltip-anchor="svg-wrapper"></button>
<button id="pan-left" class="inkdrop" i18n-label="pan_left_button"
tabindex="0" data-svg="ptz_pan_left.svg"
data-tooltip-anchor="svg-wrapper"></button>
<button id="zoom-out" class="inkdrop" i18n-label="zoom_out_button"
tabindex="0" data-svg="ptz_zoom_out.svg"></button>
<button id="zoom-in" class="inkdrop" i18n-label="zoom_in_button"
tabindex="0" data-svg="ptz_zoom_in.svg"></button>
<button id="pan-right" class="inkdrop" i18n-label="pan_right_button"
tabindex="0" data-svg="ptz_pan_right.svg"
data-tooltip-anchor="svg-wrapper"></button>
<button id="tilt-down" class="inkdrop" i18n-label="tilt_down_button"
tabindex="0" data-svg="ptz_tilt_down.svg"
data-tooltip-anchor="svg-wrapper"></button>
<div id="ptz-divider1" class="ptz-divider"></div>
<div id="ptz-divider2" class="ptz-divider"></div>
<div id="ptz-divider3" class="ptz-divider"></div>
<div id="ptz-divider4" class="ptz-divider"></div>
<div id="ptz-zoom-divider" class="ptz-divider"></div>
</div>
</div>
</div>
<div id="view-review" class="review-views">
<div class="review-frame">
<img class="review-image" hidden alt="">
<video class="review-video" hidden autoplay></video>
</div>
</div>
<div id="view-document-review" class="review-views">
<div class="document-pages" role="tablist" i18n-aria="scanned_page_list"
aria-orientation="vertical"></div>
<div class="document-preview" role="tabpanel"></div>
</div>
<div id="view-low-storage-dialog" class="dialog">
<div class="low-storage-dialog-popup" role="dialog"
aria-labelledby="low-storage-dialog-title"
aria-describedby="low-storage-dialog-description">
<div class="dialog-title dialog-msg-holder"
id="low-storage-dialog-title"></div>
<div class="dialog-description"
id="low-storage-dialog-description"></div>
<div class="low-storage-dialog-buttons">
<button class="dialog-negative-button text-button pill
system-secondary dark" tabindex="0">
<div class="external-link-icon" data-svg="external_link_icon.svg">
</div>
<div i18n-text="low_storage_dialog_storage_button"></div>
</button>
<button class="dialog-positive-button text-button pill primary dark
inkdrop" tabindex="0" i18n-text="dialog_ok_button"></button>
</div>
</div>
</div>
<div id="view-flash">
<div id="processing-indicator" class="centered-overlay">
<svg-wrapper class="icon" name="document_mode_spinner.svg">
</svg-wrapper>
<div class="msg" tabindex="0" i18n-text="msg_processing_image"></div>
</div>
</div>
<div id="view-super-res-intro-dialog" class="dialog">
<div class="dialog-container" role="dialog"
aria-labelledby="super-res-dialog-title"
aria-describedby="super-res-dialog-description">
<div id="super-res-dialog-illustration">
<svg-wrapper name="super_res_intro_dialog.svg"></svg-wrapper>
</div>
<div id="super-res-dialog-content">
<div class="dialog-title dialog-msg-holder"
id="super-res-dialog-title"
i18n-text="super_res_intro_dialog_title">
</div>
<div class="dialog-description"
id="super-res-dialog-description"></div>
<div class="dialog-buttons">
<button class="dialog-negative-button text-button pill dark
secondary" tabindex="0"
i18n-text="super_res_intro_dialog_learn_more_button">
</button>
<button class="dialog-positive-button text-button pill primary dark
inkdrop" tabindex="0"
i18n-text="super_res_intro_dialog_got_it_button"></button>
</div>
</div>
</div>
</div>
<div id="view-warning">
<div id="error-msg" aria-live="polite"></div>
</div>
<div id="view-splash">
<div class="icon"></div>
</div>
<div id="toast" class="centered-overlay" tabindex="-1"
aria-live="polite"></div>
<text-tooltip></text-tooltip>
<div class="snackbar" aria-live="polite"></div>
<template id="preview-video-template">
<video id="preview-video" class="preview-content" aria-hidden="true"
muted></video>
</template>
<template id="resolution-label-template">
<div class="label-item">
<span></span>
</div>
</template>
<template id="resolution-text-template">
<div class="text-item">
<span></span>
</div>
</template>
<template id="resolution-item-template">
<label class="menu-item circle resolution-option inkdrop">
<input class="icon" type="radio" tabindex="0">
<span></span>
</label>
</template>
<template id="video-resolution-item-template">
<label class="menu-item resolution-option inkdrop">
<input class="icon" type="radio" tabindex="0">
<span></span>
<div class="fps-buttons">
<button class="fps-button fps-30" i18n-aria="label_30fps"
tabindex="0">
<svg-wrapper name="camera_button_fps_30.svg"></svg-wrapper>
</button>
<button class="fps-button fps-60" i18n-aria="label_60fps"
tabindex="0">
<svg-wrapper name="camera_button_fps_60.svg"></svg-wrapper>
</button>
</div>
</label>
</template>
<template id="video-profile-option-template">
<option></option>
</template>
<template id="document-corner-template">
<div class="corner">
<div class="dot"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</template>
<template id="document-side-template">
<div class="side line"></div>
</template>
<template id="document-drag-point-template">
<div tabindex="0" class="dot"
aria-describedby="document-corner-move-desc">
</div>
</template>
<template id="inkdrop-template">
<div class="inkdrop-ripple"></div>
</template>
<template id="ripple-template">
<div class="ripple"></div>
</template>
<template id="new-feature-toast-template">
<div id="new-feature-toast" class="custom-toast" tabindex="0"
role="alert">
<svg-wrapper name="new_feature_toast_icon.svg"></svg-wrapper>
<span class="custom-toast-text"></span>
</div>
</template>
<template id="indicator-toast-template">
<div id="indicator-toast" class="custom-toast" tabindex="0">
<svg-wrapper id="indicator-icon"></svg-wrapper>
<span class="custom-toast-text" aria-hidden="true"></span>
</div>
<div id="indicator-dot"></div>
</template>
<template id="text-button-template">
<button class="text-button pill dark inkdrop" tabindex="0"></button>
</template>
<template id="review-positive-button-group-template">
<div class="positive button-group"></div>
</template>
<template id="review-negative-button-group-template">
<div class="negative button-group"></div>
</template>
<template id="review-intent-button-group-template">
<div class="review-intent-button-group buttons right-stripe circle">
</div>
</template>
<template id="review-intent-button-template">
<button tabindex="0"></button>
</template>
<template id="state-option-template">
<label class="menu-item circle inkdrop">
<input class="icon" type="radio" tabindex="0">
<span></span>
</label>
</template>
<template id="document-preview-mode">
<div class="document-preview-mode">
<div class="preview-area">
<img class="image" alt="">
</div>
<div class="buttons-container">
<div class="button-group left">
<button class="text-button pill dark inkdrop secondary"
i18n-text="cancel_review_button" tabindex="0"></button>
<div class="separator"></div>
<button class="icon-button dark inkdrop" id="doc-scan-menu-button"
tabindex="0" i18n-label="doc_scan_menu_button">
<svg-wrapper name="more_horizontal.svg"></svg-wrapper>
</button>
<button class="icon-button dark inkdrop"
i18n-label="add_new_page_button" tabindex="0">
<svg-wrapper name="document_review_add_page.svg"></svg-wrapper>
</button>
<button class="icon-button dark inkdrop"
i18n-label="label_share" tabindex="0">
<svg-wrapper name="review_share.svg"></svg-wrapper>
</button>
<button class="icon-button dark inkdrop"
i18n-label="fix_page_button" tabindex="0">
<svg-wrapper name="document_review_fix_page.svg"></svg-wrapper>
</button>
</div>
<div class="button-group right">
<button class="text-button pill dark inkdrop secondary"
i18n-text="label_save_photo_document" tabindex="0"></button>
<button class="text-button pill dark inkdrop primary"
i18n-text="label_save_pdf_document" tabindex="0"></button>
</div>
</div>
</div>
</template>
<template id="document-fix-mode">
<div class="document-fix-mode">
<div id="document-corner-move-desc"
i18n-text="document_corner_move_desc" hidden></div>
<div class="preview-area">
<div class="image-container">
<img class="image" alt="">
<svg class="crop-area-container">
<polygon class="crop-area"></polygon>
</svg>
</div>
</div>
<div class="buttons-container">
<div class="review-crop-rotation-button-group button-group">
<button class="icon-button dark inkdrop"
i18n-label="rotate_clockwise_button" tabindex="0">
<svg-wrapper name="crop_document_clockwise_rotate.svg">
</svg-wrapper>
</button>
<button class="icon-button dark inkdrop"
i18n-label="rotate_counterclockwise_button" tabindex="0">
<svg-wrapper name="crop_document_counterclockwise_rotate.svg">
</svg-wrapper>
</button>
</div>
<div class="button-group right">
<button class="text-button pill dark inkdrop primary"
i18n-text="label_crop_done" tabindex="0"></button>
</div>
</div>
</div>
</template>
<template id="document-review-page">
<div class="page" tabindex="-1" aria-selected="false" role="tab"
i18n-aria="select_page_button">
<div class="delete-container">
<button class="delete icon-button dark inkdrop"
i18n-label="delete_page_button" tabindex="0">
<svg-wrapper name="document_review_delete_page.svg"></svg-wrapper>
</button>
</div>
<div class="thumbnail-container">
<img class="thumbnail" alt="">
</div>
</div>
</template>
<!-- Use `menu-root` and `item` as class name instead of existing `menu` and
`menu-item. -->
<template id="menu">
<ul class="menu-root" role="menu"></ul>
</template>
<template id="menu-item">
<li class="item" role="menuitem"></li>
</template>
<template id="doc-scan-menu-item-content">
<div class="menu-item-content">
<svg-wrapper class="menu-item-icon"></svg-wrapper>
<div class="menu-item-label"></div>
</div>
</template>
</body>
</html>
Codebase Browser
chromium