Display and query parser layout (#1043)

* Update query parser text assignment

* Update how padding is used

* Hide query parser container by default

ext/bg/js/query-parser.js

@@ -21,12 +21,13 @@
  */
 
 class QueryParser extends EventDispatcher {
-    constructor({getOptionsContext, progressIndicatorVisible, documentUtil}) {
+    constructor({getOptionsContext, documentUtil}) {
         super();
         this._getOptionsContext = getOptionsContext;
-        this._progressIndicatorVisible = progressIndicatorVisible;
-        this._selectedParser = null;
         this._documentUtil = documentUtil;
+        this._text = '';
+        this._setTextToken = null;
+        this._selectedParser = null;
         this._parseResults = [];
         this._queryParser = document.querySelector('#query-parser-content');
         this._queryParserModeContainer = document.querySelector('#query-parser-mode-container');
@@ -43,6 +44,10 @@ class QueryParser extends EventDispatcher {
         });
     }
 
+    get text() {
+        return this._text;
+    }
+
     prepare() {
         this._textScanner.prepare();
         this._textScanner.on('searched', this._onSearched.bind(this));
@@ -63,18 +68,18 @@ class QueryParser extends EventDispatcher {
     }
 
     async setText(text) {
-        const overrideToken = this._progressIndicatorVisible.setOverride(true);
-        try {
+        this._text = text;
         this._setPreview(text);
 
+        const token = {};
+        this._setTextToken = token;
         this._parseResults = await api.textParse(text, this._getOptionsContext());
+        if (this._setTextToken !== token) { return; }
+
         this._refreshSelectedParser();
 
         this._renderParserSelect();
         this._renderParseResult();
-        } finally {
-            this._progressIndicatorVisible.clearOverride(overrideToken);
-        }
     }
 
     // Private

ext/bg/search.html

@@ -47,7 +47,7 @@
             </div>
         </div>
 
-        <div class="scan-disable" id="query-parser-container">
+        <div class="scan-disable" id="query-parser-container" hidden>
             <div id="query-parser-content"></div>
         </div>
 

ext/mixed/css/display.css

@@ -36,7 +36,11 @@
     --spinner-size-no-units: 32;
     --action-button-size-no-units: 16;
 
-    --entry-padding: 0.72em;
+    --list-margin: 0.72em;
+    --main-content-vertical-padding: 0em;
+    --main-content-horizontal-padding: 0em;
+    --entry-horizontal-padding: 0.72em;
+    --entry-vertical-padding: 0.72em;
 
     --sidebar-width-no-units: 40;
     --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
@@ -178,7 +182,7 @@ body {
 }
 ol, ul {
     margin-top: 0;
-    margin-bottom: var(--entry-padding);
+    margin-bottom: var(--list-padding);
 }
 #spinner {
     position: fixed;
@@ -245,6 +249,7 @@ a {
 }
 .content-body-inner {
     width: 100%;
+    padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
 }
 
 
@@ -371,22 +376,20 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
 
 
 /* Search page */
+#query-parser-container {
+    padding-left: var(--entry-horizontal-padding);
+    padding-right: var(--entry-horizontal-padding);
+    padding-bottom: 0.25em;
+    border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
+}
 #query-parser-content {
     margin-top: 0.5em;
     font-size: var(--query-parser-font-size);
     white-space: pre-wrap;
 }
-#query-parser-content:not(:empty) {
-    padding-bottom: 0.25em;
-    border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
-}
 #query-parser-content[data-term-spacing=true] .query-parser-term {
     margin-right: 0.2em;
 }
-:root[data-yomichan-page=float] #query-parser-container {
-    padding-left: var(--entry-padding);
-    padding-right: var(--entry-padding);
-}
 
 
 /* Action buttons */
@@ -516,12 +519,8 @@ button.action-button {
 
 /* Entries */
 .entry {
-    padding-top: var(--entry-padding);
-    padding-bottom: var(--entry-padding);
-}
-:root[data-yomichan-page=float] .entry {
-    padding-left: var(--entry-padding);
-    padding-right: var(--entry-padding);
+    padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+    position: relative;
 }
 .term-expression .kanji-link {
     border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color);

ext/mixed/css/search.css

@@ -17,9 +17,11 @@
 
 /* Variables */
 :root {
+    --main-content-horizontal-padding: 0.72em;
+    --entry-horizontal-padding: 0;
+
     --padding: 10px;
     --main-content-size: 700px;
-    --main-content-padding: 10px;
     --shadow-color: rgba(0, 0, 0, 0.185);
     --shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color);
 
@@ -231,7 +233,6 @@ label.toggle {
 /* Content layout */
 .content-body-inner {
     width: var(--main-content-size);
-    padding: 0 var(--main-content-padding);
     max-width: 100%;
     box-sizing: border-box;
     margin: 0 auto;

ext/mixed/js/display.js

@@ -76,7 +76,6 @@ class Display extends EventDispatcher {
         this._queryParserContainer = document.querySelector('#query-parser-container');
         this._queryParser = new QueryParser({
             getOptionsContext: this.getOptionsContext.bind(this),
-            progressIndicatorVisible: this._progressIndicatorVisible,
             documentUtil: this._documentUtil
         });
         this._mode = null;
@@ -154,7 +153,7 @@ class Display extends EventDispatcher {
 
     set queryParserVisible(value) {
         this._queryParserVisible = value;
-        this._updateQueryParserVisibility();
+        this._updateQueryParser();
     }
 
     get mode() {
@@ -466,7 +465,7 @@ class Display extends EventDispatcher {
 
             const fullVisible = urlSearchParams.get('full-visible');
             this._queryParserVisibleOverride = (fullVisible === null ? null : (fullVisible !== 'false'));
-            this._updateQueryParserVisibility();
+            this._updateQueryParser();
 
             this._closePopups();
             this._setEventListenersActive(false);
@@ -862,7 +861,7 @@ class Display extends EventDispatcher {
     async _setContentTermsOrKanji(token, isTerms, urlSearchParams, eventArgs) {
         let source = urlSearchParams.get('query');
         if (!source) {
-            this._setQueryParserText('');
+            this._setFullQuery('');
             return false;
         }
 
@@ -890,7 +889,7 @@ class Display extends EventDispatcher {
         source = this.postProcessQuery(source);
         let full = urlSearchParams.get('full');
         full = (full === null ? source : this.postProcessQuery(full));
-        this._setQueryParserText(full);
+        this._setFullQuery(full);
         this._setTitleText(source);
 
         let {definitions} = content;
@@ -990,11 +989,27 @@ class Display extends EventDispatcher {
         }
     }
 
-    _setQueryParserText(text) {
-        if (this._fullQuery === text) { return; }
+    _setFullQuery(text) {
         this._fullQuery = text;
-        if (!this._isQueryParserVisible()) { return; }
-        this._queryParser.setText(text);
+        this._updateQueryParser();
+    }
+
+    _updateQueryParser() {
+        const text = this._fullQuery;
+        const visible = this._isQueryParserVisible();
+        this._queryParserContainer.hidden = !visible || text.length === 0;
+        if (visible && this._queryParser.text !== text) {
+            this._setQueryParserText(text);
+        }
+    }
+
+    async _setQueryParserText(text) {
+        const overrideToken = this._progressIndicatorVisible.setOverride(true);
+        try {
+            await this._queryParser.setText(text);
+        } finally {
+            this._progressIndicatorVisible.clearOverride(overrideToken);
+        }
     }
 
     _setTitleText(text) {
@@ -1366,10 +1381,6 @@ class Display extends EventDispatcher {
         );
     }
 
-    _updateQueryParserVisibility() {
-        this._queryParserContainer.hidden = !this._isQueryParserVisible();
-    }
-
     _closePopups() {
         yomichan.trigger('closePopups');
     }