Port downloads.ItemView to a Polymer component.

chrome/browser/resources/md_downloads/item_view.html

Index: chrome/browser/resources/md_downloads/item_view.html
diff --git a/chrome/browser/resources/md_downloads/item_view.html b/chrome/browser/resources/md_downloads/item_view.html
new file mode 100644
index 0000000000000000000000000000000000000000..9eab064c64bc95980057a376d02de6ca56a543fe
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/item_view.html
@@ -0,0 +1,58 @@
+<link rel="import" href="chrome://resources/html/cr.html">

[michaelpg, 2015/07/08 19:39:52]

nit: include polymer

[Dan Beam, 2015/07/09 18:13:45]

Done.

+
+<dom-module id="item-view">
+  <template>
+    <div id="date-container">
+      <div id="since"></div>
+      <div id="date"></div>
+    </div>
+
+    <div id="safe">
+      <div id="progress"></div>
+      <img id="safe-icon" alt="">
+      <div id="title-area">
+        <a is="action-link" id="file-link" column-type="name"></a>

[michaelpg, 2015/07/08 19:39:52]

Not 100% clear on how focusing works, but could the element manage its own focus
state?

[Dan Beam, 2015/07/09 18:13:45]

it's possible this component could have it's own cr.ui.FocusRow, but I haven't
really thought about any of that yet (I'm going to add it back soon).

I can remove column-type if you'd like, but I didn't see a huge issue with
leaving them for now.

[michaelpg, 2015/07/10 00:56:26]

Acknowledged.

+        <span id="name"></span>
+        <span id="status"></span>
+      </div>
+      <div id="url-container">
+        <a id="src-url" target="_blank" column-type="url"></a>
+      </div>
+      <div id="controls">
+        <a is="action-link" id="show" column-type="show"
+            i18n-content="control_showinfolder"></a>
+        <a id="retry" column-type="retry" i18n-content="control_retry"
+            download></a>
+        <a is="action-link" id="pause" column-type="pause"
+            i18n-content="control_pause"></a>
+        <a is="action-link" id="resume" column-type="resume"
+            i18n-content="control_resume"></a>
+        <a is="action-link" id="safe-remove" column-type="remove"
+            i18n-content="control_removefromlist"></a>
+        <a is="action-link" id="cancel" column-type="cancel"
+            i18n-content="control_cancel"></a>
+        <span id="controlled-by"
+            i18n-values=".innerHTML:control_by_extension"></span>
+      </div>
+    </div>
+
+    <div id="dangerous">
+      <img id="dangerous-icon" alt="">
+      <div id="description"></div>
+      <div id="controls">
+        <a is="action-link" id="restore" column-type="save"
+            i18n-content="danger_restore"></a>
+        <a is="action-link" id="dangerous-remove" column-type="discard"
+            i18n-content="control_removefromlist"></a>
+      </div>
+      <button id="save" column-type="save"
+          i18n-content="danger_save"></button>
+      <button id="discard" column-type="discard"
+          i18n-content="danger_discard"></button>
+    </div>
+  </template>
+  <!-- TODO(dbeam): use <link rel="import"> instead to load these scripts. -->
+  <script src="constants.js"></script>
+  <script src="icon_loader.js"></script>
+  <script src="item_view.js"></script>
+</dom-module>