| 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 margin-top:5px; |
| 47 margin-left:96px; |
| 46 padding-left:56px; | 48 padding-left:56px; |
| 47 margin-bottom:16px; | 49 margin-bottom:16px; |
| 48 } | 50 } |
| 49 html[dir='rtl'] .download { | 51 html[dir='rtl'] .download { |
| 50 padding-left:0px; | 52 padding-left:0px; |
| 51 padding-right:56px; | 53 } |
| 54 .date-container { |
| 55 position:absolute; |
| 56 left:-92px; |
| 57 width:92px; |
| 58 } |
| 59 .date-container .since { |
| 60 color:black; |
| 61 } |
| 62 .date-container .date { |
| 63 color:#666; |
| 52 } | 64 } |
| 53 .download .icon { | 65 .download .icon { |
| 54 position:absolute; | 66 position:absolute; |
| 55 top:7px; | 67 top:0px; |
| 56 left:9px; | 68 left:9px; |
| 57 width:32px; | 69 width:32px; |
| 58 height:32px; | 70 height:32px; |
| 59 } | 71 } |
| 60 html[dir='rtl'] .icon { | 72 html[dir='rtl'] .icon { |
| 61 left:auto; | 73 left:auto; |
| 62 right:9px; | 74 right:9px; |
| 63 } | 75 } |
| 64 .progress { | 76 .progress { |
| 65 position:absolute; | 77 position:absolute; |
| 66 top:2px; | 78 top:-5px; |
| 67 left:0px; | 79 left:0px; |
| 68 width:48px; | 80 width:48px; |
| 69 height:48px; | 81 height:48px; |
| 70 } | 82 } |
| 71 html[dir='rtl'] .progress { | 83 html[dir='rtl'] .progress { |
| 72 left:auto; | 84 left:auto; |
| 73 right:0px; | 85 right:0px; |
| 74 } | 86 } |
| 75 .progress.background { | 87 .progress.background { |
| 76 background:url('../../app/theme/download_progress_background32.png'); | 88 background:url('../../app/theme/download_progress_background32.png'); |
| (...skipping 166 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 243 // We get downloads in display order, so we don't have to worry about | 255 // We get downloads in display order, so we don't have to worry about |
| 244 // maintaining correct order - we can assume that any downloads not in | 256 // maintaining correct order - we can assume that any downloads not in |
| 245 // display order are new ones and so we can add them to the top of the | 257 // display order are new ones and so we can add them to the top of the |
| 246 // list. | 258 // list. |
| 247 if (download.started > this.newestTime_) { | 259 if (download.started > this.newestTime_) { |
| 248 this.node_.insertBefore(this.downloads_[id].node, this.node_.firstChild); | 260 this.node_.insertBefore(this.downloads_[id].node, this.node_.firstChild); |
| 249 this.newestTime_ = download.started; | 261 this.newestTime_ = download.started; |
| 250 } else { | 262 } else { |
| 251 this.node_.appendChild(this.downloads_[id].node); | 263 this.node_.appendChild(this.downloads_[id].node); |
| 252 } | 264 } |
| 265 this.updateDateDisplay_(); |
| 253 } | 266 } |
| 254 } | 267 } |
| 255 | 268 |
| 256 /** | 269 /** |
| 257 * Set our display search text. | 270 * Set our display search text. |
| 258 * @param {String} searchText The string we're searching for. | 271 * @param {String} searchText The string we're searching for. |
| 259 */ | 272 */ |
| 260 Downloads.prototype.setSearchText = function(searchText) { | 273 Downloads.prototype.setSearchText = function(searchText) { |
| 261 this.searchText_ = searchText; | 274 this.searchText_ = searchText; |
| 262 } | 275 } |
| (...skipping 14 matching lines...) Expand all Loading... |
| 277 hasDownloads = true; | 290 hasDownloads = true; |
| 278 break; | 291 break; |
| 279 } | 292 } |
| 280 | 293 |
| 281 if (!hasDownloads) { | 294 if (!hasDownloads) { |
| 282 this.node_.innerHTML = localStrings.getString('noresults'); | 295 this.node_.innerHTML = localStrings.getString('noresults'); |
| 283 } | 296 } |
| 284 } | 297 } |
| 285 | 298 |
| 286 /** | 299 /** |
| 300 * Update the date visibility in our nodes so that no date is |
| 301 * repeated. |
| 302 */ |
| 303 Downloads.prototype.updateDateDisplay_ = function() { |
| 304 var dateContainers = document.getElementsByClassName('date-container'); |
| 305 var displayed = {}; |
| 306 for (var i = 0, container; container = dateContainers[i]; i++) { |
| 307 var dateString = container.getElementsByClassName('date')[0].innerHTML; |
| 308 if (!!displayed[dateString]) { |
| 309 container.style.display = 'none'; |
| 310 } else { |
| 311 displayed[dateString] = true; |
| 312 container.style.display = 'block'; |
| 313 } |
| 314 } |
| 315 } |
| 316 |
| 317 /** |
| 287 * Remove a download. | 318 * Remove a download. |
| 288 * @param {Number} id The id of the download to remove. | 319 * @param {Number} id The id of the download to remove. |
| 289 */ | 320 */ |
| 290 Downloads.prototype.remove = function(id) { | 321 Downloads.prototype.remove = function(id) { |
| 291 this.node_.removeChild(this.downloads_[id].node); | 322 this.node_.removeChild(this.downloads_[id].node); |
| 292 delete this.downloads_[id]; | 323 delete this.downloads_[id]; |
| 324 this.updateDateDisplay_(); |
| 293 } | 325 } |
| 294 | 326 |
| 295 /** | 327 /** |
| 296 * Clear all downloads and reset us back to a null state. | 328 * Clear all downloads and reset us back to a null state. |
| 297 */ | 329 */ |
| 298 Downloads.prototype.clear = function() { | 330 Downloads.prototype.clear = function() { |
| 299 for (var id in this.downloads_) { | 331 for (var id in this.downloads_) { |
| 300 this.downloads_[id].clear(); | 332 this.downloads_[id].clear(); |
| 301 this.remove(id); | 333 this.remove(id); |
| 302 } | 334 } |
| 303 } | 335 } |
| 304 | 336 |
| 305 /////////////////////////////////////////////////////////////////////////////// | 337 /////////////////////////////////////////////////////////////////////////////// |
| 306 // Download | 338 // Download |
| 307 /** | 339 /** |
| 308 * A download and the DOM representation for that download. | 340 * A download and the DOM representation for that download. |
| 309 * @param {Object} download A backend download object (see downloads_ui.cc) | 341 * @param {Object} download A backend download object (see downloads_ui.cc) |
| 310 */ | 342 */ |
| 311 function Download(download) { | 343 function Download(download) { |
| 312 // Create DOM | 344 // Create DOM |
| 313 this.node = createElementWithClassName('div', 'download'); | 345 this.node = createElementWithClassName('div', 'download'); |
| 346 |
| 347 // Dates |
| 348 this.dateContainer_ = createElementWithClassName('div', 'date-container'); |
| 349 this.node.appendChild(this.dateContainer_); |
| 350 |
| 351 this.nodeSince_ = createElementWithClassName('div', 'since'); |
| 352 this.nodeDate_ = createElementWithClassName('div', 'date'); |
| 353 this.dateContainer_.appendChild(this.nodeSince_); |
| 354 this.dateContainer_.appendChild(this.nodeDate_); |
| 314 | 355 |
| 315 // Container for all 'safe download' UI. | 356 // Container for all 'safe download' UI. |
| 316 this.safe_ = document.createElement("div"); | 357 this.safe_ = createElementWithClassName('div', 'safe'); |
| 317 this.safe_.ondragstart = bind(this.drag_, this); | 358 this.safe_.ondragstart = bind(this.drag_, this); |
| 318 this.node.appendChild(this.safe_); | 359 this.node.appendChild(this.safe_); |
| 319 | 360 |
| 320 if (download.state != Download.States.COMPLETE) { | 361 if (download.state != Download.States.COMPLETE) { |
| 321 this.nodeProgressBackground_ = | 362 this.nodeProgressBackground_ = |
| 322 createElementWithClassName('div', 'progress background'); | 363 createElementWithClassName('div', 'progress background'); |
| 323 this.safe_.appendChild(this.nodeProgressBackground_); | 364 this.safe_.appendChild(this.nodeProgressBackground_); |
| 324 | 365 |
| 325 this.canvasProgress_ = | 366 this.canvasProgress_ = |
| 326 document.getCSSCanvasContext('2d', 'canvas_' + download.id, | 367 document.getCSSCanvasContext('2d', 'canvas_' + download.id, |
| (...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 424 /** | 465 /** |
| 425 * Updates the download to reflect new data. | 466 * Updates the download to reflect new data. |
| 426 * @param {Object} download A backend download object (see downloads_ui.cc) | 467 * @param {Object} download A backend download object (see downloads_ui.cc) |
| 427 */ | 468 */ |
| 428 Download.prototype.update = function(download) { | 469 Download.prototype.update = function(download) { |
| 429 this.id_ = download.id; | 470 this.id_ = download.id; |
| 430 this.filePath_ = download.file_path; | 471 this.filePath_ = download.file_path; |
| 431 this.fileName_ = download.file_name; | 472 this.fileName_ = download.file_name; |
| 432 this.url_ = download.url; | 473 this.url_ = download.url; |
| 433 this.state_ = download.state; | 474 this.state_ = download.state; |
| 475 |
| 476 this.since_ = download.since_string; |
| 477 this.date_ = download.date_string; |
| 434 | 478 |
| 435 // See DownloadItem::PercentComplete | 479 // See DownloadItem::PercentComplete |
| 436 this.percent_ = Math.max(download.percent, 0); | 480 this.percent_ = Math.max(download.percent, 0); |
| 437 this.progressStatusText_ = download.progress_status_text; | 481 this.progressStatusText_ = download.progress_status_text; |
| 438 this.received_ = download.received; | 482 this.received_ = download.received; |
| 439 | 483 |
| 440 if (this.state_ == Download.States.DANGEROUS) { | 484 if (this.state_ == Download.States.DANGEROUS) { |
| 441 this.dangerDesc_.innerHTML = localStrings.formatString('danger_desc', | 485 this.dangerDesc_.innerHTML = localStrings.formatString('danger_desc', |
| 442 this.fileName_); | 486 this.fileName_); |
| 443 this.danger_.style.display = 'block'; | 487 this.danger_.style.display = 'block'; |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 484 this.nodeProgressForeground_.style.display = 'none'; | 528 this.nodeProgressForeground_.style.display = 'none'; |
| 485 this.nodeProgressBackground_.style.display = 'none'; | 529 this.nodeProgressBackground_.style.display = 'none'; |
| 486 } | 530 } |
| 487 | 531 |
| 488 showInline(this.controlShow_, this.state_ == Download.States.COMPLETE); | 532 showInline(this.controlShow_, this.state_ == Download.States.COMPLETE); |
| 489 showInline(this.controlPause_, this.state_ == Download.States.IN_PROGRESS); | 533 showInline(this.controlPause_, this.state_ == Download.States.IN_PROGRESS); |
| 490 showInline(this.controlResume_, this.state_ == Download.States.PAUSED); | 534 showInline(this.controlResume_, this.state_ == Download.States.PAUSED); |
| 491 showInline(this.controlCancel_, this.state_ == Download.States.IN_PROGRESS |
| | 535 showInline(this.controlCancel_, this.state_ == Download.States.IN_PROGRESS |
| |
| 492 this.state_ == Download.States.PAUSED); | 536 this.state_ == Download.States.PAUSED); |
| 493 | 537 |
| 538 this.nodeSince_.innerHTML = this.since_; |
| 539 this.nodeDate_.innerHTML = this.date_; |
| 494 this.nodeURL_.innerHTML = this.url_; | 540 this.nodeURL_.innerHTML = this.url_; |
| 495 this.nodeStatus_.innerHTML = this.getStatusText_(); | 541 this.nodeStatus_.innerHTML = this.getStatusText_(); |
| 496 | 542 |
| 497 this.danger_.style.display = 'none'; | 543 this.danger_.style.display = 'none'; |
| 498 this.safe_.style.display = 'block'; | 544 this.safe_.style.display = 'block'; |
| 499 } | 545 } |
| 500 } | 546 } |
| 501 | 547 |
| 502 /** | 548 /** |
| 503 * Removes applicable bits from the DOM in preparation for deletion. | 549 * Removes applicable bits from the DOM in preparation for deletion. |
| (...skipping 171 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 675 <span id="danger_save" jscontent="danger_save">Save</span> | 721 <span id="danger_save" jscontent="danger_save">Save</span> |
| 676 <span id="danger_discard" jscontent="danger_discard">Discard</span> | 722 <span id="danger_discard" jscontent="danger_discard">Discard</span> |
| 677 | 723 |
| 678 <span id="control_pause" jscontent="control_pause">Pause</span> | 724 <span id="control_pause" jscontent="control_pause">Pause</span> |
| 679 <span id="control_showinfolder" jscontent="control_showinfolder">Show in folde
r</span> | 725 <span id="control_showinfolder" jscontent="control_showinfolder">Show in folde
r</span> |
| 680 <span id="control_cancel" jscontent="control_cancel">Cancel</span> | 726 <span id="control_cancel" jscontent="control_cancel">Cancel</span> |
| 681 <span id="control_resume" jscontent="control_resume">Resume</span> | 727 <span id="control_resume" jscontent="control_resume">Resume</span> |
| 682 </div> | 728 </div> |
| 683 </body> | 729 </body> |
| 684 </html> | 730 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 55002:
Add date information to the downloads page. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src/