disable kana conversion on search page for other languages (#705)

* disable kana conversion for other languages

* ternary parentheses

* css fix

3 files changed, 18 insertions, 15 deletions

diff --git a/ext/css/search.css b/ext/css/search.css
index 98fa13e3..521008eb 100644
--- a/ext/css/search.css
+++ b/ext/css/search.css
@@ -18,7 +18,6 @@
 
 /* Variables */
 :root {
-    --main-content-horizontal-padding: 0.72em;
     --entry-horizontal-padding: 0;
 
     --padding: calc(10em / var(--font-size-no-units));
@@ -132,12 +131,12 @@ h1 {
 .search-options {
     display: flex;
     flex-flow: row wrap;
-    margin: 0.5em calc(-1 * var(--main-content-horizontal-padding));
+    margin: 0.5em 0;
     align-items: center;
 }
 .search-option {
     flex: 0 1 auto;
-    margin: 0.5em 1em;
+    margin: 0.5em 2em 0.5em 0;
     align-items: center;
     cursor: pointer;
 }
diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 4b8141e1..23824aed 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -47,6 +47,8 @@ export class SearchDisplayController {
         this._clipboardMonitorEnableCheckbox = querySelectorNotNull(document, '#clipboard-monitor-enable');
         /** @type {HTMLInputElement} */
         this._wanakanaEnableCheckbox = querySelectorNotNull(document, '#wanakana-enable');
+        /** @type {HTMLElement} */
+        this._wanakanaSearchOption = querySelectorNotNull(document, '#search-option-wanakana');
         /** @type {EventListenerCollection} */
         this._queryInputEvents = new EventListenerCollection();
         /** @type {boolean} */
@@ -184,9 +186,11 @@ export class SearchDisplayController {
         this._clipboardMonitorEnabled = options.clipboard.enableSearchPageMonitor;
         this._updateClipboardMonitorEnabled();
 
-        const enableWanakana = !!options.general.enableWanakana;
-        this._wanakanaEnableCheckbox.checked = enableWanakana;
-        this._setWanakanaEnabled(enableWanakana);
+        const {language, enableWanakana} = options.general;
+        const wanakanaEnabled = language === 'ja' && enableWanakana;
+        this._wanakanaEnableCheckbox.checked = wanakanaEnabled;
+        this._wanakanaSearchOption.style.display = language === 'ja' ? '' : 'none';
+        this._setWanakanaEnabled(wanakanaEnabled);
     }
 
     /**
diff --git a/ext/search.html b/ext/search.html
index 1deadd3c..08c8bff5 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -35,23 +35,23 @@
 
                         <div class="scan-disable">
                             <div class="search-options">
-                                <label class="search-option">
-                                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                    <span class="search-option-label">Automatic kana conversion</span>
-                                </label>
+                                <div class="search-option" id="search-option-profile-select">
+                                    <span class="profile-select-container"><select class="profile-select" id="profile-select">
+                                        <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+                                    </select></span>
+                                </div>
                                 <label class="search-option" id="search-option-clipboard-monitor-container">
                                     <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
                                     <span class="search-option-label">Clipboard monitor</span>
                                 </label>
+                                <label class="search-option" id="search-option-wanakana">
+                                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                    <span class="search-option-label">Automatic kana conversion</span>
+                                </label>
                                 <div class="search-option" id="query-parser-mode-container" hidden>
                                     <span class="search-option-pre-label">Parser:</span>
                                     <select id="query-parser-mode-select"></select>
                                 </div>
-                                <div class="search-option" id="search-option-profile-select">
-                                    <span class="profile-select-container"><select class="profile-select" id="profile-select">
-                                        <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
-                                    </select></span>
-                                </div>
                             </div>
                             <div class="search-textbox-container">
                                 <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>