[MD History] Add history-list-container between app and history lists.

chrome/browser/resources/md_history/app.js

Index: chrome/browser/resources/md_history/app.js
diff --git a/chrome/browser/resources/md_history/app.js b/chrome/browser/resources/md_history/app.js
index 1f5a861848c8f75545a650070270c70bd4abcb84..43563ef82c6f9f0453a7c7246d423a1863643177 100644
--- a/chrome/browser/resources/md_history/app.js
+++ b/chrome/browser/resources/md_history/app.js
@@ -2,28 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * @typedef {{querying: boolean,
- *            searchTerm: string,
- *            results: ?Array<!HistoryEntry>,
- *            info: ?HistoryQuery,
- *            incremental: boolean,
- *            range: HistoryRange,
- *            groupedOffset: number,
- *            sessionList: ?Array<!ForeignSession>}}
- */
-var QueryState;
-
 Polymer({
   is: 'history-app',
 
   properties: {
     // The id of the currently selected page.
-    selectedPage_: {
-      type: String,
-      value: 'history-list',
-      observer: 'unselectAll'
-    },
+    selectedPage_: {type: String, value: 'history', observer: 'unselectAll'},
 
     // Whether domain-grouped history is enabled.
     grouped_: {
@@ -31,12 +15,6 @@ Polymer({
       reflectToAttribute: true
     },
 
-    // Whether the first set of results have returned.
-    firstLoad_: { type: Boolean, value: true },
-
-    // True if the history queries are disabled.
-    queryingDisabled_: Boolean,
-
     /** @type {!QueryState} */
     // TODO(calamity): Split out readOnly data into a separate property which is
     // only set on result return.
@@ -44,35 +22,31 @@ Polymer({
       type: Object,
       value: function() {
         return {
+          // Whether the most recent query was incremental.
+          incremental: false,
           // A query is initiated by page load.
           querying: true,
+          queryingDisabled: Boolean,
+          _range: HistoryRange.ALL_TIME,
           searchTerm: '',
-          results: null,
-          // Whether the most recent query was incremental.
-          incremental: false,
-          info: null,
-          range: HistoryRange.ALL_TIME,
-          // TODO(calamity): Make history toolbar buttons change the offset.
+          // TODO(calamity): Make history toolbar buttons change the offset
           groupedOffset: 0,
-          sessionList: null,
+
+          set range(val) { this._range = Number(val); },
+          get range() { return this._range; },
         };
       }
     },
-  },
 
-  observers: [
-    'searchTermChanged_(queryState_.searchTerm)',
-    'groupedRangeChanged_(queryState_.range)',
-  ],
+    sessionList: Array,
+  },
 
-  // TODO(calamity): Replace these event listeners with data bound properties.
   listeners: {
     'cr-toolbar-menu-click': 'onMenuClick_',
     'history-checkbox-select': 'checkboxSelected',
     'unselect-all': 'unselectAll',
     'delete-selected': 'deleteSelected',
     'search-domain': 'searchDomain_',
-    'load-more-history': 'loadMoreHistory_',
   },
 
   /** @override */
@@ -80,9 +54,7 @@ Polymer({
     this.grouped_ = loadTimeData.getBoolean('groupByDomain');
   },
 
-  onMenuClick_: function() {
-    this.$['side-bar'].toggle();
-  },
+  onMenuClick_: function() { this.$['side-bar'].toggle(); },
 
   /**
    * Listens for history-item being selected or deselected (through checkbox)
@@ -90,7 +62,7 @@ Polymer({
    * @param {{detail: {countAddition: number}}} e
    */
   checkboxSelected: function(e) {
-    var toolbar = /** @type {HistoryToolbarElement} */(this.$.toolbar);
+    var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
     toolbar.count += e.detail.countAddition;
   },
 
@@ -99,10 +71,10 @@ Polymer({
    * checkbox to be unselected.
    */
   unselectAll: function() {
-    var historyList =
-        /** @type {HistoryListElement} */(this.$['history-list']);
-    var toolbar = /** @type {HistoryToolbarElement} */(this.$.toolbar);
-    historyList.unselectAllItems(toolbar.count);
+    var listContainer =
+        /** @type {HistoryListContainerElement} */ (this.$['history']);
+    var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
+    listContainer.unselectAllItems(toolbar.count);
     toolbar.count = 0;
   },
 
@@ -116,25 +88,8 @@ Polymer({
 
     // TODO(hsampson): add a popup to check whether the user definitely
     // wants to delete the selected items.
-    /** @type {HistoryListElement} */(this.$['history-list']).deleteSelected();
-  },
-
-  initializeResults_: function(info, results) {
-    if (results.length == 0)
-      return;
-
-    var currentDate = results[0].dateRelativeDay;
-
-    for (var i = 0; i < results.length; i++) {
-      // Sets the default values for these fields to prevent undefined types.
-      results[i].selected = false;
-      results[i].readableTimestamp =
-          info.term == '' ? results[i].dateTimeOfDay : results[i].dateShort;
-
-      if (results[i].dateRelativeDay != currentDate) {
-        currentDate = results[i].dateRelativeDay;
-      }
-    }
+    /** @type {HistoryListContainerElement} */ (this.$['history'])
+        .deleteSelected();
   },
 
   /**
@@ -143,71 +98,17 @@ Polymer({
    * @param {!Array<HistoryEntry>} results A list of results.
    */
   historyResult: function(info, results) {
-    this.firstLoad_ = false;
-    this.set('queryState_.info', info);
-    this.set('queryState_.results', results);
     this.set('queryState_.querying', false);

[tsergeant, 2016/06/23 06:35:25]

This line is not necessary, it is set in list-container as well.

[calamity, 2016/06/24 05:39:46]

Removed it from the other place since this is kind of the element that 'owns'
the query state.

-
-    this.initializeResults_(info, results);
-
-    if (this.grouped_ && this.queryState_.range != HistoryRange.ALL_TIME) {
-      this.$$('history-grouped-list').historyData = results;
-      return;
-    }
-
-    var list = /** @type {HistoryListElement} */(this.$['history-list']);
-    list.addNewResults(results);
-    if (info.finished)
-      list.disableResultLoading();
+    var listContainer =
+        /** @type {HistoryListContainerElement} */ (this.$['history']);
+    listContainer.historyResult(info, results);
   },
 
   /**
    * Fired when the user presses 'More from this site'.
    * @param {{detail: {domain: string}}} e
    */
-  searchDomain_: function(e) {
-    this.$.toolbar.setSearchTerm(e.detail.domain);
-  },
-
-  searchTermChanged_: function(searchTerm) {
-    this.queryHistory(false);
-  },
-
-  groupedRangeChanged_: function(range) {
-    this.queryHistory(false);
-  },
-
-  loadMoreHistory_: function() {
-    this.queryHistory(true);
-  },
-
-  /**
-   * Queries the history backend for results based on queryState_.
-   * @param {boolean} incremental Whether the new query should continue where
-   *    the previous query stopped.
-   */
-  queryHistory: function(incremental) {
-    if (this.queryingDisabled_ || this.firstLoad_)
-      return;
-
-    this.set('queryState_.querying', true);
-    this.set('queryState_.incremental', incremental);
-
-    var queryState = this.queryState_;
-
-    var lastVisitTime = 0;
-    if (incremental) {
-      var lastVisit = queryState.results.slice(-1)[0];
-      lastVisitTime = lastVisit ? lastVisit.time : 0;
-    }
-
-    var maxResults =
-      queryState.range == HistoryRange.ALL_TIME ? RESULTS_PER_PAGE : 0;
-    chrome.send('queryHistory', [
-      queryState.searchTerm, queryState.groupedOffset, Number(queryState.range),
-      lastVisitTime, maxResults
-    ]);
-  },
+  searchDomain_: function(e) { this.$.toolbar.setSearchTerm(e.detail.domain); },
 
   /**
    * @param {!Array<!ForeignSession>} sessionList Array of objects describing
@@ -218,19 +119,7 @@ Polymer({
     if (!isTabSyncEnabled)
       return;
 
-    this.set('queryState_.sessionList', sessionList);
-  },
-
-  /**
-   * @param {string} selectedPage
-   * @param {HistoryRange} range
-   * @return {string}
-   */
-  getSelectedPage: function(selectedPage, range) {
-    if (selectedPage == 'history-list' && range != HistoryRange.ALL_TIME)
-      return 'history-grouped-list';
-
-    return selectedPage;
+    this.sessionList = sessionList;
   },
 
   /**
@@ -239,7 +128,7 @@ Polymer({
    * @private
    */
   syncedTabsSelected_: function(selectedPage) {
-    return selectedPage == 'history-synced-device-manager';
+    return selectedPage == 'synced-devices';
   },
 
   /**
@@ -252,5 +141,5 @@ Polymer({
    */
   shouldShowSpinner_: function(querying, incremental, searchTerm) {
     return querying && !incremental && searchTerm != '';
-  }
+  },
 });