From c2e322a97306b817289ea4d14710216a94ec2a5f Mon Sep 17 00:00:00 2001
From: dbeam <dbeam@chromium.org>
Date: Mon, 20 Jul 2015 15:46:15 -0700
Subject: [PATCH] Slice MD downloads into more components

downloads.{
  ActionService: tells the browser to modify downloads
* Manager: the whole page (required for CSS var expansion)
* Toolbar: blue, top bar with search/title/actions
}

* has an actual UI/<element>

Also adding a shared_styles.css with variables to be @apply()ed or
--used through downloads.

BUG=425626
R=jlklein@chromium.org

Review URL: https://codereview.chromium.org/1240853002

Cr-Commit-Position: refs/heads/master@{#339544}
---
 chrome/browser/browser_resources.grd               |   9 +-
 .../resources/md_downloads/action_service.html     |   4 +
 .../resources/md_downloads/action_service.js       |  76 ++++++++
 .../resources/md_downloads/compiled_resources.gyp  |   2 +
 .../resources/md_downloads/compiled_resources2.gyp |  20 +++
 .../browser/resources/md_downloads/downloads.css   |  29 ----
 .../browser/resources/md_downloads/downloads.html  |  38 +---
 .../browser/resources/md_downloads/item_view.css   |   7 +
 .../browser/resources/md_downloads/item_view.html  | 128 +++++++-------
 chrome/browser/resources/md_downloads/item_view.js |  88 ++++------
 chrome/browser/resources/md_downloads/manager.css  |  12 ++
 chrome/browser/resources/md_downloads/manager.html |  16 +-
 chrome/browser/resources/md_downloads/manager.js   | 193 +++++++--------------
 .../resources/md_downloads/shared_style.css        |  11 ++
 chrome/browser/resources/md_downloads/toolbar.css  |  31 ++++
 chrome/browser/resources/md_downloads/toolbar.html |  35 ++++
 chrome/browser/resources/md_downloads/toolbar.js   |  49 ++++++
 chrome/browser/ui/webui/downloads_ui.cc            |  12 +-
 18 files changed, 455 insertions(+), 305 deletions(-)
 create mode 100644 chrome/browser/resources/md_downloads/action_service.html
 create mode 100644 chrome/browser/resources/md_downloads/action_service.js
 delete mode 100644 chrome/browser/resources/md_downloads/downloads.css
 create mode 100644 chrome/browser/resources/md_downloads/item_view.css
 rewrite chrome/browser/resources/md_downloads/item_view.html (63%)
 create mode 100644 chrome/browser/resources/md_downloads/manager.css
 create mode 100644 chrome/browser/resources/md_downloads/shared_style.css
 create mode 100644 chrome/browser/resources/md_downloads/toolbar.css
 create mode 100644 chrome/browser/resources/md_downloads/toolbar.html
 create mode 100644 chrome/browser/resources/md_downloads/toolbar.js

diff --git a/chrome/browser/browser_resources.grd b/chrome/browser/browser_resources.grd
index 75592bebf584..03dc595e8bbe 100644
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -132,12 +132,19 @@
         <include name="IDR_DOWNLOADS_MANAGER_JS" file="resources\downloads\manager.js" type="BINDATA" />
         <include name="IDR_DOWNLOADS_THROTTLED_ICON_LOADER_HTML" file="resources\downloads\throttled_icon_loader.html" type="BINDATA" />
         <include name="IDR_DOWNLOADS_THROTTLED_ICON_LOADER_JS" file="resources\downloads\throttled_icon_loader.js" type="BINDATA" />
-        <include name="IDR_MD_DOWNLOADS_DOWNLOADS_CSS" file="resources\md_downloads\downloads.css" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_ACTION_SERVICE_HTML" file="resources\md_downloads\action_service.html" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_ACTION_SERVICE_JS" file="resources\md_downloads\action_service.js" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_ITEM_VIEW_CSS" file="resources\md_downloads\item_view.css" type="BINDATA" />
         <include name="IDR_MD_DOWNLOADS_ITEM_VIEW_HTML" file="resources\md_downloads\item_view.html" type="BINDATA" />
         <include name="IDR_MD_DOWNLOADS_ITEM_VIEW_JS" file="resources\md_downloads\item_view.js" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_MANAGER_CSS" file="resources\md_downloads\manager.css" type="BINDATA" />
         <include name="IDR_MD_DOWNLOADS_MANAGER_HTML" file="resources\md_downloads\manager.html" type="BINDATA" />
         <include name="IDR_MD_DOWNLOADS_MANAGER_JS" file="resources\md_downloads\manager.js" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_SHARED_STYLE_CSS" file="resources\md_downloads\shared_style.css" type="BINDATA" />
         <include name="IDR_MD_DOWNLOADS_STRINGS_HTML" file="resources\md_downloads\strings.html" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_TOOLBAR_CSS" file="resources\md_downloads\toolbar.css" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_TOOLBAR_HTML" file="resources\md_downloads\toolbar.html" type="BINDATA" />
+        <include name="IDR_MD_DOWNLOADS_TOOLBAR_JS" file="resources\md_downloads\toolbar.js" type="BINDATA" />
       </if>
       <if expr="enable_extensions">
         <include name="IDR_EXTENSION_COMMAND_LIST_JS" file="resources\extensions\extension_command_list.js" flattenhtml="true" type="BINDATA" />
diff --git a/chrome/browser/resources/md_downloads/action_service.html b/chrome/browser/resources/md_downloads/action_service.html
new file mode 100644
index 000000000000..1adb058eb5c1
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/action_service.html
@@ -0,0 +1,4 @@
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
+<script src="chrome://downloads/action_service.js"></script>
diff --git a/chrome/browser/resources/md_downloads/action_service.js b/chrome/browser/resources/md_downloads/action_service.js
new file mode 100644
index 000000000000..24de63aa32d7
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/action_service.js
@@ -0,0 +1,76 @@
+// 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() {
+  /**
+   * @param {string} chromeSendName
+   * @return {function(string):void} A chrome.send() callback with curried name.
+   */
+  function chromeSendWithId(chromeSendName) {
+    return function(id) { chrome.send(chromeSendName, [id]); };
+  }
+
+  /** @constructor */
+  function ActionService() {}
+
+  ActionService.prototype = {
+    /** @param {string} id ID of the download to cancel. */
+    cancel: chromeSendWithId('cancel'),
+
+    /** Instructs the browser to clear all finished downloads. */
+    clearAll: function() {
+      if (loadTimeData.getBoolean('allowDeletingHistory')) {
+        chrome.send('clearAll');
+        this.search('');
+      }
+    },
+
+    /** @param {string} id ID of the dangerous download to discard. */
+    discardDangerous: chromeSendWithId('discardDangerous'),
+
+    /** @param {string} id ID of the download that the user started dragging. */
+    drag: chromeSendWithId('drag'),
+
+    /** Opens the current local destination for downloads. */
+    openDownloadsFolder: chrome.send.bind(chrome, 'openDownloadsFolder'),
+
+    /**
+     * @param {string} id ID of the download to run locally on the user's box.
+     */
+    openFile: chromeSendWithId('openFile'),
+
+    /** @param {string} id ID the of the progressing download to pause. */
+    pause: chromeSendWithId('pause'),
+
+    /** @param {string} id ID of the finished download to remove. */
+    remove: chromeSendWithId('remove'),
+
+    /** @param {string} id ID of the paused download to resume. */
+    resume: chromeSendWithId('resume'),
+
+    /**
+     * @param {string} id ID of the dangerous download to save despite
+     *     warnings.
+     */
+    saveDangerous: chromeSendWithId('saveDangerous'),
+
+    /** @param {string} searchText What to search for. */
+    search: function(searchText) {
+      // Split quoted terms (e.g., 'The "lazy" dog' => ['The', 'lazy', 'dog']).
+      function trim(s) { return s.trim(); }
+      chrome.send('getDownloads', searchText.split(/"([^"]*)"/).map(trim));
+    },
+
+    /**
+     * Shows the local folder a finished download resides in.
+     * @param {string} id ID of the download to show.
+     */
+    show: chromeSendWithId('show'),
+
+    /** Undo download removal. */
+    undo: chrome.send.bind(chrome, 'undo'),
+  };
+
+  return {ActionService: ActionService};
+});
diff --git a/chrome/browser/resources/md_downloads/compiled_resources.gyp b/chrome/browser/resources/md_downloads/compiled_resources.gyp
index 75e200f2e815..d7786e824579 100644
--- a/chrome/browser/resources/md_downloads/compiled_resources.gyp
+++ b/chrome/browser/resources/md_downloads/compiled_resources.gyp
@@ -16,7 +16,9 @@
           '../../../../ui/webui/resources/js/util.js',
           '../downloads/constants.js',
           '../downloads/throttled_icon_loader.js',
+          'action_service.js',
           'item_view.js',
+          'toolbar.js',
         ],
         'externs': [
           '<(EXTERNS_DIR)/chrome_send.js',
diff --git a/chrome/browser/resources/md_downloads/compiled_resources2.gyp b/chrome/browser/resources/md_downloads/compiled_resources2.gyp
index 7b4afb7e7ba8..53e6c1ff7aea 100644
--- a/chrome/browser/resources/md_downloads/compiled_resources2.gyp
+++ b/chrome/browser/resources/md_downloads/compiled_resources2.gyp
@@ -4,6 +4,15 @@
 {
   'targets': [
     {
+      'target_name': 'action_service',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
       'target_name': 'item_view',
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
@@ -11,6 +20,7 @@
         '../downloads/compiled_resources2.gyp:constants',
         '../downloads/compiled_resources2.gyp:throttled_icon_loader',
         '../downloads/compiled_resources2.gyp:externs',
+        'action_service',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -22,11 +32,21 @@
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:util',
         '<(DEPTH)/ui/webui/resources/js/cr/compiled_resources2.gyp:ui',
         '<(DEPTH)/ui/webui/resources/js/cr/ui/compiled_resources2.gyp:command',
+        'action_service',
         'item_view',
+        'toolbar',
         '<(EXTERNS_GYP):chrome_send',
         '../downloads/compiled_resources2.gyp:externs',
       ],
       'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'toolbar',
+      'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
+        'action_service',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
   ],
 }
diff --git a/chrome/browser/resources/md_downloads/downloads.css b/chrome/browser/resources/md_downloads/downloads.css
deleted file mode 100644
index 367845d6f316..000000000000
--- a/chrome/browser/resources/md_downloads/downloads.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/* 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. */
-
-body {
-  font-family: Roboto;
-}
-
-#downloads-toolbar {
-  background: rgb(63, 85, 102);
-  color: white;
-}
-
-#search-term label {
-  color: rgba(255, 255, 255, .5);
-}
-
-#search-term .label-is-highlighted label,
-#search-term input {
-  color: white;
-}
-
-#search-term .unfocused-line {
-  background-color: rgba(255, 255, 255, .5);
-}
-
-#search-term .focused-line {
-  background-color: white;
-}
diff --git a/chrome/browser/resources/md_downloads/downloads.html b/chrome/browser/resources/md_downloads/downloads.html
index e7ba6a01b4f9..d41d1765454c 100644
--- a/chrome/browser/resources/md_downloads/downloads.html
+++ b/chrome/browser/resources/md_downloads/downloads.html
@@ -3,45 +3,13 @@
 <head>
   <meta charset="utf-8">
   <title i18n-content="title"></title>
-
-  <link rel="import" href="chrome://resources/html/action_link.html">
   <link rel="import" href="chrome://resources/html/polymer_config.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
   <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
-
   <link rel="import" href="chrome://downloads/manager.html">
-
-  <link rel="stylesheet" href="chrome://resources/css/roboto.css">
-  <link rel="stylesheet" href="chrome://downloads/downloads.css">
 </head>
 <body class="fullbleed">
-
-  <paper-toolbar id="downloads-toolbar">
-    <h1 class="flex-auto" i18n-content="title"></h1>
-    <paper-icon-button icon="search" id="search-button"></paper-icon-button>
-    <paper-input id="search-term" class="flex-none"
-        i18n-values="label:searchButton" no-label-float hidden></paper-input>
-    <paper-icon-button icon="clear" id="clear-search"
-        hidden></paper-icon-button>
-  </paper-toolbar>
-
-  <div class="main">
-    <div class="summary" id="downloads-summary">
-      <span id="downloads-summary-text"></span>
-      <span id="downloads-actions">
-        <a is="action-link" id="open-downloads-folder"
-            i18n-content="openDownloadsFolder"></a>
-        <a is="action-link" id="clear-all" i18n-content="clearAll" hidden></a>
-      </span>
-    </div>
-    <div id="downloads-display"></div>
-    <div id="no-downloads-or-results"></div>
-  </div>
-
+  <downloads-manager></downloads-manager>
   <command id="clear-all-command" shortcut="Alt-U+0043"><!-- Alt+C -->
 <if expr="is_macosx">
   <command id="undo-command" shortcut="Meta-U+005A"><!-- Command+Z -->
@@ -49,10 +17,8 @@
 <if expr="not is_macosx">
   <command id="undo-command" shortcut="Ctrl-U+005A"><!-- Ctrl+Z -->
 </if>
-
   <link rel="import" href="chrome://resources/html/load_time_data.html">
   <link rel="import" href="chrome://downloads/strings.html">
-  <link rel="import" href="chrome://resources/html/i18n_template.html"></script>
-
+  <link rel="import" href="chrome://resources/html/i18n_template.html">
 </body>
 </html>
diff --git a/chrome/browser/resources/md_downloads/item_view.css b/chrome/browser/resources/md_downloads/item_view.css
new file mode 100644
index 000000000000..d029020e8522
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/item_view.css
@@ -0,0 +1,7 @@
+/* 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. */
+
+:host {
+  @apply(--downloads-shared-style);
+}
diff --git a/chrome/browser/resources/md_downloads/item_view.html b/chrome/browser/resources/md_downloads/item_view.html
dissimilarity index 63%
index d65c72d8b446..f64fe39953af 100644
--- a/chrome/browser/resources/md_downloads/item_view.html
+++ b/chrome/browser/resources/md_downloads/item_view.html
@@ -1,59 +1,69 @@
-<dom-module id="item-view">
-  <template>
-    <div id="date-container" hidden$="{{hideDate}}">
-      <div id="since"></div>
-      <div id="date"></div>
-    </div>
-
-    <div id="safe" hidden$="{{isDangerous}}">
-      <img id="safe-icon" alt="">
-      <div id="title-area">
-        <a is="action-link" id="file-link" column-type="name"></a>
-        <span id="name"></span>
-        <span id="status"></span>
-      </div>
-      <div>
-        <a id="src-url" target="_blank" column-type="url"></a>
-      </div>
-      <div>
-        <a is="action-link" id="show" column-type="show"
-            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>
-        <a is="action-link" id="resume" column-type="resume"
-            i18n-content="controlResume"></a>
-        <a is="action-link" id="safe-remove" column-type="remove"
-            i18n-content="controlRemoveFromList"></a>
-        <a is="action-link" id="cancel" column-type="cancel"
-            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}}">
-      <img id="dangerous-icon" alt="">
-      <div id="description"></div>
-      <div id="malware-controls" hidden$="{{!isMalware}}">
-        <a is="action-link" id="restore" column-type="save"
-            i18n-content="dangerRestore"></a>
-        <a is="action-link" id="dangerous-remove" column-type="discard"
-            i18n-content="controlRemoveFromList"></a>
-      </div>
-      <button id="save" column-type="save" i18n-content="dangerSave"
-          hidden$="{{isMalware}}"></button>
-      <button id="discard" column-type="discard" i18n-content="dangerDiscard"
-          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/constants.html">
-  <link rel="import" href="chrome://downloads/throttled_icon_loader.html">
-  <script src="chrome://downloads/item_view.js"></script>
-</dom-module>
+<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://resources/cr_elements/v1_0/cr_button/cr_button.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-view">
+  <template>
+    <div id="date-container" hidden$="[[hideDate]]">
+      <div id="since"></div>
+      <div id="date"></div>
+    </div>
+
+    <div id="safe" hidden$="[[isDangerous_]]" on-dragstart="onDragStart_">
+      <img id="safe-icon" alt="">
+      <div id="title-area">
+        <cr-button id="file-link" column-type="name"
+            on-click="onFileLinkClick_"></cr-button>
+        <span id="name"></span>
+        <span id="status"></span>
+      </div>
+      <div>
+        <a id="src-url" target="_blank" column-type="url"></a>
+      </div>
+      <div>
+        <cr-button id="show" column-type="show" on-click="onShowClick_"
+            i18n-content="controlShowInFolder"></cr-button>
+        <a id="retry" column-type="retry" i18n-content="controlRetry"
+            download></a>
+        <cr-button id="pause" column-type="pause" on-click="onPauseClick_"
+            i18n-content="controlPause"></cr-button>
+        <cr-button id="resume" column-type="resume" on-click="onResumeClick_"
+            i18n-content="controlResume"></cr-button>
+        <cr-button id="safe-remove" column-type="remove"
+            on-click="onRemoveClick_"
+            i18n-content="controlRemoveFromList"></cr-button>
+        <cr-button id="cancel" column-type="cancel" on-click="onCancelClick_"
+            i18n-content="controlCancel"></cr-button>
+        <span id="controlled-by"
+            i18n-values=".innerHTML:controlByExtension"></span>
+      </div>
+      <paper-progress id="progress"></paper-progress>
+    </div>
+
+    <div id="dangerous" hidden$="[[!isDangerous_]]">
+      <img id="dangerous-icon" alt="">
+      <div id="description"></div>
+      <div id="malware-controls" hidden$="[[!isMalware_]]">
+        <cr-button id="restore" column-type="save"
+            on-click="onRestoreOrSaveClick_"
+            i18n-content="dangerRestore"></cr-button>
+        <cr-button id="dangerous-remove" column-type="discard"
+            on-click="onDangerousRemoveOrDiscardClick_"
+            i18n-content="controlRemoveFromList"></cr-button>
+      </div>
+      <button id="save" column-type="save" i18n-content="dangerSave"
+          on-click="onRestoreOrSaveClick_" hidden$="[[isMalware_]]"></button>
+      <button id="discard" column-type="discard" i18n-content="dangerDiscard"
+          on-click="onDangerousRemoveOrDiscardClick_"
+          hidden$="[[isMalware_]]"></button>
+    </div>
+  </template>
+  <link rel="import" type="css" href="chrome://downloads/shared_style.css">
+  <link rel="import" type="css" href="chrome://downloads/item_view.css">
+  <script src="chrome://downloads/item_view.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/md_downloads/item_view.js b/chrome/browser/resources/md_downloads/item_view.js
index f0b2263579fa..c8ed9b80e257 100644
--- a/chrome/browser/resources/md_downloads/item_view.js
+++ b/chrome/browser/resources/md_downloads/item_view.js
@@ -4,33 +4,27 @@
 
 cr.define('downloads', function() {
   var ItemView = Polymer({
-    is: 'item-view',
+    is: 'downloads-item-view',
 
-    /** @param {!downloads.ThrottledIconLoader} iconLoader */
-    factoryImpl: function(iconLoader) {
+    /**
+     * @param {!downloads.ThrottledIconLoader} iconLoader
+     * @param {!downloads.ActionService} actionService
+     */
+    factoryImpl: function(iconLoader, actionService) {
       /** @private {!downloads.ThrottledIconLoader} */
       this.iconLoader_ = iconLoader;
+
+      /** @private {!downloads.ActionService} */
+      this.actionService_ = actionService;
     },
 
     properties: {
       hideDate: {type: Boolean, value: false},
-      isDangerous: {type: Boolean, value: false},
-      // Only use |isMalware| if |isDangerous| is true.
-      isMalware: Boolean,
-    },
 
-    ready: function() {
-      this.$.safe.ondragstart = this.onSafeDragstart_.bind(this);
-      this.$['file-link'].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.$['safe-remove'].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.$['dangerous-remove'].onclick = this.onDangerRemoveClick_.bind(this);
-      this.$.discard.onclick = this.onDiscardClick_.bind(this);
+      isDangerous_: {type: Boolean, value: false},
+
+      /** Only set when |isDangerous| is true. */
+      isMalware_: Boolean,
     },
 
     /** @param {!downloads.Data} data */
@@ -57,7 +51,7 @@ cr.define('downloads', function() {
         var iconUrl = 'chrome://theme/' + idr;
         this.iconLoader_.loadScaledIcon(this.$['dangerous-icon'], iconUrl);
 
-        this.isMalware =
+        this.isMalware_ =
             dangerType == downloads.DangerType.DANGEROUS_CONTENT ||
             dangerType == downloads.DangerType.DANGEROUS_HOST ||
             dangerType == downloads.DangerType.DANGEROUS_URL ||
@@ -181,13 +175,23 @@ cr.define('downloads', function() {
       return '';
     },
 
+    /** @private */
+    onCancelClick_: function() {
+      this.actionService_.cancel(this.id_);
+    },
+
+    /** @private */
+    onDangerousRemoveOrDiscardClick_: function() {
+      this.actionService_.discardDangerous(this.id_);
+    },
+
     /**
      * @private
      * @param {Event} e
      */
-    onSafeDragstart_: function(e) {
+    onDragStart_: function(e) {
       e.preventDefault();
-      chrome.send('drag', [this.id_]);
+      this.actionService_.drag(this.id_);
     },
 
     /**
@@ -196,52 +200,32 @@ cr.define('downloads', function() {
      */
     onFileLinkClick_: function(e) {
       e.preventDefault();
-      chrome.send('openFile', [this.id_]);
-    },
-
-    /** @private */
-    onShowClick_: function() {
-      chrome.send('show', [this.id_]);
+      this.actionService_.openFile(this.id_);
     },
 
     /** @private */
     onPauseClick_: function() {
-      chrome.send('pause', [this.id_]);
-    },
-
-    /** @private */
-    onResumeClick_: function() {
-      chrome.send('resume', [this.id_]);
-    },
-
-    /** @private */
-    onSafeRemoveClick_: function() {
-      chrome.send('remove', [this.id_]);
+      this.actionService_.pause(this.id_);
     },
 
     /** @private */
-    onCancelClick_: function() {
-      chrome.send('cancel', [this.id_]);
+    onRemoveClick_: function() {
+      this.actionService_.remove(this.id_);
     },
 
     /** @private */
-    onRestoreClick_: function() {
-      this.onSaveClick_();
+    onRestoreOrSaveClick_: function() {
+      this.actionService_.saveDangerous(this.id_);
     },
 
     /** @private */
-    onSaveClick_: function() {
-      chrome.send('saveDangerous', [this.id_]);
-    },
-
-    /** @private */
-    onDangerRemoveClick_: function() {
-      this.onDiscardClick_();
+    onResumeClick_: function() {
+      this.actionService_.resume(this.id_);
     },
 
     /** @private */
-    onDiscardClick_: function() {
-      chrome.send('discardDangerous', [this.id_]);
+    onShowClick_: function() {
+      this.actionService_.show(this.id_);
     },
   });
 
diff --git a/chrome/browser/resources/md_downloads/manager.css b/chrome/browser/resources/md_downloads/manager.css
new file mode 100644
index 000000000000..5653f91836bf
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/manager.css
@@ -0,0 +1,12 @@
+/* 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. */
+
+:host {
+  @apply(--downloads-shared-style);
+}
+
+#downloads-list {
+  margin: 0 auto;
+  width: var(--downloads-item-width);
+}
diff --git a/chrome/browser/resources/md_downloads/manager.html b/chrome/browser/resources/md_downloads/manager.html
index 53b11d384b4e..855a07caa4a1 100644
--- a/chrome/browser/resources/md_downloads/manager.html
+++ b/chrome/browser/resources/md_downloads/manager.html
@@ -3,6 +3,20 @@
 <link rel="import" href="chrome://resources/html/cr/ui.html">
 <link rel="import" href="chrome://resources/html/cr/ui/command.html">
 <link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://downloads/action_service.html">
 <link rel="import" href="chrome://downloads/constants.html">
 <link rel="import" href="chrome://downloads/item_view.html">
-<script src="chrome://downloads/manager.js"></script>
+<link rel="import" href="chrome://downloads/toolbar.html">
+
+<dom-module id="downloads-manager">
+  <template>
+    <downloads-toolbar id="toolbar"></downloads-toolbar>
+    <div id="downloads-list" hidden$="[[!hasDownloads_]]"></div>
+    <div id="no-downloads" hidden$="[[hasDownloads_]]"></div>
+  </template>
+  <link rel="import" type="css" href="chrome://resources/css/roboto.css">
+  <link rel="import" type="css" href="chrome://downloads/shared_style.css">
+  <link rel="import" type="css" href="chrome://downloads/manager.css">
+  <script src="chrome://downloads/manager.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/md_downloads/manager.js b/chrome/browser/resources/md_downloads/manager.js
index ebd003f47fc0..065290d25580 100644
--- a/chrome/browser/resources/md_downloads/manager.js
+++ b/chrome/browser/resources/md_downloads/manager.js
@@ -3,43 +3,75 @@
 // found in the LICENSE file.
 
 cr.define('downloads', function() {
-  /**
-   * Class to own and manage download items.
-   * @constructor
-   */
-  function Manager() {}
+  var Manager = Polymer({
+    is: 'downloads-manager',
 
-  cr.addSingletonGetter(Manager);
+    created: function() {
+      /** @private {!downloads.ActionService} */
+      this.actionService_ = new downloads.ActionService;
+    },
+
+    properties: {
+      hasDownloads_: {
+        type: Boolean,
+        value: false,
+      },
+    },
 
-  Manager.prototype = {
-    /** @private {string} */
-    searchText_: '',
+    /**
+     * @return {number} A guess at how many items could be visible at once.
+     * @private
+     */
+    guesstimateNumberOfVisibleItems_: function() {
+      var toolbarHeight = this.$.toolbar.offsetHeight;
+      return Math.floor((window.innerHeight - toolbarHeight) / 46) + 1;
+    },
+
+    /**
+     * @param {Event} e
+     * @private
+     */
+    onCanExecute_: function(e) {
+      e = /** @type {cr.ui.CanExecuteEvent} */(e);
+      switch (e.command.id) {
+        case 'undo-command':
+          e.canExecute = this.$.toolbar.canUndo();
+          break;
+        case 'clear-all-command':
+          e.canExecute = true;
+          break;
+      }
+    },
 
     /**
-     * Sets the search text, updates related UIs, and tells the browser.
-     * @param {string} searchText Text we're searching for.
+     * @param {Event} e
      * @private
      */
-    setSearchText_: function(searchText) {
-      this.searchText_ = searchText;
+    onCommand_: function(e) {
+      if (e.command.id == 'clear-all-command')
+        this.actionService_.clearAll();
+      else if (e.command.id == 'undo-command')
+        this.actionService_.undo();
+    },
 
-      $('downloads-summary-text').textContent = this.searchText_ ?
-          loadTimeData.getStringF('searchResultsFor', this.searchText_) : '';
+    /** @private */
+    onLoad_: function() {
+      this.$.toolbar.setActionService(this.actionService_);
+
+      cr.ui.decorate('command', cr.ui.Command);
+      document.addEventListener('canExecute', this.onCanExecute_.bind(this));
+      document.addEventListener('command', this.onCommand_.bind(this));
 
-      // Split quoted terms (e.g., 'The "lazy" dog' => ['The', 'lazy', 'dog']).
-      function trim(s) { return s.trim(); }
-      chrome.send('getDownloads', searchText.split(/"([^"]*)"/).map(trim));
+      // Shows all downloads.
+      this.actionService_.search('');
     },
 
     /**
-     * @return {number} A guess at how many items could be visible at once.
+     * @return {number} The number of downloads shown on the page.
      * @private
      */
-    guesstimateNumberOfVisibleItems_: function() {
-      var toolbarHeight = $('downloads-toolbar').offsetHeight;
-      var summaryHeight = $('downloads-summary').offsetHeight;
-      var nonItemSpace = toolbarHeight + summaryHeight;
-      return Math.floor((window.innerHeight - nonItemSpace) / 46) + 1;
+    size_: function() {
+      return this.items_.length;
     },
 
     /**
@@ -67,7 +99,8 @@ cr.define('downloads', function() {
         var id = data.id;
 
         // Re-use old items when possible (saves work, preserves focus).
-        var item = oldIdMap[id] || new downloads.ItemView(this.iconLoader_);
+        var item = oldIdMap[id] ||
+            new downloads.ItemView(this.iconLoader_, this.actionService_);
 
         this.idMap_[id] = item;  // Associated by ID for fast lookup.
         this.items_.push(item);  // Add to sorted list for order.
@@ -102,19 +135,13 @@ cr.define('downloads', function() {
             before = this.items_[j];
         }
         // If |before| is null, |item| will just get added at the end.
-        this.node_.insertBefore(item, before);
+        this.$['downloads-list'].insertBefore(item, before);
       }
 
-      var noDownloadsOrResults = $('no-downloads-or-results');
-      noDownloadsOrResults.textContent = loadTimeData.getString(
-          this.searchText_ ? 'noSearchResults' : 'noDownloads');
-
-      var hasDownloads = this.size_() > 0;
-      this.node_.hidden = !hasDownloads;
-      noDownloadsOrResults.hidden = hasDownloads;
+      this.hasDownloads_ = this.size_() > 0;
 
       if (loadTimeData.getBoolean('allowDeletingHistory'))
-        $('clear-all').hidden = !hasDownloads || this.searchText_.length > 0;
+        this.$.toolbar.canClearAll = this.hasDownloads_;
     },
 
     /**
@@ -124,108 +151,22 @@ cr.define('downloads', function() {
     updateItem_: function(data) {
       this.idMap_[data.id].update(data);
     },
+  });
 
-    /**
-     * @return {number} The number of downloads shown on the page.
-     * @private
-     */
-    size_: function() {
-      return this.items_.length;
-    },
-
-    /** @private */
-    clearAll_: function() {
-      if (loadTimeData.getBoolean('allowDeletingHistory')) {
-        chrome.send('clearAll');
-        this.setSearchText_('');
-      }
-    },
-
-    /** @private */
-    onLoad_: function() {
-      this.node_ = $('downloads-display');
-
-      $('clear-all').onclick = function() {
-        this.clearAll_();
-      }.bind(this);
-
-      $('open-downloads-folder').onclick = function() {
-        chrome.send('openDownloadsFolder');
-      };
-
-      $('search-button').onclick = function() {
-        if (!$('search-term').hidden)
-          return;
-        $('clear-search').hidden = false;
-        $('search-term').hidden = false;
-      };
-
-      $('clear-search').onclick = function() {
-        $('clear-search').hidden = true;
-        $('search-term').hidden = true;
-        $('search-term').value = '';
-        this.setSearchText_('');
-      }.bind(this);
-
-      // TODO(dbeam): this previously used onsearch, which batches keystrokes
-      // together. This should probably be re-instated eventually.
-      $('search-term').oninput = function(e) {
-        this.setSearchText_($('search-term').value);
-      }.bind(this);
-
-      cr.ui.decorate('command', cr.ui.Command);
-      document.addEventListener('canExecute', this.onCanExecute_.bind(this));
-      document.addEventListener('command', this.onCommand_.bind(this));
-
-      this.setSearchText_('');
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onCanExecute_: function(e) {
-      e = /** @type {cr.ui.CanExecuteEvent} */(e);
-      switch (e.command.id) {
-        case 'undo-command':
-          e.canExecute = !$('search-term').contains(document.activeElement);
-          break;
-        case 'clear-all-command':
-          e.canExecute = true;
-          break;
-      }
-    },
-
-    /**
-     * @param {Event} e
-     * @private
-     */
-    onCommand_: function(e) {
-      if (e.command.id == 'undo-command')
-        chrome.send('undo');
-      else if (e.command.id == 'clear-all-command')
-        this.clearAll_();
-    },
+  Manager.size = function() {
+    return document.querySelector('downloads-manager').size_();
   };
 
   Manager.updateAll = function(list) {
-    Manager.getInstance().updateAll_(list);
+    document.querySelector('downloads-manager').updateAll_(list);
   };
 
   Manager.updateItem = function(item) {
-    Manager.getInstance().updateItem_(item);
-  };
-
-  Manager.setSearchText = function(searchText) {
-    Manager.getInstance().setSearchText_(searchText);
+    document.querySelector('downloads-manager').updateItem_(item);
   };
 
   Manager.onLoad = function() {
-    Manager.getInstance().onLoad_();
-  };
-
-  Manager.size = function() {
-    return Manager.getInstance().size_();
+    document.querySelector('downloads-manager').onLoad_();
   };
 
   return {Manager: Manager};
diff --git a/chrome/browser/resources/md_downloads/shared_style.css b/chrome/browser/resources/md_downloads/shared_style.css
new file mode 100644
index 000000000000..0a4aac5e9280
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/shared_style.css
@@ -0,0 +1,11 @@
+/* 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. */
+
+* {
+  --downloads-item-width: 606px;
+  --downloads-shared-style: {
+    font-family: Roboto;
+    font-weight: 500;
+  };
+}
diff --git a/chrome/browser/resources/md_downloads/toolbar.css b/chrome/browser/resources/md_downloads/toolbar.css
new file mode 100644
index 000000000000..23710f517c42
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/toolbar.css
@@ -0,0 +1,31 @@
+/* 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. */
+
+:host {
+  @apply(--downloads-shared-style);
+  color: white;
+}
+
+paper-toolbar {
+  background: rgb(63, 85, 102);
+}
+
+#title,
+#search {
+  flex: 1 0 200px;
+}
+
+#actions {
+  flex: none;
+  width: var(--downloads-item-width);
+}
+
+#search,
+#actions {
+  display: flex;
+}
+
+#search {
+  justify-content: flex-end;
+}
diff --git a/chrome/browser/resources/md_downloads/toolbar.html b/chrome/browser/resources/md_downloads/toolbar.html
new file mode 100644
index 000000000000..44b3e3e2b83d
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/toolbar.html
@@ -0,0 +1,35 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_button/cr_button.html">
+<link rel="import" href="chrome://resources/cr_elements/v1_0/cr_input/cr_input.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+
+<dom-module id="downloads-toolbar">
+  <template>
+    <paper-toolbar>
+      <h1 i18n-content="title" id="title"></h1>
+      <div id="actions">
+        <cr-button id="clear-all" i18n-content="clearAll"
+            on-click="onClearAllClick_"
+            hidden$="[[!canClearAll]]"></cr-button>
+        <cr-button id="open-downloads-folder"
+            i18n-content="openDownloadsFolder"
+            on-click="onOpenDownloadsFolderClick_"></cr-button>
+      </div>
+      <div id="search">
+        <paper-icon-button icon="search" id="search-button"
+            on-click="toggleShowingSearch_"></paper-icon-button>
+        <cr-input id="search-term" i18n-values="label:searchButton"
+            hidden$="[[!showingSearch_]]" no-label-float></paper-input>
+        <paper-icon-button icon="clear" id="clear-search"
+            on-click="toggleShowingSearch_"
+            hidden$="[[!showingSearch_]]"></paper-icon-button>
+      </div>
+    </paper-toolbar>
+  </template>
+  <link rel="import" type="css" href="chrome://downloads/shared_style.css">
+  <link rel="import" type="css" href="chrome://downloads/toolbar.css">
+  <script src="chrome://downloads/toolbar.js"></script>
+</dom-module>
diff --git a/chrome/browser/resources/md_downloads/toolbar.js b/chrome/browser/resources/md_downloads/toolbar.js
new file mode 100644
index 000000000000..61716d47eac6
--- /dev/null
+++ b/chrome/browser/resources/md_downloads/toolbar.js
@@ -0,0 +1,49 @@
+// 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() {
+  var Toolbar = Polymer({
+    is: 'downloads-toolbar',
+
+    /** @param {!downloads.ActionService} actionService */
+    setActionService: function(actionService) {
+      /** @private {!downloads.ActionService} */
+      this.actionService_ = actionService;
+    },
+
+    properties: {
+      canClearAll: {
+        type: Boolean,
+        value: false,
+      },
+
+      showingSearch_: {
+        type: Boolean,
+        value: false,
+      },
+    },
+
+    /** @return {boolean} Whether removal can be undone. */
+    canUndo: function() {
+      return this.$['search-term'] != document.activeElement;
+    },
+
+    /** @private */
+    onClearAllClick_: function() {
+      this.actionService_.clearAll();
+    },
+
+    /** @private */
+    onOpenDownloadsFolderClick_: function() {
+      this.actionService_.openDownloadsFolder();
+    },
+
+    /** @private */
+    toggleShowingSearch_: function() {
+      this.showingSearch_ = !this.showingSearch_;
+    },
+  });
+
+  return {Toolbar: Toolbar};
+});
diff --git a/chrome/browser/ui/webui/downloads_ui.cc b/chrome/browser/ui/webui/downloads_ui.cc
index 1429d6704028..20a573160ce4 100644
--- a/chrome/browser/ui/webui/downloads_ui.cc
+++ b/chrome/browser/ui/webui/downloads_ui.cc
@@ -97,12 +97,22 @@ content::WebUIDataSource* CreateDownloadsUIHTMLSource(Profile* profile) {
                           IDR_DOWNLOADS_THROTTLED_ICON_LOADER_JS);
 
   if (switches::MdDownloadsEnabled()) {
-    source->AddResourcePath("downloads.css", IDR_MD_DOWNLOADS_DOWNLOADS_CSS);
+    source->AddResourcePath("action_service.html",
+                            IDR_MD_DOWNLOADS_ACTION_SERVICE_HTML);
+    source->AddResourcePath("action_service.js",
+                            IDR_MD_DOWNLOADS_ACTION_SERVICE_JS);
+    source->AddResourcePath("item_view.css", IDR_MD_DOWNLOADS_ITEM_VIEW_CSS);
     source->AddResourcePath("item_view.html", IDR_MD_DOWNLOADS_ITEM_VIEW_HTML);
     source->AddResourcePath("item_view.js", IDR_MD_DOWNLOADS_ITEM_VIEW_JS);
+    source->AddResourcePath("manager.css", IDR_MD_DOWNLOADS_MANAGER_CSS);
     source->AddResourcePath("manager.html", IDR_MD_DOWNLOADS_MANAGER_HTML);
     source->AddResourcePath("manager.js", IDR_MD_DOWNLOADS_MANAGER_JS);
+    source->AddResourcePath("shared_style.css",
+                            IDR_MD_DOWNLOADS_SHARED_STYLE_CSS);
     source->AddResourcePath("strings.html", IDR_MD_DOWNLOADS_STRINGS_HTML);
+    source->AddResourcePath("toolbar.css", IDR_MD_DOWNLOADS_TOOLBAR_CSS);
+    source->AddResourcePath("toolbar.html", IDR_MD_DOWNLOADS_TOOLBAR_HTML);
+    source->AddResourcePath("toolbar.js", IDR_MD_DOWNLOADS_TOOLBAR_JS);
     source->SetDefaultResource(IDR_MD_DOWNLOADS_DOWNLOADS_HTML);
   } else {
     source->AddResourcePath("item_view.js", IDR_DOWNLOADS_ITEM_VIEW_JS);
-- 
2.11.4.GIT