downloads: put [column-type] in HTML template instead of JS.

chrome/browser/resources/downloads/item_view.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() {
   /** @const */ var Item = downloads.Item;
 
   /**
    * Creates and updates the DOM representation for a download.
    * @constructor
    */
   function ItemView() {
     this.node = $('templates').querySelector('.download').cloneNode(true);
 
     this.safe_ = this.queryRequired_('.safe');
     this.since_ = this.queryRequired_('.since');
     this.dateContainer = this.queryRequired_('.date-container');
     this.date_ = this.queryRequired_('.date');
     this.save_ = this.queryRequired_('.save');
     this.backgroundProgress_ = this.queryRequired_('.progress.background');
     this.foregroundProgress_ = /** @type !HTMLCanvasElement */(
         this.queryRequired_('canvas.progress'));
     this.safeImg_ = /** @type !HTMLImageElement */(
         this.queryRequired_('.safe img'));
     this.fileName_ = this.queryRequired_('span.name');
-    this.fileLink = this.queryRequired_('[is="action-link"].name');
+    this.fileLink_ = this.queryRequired_('[is="action-link"].name');
     this.status_ = this.queryRequired_('.status');
-    this.srcUrl = this.queryRequired_('.src-url');
-    this.show = this.queryRequired_('.show');
-    this.retry = this.queryRequired_('.retry');
-    this.pause = this.queryRequired_('.pause');
-    this.resume = this.queryRequired_('.resume');
-    this.safeRemove = this.queryRequired_('.safe .remove');
-    this.cancel = this.queryRequired_('.cancel');
-    this.controlledBy = this.queryRequired_('.controlled-by');
+    this.srcUrl_ = this.queryRequired_('.src-url');
+    this.show_ = this.queryRequired_('.show');
+    this.retry_ = this.queryRequired_('.retry');
+    this.pause_ = this.queryRequired_('.pause');
+    this.resume_ = this.queryRequired_('.resume');
+    this.safeRemove_ = this.queryRequired_('.safe .remove');
+    this.cancel_ = this.queryRequired_('.cancel');
+    this.controlledBy_ = this.queryRequired_('.controlled-by');
 
     this.dangerous_ = this.queryRequired_('.dangerous');
     this.dangerImg_ = /** @type {!HTMLImageElement} */(
         this.queryRequired_('.dangerous img'));
     this.description_ = this.queryRequired_('.description');
     this.malwareControls_ = this.queryRequired_('.dangerous .controls');
-    this.restore = this.queryRequired_('.restore');
-    this.dangerRemove = this.queryRequired_('.dangerous .remove');
-    this.save = this.queryRequired_('.save');
-    this.discard = this.queryRequired_('.discard');
+    this.restore_ = this.queryRequired_('.restore');
+    this.dangerRemove_ = this.queryRequired_('.dangerous .remove');
+    this.save_ = this.queryRequired_('.save');
+    this.discard_ = this.queryRequired_('.discard');
 
     // Event handlers (bound once on creation).
     this.safe_.ondragstart = this.onSafeDragstart_.bind(this);
-    this.fileLink.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.safeRemove.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.dangerRemove.onclick = this.onDangerRemoveClick_.bind(this);
-    this.discard.onclick = this.onDiscardClick_.bind(this);
+    this.fileLink_.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.safeRemove_.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.dangerRemove_.onclick = this.onDangerRemoveClick_.bind(this);
+    this.discard_.onclick = this.onDiscardClick_.bind(this);
   }
 
   /** Progress meter constants. */
   ItemView.Progress = {
     /** @const {number} */
     START_ANGLE: -0.5 * Math.PI,
     /** @const {number} */
     SIDE: 48,
   };
 
@@ skipping 110 matching lines @@
         var idr = dangerousFile ? 'IDR_WARNING' : 'IDR_SAFEBROWSING_WARNING';
         ItemView.loadScaledIcon(this.dangerImg_, 'chrome://theme/' + idr);
 
         var showMalwareControls =
             data.danger_type == Item.DangerType.DANGEROUS_CONTENT ||
             data.danger_type == Item.DangerType.DANGEROUS_HOST ||
             data.danger_type == Item.DangerType.DANGEROUS_URL ||
             data.danger_type == Item.DangerType.POTENTIALLY_UNWANTED;
 
         this.malwareControls_.hidden = !showMalwareControls;
-        this.discard.hidden = showMalwareControls;
-        this.save.hidden = showMalwareControls;
+        this.discard_.hidden = showMalwareControls;
+        this.save_.hidden = showMalwareControls;
       } else {
         var path = encodeURIComponent(data.file_path);
         ItemView.loadScaledIcon(this.safeImg_, 'chrome://fileicon/' + path);
 
         /** @const */ var isInProgress = data.state == Item.States.IN_PROGRESS;
         this.node.classList.toggle('in-progress', isInProgress);
 
         /** @const */ var completelyOnDisk =
             data.state == Item.States.COMPLETE && !data.file_externally_removed;
 
-        this.fileLink.href = data.url;
-        this.ensureTextIs_(this.fileLink, data.file_name);
-        this.fileLink.hidden = !completelyOnDisk;
+        this.fileLink_.href = data.url;
+        this.ensureTextIs_(this.fileLink_, data.file_name);
+        this.fileLink_.hidden = !completelyOnDisk;
 
         /** @const */ var isInterrupted = data.state == Item.States.INTERRUPTED;
         this.fileName_.classList.toggle('interrupted', isInterrupted);
         this.ensureTextIs_(this.fileName_, data.file_name);
         this.fileName_.hidden = completelyOnDisk;
 
-        this.show.hidden = !completelyOnDisk;
+        this.show_.hidden = !completelyOnDisk;
 
-        this.retry.href = data.url;
-        this.retry.hidden = !data.retry;
+        this.retry_.href = data.url;
+        this.retry_.hidden = !data.retry;
 
-        this.pause.hidden = !isInProgress;
+        this.pause_.hidden = !isInProgress;
 
-        this.resume.hidden = !data.resume;
+        this.resume_.hidden = !data.resume;
 
         /** @const */ var isPaused = data.state == Item.States.PAUSED;
         /** @const */ var showCancel = isPaused || isInProgress;
-        this.cancel.hidden = !showCancel;
+        this.cancel_.hidden = !showCancel;
 
-        this.safeRemove.hidden = showCancel ||
+        this.safeRemove_.hidden = showCancel ||
             !loadTimeData.getBoolean('allow_deleting_history');
 
         /** @const */ var controlledByExtension = data.by_ext_id &&
                                                   data.by_ext_name;
-        this.controlledBy.hidden = !controlledByExtension;
+        this.controlledBy_.hidden = !controlledByExtension;
         if (controlledByExtension) {
-          var link = this.controlledBy.querySelector('a');
+          var link = this.controlledBy_.querySelector('a');

[hcarmona, 2015/03/12 17:28:32]

|link| should be the focusable element rather than |controlledBy_| in order to
toggle |link|'s TAB-ability.

[Dan Beam, 2015/03/12 18:52:39]

i noticed this but figured that's what downloads.js did before I split it into
item_view.js, but looking again: you're right -- controlByExtensionLink_
https://codereview.chromium.org/977473002/diff/370001/chrome/browser/resource...

Done.

           link.href = 'chrome://extensions#' + data.by_ext_id;
           link.textContent = data.by_ext_name;
         }
 
         this.ensureTextIs_(this.since_, data.since_string);
         this.ensureTextIs_(this.date_, data.date_string);
-        this.ensureTextIs_(this.srcUrl, data.url);
-        this.srcUrl.href = data.url;
+        this.ensureTextIs_(this.srcUrl_, data.url);
+        this.srcUrl_.href = data.url;
         this.ensureTextIs_(this.status_, this.getStatusText_(data));
 
         this.foregroundProgress_.hidden = !isInProgress;
         this.backgroundProgress_.hidden = !isInProgress;
 
         if (isInProgress) {
           this.foregroundProgress_.width = ItemView.Progress.width;
           this.foregroundProgress_.height = ItemView.Progress.height;
 
           if (!this.progressContext_) {
@@ skipping 170 matching lines @@
     },
 
     /** @private */
     onDiscardClick_: function() {
       chrome.send('discardDangerous', [this.id_]);
     },
   };
 
   return {ItemView: ItemView};
 });