[MD History] Refactor history.html into a history-app element.

chrome/browser/resources/md_history/history.js

Index: chrome/browser/resources/md_history/history.js
diff --git a/chrome/browser/resources/md_history/history.js b/chrome/browser/resources/md_history/history.js
index 7478fb12c208cbeed42bf2412abfc8dcf463754a..ba28ae5109ac98e5b1c2285be2c3ba107334bb84 100644
--- a/chrome/browser/resources/md_history/history.js
+++ b/chrome/browser/resources/md_history/history.js
@@ -20,65 +20,6 @@ function waitForUpgrade(element) {
   });
 }
 
-/**
- * Listens for history-item being selected or deselected (through checkbox)
- * and changes the view of the top toolbar.
- * @param {{detail: {countAddition: number}}} e
- */
-window.addEventListener('history-checkbox-select', function(e) {
-  var toolbar = /** @type {HistoryToolbarElement} */($('toolbar'));
-  toolbar.count += e.detail.countAddition;
-});
-
-/**
- * Listens for call to cancel selection and loops through all items to set
- * checkbox to be unselected.
- */
-window.addEventListener('unselect-all', function() {
-  var historyList = /** @type {HistoryListElement} */($('history-list'));
-  var toolbar = /** @type {HistoryToolbarElement} */($('toolbar'));
-  historyList.unselectAllItems(toolbar.count);
-  toolbar.count = 0;
-});
-
-/**
- * Listens for call to delete all selected items and loops through all items to
- * to determine which ones are selected and deletes these.
- */
-window.addEventListener('delete-selected', function() {
-  if (!loadTimeData.getBoolean('allowDeletingHistory'))
-    return;
-
-  // TODO(hsampson): add a popup to check whether the user definitely wants to
-  // delete the selected items.
-
-  var historyList = /** @type {HistoryListElement} */($('history-list'));
-  var toolbar = /** @type {HistoryToolbarElement} */($('toolbar'));
-  var toBeRemoved = historyList.getSelectedItems(toolbar.count);
-  chrome.send('removeVisits', toBeRemoved);
-});
-
-/**
- * When the search is changed refresh the results from the backend. Ensures that
- * the search bar is updated with the new search term.
- * @param {{detail: {search: string}}} e
- */
-window.addEventListener('search-changed', function(e) {
-  $('toolbar').setSearchTerm(e.detail.search);
-  /** @type {HistoryListElement} */($('history-list')).setLoading();
-  /** @type {HistoryToolbarElement} */($('toolbar')).searching = true;
-  chrome.send('queryHistory', [e.detail.search, 0, 0, 0, RESULTS_PER_PAGE]);
-});
-
-/**
- * Switches between displaying history data and synced tabs data for the page.
- */
-window.addEventListener('switch-display', function(e) {
-  $('history-synced-device-manager').hidden =
-      e.detail.display != 'synced-tabs-button';
-  $('history-list').hidden = e.detail.display != 'history-button';
-});
-
 // Chrome Callbacks-------------------------------------------------------------
 
 /**
@@ -87,13 +28,9 @@ window.addEventListener('switch-display', function(e) {
  * @param {!Array<HistoryEntry>} results A list of results.
  */
 function historyResult(info, results) {
-  var listElem = $('history-list');
-  waitForUpgrade(listElem).then(function() {
-    var list = /** @type {HistoryListElement} */(listElem);
-    list.addNewResults(results, info.term);
-    /** @type {HistoryToolbarElement} */$('toolbar').searching = false;
-    if (info.finished)
-      list.disableResultLoading();
+  var appElem = $('history-app');
+  waitForUpgrade(appElem).then(function() {
+    /** @type {HistoryAppElement} */(appElem).historyResult(info, results);
     // TODO(tsergeant): Showing everything as soon as the list is ready is not
     // ideal, as the sidebar can still pop in after. Fix this to show everything
     // at once.
@@ -124,16 +61,9 @@ function showNotification(
  * @param {boolean} isTabSyncEnabled Is tab sync enabled for this profile?
  */
 function setForeignSessions(sessionList, isTabSyncEnabled) {
-  // TODO(calamity): Add a 'no synced devices' message when sessions are empty.
-  $('history-side-bar').hidden = !isTabSyncEnabled;
-  var syncedDeviceElem = $('history-synced-device-manager');
-  waitForUpgrade(syncedDeviceElem).then(function() {
-    var syncedDeviceManager =
-        /** @type {HistorySyncedDeviceManagerElement} */(syncedDeviceElem);
-    if (isTabSyncEnabled) {
-      syncedDeviceManager.setSyncedHistory(sessionList);
-      /** @type {HistoryToolbarElement} */($('toolbar')).hasSidebar = true;
-    }
+  var appElem = $('history-app');
+  waitForUpgrade(appElem).then(function() {
+    appElem.setForeignSessions(sessionList, isTabSyncEnabled);
   });
 }
 
@@ -141,10 +71,10 @@ function setForeignSessions(sessionList, isTabSyncEnabled) {
  * Called by the history backend when deletion was succesful.
  */
 function deleteComplete() {
-  var historyList = /** @type {HistoryListElement} */($('history-list'));
-  var toolbar = /** @type {HistoryToolbarElement} */($('toolbar'));
-  historyList.removeDeletedHistory(toolbar.count);
-  toolbar.count = 0;
+  var appElem = $('history-app');
+  waitForUpgrade(appElem).then(function() {
+    appElem.deleteComplete();
+  });
 }
 
 /**