browser/resources/active_downloads.html

<!DOCTYPE HTML>
<html i18n-values="dir:textdirection;">
<head>
<meta charset="utf-8">
<title i18n-content="title"></title>
<link rel="icon" href="../../app/theme/downloads_favicon.png">
<style type="text/css">
div.header {
  border-bottom: 1px solid #7289E2;
  padding: 8px;
  margin: 0;
  width: 100%;
  left: 0;
  top: 0;
  height: 32px;
  position: absolute;
  box-sizing: border-box;
  background-image: -webkit-linear-gradient(#D0DAF8, #A6BAF7);
  border-bottom-color: #999;
  border-bottom-width: 1px;
  border-left-color: #999;
  border-left-width: 1px;
  border-right-color: #999;
  border-right-width: 1px;
  color: black;
}

*:-khtml-drag {
  background-color: rgba(238,238,238, 0.5);
}

*[draggable] {
  -khtml-user-drag: element;
  cursor: move;
}

ul.downloadlist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.menuicon {
  position: absolute;
  right: 9px;
  top: 11px;
  height: 100%;
  width: 5px;
  margin-left: 0;
  background: url('chrome://resources/images/active_downloads_menu.png');
  margin-top: 5px;
  background-repeat: no-repeat;
}

.menubutton {
  position: absolute;
  margin-top: -36px;
  right: 0;
  height: 35px;
  width: 24px;
  border-bottom: 1px solid #CCC;
  cursor: pointer;
}

.rowbg {
  border-bottom: 1px solid #CCC;
  background: -webkit-gradient(linear, left top, left bottom,
    from(#f3f3f3), to(#ebebeb), color-stop(0.8, #ededed));
}

.rowbg:hover {
  background: -webkit-gradient(linear, left top, left bottom,
    from(#fdfdfd), to(#f1f1f1), color-stop(0.8, #f5f5f5));
}

.rowbg:active {
  background: -webkit-gradient(linear, left top, left bottom,
    from(#d2e0f0), to(#dee6f0), color-stop(0.1, #e3e9f0));
}

.downloadrow {
  height: 36px;
}

.rowbutton {
  padding: 5px 5px 0 34px;
  position: relative;
  right: 24px;
  border-right: 1px solid #CCC;
  height: 30px;
}

.rowbutton div.icon {
  float: left;
  margin-top: 1px;
  display: inline
  position: relative;
  width: 21px;
  height: 17px;
  background-repeat: no-repeat;
}

.rowbutton span.title {
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  width: 189px;
  color: #325282;
}

.rowbutton span.downloading {
  top: -6px;
  font-size: .8em;
}

.rowbutton span.downloaded {
  font-size: .8em;
}

.rowbutton span.error {
  font-size: .6em;
}

.allowdownload {
  margin: -10px 5px 5px 30px;
  display: block;
}

.allowdownloadtext {
  font-size: .6em;
  color: #325282;
}

.confirm {
  font-size: .6em;
  text-decoration: underline;
  margin-left: 5px;
  color: #254f9b;
  cursor: pointer;
}

.progress {
  font-size: .6em;
  text-align: right;
  margin-left: auto;
  margin-top: -5px;
}

div.columnlist {
  width: 100%;
  top: 0;
  left: 0;
  bottom: 29px;  /* space for Show All Downloads */
  position: absolute;
  background: #e8e8e8
}

span.showalldownloadstext {
  color: #254f9b;
  cursor: pointer;
  text-decoration: underline;
  font-size: 12px;
  height: 15px;
}

div.showalldownloads {
  width: 100%;
  bottom: 0;
  height: 29px;
  position: absolute;
  margin-left: -8px;
  text-align: center;
  background: #e8e8e8
}

.menu {
  top: 14px;
  right: 2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 3px;
  border-bottom-left-radius: 4px 4px;
  border-bottom-right-radius: 4px 4px;
  border-top-left-radius: 4px 4px;
  border-top-right-radius: 0px 0px;
  position: absolute;
  display: none;
  z-index: 999;
  background: white;
  border-top-left-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.6);
  padding: 5px;
}

.menuitem {
  width: 100%;
  height: 20px;
  font-size: .8em;
  text-align: left;
  cursor: pointer;
  left: 0;
  color: #0D0052;
  -webkit-transition: color 1.0s ease-out ;
}

.menuitem:hover {
  text-decoration: underline;
  color: #20c;
  background: #ebeff9;
  -webkit-transition: color 0.0s ease-out ;
}

div.iconmedia {
  background: url('chrome://resources/images/icon_media.png');
}

div.iconfolder {
  background: url('chrome://resources/images/icon_folder.png');
}

div.iconfile {
  background: url('chrome://resources/images/icon_file.png');
}

div.iconphoto {
  background: url('chrome://resources/images/icon_photo.png');
}

div.iconmusic {
  background: url('chrome://resources/images/icon_media.png');
}

</style>
<script src="shared/js/local_strings.js"></script>
<script src="shared/js/media_common.js"></script>
<script src="shared/js/util.js"></script>
<script>

var localStrings = null;
var downloadRowList = null;

function init() {
  localStrings = new LocalStrings();
  initTestHarness();

  $('header').style.display = 'none';

  $('showalldownloadstext').textContent =
      localStrings.getString('showalldownloads');

  downloadRowList = new DownloadRowList();
  chrome.send('getDownloads', []);
}

/**
 * Testing. Allow this page to be loaded in a browser.
 * Create stubs for localStrings and chrome.send.
 */
var testHarnessEnabled = false;
function initTestHarness() {
  if (testHarnessEnabled) {
    localStrings = {
      getString: function(name) {
        if (name == 'showalldownloads')
          return 'Show All Downloads';
        if (name == 'allowdownload')
          return 'Allow Download?';
        if (name == 'confirmyes')
          return 'Yes';
        if (name == 'confirmcancel')
          return 'Cancel';
        return name;
      },
      getStringF: function(name, path) {
        return path + ' - Unknown file type.';
      },
    };
    chrome.send = function(name, ary) {
      console.log('chrome.send ' + name + ' ' + ary);
      if (name == 'getDownloads' ||
          (name == 'openNewFullWindow' &&
          ary[0] == 'chrome://downloads'))
        sendTestResults();
    }
  }
}

/**
 * Create a results array with test data and call downloadsList.
 */
var id = 1;
var results = [];
function sendTestResults() {
  results.push({
      state: (id % 2 ? 'DANGEROUS' : 'COMPLETE'),
      percent: (id % 2 ? 90 : 100),
      id: id,
      file_name: ' Test' + id + '.pdf',
      file_path: '/home/achuith/Downloads/Test' + id + '.pdf',
      progress_status_text : (id % 2 ?
          'download progressing nicely' : 'download complete'),
    });
  id++;
  downloadsList(results);
}

/**
 * Current Menu.
 */
var menu = {
  current_: null,

  /**
  * Close the current menu.
  */
  clear: function() {
    var current = this.current_;
    if (current) {
      current.firstChild.style.display = 'none';
      current.style.opacity = '';
      this.current_ = null;
    }
  },

  /**
  * If it's a second click on an open menu, close the menu.
  * Otherwise, close any other open menu and open the clicked menu.
  */
  clicked: function(row) {
    var menuicon = row.menuicon;
    if (this.current_ === menuicon) {
      this.clear();
      return;
    }
    this.clear();
    if (menuicon.firstChild.style.display != 'block') {
      menuicon.firstChild.style.display = 'block';
      menuicon.style.opacity = '1';
      menuicon.scrollIntoView();
      this.current_ = menuicon;
    }
    window.event.stopPropagation();
  },
};

/**
 * C++ api calls.
 */
function downloadsList(results) {
  downloadRowList.list(results);
}

function downloadUpdated(result) {
  downloadRowList.update(result);
}

function showAllDownloads() {
  chrome.send('openNewFullWindow', ['chrome://downloads']);
  dialogClose();
}

function dialogClose() {
  chrome.send('DialogClose', ['']);
}

/**
 * DownloadRow contains all the elements that go into a row of the downloads
 * list. It represents a single DownloadItem.
 *
 * @param {DownloadRowList} list Global DownloadRowList.
 * @param {Object} result JSON representation of DownloadItem.
 * @constructor
 */
function DownloadRow(list, result) {
  this.path = result.file_path;
  this.name = result.file_name;
  this.list = list;
  this.id = result.id;

  this.createRow_(list);
  this.createRowButton_();
  this.createMenu_();
}

DownloadRow.prototype = {
  /**
  * Create the row html element and book-keeping for the row.
  * @param {DownloadRowList} list global DownloadRowList instance.
  * @private
  */
  createRow_: function(list) {
    var row = document.createElement('li');
    row.className = 'downloadrow';
    row.id = this.path;
    row.downloadRow = this;
    list.append(row);

    this.element = row;
    this.list.downloadList.push(this);
  },

  getIconClass_: function() {
    if (pathIsImageFile(this.path)) {
      return 'icon iconphoto';
    } else if (pathIsVideoFile(this.path)) {
      return 'icon iconmedia';
    } else if (pathIsAudioFile(this.path)) {
      return 'icon iconmusic';
    }
    return 'icon iconfile';
  },

  setErrorText_: function(text) {
    this.filename.textContent = text;
    this.filename.className = 'error title';
  },

  supportsPdf_: function() {
    return 'application/pdf' in navigator.mimeTypes;
  },

  openFilePath_: function() {
    chrome.send('openNewFullWindow', ['file://' + this.path]);
  },

  /**
  * Determine onclick behavior based on filename.
  * @private
  */
  getFunctionForItem_: function() {
    var path = this.path;
    var self = this;

    if (pathIsAudioFile(path)) {
      return function() {
        chrome.send('playMediaFile', [path]);
      };
    }
    if (pathIsVideoFile(path)) {
      return function() {
        chrome.send('playMediaFile', [path]);
      };
    }
    if (pathIsImageFile(path)) {
      return function() {
        self.openFilePath_();
      }
    }
    if (pathIsHtmlFile(path)) {
      return function() {
        self.openFilePath_();
      }
    }
    if (pathIsPdfFile(path) && this.supportsPdf_()) {
      return function() {
        self.openFilePath_();
      }
    }

    return function() {
      self.setErrorText_(localStrings.getStringF('error_unknown_file_type',
                          self.name));
    };
  },

  /**
  * Create a child element.
  *
  * @param {string} type The type - div, span, etc.
  * @param {string} className The class name
  * @param {HTMLElement} parent Parent to append this child to.
  * @param {string} textContent optional text content of child.
  * @param {function(*)} onclick onclick function of child.
  * @private
  */
  createChild_: function(type, className, parent, textContent, onclick) {
    var elem = document.createElement(type);
    elem.className = className;
    if (textContent !== undefined)
      elem.textContent = textContent;
    elem.onclick = onclick;
    parent.appendChild(elem);
    return elem;
  },

  /**
    * Create the row button for the left of the row.
    * This contains the icon, filename and error elements.
    * @private
    */
  createRowButton_: function () {
    this.rowbutton = this.createChild_('div', 'rowbutton rowbg', this.element);

    // Icon.
    var icon = this.createChild_('div', this.getIconClass_(), this.rowbutton);

    // Filename.
    this.filename = this.createChild_('span', 'downloaded title',
        this.rowbutton, this.name);
  },

  /**
  * Create the menu button on the right of the row.
  * This contains the menuicon. The menuicon contains the menu, which
  * contains items for Open, Pause/Resume and Cancel.
  * @private
  */
  createMenu_: function() {
    var self = this;
    this.menubutton = this.createChild_('div', 'menubutton rowbg',
        this.element, '',
        function() {
          menu.clicked(self);
        });

    this.menuicon = this.createChild_('div', 'menuicon', this.menubutton);
    this.menuicon.align = 'right';

    var menudiv = this.createChild_('div', 'menu', this.menuicon);

    this.open = this.createChild_('div', 'menuitem', menudiv,
      localStrings.getString('open'), this.getFunctionForItem_());

    this.pause = this.createChild_('div', 'menuitem', menudiv,
      localStrings.getString('pause'), function() {
                                         self.pauseToggleDownload_();
                                       });

    this.cancel = this.createChild_('div', 'menuitem', menudiv,
      localStrings.getString('cancel'), function() {
                                          self.cancelDownload_();
                                        });

    this.pause.style.display = 'none';
    this.cancel.style.display = 'none';
  },

  allowDownload_: function() {
    chrome.send('allowDownload', ['' + this.id]);
  },

  cancelDownload_: function() {
    chrome.send('cancelDownload', ['' + this.id]);
  },

  pauseToggleDownload_: function() {
    this.pause.textContent =
      (this.pause.textContent == localStrings.getString('pause')) ?
      localStrings.getString('resume') :
      localStrings.getString('pause');

    // Convert id to string before send.
    chrome.send('pauseToggleDownload', ['' + this.id]);
  },

  resetRow_: function() {
    this.rowbutton.onclick = '';
    this.rowbutton.style.cursor = '';
    this.rowbutton.setAttribute('draggable', 'false');
  },

  createAllowDownload_: function() {
    if (this.allowdownload)
      return;

    this.allowdownload = this.createChild_('div', 'allowdownload',
        this.rowbutton);

    this.createChild_('span', 'allowdownloadtext', this.allowdownload,
        localStrings.getString('allowdownload'));

    var self = this;
    this.createChild_('span', 'confirm', this.allowdownload,
        localStrings.getString('confirmyes'),
        function() {
          self.allowDownload_();
        });
    this.createChild_('span', 'confirm', this.allowdownload,
        localStrings.getString('confirmcancel'),
        function() {
          self.cancelDownload_();
        });

    this.resetRow_();
    this.menubutton.onclick = '';
  },

  removeAllowDownload_: function() {
    if (this.allowdownload) {
      this.rowbutton.removeChild(this.allowdownload);
      this.allowdownload = null;
      var self = this;
      this.menubutton.onclick = function() {
        menu.clicked(self);
      };
    }
  },

  createProgress_: function() {
    if (this.progress)
      return;

    this.progress = this.createChild_('div', 'progress', this.rowbutton);

    // Menu has Pause/Cancel. Open hidden.
    this.open.style.display = 'none';
    this.pause.style.display = '';
    this.cancel.style.display = '';
  },

  removeProgress_: function() {
    if (this.progress) {
      this.rowbutton.removeChild(this.progress);
      this.progress = null;
    }
  },

  updatePause_: function(result) {
    var pause = this.pause;
    var pauseStr = localStrings.getString('pause');
    var resumeStr = localStrings.getString('resume');

    if (pause &&
        result.state == 'PAUSED' &&
        pause.textContent != resumeStr) {
      pause.textContent = resumeStr;
    } else if (pause &&
              result.state == 'IN_PROGRESS' &&
              pause.textContent != pauseStr) {
      pause.textContent = pauseStr;
    }
  },

  updateProgress_: function(result) {
    this.removeAllowDownload_();
    this.createProgress_();
    this.progress.textContent = result.progress_status_text;
    this.updatePause_(result);
  },

  /**
  * Called when the item has finished downloading. Switch the menu
  * and remove the progress bar.
  * @private
  */
  finishedDownloading_: function() {
    this.filename.className = 'downloaded title';

    // Menu has Open. Pause/Cancel hidden.
    this.open.style.display = '';
    this.pause.style.display = 'none';
    this.cancel.style.display = 'none';

    // Make rowbutton clickable.
    this.rowbutton.onclick = this.getFunctionForItem_();
    this.rowbutton.style.cursor = 'pointer';

    // Make rowbutton draggable.
    this.rowbutton.setAttribute('draggable', 'true');
    var self = this;
    this.rowbutton.addEventListener('dragstart', function(e) {
      e.dataTransfer.effectAllowed = 'copy';
      e.dataTransfer.setData('Text', self.path);
      e.dataTransfer.setData('URL', 'file:///' + self.path);
    }, false);

    this.removeAllowDownload_();
    this.removeProgress_();
  },

  /**
  * One of the DownloadItem we are observing has updated.
  * @param {Object} result JSON representation of DownloadItem.
  */
  downloadUpdated: function(result) {
    this.filename.textContent = result.file_name;
    this.filename.className = 'downloading title';

    if (result.state == 'CANCELLED' ||
        result.state == 'INTERRUPTED') {
      this.list.remove(this);
    } else if (result.state == 'DANGEROUS') {
      this.createAllowDownload_();
    } else if (result.percent < 100) {
      this.updateProgress_(result);
    } else {
      this.finishedDownloading_();
    }
  },
};

/**
 * DownloadRowList is a container for DownloadRows.
 */
function DownloadRowList() {
  var downloadpath = localStrings.getString('downloadpath');

  var list = document.createElement('ul');
  list.className = 'downloadlist';
  list.id = downloadpath;
  this.element = list;
  this.rows = [];

  document.title = downloadpath.split('/').pop();

  $('main').appendChild(list);
}

DownloadRowList.prototype = {

  /**
  * ROW_HEIGHT is height of each row.
  * MAX_ROWS is maximum number of rows displayed (to display a new row
  * beyond MAX_ROWS, we delete the oldest row).
  * MIN_ROWS is the minimum number of rows displayed.
  * numRows is the current number of rows.
  * downloadList is the list of DownloadRow elements.
  */
  ROW_HEIGHT: 36,
  MAX_ROWS: 5,
  MIN_ROWS: 1,
  numRows: 0,
  downloadList: [],

  numRowsOutsideRange_: function() {
    return this.numRows > this.MIN_ROWS && this.numRows < this.MAX_ROWS;
  },

  /**
  * Remove a row from the list, as when a download is canceled, or
  * the the number of rows has exceeded the max allowed.
  *
  * @param {DownloadRow} row Row to be removed.
  * @private
  */
  remove: function(row) {
    this.downloadList.splice(this.downloadList.indexOf(row), 1);
    this.element.removeChild(row.element);
    row.element.downloadRow = null;

    this.numRows--;
    if (this.numRowsOutsideRange_())
      window.resizeBy(0, -this.ROW_HEIGHT);
  },

  /**
  * Append a new row to the list, removing the last row if we exceed the
  * maximum allowed.
  * @param {DownloadRow} row Row to be removed.
  */
  append: function(row) {
    if (this.numRowsOutsideRange_())
      window.resizeBy(0, this.ROW_HEIGHT);

    this.numRows++;

    var list = this.element;
    if (this.numRows > this.MAX_ROWS)
      this.remove(list.lastChild.downloadRow);

    if (list.firstChild) {
      list.insertBefore(row, list.firstChild);
    } else {
      list.appendChild(row);
    }
  },

  /**
  * Handle list callback with list of DownloadItems.
  * @param {Array} results Array of JSONified DownloadItems.
  */
  list: function(results) {
    var removeList = [];
    removeList.pushUnique = function(element) {
      if (this.indexOf(element) == -1)
        this.push(element);
    };

    for (var y = 0; y < this.downloadList.length; y++) {
      var found = false;
      for (var x = 0; x < results.length; x++) {
        var element = $(results[x].file_path);
        if (this.downloadList[y].element == element) {
          found = true;
          break;
        }
      }
      if (!found)
        removeList.pushUnique(this.downloadList[y]);
    }

    for (var i = 0; i < results.length; i++) {
      this.update(results[i]);
    }

    for (i = 0; i < removeList.length; i++) {
      this.remove(removeList[i]);
    }
  },

  /**
  * Handle update of a DownloadItem we're observing.
  * @param {Object} result JSON representation of DownloadItem.
  */
  update: function(result) {
    var element = $(result.file_path);
    var row = element && element.downloadRow;

    if (!row &&
        result.state != 'CANCELLED' &&
        result.state != 'INTERRUPTED') {
      row = new DownloadRow(this, result);
    }

    row && row.downloadUpdated(result);
  },
};

</script>
<body onload="init();" onclick="menu.clear()" onselectstart="return false"
  i18n-values=".style.fontFamily:fontfamily">
<div id="header">
  <div id="currenttitle"></div>
</div><br>
<div id="main" class="columnlist"></div>
<div id="showalldownloads" class="showalldownloads">
  <span id="showalldownloadstext" class="showalldownloadstext"
    onclick="showAllDownloads()"></span>
</div>
</body>
</html>