Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(76)

Unified Diff: chrome/browser/resources/imageburner.html

Issue 2808100: Code implements UI for downloading and burning Chrome OS images on SSD card a... (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src/
Patch Set: '' Created 10 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698