Commit 5530edba authored by calamity's avatar calamity Committed by Commit bot

[MD History] Make forward/backward work in grouped mode.

This CL hooks up the toolbar forward and backward buttons in grouped mode to
change the search timeframe for week and month queries.

BUG=589357
TBR=dbeam@chromium.org
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2481693002
Cr-Commit-Position: refs/heads/master@{#435547}
parent 3f4b3cca
......@@ -96,17 +96,20 @@
query-state="{{queryState_}}">
</history-router>
<history-toolbar id="toolbar"
spinner-active="[[shouldShowSpinner_(queryState_.querying,
queryState_.incremental,
queryState_.searchTerm)]]"
is-grouped-mode="{{grouped_}}"
grouped-offset="{{queryState_.groupedOffset}}"
grouped-range="{{queryState_.range}}"
search-term="{{queryState_.searchTerm}}"
query-start-time="[[queryResult_.info.queryStartTime]]"
query-end-time="[[queryResult_.info.queryEndTime]]"
has-drawer="[[hasDrawer_]]"
is-grouped-mode="{{grouped_}}"
query-end-time="[[queryResult_.info.queryEndTime]]"
has-more-results="[[!queryResult_.info.finished]]"
query-start-time="[[queryResult_.info.queryStartTime]]"
querying="[[queryState_.querying]]"
search-term="{{queryState_.searchTerm}}"
show-menu-promo="[[showMenuPromo_]]"
show-sync-notice="[[showSyncNotice_(hasSyncedResults, selectedPage_)]]"
show-menu-promo="[[showMenuPromo_]]">
spinner-active="[[shouldShowSpinner_(queryState_.querying,
queryState_.incremental,
queryState_.searchTerm)]]">
</history-toolbar>
<div id="main-container">
......
......@@ -50,7 +50,6 @@ Polymer({
queryingDisabled: false,
_range: HistoryRange.ALL_TIME,
searchTerm: '',
// TODO(calamity): Make history toolbar buttons change the offset
groupedOffset: 0,
set range(val) { this._range = Number(val); },
......
......@@ -82,6 +82,7 @@ Polymer({
return domains;
},
/** @private */
updateGroupedHistoryData_: function() {
if (this.historyData.length == 0) {
this.groupedHistoryData_ = [];
......
......@@ -234,14 +234,23 @@
<span id="grouped-date">
{{getHistoryInterval_(queryStartTime, queryEndTime)}}
</span>
<paper-icon-button icon="history:today" alt="$i18n{rangeToday}"
title="$i18n{rangeToday}"></paper-icon-button>
<paper-icon-button icon="history:chevron-left"
alt="$i18n{rangePrevious}" title="$i18n{rangePrevious}"
class="rtl-reversible"></paper-icon-button>
<paper-icon-button icon="cr:chevron-right"
alt="$i18n{rangeNext}" title="$i18n{rangeNext}"
class="rtl-reversible"></paper-icon-button>
<paper-icon-button id="today-button" icon="history:today"
alt="$i18n{rangeToday}"
title="$i18n{rangeToday}"
on-tap="onTodayTap_"
disabled="[[isToday_(groupedOffset)]]"></paper-icon-button>
<paper-icon-button id="prev-button" icon="history:chevron-left"
alt="$i18n{rangePrevious}"
title="$i18n{rangePrevious}"
class="rtl-reversible"
on-tap="onPrevTap_"
disabled="[[!hasMoreResults]]"></paper-icon-button>
<paper-icon-button id="next-button" icon="cr:chevron-right"
alt="$i18n{rangeNext}"
title="$i18n{rangeNext}"
class="rtl-reversible"
on-tap="onNextTap_"
disabled="[[isToday_(groupedOffset)]]"></paper-icon-button>
</div>
</div>
</template>
......
......@@ -8,19 +8,11 @@ Polymer({
// Number of history items currently selected.
// TODO(calamity): bind this to
// listContainer.selectedItem.selectedPaths.length.
count: {
type: Number,
value: 0,
observer: 'changeToolbarView_'
},
count: {type: Number, value: 0, observer: 'changeToolbarView_'},
// True if 1 or more history items are selected. When this value changes
// the background colour changes.
itemsSelected_: {
type: Boolean,
value: false,
reflectToAttribute: true
},
itemsSelected_: {type: Boolean, value: false, reflectToAttribute: true},
// The most recent term entered in the search field. Updated incrementally
// as the user types.
......@@ -32,14 +24,10 @@ Polymer({
// True if the backend is processing and a spinner should be shown in the
// toolbar.
spinnerActive: {
type: Boolean,
value: false
},
spinnerActive: {type: Boolean, value: false},
hasDrawer: {
type: Boolean,
observer: 'hasDrawerChanged_',
reflectToAttribute: true,
},
......@@ -54,11 +42,19 @@ Polymer({
// The period to search over. Matches BrowsingHistoryHandler::Range.
groupedRange: {
type: Number,
value: 0,
reflectToAttribute: true,
notify: true
notify: true,
},
groupedOffset: {
type: Number,
notify: true,
},
querying: Boolean,
hasMoreResults: Boolean,
// The start time of the query range.
queryStartTime: String,
......@@ -76,22 +72,19 @@ Polymer({
.getSearchField();
},
showSearchField: function() {
this.searchField.showAndFocus();
},
showSearchField: function() { this.searchField.showAndFocus(); },
/**
* Changes the toolbar background color depending on whether any history items
* are currently selected.
* @private
*/
changeToolbarView_: function() {
this.itemsSelected_ = this.count > 0;
},
changeToolbarView_: function() { this.itemsSelected_ = this.count > 0; },
/**
* When changing the search term externally, update the search field to
* reflect the new search term.
* @private
*/
searchTermChanged_: function() {
if (this.searchField.getValue() != this.searchTerm) {
......@@ -118,13 +111,11 @@ Polymer({
dropdown.open();
},
onClearSelectionTap_: function() {
this.fire('unselect-all');
},
/** @private */
onClearSelectionTap_: function() { this.fire('unselect-all'); },
onDeleteTap_: function() {
this.fire('delete-selected');
},
/** @private */
onDeleteTap_: function() { this.fire('delete-selected'); },
/**
* If the user is a supervised user the delete button is not shown.
......@@ -134,10 +125,12 @@ Polymer({
return loadTimeData.getBoolean('allowDeletingHistory');
},
/** @private */
numberOfItemsSelected_: function(count) {
return count > 0 ? loadTimeData.getStringF('itemsSelected', count) : '';
},
/** @private */
getHistoryInterval_: function(queryStartTime, queryEndTime) {
// TODO(calamity): Fix the format of these dates.
return loadTimeData.getStringF(
......@@ -145,7 +138,26 @@ Polymer({
},
/** @private */
hasDrawerChanged_: function() {
this.updateStyles();
onTodayTap_: function() {
if (!this.querying)
this.groupedOffset = 0;
},
/** @private */
onPrevTap_: function() {
if (!this.querying)
this.groupedOffset = this.groupedOffset + 1;
},
/** @private */
onNextTap_: function() {
if (!this.querying)
this.groupedOffset = this.groupedOffset - 1;
},
/**
* @private
* @return {boolean}
*/
isToday_: function() { return this.groupedOffset == 0; },
});
......@@ -250,6 +250,8 @@ history-item {
</style>
</template>
</dom-module>
<dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-button/" css-build="shadow">
<template strip-whitespace="">
<style scope="paper-button">:host {
......@@ -369,7 +371,7 @@ paper-ripple {
}
:host([disabled]), .paper-item[disabled] {
color: var(--paper-item-disabled-color,var(--disabled-text-color));
color: var(--paper-item-disabled-color,var(--disabled-text-color));;
;
}
......@@ -395,6 +397,8 @@ paper-ripple {
</style>
</template>
</dom-module>
<dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-item/" css-build="shadow">
<template>
......@@ -425,7 +429,7 @@ paper-ripple {
}
:host([disabled]), .paper-item[disabled] {
color: var(--paper-item-disabled-color,var(--disabled-text-color));
color: var(--paper-item-disabled-color,var(--disabled-text-color));;
;
}
......@@ -492,6 +496,8 @@ paper-ripple {
</dom-module>
<script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-next-lite.min.js"></script>
<dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-dropdown/" css-build="shadow">
<template>
<style scope="iron-dropdown">:host {
......@@ -520,8 +526,8 @@ paper-ripple {
display: block;
padding: 8px 0;
background: var(--paper-listbox-background-color,var(--primary-background-color));
color: var(--paper-listbox-color,var(--primary-text-color));
background: var(--paper-listbox-background-color,var(--primary-background-color));;
color: var(--paper-listbox-color,var(--primary-text-color));;
;
}
......@@ -1269,7 +1275,7 @@ paper-spinner {
}
paper-ripple {
color: var(--paper-tab-ink,var(--paper-yellow-a100));
color: var(--paper-tab-ink,var(--paper-yellow-a100));;
}
.tab-content > ::content > a {
......@@ -1292,6 +1298,8 @@ paper-ripple {
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path></g>
</defs></svg>
</iron-iconset-svg>
<dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tabs/" css-build="shadow">
<template>
<style scope="paper-tabs">:host {
......@@ -1374,7 +1382,7 @@ paper-icon-button {
bottom: 0;
left: 0;
right: 0;
background-color: var(--paper-tabs-selection-bar-color,var(--paper-yellow-a100));
background-color: var(--paper-tabs-selection-bar-color,var(--paper-yellow-a100));;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left center;
......
......@@ -24,6 +24,7 @@ Polymer({
observers: [
'searchTermChanged_(queryState.searchTerm)',
'groupedOffsetChanged_(queryState.groupedOffset)',
],
listeners: {
......@@ -35,7 +36,7 @@ Polymer({
/**
* @param {HistoryQuery} info An object containing information about the
* query.
* @param {!Array<HistoryEntry>} results A list of results.
* @param {!Array<!HistoryEntry>} results A list of results.
*/
historyResult: function(info, results) {
this.initializeResults_(info, results);
......@@ -152,6 +153,15 @@ Polymer({
if (oldRange == undefined)
return;
this.set('queryState.groupedOffset', 0);
// Reset the results on range change to prevent stale results from being
// processed into the incoming range's UI.
if (this.queryResult.info) {
this.set('queryResult.results', []);
this.historyResult(this.queryResult.info, []);
}
this.queryHistory(false);
this.fire('history-view-changed');
},
......@@ -164,6 +174,11 @@ Polymer({
md_history.BrowserService.getInstance().recordAction('Search');
},
/** @private */
groupedOffsetChanged_: function() {
this.queryHistory(false);
},
/** @private */
loadMoreHistory_: function() { this.queryHistory(true); },
......
......@@ -93,9 +93,39 @@ cr.define('md_history.history_toolbar_test', function() {
toolbar.$$('cr-toolbar').fire('search-changed', 'Test2');
});
test('grouped history navigation buttons', function() {
var info = createHistoryInfo();
info.finished = false;
app.historyResult(info, []);
app.grouped_ = true;
return PolymerTest.flushTasks().then(function() {
app.set('queryState_.range', HistoryRange.MONTH);
groupedList = app.$.history.$$('#grouped-list');
assertTrue(!!groupedList);
var today = toolbar.$$('#today-button');
var next = toolbar.$$('#next-button');
var prev = toolbar.$$('#prev-button');
assertEquals(0, toolbar.groupedOffset);
assertTrue(today.disabled);
assertTrue(next.disabled);
assertFalse(prev.disabled);
MockInteractions.tap(prev);
assertEquals(1, toolbar.groupedOffset);
assertFalse(today.disabled);
assertFalse(next.disabled);
assertFalse(prev.disabled);
app.historyResult(createHistoryInfo(), []);
assertFalse(today.disabled);
assertFalse(next.disabled);
assertTrue(prev.disabled);
});
});
teardown(function() {
registerMessageCallback('queryHistory', this, function() {});
app.set('queryState_.searchTerm', '');
});
});
}
......
......@@ -9,8 +9,12 @@
*/
function replaceBody(element) {
var body = document.body;
var currentBody =
body.querySelector('history-app') || body.querySelector('.test-body');
var app = body.querySelector('history-app');
// Clear the query on the app, if it exists. This clears any query in the URL.
if (app)
app.set('queryState_.searchTerm', '');
var currentBody = app || body.querySelector('.test-body');
body.removeChild(currentBody);
element.classList.add('test-body');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment