Port downloads.ItemView to a Polymer component.

chrome/browser/resources/md_downloads/item_view.js

Index: chrome/browser/resources/md_downloads/item_view.js
diff --git a/chrome/browser/resources/md_downloads/item_view.js b/chrome/browser/resources/md_downloads/item_view.js
new file mode 100644
index 0000000000000000000000000000000000000000..0f5c79614e21ebb2920d85d3156e46e6eff50ace
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/item_view.js
@@ -0,0 +1,251 @@
+// Copyright 2015 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.
+
+cr.define('downloads', function() {
+  var ItemView = Polymer({
+    is: 'item-view',
+
+    properties: {
+      dateContainer: {
+        type: Object,
+        value: function() {
+          return this.$['date-container'];

[michaelpg, 2015/07/08 19:39:52]

I'm not sure this is safe -- is the local DOM guaranteed to be stamped out, and
$ initialized, before this function is evaluated? (I doubt it; the created
callback is called before local DOM is initialized, and I would expect to be
able to access properties in the created callback.)

If you're not sure, move it to ready().

https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#i...

[Dan Beam, 2015/07/09 18:13:45]

Done. (in an alternate way)

+        },
+      },
+    },
+
+    ready: function() {
+      this.$.safe.ondragstart = this.onSafeDragstart_.bind(this);
+      this.$['file-link'].onclick = this.onFileLinkClick_.bind(this);
+      this.$.show.onclick = this.onShowClick_.bind(this);
+      this.$.pause.onclick = this.onPauseClick_.bind(this);
+      this.$.resume.onclick = this.onResumeClick_.bind(this);
+      this.$['safe-remove'].onclick = this.onSafeRemoveClick_.bind(this);
+      this.$.cancel.onclick = this.onCancelClick_.bind(this);
+      this.$.restore.onclick = this.onRestoreClick_.bind(this);
+      this.$.save.onclick = this.onSaveClick_.bind(this);
+      this.$['dangerous-remove'].onclick = this.onDangerRemoveClick_.bind(this);
+      this.$.discard.onclick = this.onDiscardClick_.bind(this);
+    },
+
+    /** @param {!downloads.Data} data */
+    update: function(data) {
+      assert(!this.id_ || data.id == this.id_);
+      this.id_ = data.id;  // This is the only thing saved from |data|.
+
+      this.classList.toggle('otr', data.otr);
+
+      this.ensureTextIs_(this.$.since, data.since_string);
+      this.ensureTextIs_(this.$.date, data.date_string);
+
+      var dangerText = this.getDangerText_(data);
+      this.$.dangerous.hidden = !dangerText;
+      this.$.safe.hidden = !!dangerText;
+
+      if (dangerText) {
+        this.ensureTextIs_(this.$.description, dangerText);
+
+        var dangerType = data.danger_type;
+        var dangerousFile = dangerType == downloads.DangerType.DANGEROUS_FILE;
+        this.$.description.classList.toggle('malware', !dangerousFile);
+
+        var idr = dangerousFile ? 'IDR_WARNING' : 'IDR_SAFEBROWSING_WARNING';
+        downloads.IconLoader.loadScaledIcon(this.$['dangerous-icon'],
+                                            'chrome://theme/' + idr);
+
+        /** @const */ var showMalwareControls =
+            dangerType == downloads.DangerType.DANGEROUS_CONTENT ||
+            dangerType == downloads.DangerType.DANGEROUS_HOST ||
+            dangerType == downloads.DangerType.DANGEROUS_URL ||
+            dangerType == downloads.DangerType.POTENTIALLY_UNWANTED;
+
+        this.$['malware-controls'].hidden = !showMalwareControls;
+        this.$.discard.hidden = showMalwareControls;
+        this.$.save.hidden = showMalwareControls;
+      } else {
+        var icon = 'chrome://fileicon/' + encodeURIComponent(data.file_path);
+        downloads.IconLoader.loadScaledIcon(this.$['safe-icon'], icon);
+
+        /** @const */ var isInProgress =
+            data.state == downloads.States.IN_PROGRESS;
+        this.classList.toggle('in-progress', isInProgress);
+
+        /** @const */ var completelyOnDisk =
+            data.state == downloads.States.COMPLETE &&
+            !data.file_externally_removed;
+
+        this.$['file-link'].href = data.url;
+        this.ensureTextIs_(this.$['file-link'], data.file_name);
+        this.$['file-link'].hidden = !completelyOnDisk;
+
+        /** @const */ var isInterrupted =
+            data.state == downloads.States.INTERRUPTED;
+        this.$.name.classList.toggle('interrupted', isInterrupted);
+        this.ensureTextIs_(this.$.name, data.file_name);
+        this.$.name.hidden = completelyOnDisk;
+
+        this.$.show.hidden = !completelyOnDisk;
+
+        this.$.retry.href = data.url;
+        this.$.retry.hidden = !data.retry;
+
+        this.$.pause.hidden = !isInProgress;
+
+        this.$.resume.hidden = !data.resume;
+
+        /** @const */ var isPaused = data.state == downloads.States.PAUSED;
+        /** @const */ var showCancel = isPaused || isInProgress;
+        this.$.cancel.hidden = !showCancel;
+
+        this.$['safe-remove'].hidden = showCancel ||
+            !loadTimeData.getBoolean('allow_deleting_history');
+
+        /** @const */ var controlledByExtension = data.by_ext_id &&
+                                                  data.by_ext_name;
+        this.$['controlled-by'].hidden = !controlledByExtension;
+        if (controlledByExtension) {
+          var link = this.$['controlled-by'].querySelector('a');
+          link.href = 'chrome://extensions#' + data.by_ext_id;
+          link.setAttribute('column-type', 'controlled-by');
+          link.textContent = data.by_ext_name;
+        }
+
+        this.ensureTextIs_(this.$['src-url'], data.url);
+        this.$['src-url'].href = data.url;
+        this.ensureTextIs_(this.$.status, this.getStatusText_(data));
+
+        this.$.progress.hidden = !isInProgress;
+
+        // TODO(dbeam): implement progress.
+      }
+    },
+
+    /**
+     * Overwrite |el|'s textContent if it differs from |text|.
+     * @param {!Element} el
+     * @param {string} text
+     * @private
+     */
+    ensureTextIs_: function(el, text) {
+      if (el.textContent != text)
+        el.textContent = text;
+    },
+
+    /**
+     * @param {!downloads.Data} data
+     * @return {string} Text describing the danger of a download. Empty if not
+     *     dangerous.
+     */
+    getDangerText_: function(data) {
+      switch (data.danger_type) {
+        case downloads.DangerType.DANGEROUS_FILE:
+          return loadTimeData.getStringF('danger_file_desc', data.file_name);
+        case downloads.DangerType.DANGEROUS_URL:
+          return loadTimeData.getString('danger_url_desc');
+        case downloads.DangerType.DANGEROUS_CONTENT:  // Fall through.
+        case downloads.DangerType.DANGEROUS_HOST:
+          return loadTimeData.getStringF('danger_content_desc', data.file_name);
+        case downloads.DangerType.UNCOMMON_CONTENT:
+          return loadTimeData.getStringF('danger_uncommon_desc',
+                                         data.file_name);
+        case downloads.DangerType.POTENTIALLY_UNWANTED:
+          return loadTimeData.getStringF('danger_settings_desc',
+                                         data.file_name);
+        default:
+          return '';
+      }
+    },
+
+    /**
+     * @param {!downloads.Data} data
+     * @return {string} User-visible status update text.
+     * @private
+     */
+    getStatusText_: function(data) {
+      switch (data.state) {
+        case downloads.States.IN_PROGRESS:
+        case downloads.States.PAUSED:  // Fallthrough.
+          assert(typeof data.progress_status_text == 'string');
+          return data.progress_status_text;
+        case downloads.States.CANCELLED:
+          return loadTimeData.getString('status_cancelled');
+        case downloads.States.DANGEROUS:
+          break;  // Intentionally hit assertNotReached(); at bottom.
+        case downloads.States.INTERRUPTED:
+          assert(typeof data.last_reason_text == 'string');
+          return data.last_reason_text;
+        case downloads.States.COMPLETE:
+          return data.file_externally_removed ?
+              loadTimeData.getString('status_removed') : '';
+      }
+      assertNotReached();
+      return '';
+    },
+
+    /**
+     * @private
+     * @param {Event} e
+     */
+    onSafeDragstart_: function(e) {
+      e.preventDefault();
+      chrome.send('drag', [this.id_]);
+    },
+
+    /**
+     * @param {Event} e
+     * @private
+     */
+    onFileLinkClick_: function(e) {
+      e.preventDefault();
+      chrome.send('openFile', [this.id_]);
+    },
+
+    /** @private */
+    onShowClick_: function() {
+      chrome.send('show', [this.id_]);
+    },
+
+    /** @private */
+    onPauseClick_: function() {
+      chrome.send('pause', [this.id_]);
+    },
+
+    /** @private */
+    onResumeClick_: function() {
+      chrome.send('resume', [this.id_]);
+    },
+
+    /** @private */
+    onSafeRemoveClick_: function() {
+      chrome.send('remove', [this.id_]);
+    },
+
+    /** @private */
+    onCancelClick_: function() {
+      chrome.send('cancel', [this.id_]);
+    },
+
+    /** @private */
+    onRestoreClick_: function() {
+      this.onSaveClick_();
+    },
+
+    /** @private */
+    onSaveClick_: function() {
+      chrome.send('saveDangerous', [this.id_]);
+    },
+
+    /** @private */
+    onDangerRemoveClick_: function() {
+      this.onDiscardClick_();
+    },
+
+    /** @private */
+    onDiscardClick_: function() {
+      chrome.send('discardDangerous', [this.id_]);
+    },
+  });
+
+  return {ItemView: ItemView};
+});