diff options
author | tbarzic@google.com <tbarzic@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2010-08-23 19:04:46 +0000 |
---|---|---|
committer | tbarzic@google.com <tbarzic@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2010-08-23 19:04:46 +0000 |
commit | 4a6861a33cc1848ef17c54f8f2209c2c2376b0a8 (patch) | |
tree | aa855eaded757b0fb86388d0ec447e7230912186 /chrome/browser/resources | |
parent | 9d87da0351d34bfe0dedb8f4c569ed1d347bb77e (diff) | |
download | chromium_src-4a6861a33cc1848ef17c54f8f2209c2c2376b0a8.zip chromium_src-4a6861a33cc1848ef17c54f8f2209c2c2376b0a8.tar.gz chromium_src-4a6861a33cc1848ef17c54f8f2209c2c2376b0a8.tar.bz2 |
Code implements UI for downloading and burning Chrome OS images on SSD card and USB key. Actual burning is not included in the change list.
BUG=chromium-os:5346
TEST=type in chrome://imagebuner in browser. UI lists all media that image can be burnt to. After selecting burning target by clicking an image right to the target name, image download should start, and download progress should be displayed. After download ends alert should pop up asking user to confirm that he wants to burn image to selected device. Clicking both ok or cancel shouldn't do anything, since actual burning isn't stil included in CL.
Image should be downloaded to chrome_image folder in users Downloads directory.
this folder is deleted during shutdown.
This is only visible in ChromeOS...
Review URL: http://codereview.chromium.org/2808100
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@57085 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/browser/resources')
-rw-r--r-- | chrome/browser/resources/imageburner.html | 441 |
1 files changed, 441 insertions, 0 deletions
diff --git a/chrome/browser/resources/imageburner.html b/chrome/browser/resources/imageburner.html new file mode 100644 index 0000000..dfc987a --- /dev/null +++ b/chrome/browser/resources/imageburner.html @@ -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> |