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

chrome/browser/resources/md_downloads/item.js

 // 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 Item = Polymer({
     is: 'downloads-item',
 
     /**
      * @param {!downloads.ThrottledIconLoader} iconLoader
@@ skipping 22 matching lines @@
           }.bind(this));
         },
       },
 
       scrollbarWidth: {
         type: Number,
         value: 0,
         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. */
       isMalware_: Boolean,
 
       // TODO(dbeam): move all properties to |data_|.
       data_: {
         type: Object,
         value: function() { return {}; },
       },
@@ skipping 38 matching lines @@
       }
 
       /** @const */ var isActive =
           data.state != downloads.States.CANCELLED &&
           data.state != downloads.States.INTERRUPTED &&
           !data.file_externally_removed;
       this.$.content.classList.toggle('is-active', isActive);
       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;
 
       if (this.isDangerous_) {
         this.isMalware_ =
             data.danger_type == downloads.DangerType.DANGEROUS_CONTENT ||
             data.danger_type == downloads.DangerType.DANGEROUS_HOST ||
             data.danger_type == downloads.DangerType.DANGEROUS_URL ||
             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.$['file-link'].hidden = !this.completelyOnDisk_;
+        this.$.name.hidden = this.completelyOnDisk_;
 
-        this.$.retry.hidden = !data.retry;
-
-        /** @const */ var isInProgress =
-            data.state == downloads.States.IN_PROGRESS;
-        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;
-
-        hideRemove = showCancel ||
+        hideRemove = this.showCancel_ ||
             !loadTimeData.getBoolean('allowDeletingHistory');
 
         /** @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.textContent = data.by_ext_name;
         }
 
         var icon = 'chrome://fileicon/' + encodeURIComponent(data.file_path);
         this.iconLoader_.loadScaledIcon(this.$['file-icon'], icon);
       }
 
       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.
      * @param {!Element} el
      * @param {string} text
      * @private
      */
     ensureTextIs_: function(el, text) {
       if (el.textContent != text)
         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
      *     dangerous.
      */
     getDangerText_: function(data) {
       switch (data.danger_type) {
         case downloads.DangerType.DANGEROUS_FILE:
           return loadTimeData.getStringF('dangerFileDesc', data.file_name);
         case downloads.DangerType.DANGEROUS_URL:
@@ skipping 30 matching lines @@
           return data.last_reason_text;
         case downloads.States.COMPLETE:
           return data.file_externally_removed ?
               loadTimeData.getString('statusRemoved') : '';
       }
       assertNotReached();
       return '';
     },
 
     /** @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);
     },
 
     /**
      * @private
      * @param {Event} e
      */
     onDragStart_: function(e) {
       e.preventDefault();
@@ skipping 55 matching lines @@
     },
 
     /** @private */
     onShowClick_: function() {
       this.actionService_.show(this.data_.id);
     },
   });
 
   return {Item: Item};
 });