MD Downloads: wrap some <paper-buttons>s in <template is="dom-if">

chrome/browser/resources/md_downloads/item.js

Index: chrome/browser/resources/md_downloads/item.js
diff --git a/chrome/browser/resources/md_downloads/item.js b/chrome/browser/resources/md_downloads/item.js
index e3aef8f81f6f7c560364e09e5e74013e55acea44..db7ee1ba6405591187cccaa4ebd76d3d6a834b4a 100644
--- a/chrome/browser/resources/md_downloads/item.js
+++ b/chrome/browser/resources/md_downloads/item.js
@@ -40,9 +40,49 @@ cr.define('downloads', function() {
         observer: 'onScrollbarWidthChange_',
       },
 
+      completelyOnDisk_: {
+        type: Boolean,
+        value: true,
+        computed: 'computeCompletelyOnDisk_(' +
+            'data_.state, data_.file_externally_removed)',
+      },
+
+      i18n_: {

[tommycli, 2015/09/08 22:41:24]

This is unfortunate, but I was bitten by the same issue for Breadcrumb today
also, so I understand why you did this.

[Dan Beam, 2015/09/08 23:18:45]

Acknowledged.

+        type: Object,
+        value: function() {
+          return {
+            cancel: loadTimeData.getString('controlCancel'),
+            pause: loadTimeData.getString('controlPause'),
+            resume: loadTimeData.getString('controlResume'),
+            retry: loadTimeData.getString('controlRetry'),
+            show: loadTimeData.getString('controlShowInFolder'),
+          };
+        },
+        readOnly: true,
+      },
+
       isDangerous_: {
         type: Boolean,
         value: false,
+        computed: 'computeIsDangerous_(data_.state)',
+      },
+
+      isInProgress_: {
+        type: Boolean,
+        value: false,
+        computed: 'computeIsInProgress_(data_.state)',
+      },
+
+      showCancel_: {
+        type: Boolean,
+        value: false,
+        computed: 'computeShowCancel_(data_.state)',
+      },
+
+      showProgress_: {
+        type: Boolean,
+        value: false,
+        computed: 'computeShowProgress_(showCancel_, data_.percent)',
       },
 
       /** Only set when |isDangerous| is true. */
@@ -101,24 +141,15 @@ cr.define('downloads', function() {
       this.$.content.elevation = isActive ? 1 : 0;
 
       // Danger-dependent UI and controls.
-      var dangerText = this.getDangerText_(data);
-      this.isDangerous_ = !!dangerText;
       this.$.content.classList.toggle('dangerous', this.isDangerous_);
 
-      var description = dangerText || this.getStatusText_(data);
+      var description = this.getDangerText_(data) || this.getStatusText_(data);
 
       // Status goes in the "tag" (next to the file name) if there's no file.
       this.ensureTextIs_(this.$.description, isActive ? description : '');
       this.ensureTextIs_(this.$.tag, isActive ? '' : description);
 
-      /** @const */ var showProgress =
-          isFinite(data.percent) && !this.isDangerous_;
-      this.$.content.classList.toggle('show-progress', showProgress);
-
-      if (showProgress) {
-        this.$.progress.indeterminate = data.percent < 0;
-        this.$.progress.value = data.percent;
-      }
+      this.$.content.classList.toggle('show-progress', this.showProgress_);
 
       var hideRemove;
 
@@ -130,30 +161,13 @@ cr.define('downloads', function() {
             data.danger_type == downloads.DangerType.POTENTIALLY_UNWANTED;
         hideRemove = true;
       } else {
-        /** @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;
-        this.$.name.hidden = completelyOnDisk;
-        this.$.show.hidden = !completelyOnDisk;
-
-        this.$.retry.hidden = !data.retry;
-
-        /** @const */ var isInProgress =
-            data.state == downloads.States.IN_PROGRESS;
-        this.$.pause.hidden = !isInProgress;
+        this.$['file-link'].hidden = !this.completelyOnDisk_;
+        this.$.name.hidden = this.completelyOnDisk_;
 
-        this.$.resume.hidden = !data.resume;
-
-        /** @const */ var isPaused = data.state == downloads.States.PAUSED;
-        /** @const */ var showCancel = isPaused || isInProgress;
-        this.$.cancel.hidden = !showCancel;
-
-        hideRemove = showCancel ||
+        hideRemove = this.showCancel_ ||
             !loadTimeData.getBoolean('allowDeletingHistory');
 
         /** @const */ var controlledByExtension = data.by_ext_id &&
@@ -172,6 +186,39 @@ cr.define('downloads', function() {
       this.$.remove.style.visibility = hideRemove ? 'hidden' : '';
     },
 
+    /** @private */
+    computeCompletelyOnDisk_: function() {
+      return this.data_.state == downloads.States.COMPLETE &&
+             !this.data_.file_externally_removed;
+    },
+
+    /** @private */
+    computeDate_: function() {
+      assert(!this.hideDate);
+      return assert(this.data_.since_string || this.data_.date_string);
+    },
+
+    /** @private */
+    computeIsInProgress_: function() {
+      return this.data_.state == downloads.States.IN_PROGRESS;
+    },
+
+    /** @private */
+    computeIsDangerous_: function() {
+      return this.data_.state == downloads.States.DANGEROUS;
+    },
+
+    /** @private */
+    computeShowCancel_: function() {
+      return this.data_.state == downloads.States.IN_PROGRESS ||
+             this.data_.state == downloads.States.PAUSED;
+    },
+
+    /** @private */
+    computeShowProgress_: function() {
+      return this.showCancel_ && isFinite(this.data_.percent);
+    },
+
     /**
      * Overwrite |el|'s textContent if it differs from |text|. This is done
      * generally so quickly updating text can be copied via text selection.
@@ -184,12 +231,6 @@ cr.define('downloads', function() {
         el.textContent = text;
     },
 
-    /** @private */
-    computeDate_: function() {
-      assert(!this.hideDate);
-      return assert(this.data_.since_string || this.data_.date_string);
-    },
-
     /**
      * @param {!downloads.Data} data
      * @return {string} Text describing the danger of a download. Empty if not
@@ -240,6 +281,12 @@ cr.define('downloads', function() {
     },
 
     /** @private */
+    isIndeterminate_: function() {

[tommycli, 2015/09/08 22:41:24]

This is called from the HTML with a parameter. Is this supposed to be a
property? Or take a parameter?

[Dan Beam, 2015/09/08 23:18:45]

it could but this.data_.percent is the same as the percent arg passed, so I just
ignore the params so this could be used from another is* or compute* method,
etc.

  elevationOfThing_: function() {
    return this.isDoingSomething_() : 1 : 2;
  }

otherwise there'd be a lot of param passing

[tommycli, 2015/09/09 00:04:32]

Acknowledged.

+      assert(this.showProgress_);
+      return this.data_.percent == -1;
+    },
+
+    /** @private */
     onCancelClick_: function() {
       this.actionService_.cancel(this.data_.id);
     },