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> |