hide search input in native popups

3 files changed, 40 insertions, 37 deletions

diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index a9f2385b..bdb8a76a 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -603,8 +603,10 @@ class Backend {
         const {popupWidth, popupHeight} = options.general;
 
         const baseUrl = chrome.runtime.getURL('/bg/search.html');
-        const queryString = (query && query.length > 0) ? `?query=${encodeURIComponent(query)}` : '';
-        const url = baseUrl + queryString;
+        const queryParams = {mode};
+        if (query && query.length > 0) { queryParams.query = query; }
+        const queryString = new URLSearchParams(queryParams).toString();
+        const url = `${baseUrl}?${queryString}`;
 
         switch (mode) {
             case 'sameTab':
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index e32ba46e..ea4ab235 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -53,6 +53,8 @@ class DisplaySearch extends Display {
                 this.search.addEventListener('click', (e) => this.onSearch(e), false);
             }
             if (this.query !== null) {
+                const {query='', mode=''} = DisplaySearch.parseQueryStringFromLocation(window.location.href);
+                document.documentElement.dataset.searchMode = mode;
                 this.query.addEventListener('input', () => this.onSearchInput(), false);
 
                 if (this.wanakanaEnable !== null) {
@@ -63,7 +65,6 @@ class DisplaySearch extends Display {
                         this.wanakanaEnable.checked = false;
                     }
                     this.wanakanaEnable.addEventListener('change', (e) => {
-                        const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
                         if (e.target.checked) {
                             window.wanakana.bind(this.query);
                             this.setQuery(window.wanakana.toKana(query));
@@ -77,15 +78,12 @@ class DisplaySearch extends Display {
                     });
                 }
 
-                const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
-                if (query !== null) {
-                    if (this.isWanakanaEnabled()) {
-                        this.setQuery(window.wanakana.toKana(query));
-                    } else {
-                        this.setQuery(query);
-                    }
-                    this.onSearchQueryUpdated(this.query.value, false);
+                if (this.isWanakanaEnabled()) {
+                    this.setQuery(window.wanakana.toKana(query));
+                } else {
+                    this.setQuery(query);
                 }
+                this.onSearchQueryUpdated(this.query.value, false);
             }
             if (this.clipboardMonitorEnable !== null) {
                 if (this.options.general.enableClipboardMonitor === true) {
@@ -162,13 +160,12 @@ class DisplaySearch extends Display {
     }
 
     onPopState() {
-        const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
-        if (this.query !== null) {
-            if (this.isWanakanaEnabled()) {
-                this.setQuery(window.wanakana.toKana(query));
-            } else {
-                this.setQuery(query);
-            }
+        const {query='', mode=''} = DisplaySearch.parseQueryStringFromLocation(window.location.href);
+        document.documentElement.dataset.searchMode = mode;
+        if (this.isWanakanaEnabled()) {
+            this.setQuery(window.wanakana.toKana(query));
+        } else {
+            this.setQuery(query);
         }
 
         this.onSearchQueryUpdated(this.query.value, false);
@@ -334,9 +331,11 @@ class DisplaySearch extends Display {
         }
     }
 
-    static getSearchQueryFromLocation(url) {
-        const match = /^[^?#]*\?(?:[^&#]*&)?query=([^&#]*)/.exec(url);
-        return match !== null ? decodeURIComponent(match[1]) : null;
+    static parseQueryStringFromLocation(url) {
+        const parsedUrl = new URL(url);
+        const parsedSearch = new URLSearchParams(parsedUrl.search);
+        return Array.from(parsedSearch.entries())
+            .reduce((a, [k, v]) => Object.assign({}, a, {[k]: v}), {});
     }
 }
 
diff --git a/ext/bg/search.html b/ext/bg/search.html
index bb555e92..10e5aa8e 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -25,23 +25,25 @@
                 <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
             </div>
 
-            <div class="input-group" style="padding-top: 20px;">
-                <span title="Enable kana input method" class="input-group-text">
-                    <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
-                    <label for="wanakana-enable" class="scan-disable">あ</label>
-                </span>
-                <span title="Enable clipboard monitor" class="input-group-text">
-                    <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
-                    <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
-                </span>
-            </div>
+            <div class="search-input">
+                <div class="input-group" style="padding-top: 20px;">
+                    <span title="Enable kana input method" class="input-group-text">
+                        <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
+                        <label for="wanakana-enable" class="scan-disable">あ</label>
+                    </span>
+                    <span title="Enable clipboard monitor" class="input-group-text">
+                        <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
+                        <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
+                    </span>
+                </div>
 
-            <form class="input-group">
-                <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
-                <span class="input-group-btn">
-                    <input type="submit" class="btn btn-default form-control" id="search" value="Search">
-                </span>
-            </form>
+                <form class="input-group">
+                    <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
+                    <span class="input-group-btn">
+                        <input type="submit" class="btn btn-default form-control" id="search" value="Search">
+                    </span>
+                </form>
+            </div>
 
             <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>