Make query parser mode select in the base HTML (#1009)

ext/bg/js/query-parser.js

@@ -29,7 +29,8 @@ class QueryParser extends EventDispatcher {
         this._documentUtil = documentUtil;
         this._parseResults = [];
         this._queryParser = document.querySelector('#query-parser-content');
-        this._queryParserSelect = document.querySelector('#query-parser-select-container');
+        this._queryParserModeContainer = document.querySelector('#query-parser-mode-container');
+        this._queryParserModeSelect = document.querySelector('#query-parser-mode-select');
         this._textScanner = new TextScanner({
             node: this._queryParser,
             ignoreElements: () => [],
@@ -45,6 +46,7 @@ class QueryParser extends EventDispatcher {
     prepare() {
         this._textScanner.prepare();
         this._textScanner.on('searched', this._onSearched.bind(this));
+        this._queryParserModeSelect.addEventListener('change', this._onParserChange.bind(this), false);
     }
 
     setOptions({selectedParser, termSpacing, scanning}) {
@@ -94,7 +96,7 @@ class QueryParser extends EventDispatcher {
     }
 
     _onParserChange(e) {
-        const value = e.target.value;
+        const value = e.currentTarget.value;
         this._setSelectedParser(value);
     }
 
@@ -128,13 +130,11 @@ class QueryParser extends EventDispatcher {
     }
 
     _renderParserSelect() {
-        this._queryParserSelect.textContent = '';
+        const visible = (this._parseResults.length > 1);
-        if (this._parseResults.length > 1) {
+        if (visible) {
-            const selectedParser = this._selectedParser;
+            this._updateParserModeSelect(this._queryParserModeSelect, this._parseResults, this._selectedParser);
-            const select = this._createParserSelect(this._parseResults, selectedParser);
-            select.addEventListener('change', this._onParserChange.bind(this));
-            this._queryParserSelect.appendChild(select);
         }
+        this._queryParserModeContainer.hidden = !visible;
     }
 
     _renderParseResult() {
@@ -144,12 +144,13 @@ class QueryParser extends EventDispatcher {
         this._queryParser.appendChild(this._createParseResult(parseResult.content, false));
     }
 
-    _createParserSelect(parseResults, selectedParser) {
+    _updateParserModeSelect(select, parseResults, selectedParser) {
-        const select = document.createElement('select');
+        const fragment = document.createDocumentFragment();
-        select.className = 'query-parser-select form-control';
+
+        let index = 0;
+        let selectedIndex = -1;
         for (const parseResult of parseResults) {
             const option = document.createElement('option');
-            option.className = 'query-parser-select-option';
             option.value = parseResult.id;
             switch (parseResult.source) {
                 case 'scanning-parser':
@@ -159,13 +160,21 @@ class QueryParser extends EventDispatcher {
                     option.textContent = `MeCab: ${parseResult.dictionary}`;
                     break;
                 default:
-                    option.textContent = 'Unrecognized dictionary';
+                    option.textContent = `Unknown source: ${parseResult.source}`;
                     break;
             }
             option.defaultSelected = selectedParser === parseResult.id;
-            select.appendChild(option);
+            fragment.appendChild(option);
+
+            if (selectedParser === parseResult.id) {
+                selectedIndex = index;
             }
-        return select;
+            ++index;
+        }
+
+        select.textContent = '';
+        select.appendChild(fragment);
+        select.selectedIndex = selectedIndex;
     }
 
     _createParseResult(terms, preview) {

ext/bg/search.html

@@ -32,6 +32,10 @@
                 <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>
+            <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>
         <div class="search-textbox-container">
             <textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
@@ -42,7 +46,6 @@
     <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
 
     <div class="scan-disable" id="query-parser-container">
-        <div id="query-parser-select-container"></div>
         <div id="query-parser-content"></div>
     </div>
 

ext/fg/float.html

@@ -23,7 +23,9 @@
     </div></div><div class="navigation-header-spacer"></div>
 
     <div class="scan-disable" id="query-parser-container" hidden>
-        <div id="query-parser-select-container" class="input-group"></div>
+        <div class="search-option" id="query-parser-mode-container" hidden>
+            <select id="query-parser-mode-select"></select>
+        </div>
         <div id="query-parser-content"></div>
     </div>
 

ext/mixed/css/search.css

@@ -17,6 +17,7 @@
 
 /* Variables */
 :root {
+    --padding: 10px;
     --main-content-size: 700px;
     --main-content-padding: 10px;
     --shadow-color: rgba(0, 0, 0, 0.185);
@@ -33,6 +34,11 @@
     --animation-duration: 0s;
     --animation-duration2: calc(var(--animation-duration) * 2);
 
+    --material-arrow-dimension1: 5px;
+    --material-arrow-dimension2: 10px;
+    --input-height: 32px;
+    --input-width-large: 200px;
+
     --text-color-default: #222222;
     --background-color: #ffffff;
     --background-color-light: #ffffff;
@@ -95,6 +101,30 @@ h1 {
     border-bottom: var(--thin-border-size) solid var(--separator-color1);
 }
 
+/* Material design select */
+select {
+    width: var(--input-width-large);
+    height: var(--input-height);
+    line-height: var(--input-height);
+    border: 0;
+    border-radius: 0;
+    box-sizing: border-box;
+    padding: 0 0.5em;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url(/mixed/img/material-down-arrow.svg);
+    background-repeat: no-repeat;
+    background-position: right var(--padding) center;
+    background-color: var(--input-background-color);
+    background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
+    cursor: pointer;
+    outline: 0;
+}
+select::-ms-expand {
+    display: none;
+}
+
 /* Material design toggle switch */
 label.toggle {
     cursor: default;
@@ -302,15 +332,31 @@ label.toggle {
     align-items: center;
 }
 .search-option {
-    display: flex;
     flex: 0 1 auto;
     margin: 0.5em 1em;
     align-items: center;
     cursor: pointer;
 }
+.search-option:not([hidden]) {
+    display: flex;
+}
 .search-option-label {
     padding-left: 0.5em;
 }
+.search-option-pre-label {
+    padding-right: 0.5em;
+}
+#query-parser-mode-container {
+    flex: 1 1 auto;
+}
+#query-parser-mode-container:not([hidden]) {
+    display: flex;
+}
+#query-parser-mode-select {
+    flex: 1 1 auto;
+    max-width: 220px;
+    min-width: 100px;
+}
 
 /* Search styles */
 #intro {