MD Downloads: compute content classes via data binding

chrome/browser/resources/md_downloads/item.html

 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/load_time_data.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-material/paper-material.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 <link rel="import" href="chrome://downloads/action_service.html">
 <link rel="import" href="chrome://downloads/constants.html">
 <link rel="import" href="chrome://downloads/throttled_icon_loader.html">
 
 <dom-module id="downloads-item">
   <template>
     <div id="date-container">
       <template is="dom-if" if="[[!hideDate]]">
         <div>[[computeDate_(data_.since_string, data_.date_string)]]</div>
       </template>
     </div>
 
     <paper-material id="content" on-dragstart="onDragStart_"
-        elevation$="[[computeElevation_(isActive_)]]">
+        elevation$="[[computeElevation_(isActive_)]]"
+        class$="[[computeClass_(isActive_, isDangerous_, showProgress_)]]">
       <div id="file-icon-wrapper" class="icon-wrapper">
         <img class="icon" id="file-icon" alt="" hidden$="[[isDangerous_]]">
         <div class="icon" id="warning" hidden$="[[!isDangerous_]]"></div>
       </div>
 
       <div id="details">
         <div id="title-area"><!--
           Can't have any line breaks.
           --><a is="action-link" id="file-link" href$="[[data_.url]]"
               on-click="onFileLinkClick_"
@@ skipping 32 matching lines @@
                 on-click="onResumeClick_">[[i18n_.resume]]</paper-button>
           </template>
           <template is="dom-if" if="[[showCancel_]]">
             <paper-button id="cancel"
                 on-click="onCancelClick_">[[i18n_.cancel]]</paper-button>
           </template>
           <span id="controlled-by"
               i18n-values=".innerHTML:controlByExtension"></span>
         </div>
 
-        <div id="dangerous" class="controls" hidden$="[[!isDangerous_]]">
-          <!-- Dangerous file types (e.g. .exe, .jar). -->
-          <template is="dom-if" if="[[!isMalware_]]">
-            <paper-button id="discard" on-click="onDiscardDangerous_"
-                class="discard">[[i18n_.discard]]</paper-button>
-            <paper-button id="save" on-click="onSaveDangerous_"
-                class="keep">[[i18n_.save]]</paper-button>
-          </template>
+        <template is="dom-if" if="[[isDangerous_]]">
+          <div id="dangerous" class="controls">
+            <!-- Dangerous file types (e.g. .exe, .jar). -->
+            <template is="dom-if" if="[[!isMalware_]]">
+              <paper-button id="discard" on-click="onDiscardDangerous_"
+                  class="discard">[[i18n_.discard]]</paper-button>
+              <paper-button id="save" on-click="onSaveDangerous_"
+                  class="keep">[[i18n_.save]]</paper-button>
+            </template>
 
-          <!-- Things that safe browsing has determined to be dangerous. -->
-          <template is="dom-if" if="[[isMalware_]]">
-            <paper-button id="danger-remove" on-click="onDiscardDangerous_"
-                class="discard">[[i18n_.remove]]</paper-button>
-            <paper-button id="restore" on-click="onSaveDangerous_"
-                class="keep">[[i18n_.restore]</paper-button>
-          </template>
-        </div>
+            <!-- Things that safe browsing has determined to be dangerous. -->
+            <template is="dom-if" if="[[isMalware_]]">
+              <paper-button id="danger-remove" on-click="onDiscardDangerous_"
+                  class="discard">[[i18n_.remove]]</paper-button>
+              <paper-button id="restore" on-click="onSaveDangerous_"
+                  class="keep">[[i18n_.restore]</paper-button>
+            </template>
+          </div>
+        </template>
       </div>
 
       <div id="remove-wrapper" class="icon-wrapper">
         <paper-icon-button id="remove" icon="clear"
             style$="[[computeRemoveStyle_(isDangerous_, showCancel_)]]"
             on-click="onRemoveClick_"></paper-icon-button>
       </div>
 
       <div id="incognito" hidden$="[[!data_.otr]]"></div>
     </paper-material>
 
     <div id="end-cap"></div>
 
   </template>
   <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <link rel="import" type="css" href="chrome://downloads/shared_style.css">
   <link rel="import" type="css" href="chrome://downloads/item.css">
   <script src="chrome://downloads/item.js"></script>
 </dom-module>