| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html id="t" jsvalues="dir:textdirection;"> | 2 <html id="t" jsvalues="dir:textdirection;"> |
| 3 <head> | 3 <head> |
| 4 <meta charset="utf-8"> | 4 <meta charset="utf-8"> |
| 5 <title jscontent="title"></title> | 5 <title jscontent="title"></title> |
| 6 <style type="text/css"> | 6 <style type="text/css"> |
| 7 body { | 7 body { |
| 8 font-family:arial; | 8 font-family:arial; |
| 9 background-color:white; | 9 background-color:white; |
| 10 color:black; | 10 color:black; |
| (...skipping 25 matching lines...) Expand all Loading... |
| 36 background-color:#ebeff9; | 36 background-color:#ebeff9; |
| 37 font-weight:bold; | 37 font-weight:bold; |
| 38 padding:3px; | 38 padding:3px; |
| 39 margin-bottom:6px; | 39 margin-bottom:6px; |
| 40 } | 40 } |
| 41 #downloads-display { | 41 #downloads-display { |
| 42 max-width:740px; | 42 max-width:740px; |
| 43 } | 43 } |
| 44 .download { | 44 .download { |
| 45 position:relative; | 45 position:relative; |
| 46 padding-left:45px; | 46 padding-left:56px; |
| 47 margin-bottom:16px; | 47 margin-bottom:16px; |
| 48 } | 48 } |
| 49 html[dir='rtl'] .download { |
| 50 padding-left:0px; |
| 51 padding-right:56px; |
| 52 } |
| 49 .download .icon { | 53 .download .icon { |
| 50 position:absolute; | 54 position:absolute; |
| 51 top:2px; | 55 top:7px; |
| 52 left:2px; | 56 left:9px; |
| 53 width:32px; | 57 width:32px; |
| 54 height:32px; | 58 height:32px; |
| 55 } | 59 } |
| 60 html[dir='rtl'] .icon { |
| 61 left:auto; |
| 62 right:9px; |
| 63 } |
| 64 .progress { |
| 65 position:absolute; |
| 66 top:2px; |
| 67 left:0px; |
| 68 width:48px; |
| 69 height:48px; |
| 70 } |
| 71 html[dir='rtl'] .progress { |
| 72 left:auto; |
| 73 right:0px; |
| 74 } |
| 75 .progress.background { |
| 76 background:url('../../app/theme/download_progress_background32.png'); |
| 77 } |
| 78 .progress.foreground { |
| 79 background:url('../../app/theme/download_progress_foreground32.png'); |
| 80 } |
| 56 .name { | 81 .name { |
| 57 display:none; | 82 display:none; |
| 58 padding-right:16px; | 83 padding-right:16px; |
| 59 max-width:450px; | 84 max-width:450px; |
| 60 text-overflow:ellipsis; | 85 text-overflow:ellipsis; |
| 61 } | 86 } |
| 87 html[dir='rtl'] .name { |
| 88 padding-right:0px; |
| 89 padding-left:16px; |
| 90 } |
| 62 .download .status { | 91 .download .status { |
| 63 display:inline; | 92 display:inline; |
| 64 color:#999; | 93 color:#999; |
| 65 } | 94 } |
| 66 .download .url { | 95 .download .url { |
| 67 color:#080; | 96 color:#080; |
| 68 width:500px; | 97 width:500px; |
| 69 white-space:nowrap; | 98 white-space:nowrap; |
| 70 overflow:hidden; | 99 overflow:hidden; |
| 71 text-overflow:ellipsis; | 100 text-overflow:ellipsis; |
| (...skipping 209 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 281 */ | 310 */ |
| 282 function Download(download) { | 311 function Download(download) { |
| 283 // Create DOM | 312 // Create DOM |
| 284 this.node = createElementWithClassName('div', 'download'); | 313 this.node = createElementWithClassName('div', 'download'); |
| 285 | 314 |
| 286 // Container for all 'safe download' UI. | 315 // Container for all 'safe download' UI. |
| 287 this.safe_ = document.createElement("div"); | 316 this.safe_ = document.createElement("div"); |
| 288 this.safe_.ondragstart = bind(this.drag_, this); | 317 this.safe_.ondragstart = bind(this.drag_, this); |
| 289 this.node.appendChild(this.safe_); | 318 this.node.appendChild(this.safe_); |
| 290 | 319 |
| 320 if (download.state != Download.States.COMPLETE) { |
| 321 this.nodeProgressBackground_ = |
| 322 createElementWithClassName('div', 'progress background'); |
| 323 this.safe_.appendChild(this.nodeProgressBackground_); |
| 324 |
| 325 this.canvasProgress_ = |
| 326 document.getCSSCanvasContext('2d', 'canvas_' + download.id, |
| 327 Download.Progress.width, |
| 328 Download.Progress.height); |
| 329 |
| 330 this.nodeProgressForeground_ = |
| 331 createElementWithClassName('div', 'progress foreground'); |
| 332 this.nodeProgressForeground_.style.webkitMask = |
| 333 '-webkit-canvas(canvas_'+download.id+')'; |
| 334 this.safe_.appendChild(this.nodeProgressForeground_); |
| 335 } |
| 336 |
| 291 this.nodeImg_ = createElementWithClassName('img', 'icon'); | 337 this.nodeImg_ = createElementWithClassName('img', 'icon'); |
| 292 this.safe_.appendChild(this.nodeImg_); | 338 this.safe_.appendChild(this.nodeImg_); |
| 293 | 339 |
| 294 // FileLink is used for completed downloads, otherwise we show FileName. | 340 // FileLink is used for completed downloads, otherwise we show FileName. |
| 295 this.nodeTitleArea_ = createElementWithClassName('div', 'title-area'); | 341 this.nodeTitleArea_ = createElementWithClassName('div', 'title-area'); |
| 296 this.safe_.appendChild(this.nodeTitleArea_); | 342 this.safe_.appendChild(this.nodeTitleArea_); |
| 297 | 343 |
| 298 this.nodeFileLink_ = createLink(bind(this.openFile_, this), ''); | 344 this.nodeFileLink_ = createLink(bind(this.openFile_, this), ''); |
| 299 this.nodeFileLink_.className = 'name'; | 345 this.nodeFileLink_.className = 'name'; |
| 300 this.nodeFileLink_.style.display = 'none'; | 346 this.nodeFileLink_.style.display = 'none'; |
| (...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 356 */ | 402 */ |
| 357 Download.States = { | 403 Download.States = { |
| 358 IN_PROGRESS : "IN_PROGRESS", | 404 IN_PROGRESS : "IN_PROGRESS", |
| 359 CANCELLED : "CANCELLED", | 405 CANCELLED : "CANCELLED", |
| 360 COMPLETE : "COMPLETE", | 406 COMPLETE : "COMPLETE", |
| 361 PAUSED : "PAUSED", | 407 PAUSED : "PAUSED", |
| 362 DANGEROUS : "DANGEROUS", | 408 DANGEROUS : "DANGEROUS", |
| 363 } | 409 } |
| 364 | 410 |
| 365 /** | 411 /** |
| 412 * Constants for the progress meter. |
| 413 */ |
| 414 Download.Progress = { |
| 415 width : 48, |
| 416 height : 48, |
| 417 radius : 24, |
| 418 centerX : 24, |
| 419 centerY : 24, |
| 420 base : -0.5 * Math.PI, |
| 421 dir : false, |
| 422 } |
| 423 |
| 424 /** |
| 366 * Updates the download to reflect new data. | 425 * Updates the download to reflect new data. |
| 367 * @param {Object} download A backend download object (see downloads_ui.cc) | 426 * @param {Object} download A backend download object (see downloads_ui.cc) |
| 368 */ | 427 */ |
| 369 Download.prototype.update = function(download) { | 428 Download.prototype.update = function(download) { |
| 370 this.id_ = download.id; | 429 this.id_ = download.id; |
| 371 this.filePath_ = download.file_path; | 430 this.filePath_ = download.file_path; |
| 372 this.fileName_ = download.file_name; | 431 this.fileName_ = download.file_name; |
| 373 this.url_ = download.url; | 432 this.url_ = download.url; |
| 374 this.state_ = download.state; | 433 this.state_ = download.state; |
| 375 this.percent_ = download.percent; | 434 |
| 376 this.speed_ = download.speed; | 435 // See DownloadItem::PercentComplete |
| 436 this.percent_ = Math.max(download.percent, 0); |
| 437 this.progressStatusText_ = download.progress_status_text; |
| 377 this.received_ = download.received; | 438 this.received_ = download.received; |
| 378 | 439 |
| 379 if (this.state_ == Download.States.DANGEROUS) { | 440 if (this.state_ == Download.States.DANGEROUS) { |
| 380 this.dangerDesc_.innerHTML = localStrings.formatString('danger_desc', | 441 this.dangerDesc_.innerHTML = localStrings.formatString('danger_desc', |
| 381 this.fileName_); | 442 this.fileName_); |
| 382 this.danger_.style.display = 'block'; | 443 this.danger_.style.display = 'block'; |
| 383 this.safe_.style.display = 'none'; | 444 this.safe_.style.display = 'none'; |
| 384 } else { | 445 } else { |
| 385 this.nodeImg_.src = 'chrome-ui://fileicon/' + this.filePath_; | 446 this.nodeImg_.src = 'chrome-ui://fileicon/' + this.filePath_; |
| 386 | 447 |
| 387 if (this.state_ == Download.States.COMPLETE) { | 448 if (this.state_ == Download.States.COMPLETE) { |
| 388 this.nodeFileLink_.innerHTML = this.fileName_; | 449 this.nodeFileLink_.innerHTML = this.fileName_; |
| 389 this.nodeFileLink_.href = this.filePath_; | 450 this.nodeFileLink_.href = this.filePath_; |
| 390 } else { | 451 } else { |
| 391 this.nodeFileName_.innerHTML = this.fileName_; | 452 this.nodeFileName_.innerHTML = this.fileName_; |
| 392 } | 453 } |
| 393 | 454 |
| 394 showInline(this.nodeFileLink_, this.state_ == Download.States.COMPLETE); | 455 showInline(this.nodeFileLink_, this.state_ == Download.States.COMPLETE); |
| 395 showInline(this.nodeFileName_, this.state_ != Download.States.COMPLETE); | 456 showInline(this.nodeFileName_, this.state_ != Download.States.COMPLETE); |
| 396 | 457 |
| 458 if (this.state_ == Download.States.IN_PROGRESS) { |
| 459 this.nodeProgressForeground_.style.display = 'block'; |
| 460 this.nodeProgressBackground_.style.display = 'block'; |
| 461 |
| 462 // Draw a pie-slice for the progress. |
| 463 this.canvasProgress_.clearRect(0, 0, |
| 464 Download.Progress.width, |
| 465 Download.Progress.height); |
| 466 this.canvasProgress_.beginPath(); |
| 467 this.canvasProgress_.moveTo(Download.Progress.centerX, |
| 468 Download.Progress.centerY); |
| 469 |
| 470 this.canvasProgress_.arc(Download.Progress.centerX, |
| 471 Download.Progress.centerY, |
| 472 Download.Progress.radius, |
| 473 Download.Progress.base, |
| 474 Download.Progress.base + Math.PI * 0.02 * |
| 475 Number(this.percent_) * |
| 476 (Download.Progress.dir ? -1 : 1), |
| 477 Download.Progress.dir); |
| 478 |
| 479 this.canvasProgress_.lineTo(Download.Progress.centerX, |
| 480 Download.Progress.centerY); |
| 481 this.canvasProgress_.fill(); |
| 482 this.canvasProgress_.closePath(); |
| 483 } else if (this.nodeProgressBackground_) { |
| 484 this.nodeProgressForeground_.style.display = 'none'; |
| 485 this.nodeProgressBackground_.style.display = 'none'; |
| 486 } |
| 487 |
| 397 showInline(this.controlShow_, this.state_ == Download.States.COMPLETE); | 488 showInline(this.controlShow_, this.state_ == Download.States.COMPLETE); |
| 398 showInline(this.controlPause_, this.state_ == Download.States.IN_PROGRESS); | 489 showInline(this.controlPause_, this.state_ == Download.States.IN_PROGRESS); |
| 399 showInline(this.controlResume_, this.state_ == Download.States.PAUSED); | 490 showInline(this.controlResume_, this.state_ == Download.States.PAUSED); |
| 400 showInline(this.controlCancel_, this.state_ == Download.States.IN_PROGRESS); | 491 showInline(this.controlCancel_, this.state_ == Download.States.IN_PROGRESS |
| |
| 492 this.state_ == Download.States.PAUSED); |
| 401 | 493 |
| 402 this.nodeURL_.innerHTML = this.url_; | 494 this.nodeURL_.innerHTML = this.url_; |
| 403 this.nodeStatus_.innerHTML = this.getStatusText_(); | 495 this.nodeStatus_.innerHTML = this.getStatusText_(); |
| 404 | 496 |
| 405 this.danger_.style.display = 'none'; | 497 this.danger_.style.display = 'none'; |
| 406 this.safe_.style.display = 'block'; | 498 this.safe_.style.display = 'block'; |
| 407 } | 499 } |
| 408 } | 500 } |
| 409 | 501 |
| 410 /** | 502 /** |
| (...skipping 10 matching lines...) Expand all Loading... |
| 421 | 513 |
| 422 this.node.innerHTML = ''; | 514 this.node.innerHTML = ''; |
| 423 } | 515 } |
| 424 | 516 |
| 425 /** | 517 /** |
| 426 * @return {String} User-visible status update text. | 518 * @return {String} User-visible status update text. |
| 427 */ | 519 */ |
| 428 Download.prototype.getStatusText_ = function() { | 520 Download.prototype.getStatusText_ = function() { |
| 429 switch (this.state_) { | 521 switch (this.state_) { |
| 430 case Download.States.IN_PROGRESS: | 522 case Download.States.IN_PROGRESS: |
| 431 // TODO(glen): Make pretty, localize, etc. | 523 return this.progressStatusText_; |
| 432 return this.percent_ + '% at ' + this.speed_; | |
| 433 case Download.States.CANCELLED: | 524 case Download.States.CANCELLED: |
| 434 return localStrings.getString('status_cancelled'); | 525 return localStrings.getString('status_cancelled'); |
| 435 case Download.States.PAUSED: | 526 case Download.States.PAUSED: |
| 436 return localStrings.getString('status_paused'); | 527 return localStrings.getString('status_paused'); |
| 437 case Download.States.DANGEROUS: | 528 case Download.States.DANGEROUS: |
| 438 return localStrings.getString('danger_desc'); | 529 return localStrings.getString('danger_desc'); |
| 439 case Download.States.COMPLETE: | 530 case Download.States.COMPLETE: |
| 440 return ""; | 531 return ""; |
| 441 } | 532 } |
| 442 } | 533 } |
| (...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 499 chrome.send("cancel", [this.id_.toString()]); | 590 chrome.send("cancel", [this.id_.toString()]); |
| 500 return false; | 591 return false; |
| 501 } | 592 } |
| 502 | 593 |
| 503 /////////////////////////////////////////////////////////////////////////////// | 594 /////////////////////////////////////////////////////////////////////////////// |
| 504 // Page: | 595 // Page: |
| 505 var downloads, localStrings, resultsTimeout; | 596 var downloads, localStrings, resultsTimeout; |
| 506 | 597 |
| 507 function load() { | 598 function load() { |
| 508 localStrings = new LocalStrings($('l10n')); | 599 localStrings = new LocalStrings($('l10n')); |
| 600 Download.Progress.dir = |
| 601 !!(document.getElementsByTagName('html')[0].dir == 'rtl'); |
| 509 downloads = new Downloads(); | 602 downloads = new Downloads(); |
| 510 $('term').focus(); | 603 $('term').focus(); |
| 511 setSearch(""); | 604 setSearch(""); |
| 512 } | 605 } |
| 513 | 606 |
| 514 function setSearch(searchText) { | 607 function setSearch(searchText) { |
| 515 downloads.clear(); | 608 downloads.clear(); |
| 516 downloads.setSearchText(searchText); | 609 downloads.setSearchText(searchText); |
| 517 chrome.send("getDownloads", [searchText.toString()]); | 610 chrome.send("getDownloads", [searchText.toString()]); |
| 518 } | 611 } |
| 519 | 612 |
| 520 /////////////////////////////////////////////////////////////////////////////// | 613 /////////////////////////////////////////////////////////////////////////////// |
| 521 // Chrome callbacks: | 614 // Chrome callbacks: |
| 522 /** | 615 /** |
| 523 * Our history system calls this function with results from searches or when | 616 * Our history system calls this function with results from searches or when |
| 524 * downloads are added or removed. | 617 * downloads are added or removed. |
| 525 */ | 618 */ |
| 526 function downloadsList(results) { | 619 function downloadsList(results) { |
| 527 if (resultsTimeout) | 620 if (resultsTimeout) |
| 528 clearTimeout(resultsTimeout); | 621 clearTimeout(resultsTimeout); |
| 622 window.console.log('results'); |
| 623 downloads.clear(); |
| 529 downloadUpdated(results); | 624 downloadUpdated(results); |
| 530 } | 625 } |
| 531 | 626 |
| 532 /** | 627 /** |
| 533 * When a download is updated (progress, state change), this is called. | 628 * When a download is updated (progress, state change), this is called. |
| 534 */ | 629 */ |
| 535 function downloadUpdated(results) { | 630 function downloadUpdated(results) { |
| 631 // Sometimes this can get called too early. |
| 632 if (!downloads) |
| 633 return; |
| 634 |
| 536 if (results.length) { | 635 if (results.length) { |
| 537 downloads.updated(results[0]); | 636 downloads.updated(results[0]); |
| 538 if (results.length > 1) | 637 |
| 638 if (results.length > 1) { |
| 639 clearTimeout(resultsTimeout); |
| 539 resultsTimeout = setTimeout(downloadUpdated, 5, results.slice(1)); | 640 resultsTimeout = setTimeout(downloadUpdated, 5, results.slice(1)); |
| 540 else | 641 } else { |
| 541 downloads.updateSummary(); | 642 downloads.updateSummary(); |
| 643 } |
| 542 } | 644 } |
| 543 } | 645 } |
| 544 </script> | 646 </script> |
| 545 </head> | 647 </head> |
| 546 <body onload="load();"> | 648 <body onload="load();"> |
| 547 <div class="header"> | 649 <div class="header"> |
| 548 <a href="" onclick="setSearch(''); return false;"> | 650 <a href="" onclick="setSearch(''); return false;"> |
| 549 <img src="../../app/theme/downloads_section.png" | 651 <img src="../../app/theme/downloads_section.png" |
| 550 width="67" height="67" class="logo" border="0" /></a> | 652 width="67" height="67" class="logo" border="0" /></a> |
| 551 <form method="post" action="" | 653 <form method="post" action="" |
| (...skipping 21 matching lines...) Expand all Loading... |
| 573 <span id="danger_save" jscontent="danger_save">Save</span> | 675 <span id="danger_save" jscontent="danger_save">Save</span> |
| 574 <span id="danger_discard" jscontent="danger_discard">Discard</span> | 676 <span id="danger_discard" jscontent="danger_discard">Discard</span> |
| 575 | 677 |
| 576 <span id="control_pause" jscontent="control_pause">Pause</span> | 678 <span id="control_pause" jscontent="control_pause">Pause</span> |
| 577 <span id="control_showinfolder" jscontent="control_showinfolder">Show in folde
r</span> | 679 <span id="control_showinfolder" jscontent="control_showinfolder">Show in folde
r</span> |
| 578 <span id="control_cancel" jscontent="control_cancel">Cancel</span> | 680 <span id="control_cancel" jscontent="control_cancel">Cancel</span> |
| 579 <span id="control_resume" jscontent="control_resume">Resume</span> | 681 <span id="control_resume" jscontent="control_resume">Resume</span> |
| 580 </div> | 682 </div> |
| 581 </body> | 683 </body> |
| 582 </html> | 684 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 42550:
Add a progress meter to the downloads page.... (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/