MD Downloads: compute card elevation 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_">
+    <paper-material id="content" on-dragstart="onDragStart_"
+        elevation$="[[computeElevation_(isActive_)]]">
       <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>
+        <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"
-              on-click="onFileLinkClick_"></a><!-- Before #name.
-          --><span id="name">[[data_.file_name]]</span>
+        <div id="title-area"><!--
+          Can't have any line breaks.

[tommycli, 2015/09/09 20:49:16]

These line breaks are okay right?

It's <span><!-- no line breaks here -->[[binding]]<!-- no line breaks here
--></span> that's not ok right?

[Dan Beam, 2015/09/09 21:00:15]

yes, <!-- \n --> is OK

[tommycli, 2015/09/09 21:03:03]

I mean, you don't need that comment to span the whitespace right?

<div id="title-area">
  <a is="action-link"...>

is okay right?

[Dan Beam, 2015/09/09 21:04:10]

no, <div id="title-area"><!--

doesn't matter what happens here!
I'm in a comment!

--><a is="action-link">

is OK

[tommycli, 2015/09/09 21:10:44]

Ah, I think we're mis-communicating.

I mean: why are those two HTML comments necessary?

[Dan Beam, 2015/09/09 21:33:03]

https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

and btw, i don't believe <div><!-- this is ok -->[[computeThing_(param)]]<!--
because [[]] needs to be the whole textContent --></div>

+          --><a is="action-link" id="file-link" href$="[[data_.url]]"
+              on-click="onFileLinkClick_"
+              hidden$="[[!completelyOnDisk_]]">[[data_.file_name]]</a><!--
+          Before #name.
+          --><span id="name"
+              hidden$="[[completelyOnDisk_]]">[[data_.file_name]]</span>
           <span id="tag"></span>
         </div>
 
-        <a id="url" target="_blank" href="[[data_.url]]">[[data_.url]]</a>
+        <a id="url" target="_blank" href$="[[data_.url]]">[[data_.url]]</a>
 
         <div id="description"></div>
 
         <template is="dom-if" if="[[showProgress_]]">
           <paper-progress id="progress"
               indeterminate$="[[isIndeterminate_(data_.percent)]]"
               value$="[[data_.percent]]"></paper-progress>
         </template>
 
         <div id="safe" class="controls" hidden$="[[isDangerous_]]">
@@ skipping 50 matching lines @@
     </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>