Slice MD downloads into more components

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
index d65c72d8b4467cd81ec7e8a786076293cb0ebb7a..7e029109b70ab4f9c0029a674ef563f1d1842eb7 100644
--- a/chrome/browser/resources/md_downloads/item_view.html
+++ b/chrome/browser/resources/md_downloads/item_view.html
@@ -5,10 +5,11 @@
       <div id="date"></div>
     </div>
 
-    <div id="safe" hidden$="{{isDangerous}}">
+    <div id="safe" hidden$="{{isDangerous_}}" on-dragstart="onDragStart_">
       <img id="safe-icon" alt="">
       <div id="title-area">
-        <a is="action-link" id="file-link" column-type="name"></a>
+        <a is="action-link" id="file-link" column-type="name"
+            on-click="onFileLinkClick_"></a>
         <span id="name"></span>
         <span id="status"></span>
       </div>
@@ -17,42 +18,46 @@
       </div>
       <div>
         <a is="action-link" id="show" column-type="show"
-            i18n-content="controlShowInFolder"></a>
+            on-click="onShowClick_" i18n-content="controlShowInFolder"></a>
         <a id="retry" column-type="retry" i18n-content="controlRetry"
             download></a>
         <a is="action-link" id="pause" column-type="pause"
-            i18n-content="controlPause"></a>
+            on-click="onPauseClick_" i18n-content="controlPause"></a>
         <a is="action-link" id="resume" column-type="resume"
-            i18n-content="controlResume"></a>
+            on-click="onResumeClick_" i18n-content="controlResume"></a>
         <a is="action-link" id="safe-remove" column-type="remove"
-            i18n-content="controlRemoveFromList"></a>
+            on-click="onRemoveClick_" i18n-content="controlRemoveFromList"></a>
         <a is="action-link" id="cancel" column-type="cancel"
-            i18n-content="controlCancel"></a>
+            on-click="onCancelClick_" i18n-content="controlCancel"></a>
         <span id="controlled-by"
             i18n-values=".innerHTML:controlByExtension"></span>
       </div>
       <paper-progress id="progress"></paper-progress>
     </div>
 
-    <div id="dangerous" hidden$="{{!isDangerous}}">
+    <div id="dangerous" hidden$="{{!isDangerous_}}">
       <img id="dangerous-icon" alt="">
       <div id="description"></div>
-      <div id="malware-controls" hidden$="{{!isMalware}}">
+      <div id="malware-controls" hidden$="{{!isMalware_}}">
         <a is="action-link" id="restore" column-type="save"
+            on-click="onRestoreOrSaveClick_"
             i18n-content="dangerRestore"></a>
         <a is="action-link" id="dangerous-remove" column-type="discard"
+            on-click="onDangerousRemoveOrDiscardClick_"
             i18n-content="controlRemoveFromList"></a>
       </div>
       <button id="save" column-type="save" i18n-content="dangerSave"
-          hidden$="{{isMalware}}"></button>
+          on-click="onRestoreOrSaveClick_" hidden$="{{isMalware_}}"></button>
       <button id="discard" column-type="discard" i18n-content="dangerDiscard"
-          hidden$="{{isMalware}}"></button>
+          on-click="onDangerousRemoveOrDiscardClick_"
+          hidden$="{{isMalware_}}"></button>
     </div>
   </template>
   <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-progress/paper-progress.html">
+  <link rel="import" href="chrome://downloads/action_service.html">

[Jeremy Klein, 2015/07/16 18:54:53]

These imports are usually all outside the dom-module at the top of the file. Why
the change?

[Dan Beam, 2015/07/18 01:02:20]

this is how all the downloads code and Polymer examples are.

where are you getting "usually" from?

[Jeremy Klein, 2015/07/20 17:09:57]

The only import I've ever seen inside the dom-module is the styles for the
element being defined. Which Polymer examples are you looking at? They probably
need to be updated.

See all paper-* and iron-* elements (https://github.com/PolymerElements), all
settings code, media-router code, oobe, all examples in the quick start guide
(https://www.polymer-project.org/1.0/docs/start/quick-tour.html) and all
elements in Google3.

While I don't know for sure if there's a functional difference here, I wouldn't
be surprised if subtle issues came up from importing other element definitions
into the actual dom-module of an element.

[Dan Beam, 2015/07/20 17:25:53]

Done.

   <link rel="import" href="chrome://downloads/constants.html">
   <link rel="import" href="chrome://downloads/throttled_icon_loader.html">
   <script src="chrome://downloads/item_view.js"></script>