• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!DOCTYPE html>
2<html i18n-values="dir:textdirection;">
3<head>
4<meta charset=UTF-8">
5<title i18n-content="title"></title>
6<style>
7body {
8  -webkit-user-select: none;
9}
10
11h1 {
12  border-bottom: 1px solid #7289E2;
13  padding: 8px;
14  height: 32px;
15  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
16  border: 1px solid #999;
17  border-top: 0;
18  color: black;
19}
20
21html[dir='rtl'] h1 {
22  left: auto;
23  right: 0;
24  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
25}
26
27.rowlink {
28  height: 100%;
29  -webkit-margin-end: 2px;
30}
31
32.devicerow div.icon {
33  -webkit-margin-start: 5px;
34  margin-top: -3px;
35  float: left;
36  width: 17px;
37  height: 17px;
38  background-repeat: no-repeat;
39  background: url('shared/images/icon_folder.png');
40}
41
42html[dir='rtl'] .devicerow div.icon {
43  float: right;
44}
45
46.burnicon {
47  background:  url('shared/images/filebrowse_menu.png');
48  position: absolute;
49  right: 4px;
50  top: 5px;
51  height: 15px;
52  width: 15px;
53  margin-top: 5px;
54  background-repeat: no-repeat;
55  cursor: pointer;
56  opacity: 0.3;
57  -webkit-transition: opacity 0.15s ease-out;
58  border: 0;
59}
60
61html[dir='rtl'].burnicon {
62  right: auto;
63  left: 4px;
64}
65
66.devicerow:hover .burnicon {
67  opacity: 0.75;
68  -webkit-transition: none;
69}
70
71.devicerow:hover .burnicon:hover {
72  opacity: 1;
73  -webkit-transition: none;
74}
75
76.devicerow {
77  border-bottom: 1px solid #f7f7f7;
78  padding: 8px 5px 5px 8px;
79  font-size: .8em;
80  position: relative;
81  background-color: #fff;
82}
83
84html[dir='rtl'] .devicerow {
85  padding: 8px 8px 5px 5px;
86}
87
88.devicerow:hover {
89  background-color: #ebeff9;
90  cursor: pointer;
91}
92
93.devicerow span.name {
94  margin-top: 10px;
95  -webkit-margin-start: 10px;
96}
97
98.selected {
99  background-color: #b1c8f2;
100}
101
102h1.title {
103  margin-top: 5px;
104  text-align: center;
105  font-size: 1.2em;
106  font-weight: bold;
107}
108
109.columnlist {
110  width: 100%;
111  bottom: 0;
112}
113
114.fullcontainer {
115  top: 0px;
116  position: absolute;
117  left: 0;
118  bottom: 0;
119  right: 600px;
120  -webkit-border-end: 1px solid #7289E2;
121}
122
123html[dir='rtl'] .fullcontainer {
124  left: 600px;
125  right: 0;
126}
127
128progress {
129  -webkit-margin-start: 15px;
130  width: 700px;
131}
132
133.progressText {
134  -webkit-padding-start: 20px;
135  font-size: .6em;
136  font: "Helvetica";
137}
138
139.statusText {
140  padding-top: 5px;
141  -webkit-padding-start: 15px;
142  font-size: 1em;
143}
144
145.statusDiv{
146  border-bottom: 1px solid #f7f7f7;
147  padding-bottom: 2px;
148  background-color: #fff;
149}
150
151#rootsColumn:not(.burningColumn) {
152  height: 50%;
153}
154
155#statusColumn:not(.burningColumn) {
156  height: 50%;
157  border-top: 1px solid #7289E2;
158}
159</style>
160
161<script src="shared/js/local_strings.js"></script>
162<script>
163function $(o) {
164  return document.getElementById(o);
165}
166
167var currentlySelectedItem;
168var currentlySelectedPath;
169var localStrings;
170var statusMessages;
171var burnStarted;
172
173function promptUserDownloadFinished() {
174  // This could be done nicer.
175  var answer = confirm(localStrings.getString('burnConfirmText1') +
176      currentlySelectedPath + localStrings.getString('burnConfirmText2'));
177  chrome.send(answer ? 'burnImage' : 'cancelBurnImage', []);
178}
179
180function alertUserDownloadAborted(){
181  alert(localStrings.getString('downloadAbortedMessage'));
182}
183
184function burnSuccessful() {
185  alert(localStrings.getString('burnSuccessfulMessage'));
186}
187
188function burnUnsuccessful(){
189  alert(localStrings.getString('burnUnsuccessfulMessage'));
190}
191
192function rootsChanged(){
193  chrome.send('getRoots', []);
194}
195
196function browseFileResult(info, results) {
197  var path = info.path;
198  var list = $('rootsList');
199  list.innerHTML = '';
200  var selectedRemoved = true;
201  var addedRoots=[];
202  for (var x = 0; x < results.length; x++) {
203    if (!(results[x].title in addedRoots)) {
204      addedRoots[results[x].title] = true;
205      var element = createNewItem(results[x].title, results[x].path);
206      if (results[x].path == currentlySelectedPath) {
207        selectItem(element.id, results[x].path);
208        selectedRemoved = false;
209      }
210      list.appendChild(element);
211    }
212  }
213  if (selectedRemoved) {
214    currentlySelectedItem = null;
215    currentlySelectedPath = null;
216  }
217}
218
219function selectItem(elementId, path) {
220  var element = $(elementId);
221  var index;
222  if (currentlySelectedItem)
223    currentlySelectedItem.className = 'devicerow';
224  if (element) {
225    element.className = 'selected devicerow';
226    currentlySelectedItem = element;
227    currentlySelectedPath = path;
228  }
229}
230
231function createProgressElement(id) {
232  var statusDiv = document.createElement('div');
233  statusDiv.id = id;
234  statusDiv.className = 'statusDiv';
235
236  var statusText = document.createElement('div');
237  statusText.id = id + 'StatusText';
238  statusText.className = 'statusText';
239  statusDiv.appendChild(statusText);
240
241  var progressBar = document.createElement('progress');
242  progressBar.id = id + 'ProgressBar';
243  progressBar.className = 'progressBar';
244  statusDiv.appendChild(progressBar);
245
246  var progressText = document.createElement('div');
247  progressText.id = id + 'ProgressText';
248  progressText.className = 'progressText'
249  statusDiv.appendChild(progressText);
250
251  return statusDiv;
252}
253
254function setProgressElementFinalValues(element, statuses, event) {
255  var statusTextDiv;
256  var progressBarDiv;
257  var progressTextDiv;
258  for (var i = 0; i < element.children.length; i++ ) {
259    switch(element.children[i].className) {
260      case 'statusText':
261        statusTextDiv = element.children[i];
262        break;
263      case 'progressBar':
264        progressBarDiv = element.children[i];
265        break;
266      case 'progressText':
267        progressTextDiv = element.children[i];
268        break;
269    }
270  }
271  if (event == 'COMPLETE')
272    statusTextDiv.textContent = statuses['finished'];
273  else
274      statusTextDiv.textContent = statuses['canceled'];
275
276  var progressBarParent = progressBarDiv.parentNode;
277  progressBarParent.removeChild(progressBarDiv);
278
279  var progressTextParent = progressTextDiv.parentNode;
280  progressTextParent.removeChild(progressTextDiv);
281  return element;
282}
283
284function setProgressElementValues(element, statuses, amountFinished,
285                                  amountTotal, progressText){
286  var statusTextDiv;
287  var progressBarDiv;
288  var progressTextDiv;
289  for (var i = 0; i < element.children.length; i++ ) {
290    switch(element.children[i].className) {
291      case 'statusText':
292        statusTextDiv = element.children[i];
293        break;
294      case 'progressBar':
295        progressBarDiv = element.children[i];
296        break;
297      case 'progressText':
298        progressTextDiv = element.children[i];
299        break;
300    }
301  }
302
303  if (!(amountFinished > 0)) {
304    amountFinished = 0;
305    statusTextDiv.textContent = statuses["start"];
306    progressTextDiv.textContent = "";
307  } else {
308    statusTextDiv.textContent = statuses["inProgress"];
309    progressTextDiv.textContent = progressText;
310  }
311  if(amountFinished > amountTotal)
312    amountFinished = amountTotal;
313  progressBarDiv.value = amountFinished;
314  if (amountTotal)
315    progressBarDiv.max = amountTotal;
316  return element;
317}
318
319function updateProgressElement(progressType, progressInfo) {
320  var element = $(progressType + 'ProgressElement');
321  if (!element) {
322    element = createProgressElement(progressType + 'ProgressElement');
323    var column  = $('statusList');
324    column.appendChild(element);
325  }
326  var errorOccurred = (progressInfo.state == 'CANCELLED');
327  if (progressInfo.state == 'IN_PROGRESS') {
328    setProgressElementValues(element, statusMessages[progressType],
329        progressInfo.received, progressInfo.total,
330        progressInfo.progress_status_text);
331  } else {
332    setProgressElementFinalValues(element, statusMessages[progressType],
333                                  progressInfo.state);
334  }
335}
336
337function downloadUpdated(result) {
338  updateProgressElement('download', result);
339}
340
341function burnProgressUpdated(result) {
342  if (!burnStarted) {
343    $('rootsList').style.display = 'none';
344    $('rootsListTitle').textContent = result.path;
345    $('rootsColumn').className = 'burningColumn columnList';
346    $('statusColumn').className = 'burningColumn columnList';
347    burnStarted = true;
348  }
349  updateProgressElement('burn', result);
350}
351
352var elementIdCounter = 0;
353
354function createNewItem(title, path) {
355  var element = document.createElement('div');
356  element.className = 'devicerow';
357  element.id = path + elementIdCounter;
358  elementIdCounter++;
359  var link;
360  link = document.createElement('div');
361  link.onclick = function() { burnImage(element.id, path); };
362  link.className = 'rowlink';
363
364  var icon = document.createElement('div');
365  icon.className = 'icon';
366  link.appendChild(icon);
367
368  var span = document.createElement('span');
369  span.className = 'name';
370  span.textContent = title;
371  link.appendChild(span);
372
373  element.appendChild(link);
374
375  var burnicon = document.createElement('button');
376  burnicon.className = 'burnicon';
377  burnicon.onclick = function() { burnImage(element.id, path); };
378  element.appendChild(burnicon);
379
380  return element;
381}
382
383function burnImage(elementId, path) {
384  selectItem(elementId, path);
385  chrome.send('downloadImage', [path]);
386}
387
388function clearList(list) {
389  while (list.childNodes.length >= 1) {
390    list.removeChild(list.firstChild);
391  }
392}
393
394document.addEventListener('DOMContentLoaded', function() {
395  localStrings = new LocalStrings();
396  burnStarted = false;
397  chrome.send("getRoots", []);
398
399  // Initialize messages that will be displayed as download
400  // or burn progress is updated.
401  statusMessages = [];
402
403  var downloadStatuses = [];
404  downloadStatuses['start'] = localStrings.getString('downloadStatusStart');
405  downloadStatuses['inProgress'] =
406      localStrings.getString('downloadStatusInProgress');
407  downloadStatuses['finished'] =
408      localStrings.getString('downloadStatusComplete');
409  downloadStatuses['canceled'] =
410      localStrings.getString('downloadStatusCanceled');
411  statusMessages['download'] = downloadStatuses;
412
413  var burnStatuses = [];
414  burnStatuses['start'] = localStrings.getString('burnStatusStart');
415  burnStatuses['inProgress'] = localStrings.getString('burnStatusInProgress');
416  burnStatuses['finished'] = localStrings.getString('burnStatusComplete');
417  burnStatuses['canceled'] = localStrings.getString('burnStatusCanceled');
418  statusMessages['burn'] = burnStatuses;
419});
420</script>
421</head>
422<body>
423  <div id="main" class="fullcontainer">
424    <div id="rootsColumn" class="columnlist">
425      <h1 id="rootsListTitle" class="title" i18n-content="listTitle"></h1>
426      <div id="rootsList"></div>
427    </div>
428    <div id="statusColumn" class="columnlist">
429      <div id="statusList"></div>
430    </div>
431  </div>
432</body>
433</html>
434