chrome/browser/resources/downloads/manager.js

   1 // Copyright 2015 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 cr.define('downloads', function() {
   6   /**
   7    * Class to own and manage download items.
   8    * @constructor
   9    */
  10   function Manager() {}
  11
  12   cr.addSingletonGetter(Manager);
  13
  14   Manager.prototype = {
  15     /** @private {string} */
  16     searchText_: '',
  17
  18     /**
  19      * Sets the search text, updates related UIs, and tells the browser.
  20      * @param {string} searchText Text we're searching for.
  21      * @private
  22      */
  23     setSearchText_: function(searchText) {
  24       this.searchText_ = searchText;
  25
  26       $('downloads-summary-text').textContent = this.searchText_ ?
  27           loadTimeData.getStringF('searchResultsFor', this.searchText_) : '';
  28
  29       // Split quoted terms (e.g., 'The "lazy" dog' => ['The', 'lazy', 'dog']).
  30       function trim(s) { return s.trim(); }
  31       chrome.send('getDownloads', searchText.split(/"([^"]*)"/).map(trim));
  32     },
  33
  34     /**
  35      * @return {number} A guess at how many items could be visible at once.
  36      * @private
  37      */
  38     guesstimateNumberOfVisibleItems_: function() {
  39       var headerHeight = document.querySelector('header').offsetHeight;
  40       var summaryHeight = $('downloads-summary').offsetHeight;
  41       var nonItemSpace = headerHeight + summaryHeight;
  42       return Math.floor((window.innerHeight - nonItemSpace) / 46) + 1;
  43     },
  44
  45     /**
  46      * Called when all items need to be updated.
  47      * @param {!Array<!downloads.Data>} list A list of new download data.
  48      * @private
  49      */
  50     updateAll_: function(list) {
  51       var oldIdMap = this.idMap_ || {};
  52
  53       /** @private {!Object<!downloads.ItemView>} */
  54       this.idMap_ = {};
  55
  56       /** @private {!Array<!downloads.ItemView>} */
  57       this.items_ = [];
  58
  59       if (!this.iconLoader_) {
  60         var guesstimate = Math.max(this.guesstimateNumberOfVisibleItems_(), 1);
  61         /** @private {downloads.ThrottledIconLoader} */
  62         this.iconLoader_ = new downloads.ThrottledIconLoader(guesstimate);
  63       }
  64
  65       for (var i = 0; i < list.length; ++i) {
  66         var data = list[i];
  67         var id = data.id;
  68
  69         // Re-use old items when possible (saves work, preserves focus).
  70         var item = oldIdMap[id] || new downloads.ItemView(this.iconLoader_);
  71
  72         this.idMap_[id] = item;  // Associated by ID for fast lookup.
  73         this.items_.push(item);  // Add to sorted list for order.
  74
  75         // Render |item| but don't actually add to the DOM yet. |this.items_|
  76         // must be fully created to be able to find the right spot to insert.
  77         item.update(data);
  78
  79         // Collapse redundant dates.
  80         var prev = list[i - 1];
  81         item.dateContainer.hidden =
  82             prev && prev.date_string == data.date_string;
  83
  84         delete oldIdMap[id];
  85       }
  86
  87       // Remove stale, previously rendered items from the DOM.
  88       for (var id in oldIdMap) {
  89         var oldNode = oldIdMap[id].node;
  90         if (oldNode.parentNode)
  91           oldNode.parentNode.removeChild(oldNode);
  92         delete oldIdMap[id];
  93       }
  94
  95       for (var i = 0; i < this.items_.length; ++i) {
  96         var item = this.items_[i];
  97         if (item.node.parentNode)  // Already in the DOM; skip.
  98           continue;
  99
 100         var before = null;
 101         // Find the next rendered item after this one, and insert before it.
 102         for (var j = i + 1; !before && j < this.items_.length; ++j) {
 103           if (this.items_[j].node.parentNode)
 104             before = this.items_[j].node;
 105         }
 106         // If |before| is null, |item| will just get added at the end.
 107         this.node_.insertBefore(item.node, before);
 108       }
 109
 110       var noDownloadsOrResults = $('no-downloads-or-results');
 111       noDownloadsOrResults.textContent = loadTimeData.getString(
 112           this.searchText_ ? 'noSearchResults' : 'noDownloads');
 113
 114       var hasDownloads = this.size_() > 0;
 115       this.node_.hidden = !hasDownloads;
 116       noDownloadsOrResults.hidden = hasDownloads;
 117
 118       if (loadTimeData.getBoolean('allowDeletingHistory'))
 119         $('clear-all').hidden = !hasDownloads || this.searchText_.length > 0;
 120
 121       this.rebuildFocusGrid_();
 122     },
 123
 124     /**
 125      * @param {!downloads.Data} data Info about the item to update.
 126      * @private
 127      */
 128     updateItem_: function(data) {
 129       var activeElement = document.activeElement;
 130
 131       var item = this.idMap_[data.id];
 132       item.update(data);
 133       var focusRow = this.decorateItem_(item);
 134
 135       if (focusRow.contains(activeElement) &&
 136           !downloads.FocusRow.shouldFocus(activeElement)) {
 137         focusRow.getEquivalentElement(activeElement).focus();
 138       }
 139     },
 140
 141     /**
 142      * Rebuild the focusGrid_ using the elements that each download will have.
 143      * @private
 144      */
 145     rebuildFocusGrid_: function() {
 146       var activeElement = document.activeElement;
 147
 148       /** @private {!cr.ui.FocusGrid} */
 149       this.focusGrid_ = this.focusGrid_ || new cr.ui.FocusGrid();
 150       this.focusGrid_.destroy();
 151
 152       this.items_.forEach(function(item) {
 153         var focusRow = this.decorateItem_(item);
 154         this.focusGrid_.addRow(focusRow);
 155
 156         if (focusRow.contains(activeElement) &&
 157             !downloads.FocusRow.shouldFocus(activeElement)) {
 158           focusRow.getEquivalentElement(activeElement).focus();
 159         }
 160       }, this);
 161       this.focusGrid_.ensureRowActive();
 162     },
 163
 164     /**
 165      * @param {!downloads.ItemView} item An item to decorate as a FocusRow.
 166      * @return {!downloads.FocusRow} |item| decorated as a FocusRow.
 167      * @private
 168      */
 169     decorateItem_: function(item) {
 170       downloads.FocusRow.decorate(item.node, item, this.node_);
 171       return assertInstanceof(item.node, downloads.FocusRow);
 172     },
 173
 174     /**
 175      * @return {number} The number of downloads shown on the page.
 176      * @private
 177      */
 178     size_: function() {
 179       return this.items_.length;
 180     },
 181
 182     /** @private */
 183     clearAll_: function() {
 184       if (loadTimeData.getBoolean('allowDeletingHistory')) {
 185         chrome.send('clearAll');
 186         this.setSearchText_('');
 187       }
 188     },
 189
 190     /** @private */
 191     onLoad_: function() {
 192       this.node_ = $('downloads-display');
 193
 194       $('clear-all').onclick = function() {
 195         this.clearAll_();
 196       }.bind(this);
 197
 198       $('open-downloads-folder').onclick = function() {
 199         chrome.send('openDownloadsFolder');
 200       };
 201
 202       $('term').onsearch = function(e) {
 203         this.setSearchText_($('term').value);
 204       }.bind(this);
 205
 206       cr.ui.decorate('command', cr.ui.Command);
 207       document.addEventListener('canExecute', this.onCanExecute_.bind(this));
 208       document.addEventListener('command', this.onCommand_.bind(this));
 209
 210       this.setSearchText_('');
 211     },
 212
 213     /**
 214      * @param {Event} e
 215      * @private
 216      */
 217     onCanExecute_: function(e) {
 218       e = /** @type {cr.ui.CanExecuteEvent} */(e);
 219       switch (e.command.id) {
 220         case 'undo-command':
 221           e.canExecute = document.activeElement != $('term');
 222           break;
 223         case 'clear-all-command':
 224           e.canExecute = true;
 225           break;
 226       }
 227     },
 228
 229     /**
 230      * @param {Event} e
 231      * @private
 232      */
 233     onCommand_: function(e) {
 234       if (e.command.id == 'undo-command')
 235         chrome.send('undo');
 236       else if (e.command.id == 'clear-all-command')
 237         this.clearAll_();
 238     },
 239   };
 240
 241   Manager.updateAll = function(list) {
 242     Manager.getInstance().updateAll_(list);
 243   };
 244
 245   Manager.updateItem = function(item) {
 246     Manager.getInstance().updateItem_(item);
 247   };
 248
 249   Manager.setSearchText = function(searchText) {
 250     Manager.getInstance().setSearchText_(searchText);
 251   };
 252
 253   Manager.onLoad = function() {
 254     Manager.getInstance().onLoad_();
 255   };
 256
 257   Manager.size = function() {
 258     return Manager.getInstance().size_();
 259   };
 260
 261   return {Manager: Manager};
 262 });
 263
 264 window.addEventListener('DOMContentLoaded', downloads.Manager.onLoad);