| Index: chrome/browser/resources/imageburner.html
|
| ===================================================================
|
| --- chrome/browser/resources/imageburner.html (revision 0)
|
| +++ chrome/browser/resources/imageburner.html (revision 0)
|
| @@ -0,0 +1,441 @@
|
| +<!DOCTYPE html>
|
| +<html i18n-values="dir:textdirection;">
|
| +<head>
|
| +<meta charset=UTF-8">
|
| +<title i18n-content="title"></title>
|
| +<style>
|
| +body {
|
| + -webkit-user-select: none;
|
| +}
|
| +
|
| +h1 {
|
| + border-bottom: 1px solid #7289E2;
|
| + padding: 8px;
|
| + height: 32px;
|
| + background-image: -webkit-gradient(linear,
|
| + left top,
|
| + left bottom,
|
| + from(#D0DAF8),
|
| + to(#A6BAF7));
|
| + border: 1px solid #999;
|
| + border-top: 0;
|
| + color: black;
|
| +}
|
| +
|
| +html[dir='rtl'] h1 {
|
| + left: auto;
|
| + right: 0;
|
| + background-image: -webkit-gradient(linear,
|
| + right top,
|
| + right bottom,
|
| + from(#D0DAF8),
|
| + to(#A6BAF7));
|
| +}
|
| +
|
| +.rowlink {
|
| + height: 100%;
|
| + -webkit-margin-end: 2px;
|
| +}
|
| +
|
| +.devicerow div.icon {
|
| + -webkit-margin-start: 5px;
|
| + margin-top: -3px;
|
| + float: left;
|
| + width: 17px;
|
| + height: 17px;
|
| + background-repeat: no-repeat;
|
| + background: url('shared/images/icon_folder.png');
|
| +}
|
| +
|
| +html[dir='rtl'] .devicerow div.icon {
|
| + float: right;
|
| +}
|
| +
|
| +.burnicon {
|
| + background: url('shared/images/filebrowse_menu.png');
|
| + position: absolute;
|
| + right: 4px;
|
| + top: 5px;
|
| + height: 15px;
|
| + width: 15px;
|
| + margin-top: 5px;
|
| + background-repeat: no-repeat;
|
| + cursor: pointer;
|
| + opacity: 0.3;
|
| + -webkit-transition: opacity 0.15s ease-out;
|
| + border: 0;
|
| +}
|
| +
|
| +html[dir='rtl'].burnicon {
|
| + right: auto;
|
| + left: 4px;
|
| +}
|
| +
|
| +.devicerow:hover .burnicon {
|
| + opacity: 0.75;
|
| + -webkit-transition: none;
|
| +}
|
| +
|
| +.devicerow:hover .burnicon:hover {
|
| + opacity: 1;
|
| + -webkit-transition: none;
|
| + cursor: pointer;
|
| +}
|
| +
|
| +.devicerow {
|
| + border-bottom: 1px solid #f7f7f7;
|
| + padding: 8px 5px 5px 8px;
|
| + font-size: .8em;
|
| + position: relative;
|
| + background-color: #fff;
|
| +}
|
| +
|
| +html[dir='rtl'] .devicerow {
|
| + padding: 8px 8px 5px 5px;
|
| +}
|
| +
|
| +.devicerow:hover {
|
| + background-color: #ebeff9;
|
| +}
|
| +
|
| +.devicerow span.name {
|
| + margin-top: 10px;
|
| + -webkit-margin-start: 10px;
|
| +}
|
| +
|
| +.selected {
|
| + background-color: #b1c8f2;
|
| +}
|
| +
|
| +h1.title {
|
| + margin-top: 5px;
|
| + text-align: center;
|
| + font-size: 1.2em;
|
| + font-weight: bold;
|
| +}
|
| +
|
| +.columnlist {
|
| + width: 100%;
|
| + bottom: 0;
|
| + overflow-y: scroll;
|
| + overflow-x: hidden;
|
| +}
|
| +
|
| +.fullcontainer {
|
| + top: 0px;
|
| + position: absolute;
|
| + left: 0;
|
| + bottom: 0;
|
| + right: 600px;
|
| + overflow-y: hidden;
|
| + overflow-x: scroll;
|
| +}
|
| +
|
| +html[dir='rtl'] .fullcontainer {
|
| + left: 600px;
|
| + right: 0;
|
| +}
|
| +
|
| +progress {
|
| + -webkit-margin-start: 15px;
|
| + width: 700px;
|
| +}
|
| +
|
| +.progressText {
|
| + -webkit-padding-start: 20px;
|
| + font-size: .6em;
|
| + font: "Helvetica";
|
| +}
|
| +
|
| +.statusText {
|
| + padding-top: 5px;
|
| + -webkit-padding-start: 15px;
|
| + font-size: 1em;
|
| +}
|
| +
|
| +.statusDiv{
|
| + border-bottom: 1px solid #f7f7f7;
|
| + padding-bottom: 2px;
|
| + background-color: #fff;
|
| +}
|
| +
|
| +#rootsColumn {
|
| + height: 50%;
|
| +}
|
| +
|
| +#statusColumn {
|
| + height: 50%;
|
| + border-top: 1px solid #7289E2;
|
| +}
|
| +</style>
|
| +
|
| +<script src="shared/js/local_strings.js"></script>
|
| +<script>
|
| +function $(o) {
|
| + return document.getElementById(o);
|
| +}
|
| +
|
| +var currentlySelectedItem;
|
| +var currentlySelectedPath;
|
| +var localStrings;
|
| +var statusMessages;
|
| +var burnStarted;
|
| +
|
| +function promtUserDownloadFinished() {
|
| + // This could be done nicer.
|
| + var answer = confirm(localStrings.getString('burnConfirmText1') +
|
| + currentlySelectedPath + localStrings.getString('burnConfirmText2'));
|
| + chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []);
|
| +}
|
| +
|
| +function alertUserDownloadAborted(){
|
| + alert(localStrings.getString('downloadAbortedMessage'));
|
| +}
|
| +
|
| +function burnSuccessful() {
|
| + alert(localStrings.getString('burnSuccessfulMessage'));
|
| +}
|
| +
|
| +function burnUnsuccessful(){
|
| + alert(localStrings.getString('burnUnsuccessfulMessage'));
|
| +}
|
| +
|
| +function rootsChanged(){
|
| + chrome.send('getRoots', []);
|
| +}
|
| +
|
| +function browseFileResult(info, results) {
|
| + var path = info.path;
|
| + var list = $('rootsList');
|
| + list.innerHTML = '';
|
| + var selectedRemoved = true;
|
| + var addedRoots=[];
|
| + for (var x = 0; x < results.length; x++) {
|
| + if (!(results[x].title in addedRoots)) {
|
| + addedRoots[results[x].title] = true;
|
| + var element = createNewItem(results[x].title, results[x].path);
|
| + if (results[x].path == currentlySelectedPath) {
|
| + selectItem(element.id, results[x].path);
|
| + selectedRemoved = false;
|
| + }
|
| + list.appendChild(element);
|
| + }
|
| + }
|
| + if (selectedRemoved) {
|
| + currentlySelectedItem = null;
|
| + currentlySelectedPath = null;
|
| + }
|
| +}
|
| +
|
| +function selectItem(elementId, path) {
|
| + var element = $(elementId);
|
| + var index;
|
| + if (currentlySelectedItem)
|
| + currentlySelectedItem.className = 'devicerow';
|
| + if (element) {
|
| + element.className = 'selected devicerow';
|
| + currentlySelectedItem = element;
|
| + currentlySelectedPath = path;
|
| + }
|
| +}
|
| +
|
| +function createProgressElement(id) {
|
| + var statusDiv = document.createElement('div');
|
| + statusDiv.id = id;
|
| + statusDiv.className = 'statusDiv';
|
| +
|
| + var statusText = document.createElement('div');
|
| + statusText.id = id + 'StatusText';
|
| + statusText.className = 'statusText';
|
| + statusDiv.appendChild(statusText);
|
| +
|
| + var progressBar = document.createElement('progress');
|
| + progressBar.id = id + 'ProgressBar';
|
| + progressBar.className = 'progressBar';
|
| + statusDiv.appendChild(progressBar);
|
| +
|
| + var progressText = document.createElement('div');
|
| + progressText.id = id + 'ProgressText';
|
| + progressText.className = 'progressText'
|
| + statusDiv.appendChild(progressText);
|
| +
|
| + return statusDiv;
|
| +}
|
| +
|
| +function setProgressElementFinalValues(element, statuses, event) {
|
| + var statusTextDiv;
|
| + var progressBarDiv;
|
| + var progressTextDiv;
|
| + for (var i = 0; i < element.children.length; i++ ) {
|
| + switch(element.children[i].className) {
|
| + case 'statusText':
|
| + statusTextDiv = element.children[i];
|
| + break;
|
| + case 'progressBar':
|
| + progressBarDiv = element.children[i];
|
| + break;
|
| + case 'progressText':
|
| + progressTextDiv = element.children[i];
|
| + break;
|
| + }
|
| + }
|
| + if (event == 'COMPLETE')
|
| + statusTextDiv.textContent = statuses['finished'];
|
| + else
|
| + statusTextDiv.textContent = statuses['canceled'];
|
| +
|
| + var progressBarParent = progressBarDiv.parentNode;
|
| + progressBarParent.removeChild(progressBarDiv);
|
| +
|
| + var progressTextParent = progressTextDiv.parentNode;
|
| + progressTextParent.removeChild(progressTextDiv);
|
| + return element;
|
| +}
|
| +
|
| +function setProgressElementValues(element, statuses, amountFinished,
|
| + amountTotal, progressText){
|
| + var statusTextDiv;
|
| + var progressBarDiv;
|
| + var progressTextDiv;
|
| + for (var i = 0; i < element.children.length; i++ ) {
|
| + switch(element.children[i].className) {
|
| + case 'statusText':
|
| + statusTextDiv = element.children[i];
|
| + break;
|
| + case 'progressBar':
|
| + progressBarDiv = element.children[i];
|
| + break;
|
| + case 'progressText':
|
| + progressTextDiv = element.children[i];
|
| + break;
|
| + }
|
| + }
|
| +
|
| + if (amountFinished <= 0) {
|
| + amountFinished = 0;
|
| + statusTextDiv.textContent = statuses["start"];
|
| + progressTextDiv.textContent = "";
|
| + } else {
|
| + statusTextDiv.textContent = statuses["inProgress"];
|
| + progressTextDiv.textContent = progressText;
|
| + }
|
| + if(amountFinished > amountTotal)
|
| + amountFinished = amountTotal;
|
| + progressBarDiv.value = amountFinished;
|
| + progressBarDiv.max = amountTotal;
|
| + return element;
|
| +}
|
| +
|
| +function updateProgressElement(progressType, progressInfo) {
|
| + var element = $(progressType + 'ProgressElement');
|
| + if (!element) {
|
| + element = createProgressElement(progressType + 'ProgressElement');
|
| + var column = $('statusList');
|
| + column.appendChild(element);
|
| + }
|
| + var errorOccurred = (progressInfo.state == 'CANCELLED');
|
| + if (progressInfo.state == 'IN_PROGRESS') {
|
| + setProgressElementValues(element, statusMessages[progressType],
|
| + progressInfo.received, progressInfo.total,
|
| + progressInfo.progress_status_text);
|
| + } else {
|
| + setProgressElementFinalValues(element, statusMessages[progressType],
|
| + progressInfo.state);
|
| + }
|
| +}
|
| +
|
| +function downloadUpdated(result) {
|
| + updateProgressElement('download', result);
|
| +}
|
| +
|
| +function burnProgressUpdated(result) {
|
| + if (!burnStarted) {
|
| + $('rootsList').style.display = 'none';
|
| + $('rootsListTitle').textContent = result.path;
|
| + burnStarted = true;
|
| + }
|
| + updateProgressElement('burn', result);
|
| +}
|
| +
|
| +var elementIdCounter = 0;
|
| +
|
| +function createNewItem(title, path) {
|
| + var element = document.createElement('div');
|
| + element.className = 'devicerow';
|
| + element.id = path + elementIdCounter;
|
| + elementIdCounter++;
|
| + var link;
|
| + link = document.createElement('div');
|
| + link.onclick = function() { selectItem(element.id, path); };
|
| + link.className = 'rowlink';
|
| +
|
| + var icon = document.createElement('div');
|
| + icon.className = 'icon';
|
| + link.appendChild(icon);
|
| +
|
| + var span = document.createElement('span');
|
| + span.className = 'name';
|
| + span.textContent = title;
|
| + link.appendChild(span);
|
| +
|
| + element.appendChild(link);
|
| +
|
| + var burnicon = document.createElement('button');
|
| + burnicon.className = 'burnicon';
|
| + burnicon.onclick = function() { burnImage(element.id, title); };
|
| + element.appendChild(burnicon);
|
| +
|
| + return element;
|
| +}
|
| +
|
| +function burnImage(elementId, path) {
|
| + selectItem(elementId, path);
|
| + chrome.send('downloadImage', [path]);
|
| +}
|
| +
|
| +function clearList(list) {
|
| + while (list.childNodes.length >= 1) {
|
| + list.removeChild(list.firstChild);
|
| + }
|
| +}
|
| +
|
| +document.addEventListener('DOMContentLoaded', function() {
|
| + localStrings = new LocalStrings();
|
| + burnStarted = false;
|
| + chrome.send("getRoots", []);
|
| +
|
| + // Initialize messages that will be displayed as download
|
| + // or burn progress is updated.
|
| + statusMessages = [];
|
| +
|
| + var downloadStatuses = [];
|
| + downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
|
| + downloadStatuses['inProgress'] =
|
| + localStrings.getString('downloadStatusInProgress');
|
| + downloadStatuses['finished'] =
|
| + localStrings.getString('downloadStatusComplete');
|
| + downloadStatuses['canceled'] =
|
| + localStrings.getString('downloadStatusCanceled');
|
| + statusMessages['download'] = downloadStatuses;
|
| +
|
| + var burnStatuses = [];
|
| + burnStatuses['start'] = localStrings.getString('burnStatusStart');
|
| + burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
|
| + burnStatuses['finished'] = localStrings.getString('burnStatusComplete');
|
| + burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled');
|
| + statusMessages['burn'] = burnStatuses;
|
| +});
|
| +</script>
|
| +</head>
|
| +<body>
|
| + <div id="main" class="fullcontainer">
|
| + <div id="rootsColumn" class="columnlist">
|
| + <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>
|
| + <div id="rootsList"></div>
|
| + </div>
|
| + <div id="statusColumn" class="columnlist">
|
| + <div id="statusList"></div>
|
| + </div>
|
| + </div>
|
| +</body>
|
| +</html>
|
|
|