WebUI Downloads: format c/b/r/downloads/item.js

Bug: 1116329
Change-Id: Idad6c2885c852c6044a591e0a2a3112adead8d7d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2424383Reviewed-by: John Lee <johntlee@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809793}

chrome/browser/resources/downloads/item.js

@@ -30,649 +30,649 @@ import {DangerType, States} from './constants.js';
 import {IconLoader} from './icon_loader.js';
 
 Polymer({
-    is: 'downloads-item',
-
-    _template: html`{__html_template__}`,
-
-    behaviors: [
-      FocusRowBehavior,
-    ],
-
-    /** Used by FocusRowBehavior. */
-    overrideCustomEquivalent: true,
-
-    properties: {
-      /** @type {!downloads.Data} */
-      data: Object,
-
-      /** @private */
-      completelyOnDisk_: {
-        computed: 'computeCompletelyOnDisk_(' +
-            'data.state, data.fileExternallyRemoved)',
-        type: Boolean,
-        value: true,
-      },
-
-      /** @private */
-      controlledBy_: {
-        computed: 'computeControlledBy_(data.byExtId, data.byExtName)',
-        type: String,
-        value: '',
-      },
-
-      /** @private */
-      controlRemoveFromListAriaLabel_: {
-        type: String,
-        computed: 'computeControlRemoveFromListAriaLabel_(data.fileName)',
-      },
-
-      /** @private */
-      isActive_: {
-        computed: 'computeIsActive_(' +
-            'data.state, data.fileExternallyRemoved)',
-        type: Boolean,
-        value: true,
-      },
-
-      /** @private */
-      isDangerous_: {
-        computed: 'computeIsDangerous_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      isMalware_: {
-        computed: 'computeIsMalware_(isDangerous_, data.dangerType)',
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      isInProgress_: {
-        computed: 'computeIsInProgress_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      pauseOrResumeText_: {
-        computed: 'computePauseOrResumeText_(isInProgress_, data.resume)',
-        type: String,
-        observer: 'updatePauseOrResumeClass_',
-      },
-
-      /** @private */
-      showCancel_: {
-        computed: 'computeShowCancel_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      showProgress_: {
-        computed: 'computeShowProgress_(showCancel_, data.percent)',
-        type: Boolean,
-        value: false,
-      },
-
-      /** @private */
-      showOpenNow_: {
-        computed: 'computeShowOpenNow_(data.state)',
-        type: Boolean,
-        value: false,
-      },
-
-      useFileIcon_: Boolean,
-    },
+  is: 'downloads-item',
 
-    hostAttributes: {
-      role: 'row',
-    },
+  _template: html`{__html_template__}`,
 
-    observers: [
-      // TODO(dbeam): this gets called way more when I observe data.byExtId
-      // and data.byExtName directly. Why?
-      'observeControlledBy_(controlledBy_)',
-      'observeIsDangerous_(isDangerous_, data)',
-      'restoreFocusAfterCancelIfNeeded_(data)',
-    ],
+  behaviors: [
+    FocusRowBehavior,
+  ],
 
-    /** @private {downloads.mojom.PageHandlerInterface} */
-    mojoHandler_: null,
+  /** Used by FocusRowBehavior. */
+  overrideCustomEquivalent: true,
 
-    /** @private {boolean} */
-    restoreFocusAfterCancel_: false,
+  properties: {
+    /** @type {!downloads.Data} */
+    data: Object,
 
-    /** @override */
-    attached() {
-      afterNextRender(this, function() {
-        IronA11yAnnouncer.requestAvailability();
-      });
+    /** @private */
+    completelyOnDisk_: {
+      computed: 'computeCompletelyOnDisk_(' +
+          'data.state, data.fileExternallyRemoved)',
+      type: Boolean,
+      value: true,
     },
 
-    /** @override */
-    ready() {
-      this.mojoHandler_ = BrowserProxy.getInstance().handler;
-      this.content = this.$.content;
+    /** @private */
+    controlledBy_: {
+      computed: 'computeControlledBy_(data.byExtId, data.byExtName)',
+      type: String,
+      value: '',
     },
 
-    focusOnRemoveButton() {
-      focusWithoutInk(this.$.remove);
+    /** @private */
+    controlRemoveFromListAriaLabel_: {
+      type: String,
+      computed: 'computeControlRemoveFromListAriaLabel_(data.fileName)',
     },
 
-    /** Overrides FocusRowBehavior. */
-    getCustomEquivalent(sampleElement) {
-      if (sampleElement.getAttribute('focus-type') === 'cancel') {
-        return this.$$('[focus-type="retry"]');
-      }
-      if (sampleElement.getAttribute('focus-type') === 'retry') {
-        return this.$$('[focus-type="pauseOrResume"]');
-      }
-      return null;
+    /** @private */
+    isActive_: {
+      computed: 'computeIsActive_(' +
+          'data.state, data.fileExternallyRemoved)',
+      type: Boolean,
+      value: true,
     },
 
-    /** @return {!HTMLElement} */
-    getFileIcon() {
-      return /** @type {!HTMLElement} */ (this.$['file-icon']);
+    /** @private */
+    isDangerous_: {
+      computed: 'computeIsDangerous_(data.state)',
+      type: Boolean,
+      value: false,
     },
 
-    /**
-     * @param {string} url
-     * @return {string} A reasonably long URL.
-     * @private
-     */
-    chopUrl_(url) {
-      return url.slice(0, 300);
+    /** @private */
+    isMalware_: {
+      computed: 'computeIsMalware_(isDangerous_, data.dangerType)',
+      type: Boolean,
+      value: false,
     },
 
     /** @private */
-    computeClass_() {
-      const classes = [];
-
-      if (this.isActive_) {
-        classes.push('is-active');
-      }
-
-      if (this.isDangerous_) {
-        classes.push('dangerous');
-      }
-
-      if (this.showProgress_) {
-        classes.push('show-progress');
-      }
-
-      return classes.join(' ');
+    isInProgress_: {
+      computed: 'computeIsInProgress_(data.state)',
+      type: Boolean,
+      value: false,
     },
 
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeCompletelyOnDisk_() {
-      return this.data.state === States.COMPLETE &&
-          !this.data.fileExternallyRemoved;
+    /** @private */
+    pauseOrResumeText_: {
+      computed: 'computePauseOrResumeText_(isInProgress_, data.resume)',
+      type: String,
+      observer: 'updatePauseOrResumeClass_',
     },
 
-    /**
-     * @return {string}
-     * @private
-     */
-    computeControlledBy_() {
-      if (!this.data.byExtId || !this.data.byExtName) {
-        return '';
-      }
-
-      const url = `chrome://extensions/?id=${this.data.byExtId}`;
-      const name = this.data.byExtName;
-      return loadTimeData.getStringF('controlledByUrl', url, HTMLEscape(name));
+    /** @private */
+    showCancel_: {
+      computed: 'computeShowCancel_(data.state)',
+      type: Boolean,
+      value: false,
     },
 
-    /**
-     * @return {string}
-     * @private
-     */
-    computeControlRemoveFromListAriaLabel_() {
-      return loadTimeData.getStringF(
-          'controlRemoveFromListAriaLabel', this.data.fileName);
+    /** @private */
+    showProgress_: {
+      computed: 'computeShowProgress_(showCancel_, data.percent)',
+      type: Boolean,
+      value: false,
     },
 
-    /**
-     * @return {string}
-     * @private
-     */
-    computeDate_() {
-      assert(typeof this.data.hideDate === 'boolean');
-      if (this.data.hideDate) {
-        return '';
-      }
-      return assert(this.data.sinceString || this.data.dateString);
-    },
+    /** @private */
+    showOpenNow_: {
+      computed: 'computeShowOpenNow_(data.state)',
+      type: Boolean,
+      value: false,
+    },
+
+    useFileIcon_: Boolean,
+  },
+
+  hostAttributes: {
+    role: 'row',
+  },
+
+  observers: [
+    // TODO(dbeam): this gets called way more when I observe data.byExtId
+    // and data.byExtName directly. Why?
+    'observeControlledBy_(controlledBy_)',
+    'observeIsDangerous_(isDangerous_, data)',
+    'restoreFocusAfterCancelIfNeeded_(data)',
+  ],
+
+  /** @private {downloads.mojom.PageHandlerInterface} */
+  mojoHandler_: null,
+
+  /** @private {boolean} */
+  restoreFocusAfterCancel_: false,
+
+  /** @override */
+  attached() {
+    afterNextRender(this, function() {
+      IronA11yAnnouncer.requestAvailability();
+    });
+  },
+
+  /** @override */
+  ready() {
+    this.mojoHandler_ = BrowserProxy.getInstance().handler;
+    this.content = this.$.content;
+  },
+
+  focusOnRemoveButton() {
+    focusWithoutInk(this.$.remove);
+  },
+
+  /** Overrides FocusRowBehavior. */
+  getCustomEquivalent(sampleElement) {
+    if (sampleElement.getAttribute('focus-type') === 'cancel') {
+      return this.$$('[focus-type="retry"]');
+    }
+    if (sampleElement.getAttribute('focus-type') === 'retry') {
+      return this.$$('[focus-type="pauseOrResume"]');
+    }
+    return null;
+  },
+
+  /** @return {!HTMLElement} */
+  getFileIcon() {
+    return /** @type {!HTMLElement} */ (this.$['file-icon']);
+  },
+
+  /**
+   * @param {string} url
+   * @return {string} A reasonably long URL.
+   * @private
+   */
+  chopUrl_(url) {
+    return url.slice(0, 300);
+  },
+
+  /** @private */
+  computeClass_() {
+    const classes = [];
+
+    if (this.isActive_) {
+      classes.push('is-active');
+    }
 
-    /** @private @return {boolean} */
-    computeDescriptionVisible_() {
-      return this.computeDescription_() !== '';
-    },
+    if (this.isDangerous_) {
+      classes.push('dangerous');
+    }
 
-    /**
-     * @return {string}
-     * @private
-     */
-    computeDescription_() {
-      const data = this.data;
-
-      switch (data.state) {
-        case States.COMPLETE:
-          switch (data.dangerType) {
-            case DangerType.DEEP_SCANNED_SAFE:
-              return loadTimeData.getString('deepScannedSafeDesc');
-            case DangerType.DEEP_SCANNED_OPENED_DANGEROUS:
-              return loadTimeData.getString('deepScannedOpenedDangerousDesc');
-          }
-          break;
-
-        case States.MIXED_CONTENT:
-          return loadTimeData.getString('mixedContentDownloadDesc');
-
-        case States.DANGEROUS:
-          const fileName = data.fileName;
-          switch (data.dangerType) {
-            case DangerType.DANGEROUS_FILE:
-              return loadTimeData.getString('dangerFileDesc');
-
-            case DangerType.DANGEROUS_URL:
-            case DangerType.DANGEROUS_CONTENT:
-            case DangerType.DANGEROUS_HOST:
-              return loadTimeData.getString('dangerDownloadDesc');
-
-            case DangerType.UNCOMMON_CONTENT:
-              return loadTimeData.getString('dangerUncommonDesc');
-
-            case DangerType.POTENTIALLY_UNWANTED:
-              return loadTimeData.getString('dangerSettingsDesc');
-
-            case DangerType.SENSITIVE_CONTENT_WARNING:
-              return loadTimeData.getString('sensitiveContentWarningDesc');
-          }
-          break;
-
-        case States.ASYNC_SCANNING:
-          return loadTimeData.getString('asyncScanningDownloadDesc');
-
-        case States.IN_PROGRESS:
-        case States.PAUSED:  // Fallthrough.
-          return data.progressStatusText;
-
-        case States.INTERRUPTED:
-          switch (data.dangerType) {
-            case DangerType.SENSITIVE_CONTENT_BLOCK:
-              return loadTimeData.getString('sensitiveContentBlockedDesc');
-            case DangerType.BLOCKED_TOO_LARGE:
-              return loadTimeData.getString('blockedTooLargeDesc');
-            case DangerType.BLOCKED_PASSWORD_PROTECTED:
-              return loadTimeData.getString('blockedPasswordProtectedDesc');
-          }
-      }
+    if (this.showProgress_) {
+      classes.push('show-progress');
+    }
 
+    return classes.join(' ');
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeCompletelyOnDisk_() {
+    return this.data.state === States.COMPLETE &&
+        !this.data.fileExternallyRemoved;
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeControlledBy_() {
+    if (!this.data.byExtId || !this.data.byExtName) {
       return '';
-    },
-
-    /**
-     * @return {string}
-     * @private
-     */
-    computeIcon_() {
-      if (this.data) {
-        const dangerType = this.data.dangerType;
-        if ((loadTimeData.getBoolean('requestsApVerdicts') &&
-             dangerType === DangerType.UNCOMMON_CONTENT) ||
-            dangerType === DangerType.SENSITIVE_CONTENT_WARNING) {
-          return 'cr:warning';
-        }
-
-        const ERROR_TYPES = [
-          DangerType.SENSITIVE_CONTENT_BLOCK,
-          DangerType.BLOCKED_TOO_LARGE,
-          DangerType.BLOCKED_PASSWORD_PROTECTED,
-        ];
-        if (ERROR_TYPES.includes(dangerType)) {
-          return 'cr:error';
-        }
+    }
 
-        if (this.data.state === States.ASYNC_SCANNING) {
-          return 'cr:info';
-        }
-      }
-      if (this.isDangerous_) {
-        return 'cr:error';
-      }
-      if (!this.useFileIcon_) {
-        return 'cr:insert-drive-file';
-      }
+    const url = `chrome://extensions/?id=${this.data.byExtId}`;
+    const name = this.data.byExtName;
+    return loadTimeData.getStringF('controlledByUrl', url, HTMLEscape(name));
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeControlRemoveFromListAriaLabel_() {
+    return loadTimeData.getStringF(
+        'controlRemoveFromListAriaLabel', this.data.fileName);
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeDate_() {
+    assert(typeof this.data.hideDate === 'boolean');
+    if (this.data.hideDate) {
       return '';
-    },
-
-    /**
-     * @return {string}
-     * @private
-     */
-    computeIconColor_() {
-      if (this.data) {
-        const dangerType = this.data.dangerType;
-        if ((loadTimeData.getBoolean('requestsApVerdicts') &&
-             dangerType === DangerType.UNCOMMON_CONTENT) ||
-            dangerType === DangerType.SENSITIVE_CONTENT_WARNING) {
-          return 'yellow';
+    }
+    return assert(this.data.sinceString || this.data.dateString);
+  },
+
+  /** @private @return {boolean} */
+  computeDescriptionVisible_() {
+    return this.computeDescription_() !== '';
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeDescription_() {
+    const data = this.data;
+
+    switch (data.state) {
+      case States.COMPLETE:
+        switch (data.dangerType) {
+          case DangerType.DEEP_SCANNED_SAFE:
+            return loadTimeData.getString('deepScannedSafeDesc');
+          case DangerType.DEEP_SCANNED_OPENED_DANGEROUS:
+            return loadTimeData.getString('deepScannedOpenedDangerousDesc');
         }
+        break;
 
-        const WARNING_TYPES = [
-          DangerType.SENSITIVE_CONTENT_BLOCK,
-          DangerType.BLOCKED_TOO_LARGE,
-          DangerType.BLOCKED_PASSWORD_PROTECTED,
-        ];
-        if (WARNING_TYPES.includes(dangerType)) {
-          return 'red';
-        }
+      case States.MIXED_CONTENT:
+        return loadTimeData.getString('mixedContentDownloadDesc');
 
-        if (this.data.state === States.ASYNC_SCANNING) {
-          return 'grey';
-        }
-      }
-      if (this.isDangerous_) {
-        return 'red';
-      }
-      if (!this.useFileIcon_) {
-        return 'paper-grey';
-      }
-      return '';
-    },
+      case States.DANGEROUS:
+        const fileName = data.fileName;
+        switch (data.dangerType) {
+          case DangerType.DANGEROUS_FILE:
+            return loadTimeData.getString('dangerFileDesc');
 
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeIsActive_() {
-      return this.data.state !== States.CANCELLED &&
-          this.data.state !== States.INTERRUPTED &&
-          !this.data.fileExternallyRemoved;
-    },
+          case DangerType.DANGEROUS_URL:
+          case DangerType.DANGEROUS_CONTENT:
+          case DangerType.DANGEROUS_HOST:
+            return loadTimeData.getString('dangerDownloadDesc');
 
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeIsDangerous_() {
-      return this.data.state === States.DANGEROUS ||
-             this.data.state === States.MIXED_CONTENT;
-    },
+          case DangerType.UNCOMMON_CONTENT:
+            return loadTimeData.getString('dangerUncommonDesc');
 
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeIsInProgress_() {
-      return this.data.state === States.IN_PROGRESS;
-    },
-
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeIsMalware_() {
-      return this.isDangerous_ &&
-          (this.data.dangerType === DangerType.DANGEROUS_CONTENT ||
-           this.data.dangerType === DangerType.DANGEROUS_HOST ||
-           this.data.dangerType === DangerType.DANGEROUS_URL ||
-           this.data.dangerType === DangerType.POTENTIALLY_UNWANTED);
-    },
-
-    /** @private */
-    toggleButtonClass_() {
-      this.$$('#pauseOrResume')
-          .classList.toggle(
-              'action-button',
-              this.pauseOrResumeText_ ===
-                  loadTimeData.getString('controlResume'));
-    },
-
-    /** @private */
-    updatePauseOrResumeClass_() {
-      if (!this.pauseOrResumeText_) {
-        return;
-      }
+          case DangerType.POTENTIALLY_UNWANTED:
+            return loadTimeData.getString('dangerSettingsDesc');
 
-      // Wait for dom-if to switch to true, in case the text has just changed
-      // from empty.
-      beforeNextRender(this, () => this.toggleButtonClass_());
-    },
-
-    /**
-     * @return {string}
-     * @private
-     */
-    computePauseOrResumeText_() {
-      if (this.data === undefined) {
-        return '';
-      }
+          case DangerType.SENSITIVE_CONTENT_WARNING:
+            return loadTimeData.getString('sensitiveContentWarningDesc');
+        }
+        break;
+
+      case States.ASYNC_SCANNING:
+        return loadTimeData.getString('asyncScanningDownloadDesc');
+
+      case States.IN_PROGRESS:
+      case States.PAUSED:  // Fallthrough.
+        return data.progressStatusText;
+
+      case States.INTERRUPTED:
+        switch (data.dangerType) {
+          case DangerType.SENSITIVE_CONTENT_BLOCK:
+            return loadTimeData.getString('sensitiveContentBlockedDesc');
+          case DangerType.BLOCKED_TOO_LARGE:
+            return loadTimeData.getString('blockedTooLargeDesc');
+          case DangerType.BLOCKED_PASSWORD_PROTECTED:
+            return loadTimeData.getString('blockedPasswordProtectedDesc');
+        }
+    }
 
-      if (this.isInProgress_) {
-        return loadTimeData.getString('controlPause');
-      }
-      if (this.data.resume) {
-        return loadTimeData.getString('controlResume');
+    return '';
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeIcon_() {
+    if (this.data) {
+      const dangerType = this.data.dangerType;
+      if ((loadTimeData.getBoolean('requestsApVerdicts') &&
+           dangerType === DangerType.UNCOMMON_CONTENT) ||
+          dangerType === DangerType.SENSITIVE_CONTENT_WARNING) {
+        return 'cr:warning';
       }
-      return '';
-    },
 
-    /**
-     * @return {string}
-     * @private
-     */
-    computeRemoveStyle_() {
-      const canDelete = loadTimeData.getBoolean('allowDeletingHistory');
-      const hideRemove = this.isDangerous_ || this.showCancel_ || !canDelete;
-      return hideRemove ? 'visibility: hidden' : '';
-    },
-
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeShowCancel_() {
-      return this.data.state === States.IN_PROGRESS ||
-          this.data.state === States.PAUSED ||
-          this.data.state === States.ASYNC_SCANNING;
-    },
-
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeShowProgress_() {
-      return this.showCancel_ && this.data.percent >= -1 &&
-          this.data.state !== States.ASYNC_SCANNING;
-    },
-
-    /**
-     * @return {boolean}
-     * @private
-     */
-    computeShowOpenNow_() {
-      const allowOpenNow = loadTimeData.getBoolean('allowOpenNow');
-      return this.data.state === States.ASYNC_SCANNING && allowOpenNow;
-    },
-
-    /**
-     * @return {string}
-     * @private
-     */
-    computeTag_() {
-      switch (this.data.state) {
-        case States.CANCELLED:
-          return loadTimeData.getString('statusCancelled');
-
-        case States.INTERRUPTED:
-          return this.data.lastReasonText;
-
-        case States.COMPLETE:
-          return this.data.fileExternallyRemoved ?
-              loadTimeData.getString('statusRemoved') :
-              '';
+      const ERROR_TYPES = [
+        DangerType.SENSITIVE_CONTENT_BLOCK,
+        DangerType.BLOCKED_TOO_LARGE,
+        DangerType.BLOCKED_PASSWORD_PROTECTED,
+      ];
+      if (ERROR_TYPES.includes(dangerType)) {
+        return 'cr:error';
       }
 
-      return '';
-    },
-
-    /**
-     * @return {boolean}
-     * @private
-     */
-    isIndeterminate_() {
-      return this.data.percent === -1;
-    },
-
-    /** @private */
-    observeControlledBy_() {
-      this.$['controlled-by'].innerHTML = this.controlledBy_;
-      if (this.controlledBy_) {
-        const link = this.$$('#controlled-by a');
-        link.setAttribute('focus-row-control', '');
-        link.setAttribute('focus-type', 'controlledBy');
+      if (this.data.state === States.ASYNC_SCANNING) {
+        return 'cr:info';
       }
-    },
-
-    /** @private */
-    observeIsDangerous_() {
-      if (!this.data) {
-        return;
+    }
+    if (this.isDangerous_) {
+      return 'cr:error';
+    }
+    if (!this.useFileIcon_) {
+      return 'cr:insert-drive-file';
+    }
+    return '';
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeIconColor_() {
+    if (this.data) {
+      const dangerType = this.data.dangerType;
+      if ((loadTimeData.getBoolean('requestsApVerdicts') &&
+           dangerType === DangerType.UNCOMMON_CONTENT) ||
+          dangerType === DangerType.SENSITIVE_CONTENT_WARNING) {
+        return 'yellow';
       }
 
-      const OVERRIDDEN_ICON_TYPES = [
+      const WARNING_TYPES = [
         DangerType.SENSITIVE_CONTENT_BLOCK,
         DangerType.BLOCKED_TOO_LARGE,
         DangerType.BLOCKED_PASSWORD_PROTECTED,
       ];
-
-      if (this.isDangerous_) {
-        this.$.url.removeAttribute('href');
-        this.useFileIcon_ = false;
-      } else if (OVERRIDDEN_ICON_TYPES.includes(this.data.dangerType)) {
-        this.useFileIcon_ = false;
-      } else if (this.data.state === States.ASYNC_SCANNING) {
-        this.useFileIcon_ = false;
-      } else {
-        this.$.url.href = assert(this.data.url);
-        const path = this.data.filePath;
-        IconLoader.getInstance()
-            .loadIcon(this.$['file-icon'], path)
-            .then(success => {
-              if (path === this.data.filePath && this.data.state !==
-                  States.ASYNC_SCANNING) {
-                this.useFileIcon_ = success;
-              }
-            });
+      if (WARNING_TYPES.includes(dangerType)) {
+        return 'red';
       }
-    },
-
-    /** @private */
-    onCancelTap_() {
-      this.restoreFocusAfterCancel_ = true;
-      this.mojoHandler_.cancel(this.data.id);
-    },
-
-    /** @private */
-    onDiscardDangerousTap_() {
-      this.mojoHandler_.discardDangerous(this.data.id);
-    },
-
-    /** @private */
-    onOpenNowTap_() {
-      this.mojoHandler_.openDuringScanningRequiringGesture(this.data.id);
-    },
 
-    /**
-     * @private
-     * @param {Event} e
-     */
-    onDragStart_(e) {
-      e.preventDefault();
-      this.mojoHandler_.drag(this.data.id);
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onFileLinkTap_(e) {
-      e.preventDefault();
-      this.mojoHandler_.openFileRequiringGesture(this.data.id);
-    },
-
-    /** @private */
-    onUrlTap_() {
-      chrome.send('metricsHandler:recordAction',
-        ['Downloads_OpenUrlOfDownloadedItem']);
-    },
-
-    /** @private */
-    onPauseOrResumeTap_() {
-      if (this.isInProgress_) {
-        this.mojoHandler_.pause(this.data.id);
-      } else {
-        this.mojoHandler_.resume(this.data.id);
+      if (this.data.state === States.ASYNC_SCANNING) {
+        return 'grey';
       }
-    },
+    }
+    if (this.isDangerous_) {
+      return 'red';
+    }
+    if (!this.useFileIcon_) {
+      return 'paper-grey';
+    }
+    return '';
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsActive_() {
+    return this.data.state !== States.CANCELLED &&
+        this.data.state !== States.INTERRUPTED &&
+        !this.data.fileExternallyRemoved;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsDangerous_() {
+    return this.data.state === States.DANGEROUS ||
+        this.data.state === States.MIXED_CONTENT;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsInProgress_() {
+    return this.data.state === States.IN_PROGRESS;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeIsMalware_() {
+    return this.isDangerous_ &&
+        (this.data.dangerType === DangerType.DANGEROUS_CONTENT ||
+         this.data.dangerType === DangerType.DANGEROUS_HOST ||
+         this.data.dangerType === DangerType.DANGEROUS_URL ||
+         this.data.dangerType === DangerType.POTENTIALLY_UNWANTED);
+  },
+
+  /** @private */
+  toggleButtonClass_() {
+    this.$$('#pauseOrResume')
+        .classList.toggle(
+            'action-button',
+            this.pauseOrResumeText_ ===
+                loadTimeData.getString('controlResume'));
+  },
+
+  /** @private */
+  updatePauseOrResumeClass_() {
+    if (!this.pauseOrResumeText_) {
+      return;
+    }
 
-    /** @private */
-    onRemoveTap_() {
-      this.mojoHandler_.remove(this.data.id);
-      const pieces = loadTimeData.getSubstitutedStringPieces(
-          loadTimeData.getString('toastRemovedFromList'), this.data.fileName);
-      pieces.forEach(p => {
-        // Make the file name collapsible.
-        p.collapsible = !!p.arg;
-      });
-      const canUndo = !this.data.isDangerous && !this.data.isMixedContent;
-      getToastManager().showForStringPieces(
-          /**
-           * @type {!Array<{collapsible: boolean,
-           *                 value: string,
-           *                 arg: (string|null)}>}
-           */
-          (pieces), /* hideSlotted= */ !canUndo);
-      if (canUndo) {
-        this.fire('iron-announce', {
-          text: loadTimeData.getString('undoDescription'),
-        });
-      }
-    },
+    // Wait for dom-if to switch to true, in case the text has just changed
+    // from empty.
+    beforeNextRender(this, () => this.toggleButtonClass_());
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computePauseOrResumeText_() {
+    if (this.data === undefined) {
+      return '';
+    }
 
-    /** @private */
-    onRetryTap_() {
-      this.mojoHandler_.retryDownload(this.data.id);
-    },
+    if (this.isInProgress_) {
+      return loadTimeData.getString('controlPause');
+    }
+    if (this.data.resume) {
+      return loadTimeData.getString('controlResume');
+    }
+    return '';
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeRemoveStyle_() {
+    const canDelete = loadTimeData.getBoolean('allowDeletingHistory');
+    const hideRemove = this.isDangerous_ || this.showCancel_ || !canDelete;
+    return hideRemove ? 'visibility: hidden' : '';
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeShowCancel_() {
+    return this.data.state === States.IN_PROGRESS ||
+        this.data.state === States.PAUSED ||
+        this.data.state === States.ASYNC_SCANNING;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeShowProgress_() {
+    return this.showCancel_ && this.data.percent >= -1 &&
+        this.data.state !== States.ASYNC_SCANNING;
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeShowOpenNow_() {
+    const allowOpenNow = loadTimeData.getBoolean('allowOpenNow');
+    return this.data.state === States.ASYNC_SCANNING && allowOpenNow;
+  },
+
+  /**
+   * @return {string}
+   * @private
+   */
+  computeTag_() {
+    switch (this.data.state) {
+      case States.CANCELLED:
+        return loadTimeData.getString('statusCancelled');
+
+      case States.INTERRUPTED:
+        return this.data.lastReasonText;
+
+      case States.COMPLETE:
+        return this.data.fileExternallyRemoved ?
+            loadTimeData.getString('statusRemoved') :
+            '';
+    }
 
-    /** @private */
-    onSaveDangerousTap_() {
-      this.mojoHandler_.saveDangerousRequiringGesture(this.data.id);
-    },
+    return '';
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isIndeterminate_() {
+    return this.data.percent === -1;
+  },
+
+  /** @private */
+  observeControlledBy_() {
+    this.$['controlled-by'].innerHTML = this.controlledBy_;
+    if (this.controlledBy_) {
+      const link = this.$$('#controlled-by a');
+      link.setAttribute('focus-row-control', '');
+      link.setAttribute('focus-type', 'controlledBy');
+    }
+  },
 
-    /** @private */
-    onShowTap_() {
-      this.mojoHandler_.show(this.data.id);
-    },
+  /** @private */
+  observeIsDangerous_() {
+    if (!this.data) {
+      return;
+    }
 
-    /** @private */
-    restoreFocusAfterCancelIfNeeded_() {
-      if (!this.restoreFocusAfterCancel_) {
-        return;
-      }
-      this.restoreFocusAfterCancel_ = false;
-      setTimeout(() => {
-        const element = this.getFocusRow().getFirstFocusable('retry');
-        if (element) {
-          element.focus();
-        }
+    const OVERRIDDEN_ICON_TYPES = [
+      DangerType.SENSITIVE_CONTENT_BLOCK,
+      DangerType.BLOCKED_TOO_LARGE,
+      DangerType.BLOCKED_PASSWORD_PROTECTED,
+    ];
+
+    if (this.isDangerous_) {
+      this.$.url.removeAttribute('href');
+      this.useFileIcon_ = false;
+    } else if (OVERRIDDEN_ICON_TYPES.includes(this.data.dangerType)) {
+      this.useFileIcon_ = false;
+    } else if (this.data.state === States.ASYNC_SCANNING) {
+      this.useFileIcon_ = false;
+    } else {
+      this.$.url.href = assert(this.data.url);
+      const path = this.data.filePath;
+      IconLoader.getInstance()
+          .loadIcon(this.$['file-icon'], path)
+          .then(success => {
+            if (path === this.data.filePath &&
+                this.data.state !== States.ASYNC_SCANNING) {
+              this.useFileIcon_ = success;
+            }
+          });
+    }
+  },
+
+  /** @private */
+  onCancelTap_() {
+    this.restoreFocusAfterCancel_ = true;
+    this.mojoHandler_.cancel(this.data.id);
+  },
+
+  /** @private */
+  onDiscardDangerousTap_() {
+    this.mojoHandler_.discardDangerous(this.data.id);
+  },
+
+  /** @private */
+  onOpenNowTap_() {
+    this.mojoHandler_.openDuringScanningRequiringGesture(this.data.id);
+  },
+
+  /**
+   * @private
+   * @param {Event} e
+   */
+  onDragStart_(e) {
+    e.preventDefault();
+    this.mojoHandler_.drag(this.data.id);
+  },
+
+  /**
+   * @param {Event} e
+   * @private
+   */
+  onFileLinkTap_(e) {
+    e.preventDefault();
+    this.mojoHandler_.openFileRequiringGesture(this.data.id);
+  },
+
+  /** @private */
+  onUrlTap_() {
+    chrome.send(
+        'metricsHandler:recordAction', ['Downloads_OpenUrlOfDownloadedItem']);
+  },
+
+  /** @private */
+  onPauseOrResumeTap_() {
+    if (this.isInProgress_) {
+      this.mojoHandler_.pause(this.data.id);
+    } else {
+      this.mojoHandler_.resume(this.data.id);
+    }
+  },
+
+  /** @private */
+  onRemoveTap_() {
+    this.mojoHandler_.remove(this.data.id);
+    const pieces = loadTimeData.getSubstitutedStringPieces(
+        loadTimeData.getString('toastRemovedFromList'), this.data.fileName);
+    pieces.forEach(p => {
+      // Make the file name collapsible.
+      p.collapsible = !!p.arg;
+    });
+    const canUndo = !this.data.isDangerous && !this.data.isMixedContent;
+    getToastManager().showForStringPieces(
+        /**
+         * @type {!Array<{collapsible: boolean,
+         *                 value: string,
+         *                 arg: (string|null)}>}
+         */
+        (pieces), /* hideSlotted= */ !canUndo);
+    if (canUndo) {
+      this.fire('iron-announce', {
+        text: loadTimeData.getString('undoDescription'),
       });
     }
-  });
+  },
+
+  /** @private */
+  onRetryTap_() {
+    this.mojoHandler_.retryDownload(this.data.id);
+  },
+
+  /** @private */
+  onSaveDangerousTap_() {
+    this.mojoHandler_.saveDangerousRequiringGesture(this.data.id);
+  },
+
+  /** @private */
+  onShowTap_() {
+    this.mojoHandler_.show(this.data.id);
+  },
+
+  /** @private */
+  restoreFocusAfterCancelIfNeeded_() {
+    if (!this.restoreFocusAfterCancel_) {
+      return;
+    }
+    this.restoreFocusAfterCancel_ = false;
+    setTimeout(() => {
+      const element = this.getFocusRow().getFirstFocusable('retry');
+      if (element) {
+        element.focus();
+      }
+    });
+  },
+});