downloads: break downloads.js into more classes/files.

chrome/browser/resources/downloads/downloads.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // TODO(hcarmona): This file is big: it may be good to split it up.
 
 /**
  * The type of the download object. The definition is based on
  * chrome/browser/ui/webui/downloads_dom_handler.cc:CreateDownloadItemValue()
  * @typedef {{by_ext_id: (string|undefined),
@@ skipping 154 matching lines @@
   /**
    * @type {!Object<string, Download>}
    * @private
    */
   this.downloads_ = {};
   this.node_ = $('downloads-display');
   this.summary_ = $('downloads-summary-text');
   this.searchText_ = '';
   this.focusGrid_ = new cr.ui.FocusGrid();
 
-  // Keep track of the dates of the newest and oldest downloads so that we
-  // know where to insert them.
-  this.newestTime_ = -1;
-
   // Icon load request queue.
   this.iconLoadQueue_ = [];
   this.isIconLoading_ = false;
 
   this.progressForeground1_ = new Image();
   this.progressForeground1_.src =
     'chrome://theme/IDR_DOWNLOAD_PROGRESS_FOREGROUND_32@1x';
   this.progressForeground2_ = new Image();
   this.progressForeground2_.src =
     'chrome://theme/IDR_DOWNLOAD_PROGRESS_FOREGROUND_32@2x';
 
   cr.ui.decorate('command', cr.ui.Command);
   document.addEventListener('canExecute', this.onCanExecute_.bind(this));
   document.addEventListener('command', this.onCommand_.bind(this));
 }
 
 /**
  * Called when a download has been updated or added.
  * @param {DownloadItem} download Information about a download.
  */
 Downloads.prototype.updated = function(download) {
   var id = download.id;
   if (this.downloads_[id]) {
     this.downloads_[id].update(download);
   } else {
     this.downloads_[id] = new Download(download);
-    // We get downloads in display order, so we don't have to worry about
-    // maintaining correct order - we can assume that any downloads not in
-    // display order are new ones and so we can add them to the top of the
-    // list.
-    if (download.started > this.newestTime_) {
-      this.node_.insertBefore(this.downloads_[id].node, this.node_.firstChild);
-      this.newestTime_ = download.started;
-    } else {
-      this.node_.appendChild(this.downloads_[id].node);
+
+    // Sort downloads by start time and insert the new one in the right place.
+    var startSorted = [];
+    for (var sortedId in this.downloads_) {
+      startSorted.push(this.downloads_[sortedId]);
     }
+    startSorted.sort(function(d1, d2) { return d2.started_ - d1.started_; });
+
+    var indexOfNewDownload = startSorted.indexOf(this.downloads_[id]);
+    var before = startSorted[indexOfNewDownload + 1];
+
+    // If !before, insertBefore() acts like appendChild() and adds at the end.
+    this.node_.insertBefore(this.downloads_[id].node, before && before.node);

[Dan Beam, 2015/03/03 19:31:05]

i could possibly do this:

  if (startSorted.length > MAX_DOWNLOADS)
    this.remove(startSorted.pop().id_);

but it's not crazy efficient in the Clear All + undo case

[asanka, 2015/03/03 20:45:56]

Yeah. For undo operations that affect multiple downloads, we'd probably be
better off sending the whole list. I've suggested that we do so for single
downloads as well and be done with it. If that's too excessive, then maybe we
can consider something like this for the single download case.

[Dan Beam, 2015/03/04 00:46:20]

the problem with rebuilding DOM is that it messes up focus.  we recently fixed
this on chrome://extensions and it'd be a pretty huge bummer to regress it here.

   }
+
   // Download.prototype.update may change its nodeSince_ and nodeDate_, so
   // update all the date displays.
   // TODO(benjhayden) Only do this if its nodeSince_ or nodeDate_ actually did
   // change since this may touch 150 elements and Downloads.prototype.updated
   // may be called 150 times.
   this.onDownloadListChanged_();
 };
 
 /**
  * Set our display search text.
@@ skipping 140 matching lines @@
   if (!this.isIconLoading_)
     loadNext();
 };
 
 /**
  * Returns whether the displayed list needs to be updated or not.
  * @param {Array} downloads Array of download nodes.
  * @return {boolean} Returns true if the displayed list is to be updated.
  */
 Downloads.prototype.isUpdateNeeded = function(downloads) {
-  var size = 0;
-  for (var i in this.downloads_)
-    size++;
-  if (size != downloads.length)
+  if (this.size() != downloads.length)
     return true;
   // Since there are the same number of items in the incoming list as
   // |this.downloads_|, there won't be any removed downloads without some
   // downloads having been inserted.  So check only for new downloads in
   // deciding whether to update.
   for (var i = 0; i < downloads.length; i++) {
     if (!this.downloads_[downloads[i].id])
       return true;
   }
   return false;
@@ skipping 236 matching lines @@
 /**
  * Updates the download to reflect new data.
  * @param {DownloadItem} download Updated info about this download.
  */
 Download.prototype.update = function(download) {
   this.id_ = download.id;
   this.filePath_ = download.file_path;
   this.fileUrl_ = download.file_url;
   this.fileName_ = download.file_name;
   this.url_ = download.url;
+  this.started_ = download.started;
   this.state_ = download.state;
   this.fileExternallyRemoved_ = download.file_externally_removed;
   this.dangerType_ = download.danger_type;
   this.lastReasonDescription_ = download.last_reason_text;
   this.byExtensionId_ = download.by_ext_id;
   this.byExtensionName_ = download.by_ext_name;
 
   this.since_ = download.since_string;
   this.date_ = download.date_string;
 
@@ skipping 423 matching lines @@
     if (Date.now() - start > 50) {
       clearTimeout(resultsTimeout);
       resultsTimeout = setTimeout(tryDownloadUpdatedPeriodically, 5);
       break;
     }
   }
 }
 
 // Add handlers to HTML elements.
 window.addEventListener('DOMContentLoaded', load);