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