Search query back button (#1981)

* Always allow history to go back/forward when using browser history

* Add a back button which is visible when using the query parser

1 files changed, 17 insertions, 4 deletions

diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 2b97479e..c929ceaa 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -28,6 +28,7 @@ class SearchDisplayController {
         this._displayAudio = displayAudio;
         this._searchPersistentStateController = searchPersistentStateController;
         this._searchButton = document.querySelector('#search-button');
+        this._searchBackButton = document.querySelector('#search-back-button');
         this._queryInput = document.querySelector('#search-textbox');
         this._introElement = document.querySelector('#intro');
         this._clipboardMonitorEnableCheckbox = document.querySelector('#clipboard-monitor-enable');
@@ -75,6 +76,7 @@ class SearchDisplayController {
         this._display.setHistorySettings({useBrowserHistory: true});
 
         this._searchButton.addEventListener('click', this._onSearch.bind(this), false);
+        this._searchBackButton.addEventListener('click', this._onSearchBackButtonClick.bind(this), false);
         this._wanakanaEnableCheckbox.addEventListener('change', this._onWanakanaEnableChange.bind(this));
         window.addEventListener('copy', this._onCopy.bind(this));
         this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this));
@@ -146,15 +148,20 @@ class SearchDisplayController {
         this._setWanakanaEnabled(enableWanakana);
     }
 
-    _onContentUpdateStart({type, query, content}) {
+    _onContentUpdateStart({type, query}) {
         let animate = false;
         let valid = false;
+        let showBackButton = false;
         switch (type) {
             case 'terms':
             case 'kanji':
-                animate = !!content.animate;
-                valid = (typeof query === 'string' && query.length > 0);
-                this._display.blurElement(this._queryInput);
+                {
+                    const {content, state} = this._display.history;
+                    animate = (typeof content === 'object' && content !== null && content.animate === true);
+                    showBackButton = (typeof state === 'object' && state !== null && state.cause === 'queryParser');
+                    valid = (typeof query === 'string' && query.length > 0);
+                    this._display.blurElement(this._queryInput);
+                }
                 break;
             case 'clear':
                 valid = false;
@@ -165,6 +172,8 @@ class SearchDisplayController {
 
         if (typeof query !== 'string') { query = ''; }
 
+        this._searchBackButton.hidden = !showBackButton;
+
         if (this._queryInput.value !== query) {
             this._queryInput.value = query;
             this._updateSearchHeight(true);
@@ -193,6 +202,10 @@ class SearchDisplayController {
         this._search(true, 'new', true, null);
     }
 
+    _onSearchBackButtonClick() {
+        this._display.history.back();
+    }
+
     _onCopy() {
         // ignore copy from search page
         this._clipboardMonitor.setPreviousText(window.getSelection().toString().trim());