Merge branch 'master' into testing

27 files changed, 1433 insertions, 851 deletions

diff --git a/README.md b/README.md
index 40576a5a..b05a050e 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ primary language is not English, you may consider also importing the English ver
 Yomichan supports the use of custom dictionaries including the esoteric but popular
 [EPWING](https://ja.wikipedia.org/wiki/EPWING) format. They were often utilized in portable electronic dictionaries
 similar to the ones pictured below. These dictionaries are often sought after by language learners for their correctness
-and excellent coverage of the Japanese language. 
+and excellent coverage of the Japanese language.
 
 Unfortunately, as most of the dictionaries released in this format are proprietary I am unable to bundle them with
 Yomichan. You will need to procure these dictionaries yourself and import them with [Yomichan
@@ -252,16 +252,16 @@ tmpl/*.html -f ext/bg/js/templates.js` from the project's base directory to comp
 
 ### Dependencies ###
 
-Yomichan uses several third-party libraries to function. Below are links to homepages and snapshots of the exact
+Yomichan uses several third-party libraries to function. Below are links to homepages, snapshots, and licenses of the exact
 versions packaged.
 
-*   Bootstrap Toggle: [homepage](https://www.bootstraptoggle.com/) - [snapshot](https://github.com/minhur/bootstrap-toggle/archive/b76c094.zip)
-*   Bootstrap: [homepage](https://getbootstrap.com/) - [snapshot](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip)
-*   Dexie: [homepage](https://dexie.org/) - [snapshot](https://github.com/dfahlander/Dexie.js/archive/v2.0.0-beta.10.zip)
-*   Handlebars: [homepage](https://handlebarsjs.com/) - [snapshot](http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-714a4c4.js)
-*   JQuery: [homepage](https://blog.jquery.com/) - [snapshot](https://code.jquery.com/jquery-3.2.1.min.js)
-*   JSZip: [homepage](https://stuk.github.io/jszip/) - [snapshot](https://raw.githubusercontent.com/Stuk/jszip/de7f52fbcba485737bef7923a83f0fad92d9f5bc/dist/jszip.min.js)
-*   WanaKana: [homepage](https://wanakana.com/) - [snapshot](https://raw.githubusercontent.com/WaniKani/WanaKana/7c4a052/gh-pages/assets/js/wanakana.min.js)
+*   Bootstrap: [homepage](https://getbootstrap.com/) - [snapshot](https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip) - [license](https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE)
+*   Bootstrap Toggle: [homepage](https://www.bootstraptoggle.com/) - [snapshot](https://github.com/minhur/bootstrap-toggle/archive/b76c094.zip) - [license](https://github.com/minhur/bootstrap-toggle/blob/2.2.0/LICENSE)
+*   Dexie: [homepage](https://dexie.org/) - [snapshot](https://github.com/dfahlander/Dexie.js/archive/v2.0.0-beta.10.zip) - [license](https://github.com/dfahlander/Dexie.js/blob/v2.0.0-beta.10/LICENSE)
+*   Handlebars: [homepage](https://handlebarsjs.com/) - [snapshot](http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-714a4c4.js) - [license](https://github.com/wycats/handlebars.js/blob/v4.0.6/LICENSE)
+*   jQuery: [homepage](https://blog.jquery.com/) - [snapshot](https://code.jquery.com/jquery-3.2.1.min.js) - [license](https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt)
+*   JSZip: [homepage](https://stuk.github.io/jszip/) - [snapshot](https://raw.githubusercontent.com/Stuk/jszip/de7f52fbcba485737bef7923a83f0fad92d9f5bc/dist/jszip.min.js) - [license](https://github.com/Stuk/jszip/blob/v3.1.3/LICENSE.markdown)
+*   WanaKana: [homepage](https://wanakana.com/) - [snapshot](https://raw.githubusercontent.com/WaniKani/WanaKana/7c4a052/gh-pages/assets/js/wanakana.min.js) - [license](https://github.com/WaniKani/WanaKana/blob/2.2.3/LICENSE)
 
 ## Frequently Asked Questions ##
 
diff --git a/ext/bg/context.html b/ext/bg/context.html
index 198ccd42..51346838 100644
--- a/ext/bg/context.html
+++ b/ext/bg/context.html
@@ -14,20 +14,20 @@
 
             .btn-group {
                 display: flex;
+                margin-top: 10px;
+                white-space: nowrap;
             }
         </style>
     </head>
     <body>
-        <p>
+        <div>
             <input type="checkbox" id="enable-search">
-        </p>
-        <p>
-            <div class="btn-group" style="white-space: nowrap">
-                <button type="button" id="open-search" title="Search (Alt + Insert)" class="btn btn-default btn-xs glyphicon glyphicon-search"></button>
-                <button type="button" id="open-options" title="Options" class="btn btn-default btn-xs glyphicon glyphicon-wrench"></button>
-                <button type="button" id="open-help" title="Help" class="btn btn-default btn-xs glyphicon glyphicon-question-sign"></button>
-            </div>
-        </p>
+        </div>
+        <div class="btn-group">
+            <button type="button" id="open-search" title="Search (Alt + Insert)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button>
+            <button type="button" id="open-options" title="Options" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-wrench"></span></button>
+            <button type="button" id="open-help" title="Help" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-question-sign"></span></button>
+        </div>
 
         <script src="/mixed/lib/jquery.min.js"></script>
         <script src="/mixed/lib/bootstrap-toggle/bootstrap-toggle.min.js"></script>
diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
new file mode 100644
index 00000000..12bbe8a8
--- /dev/null
+++ b/ext/bg/css/settings.css
@@ -0,0 +1,154 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+#anki-spinner, #anki-general, #anki-error,
+#dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
+#debug, .options-advanced, .storage-hidden, #storage-spinner {
+    display: none;
+}
+
+.tab-content {
+    border-bottom: 1px #ddd solid;
+    border-left: 1px #ddd solid;
+    border-right: 1px #ddd solid;
+    padding: 10px;
+}
+
+#field-templates {
+    font-family: monospace;
+    overflow-x: hidden;
+    white-space: pre;
+}
+
+.bottom-links {
+    padding-bottom: 1em;
+}
+
+.label-light {
+    font-weight: normal;
+}
+
+.form-control.is-invalid {
+    border-color: #f00000;
+}
+
+.condition {
+    display: flex;
+    -flex-wrap: wrap;
+}
+.condition-input {
+    flex: 1 1 auto;
+}
+.condition-line-break {
+    flex: 1 0 100%;
+    display: none;
+}
+.condition>.input-group-btn {
+    width: auto;
+}
+.condition>.condition-prefix:after {
+    content: "IF";
+}
+.condition:nth-child(n+2)>.condition-prefix:after {
+    content: "AND";
+}
+
+.input-group .condition-prefix {
+    flex: 0 0 auto;
+}
+.input-group .condition-prefix,
+.input-group .condition-group-separator-label {
+    width: 60px;
+    text-align: center;
+}
+.input-group .condition-group-separator-label {
+    padding: 6px 12px;
+    font-weight: bold;
+    display: inline-block;
+}
+.input-group .condition-type,
+.input-group .condition-operator {
+    width: auto;
+    text-align: center;
+    text-align-last: center;
+}
+
+.condition-group>.condition>div:first-child {
+    border-bottom-left-radius: 0;
+}
+.condition-group>.condition:nth-child(n+2)>div:first-child {
+    border-top-left-radius: 0;
+}
+.condition-group>.condition:nth-child(n+2)>div:last-child>button {
+    border-top-right-radius: 0;
+}
+.condition-group>.condition:nth-last-child(n+2)>div:last-child>button {
+    border-bottom-right-radius: 0;
+}
+.condition-group-options>.condition-add {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.condition-groups>*:last-of-type {
+    display: none;
+}
+
+#custom-popup-css {
+    width: 100%;
+    min-height: 34px;
+    height: 96px;
+    resize: vertical;
+    font-family: 'Courier New', Courier, monospace;
+    white-space: pre;
+}
+
+[data-show-for-browser] {
+    display: none;
+}
+
+[data-browser=edge] [data-show-for-browser~=edge],
+[data-browser=chrome] [data-show-for-browser~=chrome],
+[data-browser=firefox] [data-show-for-browser~=firefox],
+[data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
+    display: initial;
+}
+
+@media screen and (max-width: 740px) {
+    .col-xs-6 {
+        float: none;
+        width: 100%;
+    }
+    .col-xs-6+.col-xs-6 {
+        margin-top: 15px;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .condition {
+        flex-wrap: wrap;
+    }
+    .condition-input {
+        order: 2;
+    }
+    .condition-line-break {
+        display: block;
+        order: 1;
+    }
+}
diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index 474fe604..222e7ffe 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -126,35 +126,35 @@ async function apiTemplateRender(template, data, dynamic) {
 }
 
 async function apiCommandExec(command) {
-    const handlers = {
-        search: () => {
-            chrome.tabs.create({url: chrome.extension.getURL('/bg/search.html')});
-        },
-
-        help: () => {
-            chrome.tabs.create({url: 'https://foosoft.net/projects/yomichan/'});
-        },
-
-        options: () => {
-            chrome.runtime.openOptionsPage();
-        },
-
-        toggle: async () => {
-            const optionsContext = {
-                depth: 0,
-                url: window.location.href
-            };
-            const options = await apiOptionsGet(optionsContext);
-            options.general.enable = !options.general.enable;
-            await apiOptionsSave('popup');
-        }
-    };
-
-    const handler = handlers[command];
-    if (handler) {
+    const handlers = apiCommandExec.handlers;
+    if (handlers.hasOwnProperty(command)) {
+        const handler = handlers[command];
         handler();
     }
 }
+apiCommandExec.handlers = {
+    search: () => {
+        chrome.tabs.create({url: chrome.extension.getURL('/bg/search.html')});
+    },
+
+    help: () => {
+        chrome.tabs.create({url: 'https://foosoft.net/projects/yomichan/'});
+    },
+
+    options: () => {
+        chrome.runtime.openOptionsPage();
+    },
+
+    toggle: async () => {
+        const optionsContext = {
+            depth: 0,
+            url: window.location.href
+        };
+        const options = await apiOptionsGet(optionsContext);
+        options.general.enable = !options.general.enable;
+        await apiOptionsSave('popup');
+    }
+};
 
 async function apiAudioGetUrl(definition, source) {
     return audioBuildUrl(definition, source);
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 4068b760..3c5ad885 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -69,68 +69,13 @@ class Backend {
     }
 
     onMessage({action, params}, sender, callback) {
-        const forward = (promise, callback) => {
-            return promise.then(result => {
-                callback({result});
-            }).catch(error => {
-                callback({error: error.toString ? error.toString() : error});
-            });
-        };
-
-        const handlers = {
-            optionsGet: ({optionsContext, callback}) => {
-                forward(apiOptionsGet(optionsContext), callback);
-            },
-
-            kanjiFind: ({text, optionsContext, callback}) => {
-                forward(apiKanjiFind(text, optionsContext), callback);
-            },
-
-            termsFind: ({text, optionsContext, callback}) => {
-                forward(apiTermsFind(text, optionsContext), callback);
-            },
-
-            definitionAdd: ({definition, mode, context, optionsContext, callback}) => {
-                forward(apiDefinitionAdd(definition, mode, context, optionsContext), callback);
-            },
-
-            definitionsAddable: ({definitions, modes, optionsContext, callback}) => {
-                forward(apiDefinitionsAddable(definitions, modes, optionsContext), callback);
-            },
-
-            noteView: ({noteId}) => {
-                forward(apiNoteView(noteId), callback);
-            },
-
-            templateRender: ({template, data, dynamic, callback}) => {
-                forward(apiTemplateRender(template, data, dynamic), callback);
-            },
-
-            commandExec: ({command, callback}) => {
-                forward(apiCommandExec(command), callback);
-            },
-
-            audioGetUrl: ({definition, source, callback}) => {
-                forward(apiAudioGetUrl(definition, source), callback);
-            },
-
-            screenshotGet: ({options}) => {
-                forward(apiScreenshotGet(options, sender), callback);
-            },
-
-            forward: ({action, params}) => {
-                forward(apiForward(action, params, sender), callback);
-            },
-
-            frameInformationGet: () => {
-                forward(apiFrameInformationGet(sender), callback);
-            }
-        };
-
-        const handler = handlers[action];
-        if (handler) {
-            params.callback = callback;
-            handler(params);
+        const handlers = Backend.messageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            const promise = handler(params, sender);
+            promise
+                .then(result => callback({result}))
+                .catch(error => callback({error: typeof error.toString === 'function' ? error.toString() : error}));
         }
 
         return true;
@@ -227,5 +172,20 @@ class Backend {
     }
 }
 
+Backend.messageHandlers = {
+    optionsGet: ({optionsContext}) => apiOptionsGet(optionsContext),
+    kanjiFind: ({text, optionsContext}) => apiKanjiFind(text, optionsContext),
+    termsFind: ({text, optionsContext}) => apiTermsFind(text, optionsContext),
+    definitionAdd: ({definition, mode, context, optionsContext}) => apiDefinitionAdd(definition, mode, context, optionsContext),
+    definitionsAddable: ({definitions, modes, optionsContext}) => apiDefinitionsAddable(definitions, modes, optionsContext),
+    noteView: ({noteId}) => apiNoteView(noteId),
+    templateRender: ({template, data, dynamic}) => apiTemplateRender(template, data, dynamic),
+    commandExec: ({command}) => apiCommandExec(command),
+    audioGetUrl: ({definition, source}) => apiAudioGetUrl(definition, source),
+    screenshotGet: ({options}, sender) => apiScreenshotGet(options, sender),
+    forward: ({action, params}, sender) => apiForward(action, params, sender),
+    frameInformationGet: (params, sender) => apiFrameInformationGet(sender),
+};
+
 window.yomichan_backend = new Backend();
 window.yomichan_backend.prepare();
diff --git a/ext/bg/js/conditions-ui.js b/ext/bg/js/conditions-ui.js
index a6f54a1c..43c6dc08 100644
--- a/ext/bg/js/conditions-ui.js
+++ b/ext/bg/js/conditions-ui.js
@@ -36,7 +36,7 @@ ConditionsUI.Container = class Container {
 
         this.container.empty();
 
-        for (const conditionGroup of conditionGroups) {
+        for (const conditionGroup of toIterable(conditionGroups)) {
             this.children.push(new ConditionsUI.ConditionGroup(this, conditionGroup));
         }
 
@@ -122,7 +122,7 @@ ConditionsUI.ConditionGroup = class ConditionGroup {
         this.separator = ConditionsUI.instantiateTemplate('#condition-group-separator-template').appendTo(parent.container);
         this.addButton = this.options.find('.condition-add');
 
-        for (const condition of conditionGroup.conditions) {
+        for (const condition of toIterable(conditionGroup.conditions)) {
             this.children.push(new ConditionsUI.Condition(this, condition));
         }
 
diff --git a/ext/bg/js/database.js b/ext/bg/js/database.js
index 093ec102..e8214c3c 100644
--- a/ext/bg/js/database.js
+++ b/ext/bg/js/database.js
@@ -68,24 +68,39 @@ class Database {
         const results = [];
         await this.db.terms.where('expression').equals(term).or('reading').equals(term).each(row => {
             if (titles.includes(row.dictionary)) {
-                results.push({
-                    expression: row.expression,
-                    reading: row.reading,
-                    definitionTags: dictFieldSplit(row.definitionTags || row.tags || ''),
-                    termTags: dictFieldSplit(row.termTags || ''),
-                    rules: dictFieldSplit(row.rules),
-                    glossary: row.glossary,
-                    score: row.score,
-                    dictionary: row.dictionary,
-                    id: row.id,
-                    sequence: typeof row.sequence === 'undefined' ? -1 : row.sequence
-                });
+                results.push(Database.createTerm(row));
             }
         });
 
         return results;
     }
 
+    async findTermsBulk(terms, titles) {
+        const promises = [];
+        const visited = {};
+        const results = [];
+        const createResult = Database.createTerm;
+        const filter = (row) => titles.includes(row.dictionary);
+
+        const db = this.db.backendDB();
+        const dbTransaction = db.transaction(['terms'], 'readonly');
+        const dbTerms = dbTransaction.objectStore('terms');
+        const dbIndex1 = dbTerms.index('expression');
+        const dbIndex2 = dbTerms.index('reading');
+
+        for (let i = 0; i < terms.length; ++i) {
+            const only = IDBKeyRange.only(terms[i]);
+            promises.push(
+                Database.getAll(dbIndex1, only, i, visited, filter, createResult, results),
+                Database.getAll(dbIndex2, only, i, visited, filter, createResult, results)
+            );
+        }
+
+        await Promise.all(promises);
+
+        return results;
+    }
+
     async findTermsExact(term, reading, titles) {
         if (!this.db) {
             throw 'Database not initialized';
@@ -94,18 +109,7 @@ class Database {
         const results = [];
         await this.db.terms.where('expression').equals(term).each(row => {
             if (row.reading === reading && titles.includes(row.dictionary)) {
-                results.push({
-                    expression: row.expression,
-                    reading: row.reading,
-                    definitionTags: dictFieldSplit(row.definitionTags || row.tags || ''),
-                    termTags: dictFieldSplit(row.termTags || ''),
-                    rules: dictFieldSplit(row.rules),
-                    glossary: row.glossary,
-                    score: row.score,
-                    dictionary: row.dictionary,
-                    id: row.id,
-                    sequence: typeof row.sequence === 'undefined' ? -1 : row.sequence
-                });
+                results.push(Database.createTerm(row));
             }
         });
 
@@ -120,18 +124,7 @@ class Database {
         const results = [];
         await this.db.terms.where('sequence').equals(sequence).each(row => {
             if (row.dictionary === mainDictionary) {
-                results.push({
-                    expression: row.expression,
-                    reading: row.reading,
-                    definitionTags: dictFieldSplit(row.definitionTags || row.tags || ''),
-                    termTags: dictFieldSplit(row.termTags || ''),
-                    rules: dictFieldSplit(row.rules),
-                    glossary: row.glossary,
-                    score: row.score,
-                    dictionary: row.dictionary,
-                    id: row.id,
-                    sequence: typeof row.sequence === 'undefined' ? -1 : row.sequence
-                });
+                results.push(Database.createTerm(row));
             }
         });
 
@@ -157,6 +150,28 @@ class Database {
         return results;
     }
 
+    async findTermMetaBulk(terms, titles) {
+        const promises = [];
+        const visited = {};
+        const results = [];
+        const createResult = Database.createTermMeta;
+        const filter = (row) => titles.includes(row.dictionary);
+
+        const db = this.db.backendDB();
+        const dbTransaction = db.transaction(['termMeta'], 'readonly');
+        const dbTerms = dbTransaction.objectStore('termMeta');
+        const dbIndex = dbTerms.index('expression');
+
+        for (let i = 0; i < terms.length; ++i) {
+            const only = IDBKeyRange.only(terms[i]);
+            promises.push(Database.getAll(dbIndex, only, i, visited, filter, createResult, results));
+        }
+
+        await Promise.all(promises);
+
+        return results;
+    }
+
     async findKanji(kanji, titles) {
         if (!this.db) {
             throw 'Database not initialized';
@@ -199,23 +214,30 @@ class Database {
         return results;
     }
 
+    findTagForTitleCached(name, title) {
+        if (this.tagCache.hasOwnProperty(title)) {
+            const cache = this.tagCache[title];
+            if (cache.hasOwnProperty(name)) {
+                return cache[name];
+            }
+        }
+    }
+
     async findTagForTitle(name, title) {
         if (!this.db) {
             throw 'Database not initialized';
         }
 
-        this.tagCache[title] = this.tagCache[title] || {};
+        const cache = (this.tagCache.hasOwnProperty(title) ? this.tagCache[title] : (this.tagCache[title] = {}));
 
-        let result = this.tagCache[title][name];
-        if (!result) {
-            await this.db.tagMeta.where('name').equals(name).each(row => {
-                if (title === row.dictionary) {
-                    result = row;
-                }
-            });
+        let result = null;
+        await this.db.tagMeta.where('name').equals(name).each(row => {
+            if (title === row.dictionary) {
+                result = row;
+            }
+        });
 
-            this.tagCache[title][name] = result;
-        }
+        cache[name] = result;
 
         return result;
     }
@@ -489,4 +511,70 @@ class Database {
 
         return summary;
     }
+
+    static createTerm(row, index) {
+        return {
+            index,
+            expression: row.expression,
+            reading: row.reading,
+            definitionTags: dictFieldSplit(row.definitionTags || row.tags || ''),
+            termTags: dictFieldSplit(row.termTags || ''),
+            rules: dictFieldSplit(row.rules),
+            glossary: row.glossary,
+            score: row.score,
+            dictionary: row.dictionary,
+            id: row.id,
+            sequence: typeof row.sequence === 'undefined' ? -1 : row.sequence
+        };
+    }
+
+    static createTermMeta(row, index) {
+        return {
+            index,
+            mode: row.mode,
+            data: row.data,
+            dictionary: row.dictionary
+        };
+    }
+
+    static getAll(dbIndex, query, index, visited, filter, createResult, results) {
+        const fn = typeof dbIndex.getAll === 'function' ? Database.getAllFast : Database.getAllUsingCursor;
+        return fn(dbIndex, query, index, visited, filter, createResult, results);
+    }
+
+    static getAllFast(dbIndex, query, index, visited, filter, createResult, results) {
+        return new Promise((resolve, reject) => {
+            const request = dbIndex.getAll(query);
+            request.onerror = (e) => reject(e);
+            request.onsuccess = (e) => {
+                for (const row of e.target.result) {
+                    if (filter(row, index) && !visited.hasOwnProperty(row.id)) {
+                        visited[row.id] = true;
+                        results.push(createResult(row, index));
+                    }
+                }
+                resolve();
+            };
+        });
+    }
+
+    static getAllUsingCursor(dbIndex, query, index, visited, filter, createResult, results) {
+        return new Promise((resolve, reject) => {
+            const request = dbIndex.openCursor(query, 'next');
+            request.onerror = (e) => reject(e);
+            request.onsuccess = (e) => {
+                const cursor = e.target.result;
+                if (cursor) {
+                    const row = cursor.value;
+                    if (filter(row, index) && !visited.hasOwnProperty(row.id)) {
+                        visited[row.id] = true;
+                        results.push(createResult(row, index));
+                    }
+                    cursor.continue();
+                } else {
+                    resolve();
+                }
+            };
+        });
+    }
 }
diff --git a/ext/bg/js/deinflector.js b/ext/bg/js/deinflector.js
index 0abde99d..ad77895c 100644
--- a/ext/bg/js/deinflector.js
+++ b/ext/bg/js/deinflector.js
@@ -17,103 +17,53 @@
  */
 
 
-class Deinflection {
-    constructor(term, {rules=[], definitions=[], reason=''} = {}) {
-        this.term = term;
-        this.rules = rules;
-        this.definitions = definitions;
-        this.reason = reason;
-        this.children = [];
+class Deinflector {
+    constructor(reasons) {
+        this.reasons = reasons;
     }
 
-    async deinflect(definer, reasons) {
-        for (const reason in reasons) {
-            for (const variant of reasons[reason]) {
-                let accept = this.rules.length === 0;
-                if (!accept) {
-                    for (const rule of this.rules) {
-                        if (variant.rulesIn.includes(rule)) {
-                            accept = true;
-                            break;
+    deinflect(source) {
+        const results = [{
+            source,
+            term: source,
+            rules: [],
+            definitions: [],
+            reasons: []
+        }];
+        for (let i = 0; i < results.length; ++i) {
+            const entry = results[i];
+
+            for (const reason in this.reasons) {
+                for (const variant of this.reasons[reason]) {
+                    let accept = entry.rules.length === 0;
+                    if (!accept) {
+                        for (const rule of entry.rules) {
+                            if (variant.rulesIn.includes(rule)) {
+                                accept = true;
+                                break;
+                            }
                         }
                     }
-                }
 
-                if (!accept || !this.term.endsWith(variant.kanaIn)) {
-                    continue;
-                }
-
-                const term = this.term.slice(0, -variant.kanaIn.length) + variant.kanaOut;
-                if (term.length === 0) {
-                    continue;
-                }
-
-                const child = new Deinflection(term, {reason, rules: variant.rulesOut});
-                if (await child.deinflect(definer, reasons)) {
-                    this.children.push(child);
-                }
-            }
-        }
-
-        const definitions = await definer(this.term);
-        if (this.rules.length === 0) {
-            this.definitions = definitions;
-        } else {
-            for (const rule of this.rules) {
-                for (const definition of definitions) {
-                    if (definition.rules.includes(rule)) {
-                        this.definitions.push(definition);
+                    if (!accept || !entry.term.endsWith(variant.kanaIn)) {
+                        continue;
                     }
-                }
-            }
-        }
-
-        if (this.definitions.length > 0 && this.children.length > 0) {
-            const child = new Deinflection(this.term, {rules: this.rules, definitions: this.definitions});
-            this.children.push(child);
-        }
 
-        return this.definitions.length > 0 || this.children.length > 0;
-    }
-
-    gather() {
-        if (this.children.length === 0) {
-            return [{
-                source: this.term,
-                rules: this.rules,
-                definitions: this.definitions,
-                reasons: this.reason.length > 0 ? [this.reason] : []
-            }];
-        }
+                    const term = entry.term.slice(0, -variant.kanaIn.length) + variant.kanaOut;
+                    if (term.length === 0) {
+                        continue;
+                    }
 
-        const results = [];
-        for (const child of this.children) {
-            for (const result of child.gather()) {
-                if (this.reason.length > 0) {
-                    result.reasons.push(this.reason);
+                    results.push({
+                        source,
+                        term,
+                        rules: variant.rulesOut,
+                        definitions: [],
+                        reasons: [reason, ...entry.reasons]
+                    });
                 }
-
-                result.source = this.term;
-                results.push(result);
             }
         }
-
         return results;
     }
 }
-
-
-class Deinflector {
-    constructor(reasons) {
-        this.reasons = reasons;
-    }
-
-    async deinflect(term, definer) {
-        const node = new Deinflection(term);
-        if (await node.deinflect(definer, this.reasons)) {
-            return node.gather();
-        } else {
-            return [];
-        }
-    }
-}
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index e9e321df..2c9de1ec 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -281,6 +281,7 @@ function profileOptionsCreateDefaults() {
             modifier: 'shift',
             deepDomScan: false,
             popupNestingMaxDepth: 0,
+            enablePopupSearch: false,
             enableOnPopupExpressions: false,
             enableOnSearchPage: true
         },
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 6ff710f0..13ed1e08 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -19,20 +19,27 @@
 
 class DisplaySearch extends Display {
     constructor() {
-        super($('#spinner'), $('#content'));
+        super(document.querySelector('#spinner'), document.querySelector('#content'));
 
         this.optionsContext = {
             depth: 0,
             url: window.location.href
         };
 
-        this.search = $('#search').click(this.onSearch.bind(this));
-        this.query = $('#query').on('input', this.onSearchInput.bind(this));
-        this.intro = $('#intro');
+        this.search = document.querySelector('#search');
+        this.query = document.querySelector('#query');
+        this.intro = document.querySelector('#intro');
+        this.introHidden = false;
 
         this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
 
-        window.wanakana.bind(this.query.get(0));
+        if (this.search !== null) {
+            this.search.addEventListener('click', (e) => this.onSearch(e), false);
+        }
+        if (this.query !== null) {
+            this.query.addEventListener('input', () => this.onSearchInput(), false);
+            window.wanakana.bind(this.query);
+        }
     }
 
     onError(error) {
@@ -40,23 +47,50 @@ class DisplaySearch extends Display {
     }
 
     onSearchClear() {
-        this.query.focus().select();
+        if (this.query === null) {
+            return;
+        }
+
+        this.query.focus();
+        this.query.select();
     }
 
     onSearchInput() {
-        this.search.prop('disabled', this.query.val().length === 0);
+        this.search.disabled = (this.query === null || this.query.value.length === 0);
     }
 
     async onSearch(e) {
+        if (this.query === null) {
+            return;
+        }
+
         try {
             e.preventDefault();
-            this.intro.slideUp();
-            const {length, definitions} = await apiTermsFind(this.query.val(), this.optionsContext);
+            this.hideIntro();
+            const {length, definitions} = await apiTermsFind(this.query.value, this.optionsContext);
             super.termsShow(definitions, await apiOptionsGet(this.optionsContext));
         } catch (e) {
             this.onError(e);
         }
     }
+
+    hideIntro() {
+        if (this.introHidden) {
+            return;
+        }
+
+        this.introHidden = true;
+
+        if (this.intro === null) {
+            return;
+        }
+
+        const size = this.intro.getBoundingClientRect();
+        this.intro.style.height = `${size.height}px`;
+        this.intro.style.transition = 'height 0.4s ease-in-out 0s';
+        window.getComputedStyle(this.intro).getPropertyValue('height'); // Commits height so next line can start animation
+        this.intro.style.height = '0';
+    }
 }
 
 window.yomichan_search = new DisplaySearch();
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index cb3ddd4e..9838ea02 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -50,6 +50,7 @@ async function formRead(options) {
     options.scanning.alphanumeric = $('#search-alphanumeric').prop('checked');
     options.scanning.autoHideResults = $('#auto-hide-results').prop('checked');
     options.scanning.deepDomScan = $('#deep-dom-scan').prop('checked');
+    options.scanning.enablePopupSearch = $('#enable-search-within-first-popup').prop('checked');
     options.scanning.enableOnPopupExpressions = $('#enable-scanning-of-popup-expressions').prop('checked');
     options.scanning.enableOnSearchPage = $('#enable-scanning-on-search-page').prop('checked');
     options.scanning.delay = parseInt($('#scan-delay').val(), 10);
@@ -115,6 +116,7 @@ async function formWrite(options) {
     $('#search-alphanumeric').prop('checked', options.scanning.alphanumeric);
     $('#auto-hide-results').prop('checked', options.scanning.autoHideResults);
     $('#deep-dom-scan').prop('checked', options.scanning.deepDomScan);
+    $('#enable-search-within-first-popup').prop('checked', options.scanning.enablePopupSearch);
     $('#enable-scanning-of-popup-expressions').prop('checked', options.scanning.enableOnPopupExpressions);
     $('#enable-scanning-on-search-page').prop('checked', options.scanning.enableOnSearchPage);
     $('#scan-delay').val(options.scanning.delay);
@@ -149,6 +151,7 @@ async function formWrite(options) {
 function formSetupEventListeners() {
     $('#dict-purge-link').click(utilAsync(onDictionaryPurge));
     $('#dict-file').change(utilAsync(onDictionaryImport));
+    $('#dict-file-button').click(onDictionaryImportButtonClick);
 
     $('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
     $('input, select, textarea').not('.anki-model').not('.profile-form *').change(utilAsync(onFormOptionsChanged));
@@ -238,6 +241,8 @@ async function onFormOptionsChanged(e) {
 }
 
 async function onReady() {
+    showExtensionInformation();
+
     formSetupEventListeners();
     await profileOptionsSetup();
 
@@ -420,7 +425,7 @@ async function onDictionaryPurge(e) {
         dictionarySpinnerShow(true);
 
         await utilDatabasePurge();
-        for (const options of await getOptionsArray()) {
+        for (const options of toIterable(await getOptionsArray())) {
             options.dictionaries = utilBackgroundIsolate({});
             options.general.mainDictionary = '';
         }
@@ -444,6 +449,11 @@ async function onDictionaryPurge(e) {
     }
 }
 
+function onDictionaryImportButtonClick() {
+    const dictFile = document.querySelector('#dict-file');
+    dictFile.click();
+}
+
 async function onDictionaryImport(e) {
     const dictFile = $('#dict-file');
     const dictControls = $('#dict-importer').hide();
@@ -464,7 +474,7 @@ async function onDictionaryImport(e) {
 
         const exceptions = [];
         const summary = await utilDatabaseImport(e.target.files[0], updateProgress, exceptions);
-        for (const options of await getOptionsArray()) {
+        for (const options of toIterable(await getOptionsArray())) {
             options.dictionaries[summary.title] = utilBackgroundIsolate({
                 enabled: true,
                 priority: 0,
@@ -739,3 +749,16 @@ function storageSpinnerShow(show) {
         spinner.hide();
     }
 }
+
+
+/*
+ * Information
+ */
+
+function showExtensionInformation() {
+    const node = document.getElementById('extension-info');
+    if (node === null) { return; }
+
+    const manifest = chrome.runtime.getManifest();
+    node.textContent = `${manifest.name} v${manifest.version}`;
+}
diff --git a/ext/bg/js/translator.js b/ext/bg/js/translator.js
index 7b952622..65d746ea 100644
--- a/ext/bg/js/translator.js
+++ b/ext/bg/js/translator.js
@@ -41,9 +41,7 @@ class Translator {
         const {length, definitions} = await this.findTerms(text, dictionaries, alphanumeric);
 
         const definitionsGrouped = dictTermsGroup(definitions, dictionaries);
-        for (const definition of definitionsGrouped) {
-            await this.buildTermFrequencies(definition, titles);
-        }
+        await this.buildTermFrequencies(definitionsGrouped, titles);
 
         if (options.general.compactTags) {
             for (const definition of definitionsGrouped) {
@@ -147,9 +145,7 @@ class Translator {
             definitionsMerged.push(groupedDefinition);
         }
 
-        for (const definition of definitionsMerged) {
-            await this.buildTermFrequencies(definition, titles);
-        }
+        await this.buildTermFrequencies(definitionsMerged, titles);
 
         if (options.general.compactTags) {
             for (const definition of definitionsMerged) {
@@ -164,9 +160,7 @@ class Translator {
         const titles = Object.keys(dictionaries);
         const {length, definitions} = await this.findTerms(text, dictionaries, alphanumeric);
 
-        for (const definition of definitions) {
-            await this.buildTermFrequencies(definition, titles);
-        }
+        await this.buildTermFrequencies(definitions, titles);
 
         return {length, definitions};
     }
@@ -179,13 +173,9 @@ class Translator {
             }
         }
 
-        const cache = {};
-        const titles = Object.keys(dictionaries);
-        let deinflections = await this.findTermDeinflections(text, titles, cache);
         const textHiragana = jpKatakanaToHiragana(text);
-        if (text !== textHiragana) {
-            deinflections.push(...await this.findTermDeinflections(textHiragana, titles, cache));
-        }
+        const titles = Object.keys(dictionaries);
+        const deinflections = await this.findTermDeinflections(text, textHiragana, titles);
 
         let definitions = [];
         for (const deinflection of deinflections) {
@@ -221,19 +211,77 @@ class Translator {
         return {length, definitions};
     }
 
-    async findTermDeinflections(text, titles, cache) {
-        const definer = async term => {
-            if (cache.hasOwnProperty(term)) {
-                return cache[term];
+    async findTermDeinflections(text, text2, titles) {
+        const deinflections = (text === text2 ? this.getDeinflections(text) : this.getDeinflections2(text, text2));
+
+        if (deinflections.length === 0) {
+            return [];
+        }
+
+        const uniqueDeinflectionTerms = [];
+        const uniqueDeinflectionArrays = [];
+        const uniqueDeinflectionsMap = {};
+        for (const deinflection of deinflections) {
+            const term = deinflection.term;
+            let deinflectionArray;
+            if (uniqueDeinflectionsMap.hasOwnProperty(term)) {
+                deinflectionArray = uniqueDeinflectionsMap[term];
             } else {
-                return cache[term] = await this.database.findTerms(term, titles);
+                deinflectionArray = [];
+                uniqueDeinflectionTerms.push(term);
+                uniqueDeinflectionArrays.push(deinflectionArray);
+                uniqueDeinflectionsMap[term] = deinflectionArray;
             }
-        };
+            deinflectionArray.push(deinflection);
+        }
+
+        const definitions = await this.database.findTermsBulk(uniqueDeinflectionTerms, titles);
+
+        for (const definition of definitions) {
+            for (const deinflection of uniqueDeinflectionArrays[definition.index]) {
+                if (Translator.definitionContainsAnyRule(definition, deinflection.rules)) {
+                    deinflection.definitions.push(definition);
+                }
+            }
+        }
+
+        return deinflections.filter(e => e.definitions.length > 0);
+    }
+
+    static definitionContainsAnyRule(definition, rules) {
+        if (rules.length === 0) {
+            return true;
+        }
+        const definitionRules = definition.rules;
+        for (const rule of rules) {
+            if (definitionRules.includes(rule)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    getDeinflections(text) {
+        const deinflections = [];
+
+        for (let i = text.length; i > 0; --i) {
+            const textSlice = text.slice(0, i);
+            deinflections.push(...this.deinflector.deinflect(textSlice));
+        }
+
+        return deinflections;
+    }
+
+    getDeinflections2(text, text2) {
+        const deinflections = [];
 
-        let deinflections = [];
         for (let i = text.length; i > 0; --i) {
             const textSlice = text.slice(0, i);
-            deinflections.push(...await this.deinflector.deinflect(textSlice, definer));
+            const text2Slice = text2.slice(0, i);
+            deinflections.push(...this.deinflector.deinflect(textSlice));
+            if (textSlice !== text2Slice) {
+                deinflections.push(...this.deinflector.deinflect(text2Slice));
+            }
         }
 
         return deinflections;
@@ -272,24 +320,51 @@ class Translator {
         return definitions;
     }
 
-    async buildTermFrequencies(definition, titles) {
-        let terms = [];
-        if (definition.expressions) {
-            terms.push(...definition.expressions);
-        } else {
-            terms.push(definition);
+    async buildTermFrequencies(definitions, titles) {
+        const terms = [];
+        for (const definition of definitions) {
+            if (definition.expressions) {
+                terms.push(...definition.expressions);
+            } else {
+                terms.push(definition);
+            }
+        }
+
+        if (terms.length === 0) {
+            return;
         }
 
-        for (const term of terms) {
+        // Create mapping of unique terms
+        const expressionsUnique = [];
+        const termsUnique = [];
+        const termsUniqueMap = {};
+        for (let i = 0, ii = terms.length; i < ii; ++i) {
+            const term = terms[i];
+            const expression = term.expression;
             term.frequencies = [];
-            for (const meta of await this.database.findTermMeta(term.expression, titles)) {
-                if (meta.mode === 'freq') {
-                    term.frequencies.push({
-                        expression: meta.expression,
-                        frequency: meta.data,
-                        dictionary: meta.dictionary
-                    });
-                }
+
+            if (termsUniqueMap.hasOwnProperty(expression)) {
+                termsUniqueMap[expression].push(term);
+            } else {
+                const termList = [term];
+                expressionsUnique.push(expression);
+                termsUnique.push(termList);
+                termsUniqueMap[expression] = termList;
+            }
+        }
+
+        const metas = await this.database.findTermMetaBulk(expressionsUnique, titles);
+        for (const meta of metas) {
+            if (meta.mode !== 'freq') {
+                continue;
+            }
+
+            for (const term of termsUnique[meta.index]) {
+                term.frequencies.push({
+                    expression: meta.expression,
+                    frequency: meta.data,
+                    dictionary: meta.dictionary
+                });
             }
         }
     }
@@ -298,15 +373,13 @@ class Translator {
         const tags = [];
         for (const name of names) {
             const base = Translator.getNameBase(name);
-            const meta = await this.database.findTagForTitle(base, title);
-
-            const tag = {name};
-            for (const prop in meta || {}) {
-                if (prop !== 'name') {
-                    tag[prop] = meta[prop];
-                }
+            let meta = this.database.findTagForTitleCached(base, title);
+            if (typeof meta === 'undefined') {
+                meta = await this.database.findTagForTitle(base, title);
             }
 
+            const tag = Object.assign({}, meta !== null ? meta : {}, {name});
+
             tags.push(dictTagSanitize(tag));
         }
 
@@ -317,16 +390,18 @@ class Translator {
         const stats = {};
         for (const name in items) {
             const base = Translator.getNameBase(name);
-            const meta = await this.database.findTagForTitle(base, title);
-            const group = stats[meta.category] = stats[meta.category] || [];
-
-            const stat = {name, value: items[name]};
-            for (const prop in meta || {}) {
-                if (prop !== 'name') {
-                    stat[prop] = meta[prop];
+            let meta = this.database.findTagForTitleCached(base, title);
+            if (typeof meta === 'undefined') {
+                meta = await this.database.findTagForTitle(base, title);
+                if (meta === null) {
+                    continue;
                 }
             }
 
+            const group = stats[meta.category] = stats[meta.category] || [];
+
+            const stat = Object.assign({}, meta, {name, value: items[name]});
+
             group.push(dictTagSanitize(stat));
         }
 
diff --git a/ext/bg/lang/deinflect.json b/ext/bg/lang/deinflect.json
index 7a68ea71..c7977c88 100644
--- a/ext/bg/lang/deinflect.json
+++ b/ext/bg/lang/deinflect.json
@@ -1185,7 +1185,9 @@
         {
             "kanaIn": "て",
             "kanaOut": "る",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v1",
                 "vk"
@@ -1194,7 +1196,9 @@
         {
             "kanaIn": "いて",
             "kanaOut": "く",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1202,7 +1206,9 @@
         {
             "kanaIn": "いで",
             "kanaOut": "ぐ",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1210,7 +1216,9 @@
         {
             "kanaIn": "きて",
             "kanaOut": "くる",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "vk"
             ]
@@ -1218,7 +1226,9 @@
         {
             "kanaIn": "くて",
             "kanaOut": "い",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "adj-i"
             ]
@@ -1226,7 +1236,9 @@
         {
             "kanaIn": "して",
             "kanaOut": "す",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1234,7 +1246,9 @@
         {
             "kanaIn": "して",
             "kanaOut": "する",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "vs"
             ]
@@ -1242,7 +1256,9 @@
         {
             "kanaIn": "って",
             "kanaOut": "う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1250,7 +1266,9 @@
         {
             "kanaIn": "って",
             "kanaOut": "つ",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1258,7 +1276,9 @@
         {
             "kanaIn": "って",
             "kanaOut": "る",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1266,7 +1286,9 @@
         {
             "kanaIn": "んで",
             "kanaOut": "ぬ",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1274,7 +1296,9 @@
         {
             "kanaIn": "んで",
             "kanaOut": "ぶ",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1282,7 +1306,9 @@
         {
             "kanaIn": "んで",
             "kanaOut": "む",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1290,7 +1316,9 @@
         {
             "kanaIn": "のたもうて",
             "kanaOut": "のたまう",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1298,7 +1326,9 @@
         {
             "kanaIn": "いって",
             "kanaOut": "いく",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1306,7 +1336,9 @@
         {
             "kanaIn": "おうて",
             "kanaOut": "おう",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1314,7 +1346,9 @@
         {
             "kanaIn": "こうて",
             "kanaOut": "こう",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1322,7 +1356,9 @@
         {
             "kanaIn": "そうて",
             "kanaOut": "そう",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1330,7 +1366,9 @@
         {
             "kanaIn": "とうて",
             "kanaOut": "とう",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1338,7 +1376,9 @@
         {
             "kanaIn": "行って",
             "kanaOut": "行く",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1346,7 +1386,9 @@
         {
             "kanaIn": "逝って",
             "kanaOut": "逝く",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1354,7 +1396,9 @@
         {
             "kanaIn": "往って",
             "kanaOut": "往く",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1362,7 +1406,9 @@
         {
             "kanaIn": "請うて",
             "kanaOut": "請う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1370,7 +1416,9 @@
         {
             "kanaIn": "乞うて",
             "kanaOut": "乞う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1378,7 +1426,9 @@
         {
             "kanaIn": "恋うて",
             "kanaOut": "恋う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1386,7 +1436,9 @@
         {
             "kanaIn": "問うて",
             "kanaOut": "問う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1394,7 +1446,9 @@
         {
             "kanaIn": "負うて",
             "kanaOut": "負う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1402,7 +1456,9 @@
         {
             "kanaIn": "沿うて",
             "kanaOut": "沿う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1410,7 +1466,9 @@
         {
             "kanaIn": "添うて",
             "kanaOut": "添う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1418,7 +1476,9 @@
         {
             "kanaIn": "副うて",
             "kanaOut": "副う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
@@ -1426,10 +1486,22 @@
         {
             "kanaIn": "厭うて",
             "kanaOut": "厭う",
-            "rulesIn": [],
+            "rulesIn": [
+              "iru"
+            ],
             "rulesOut": [
                 "v5"
             ]
+        },
+        {
+            "kanaIn": "で",
+            "kanaOut": "",
+            "rulesIn": [
+              "iru"
+            ],
+            "rulesOut": [
+                "neg-de"
+            ]
         }
     ],
     "-zu": [
@@ -2161,7 +2233,8 @@
             "kanaIn": "ない",
             "kanaOut": "る",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v1",
@@ -2172,7 +2245,8 @@
             "kanaIn": "かない",
             "kanaOut": "く",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2182,7 +2256,8 @@
             "kanaIn": "がない",
             "kanaOut": "ぐ",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2192,7 +2267,8 @@
             "kanaIn": "くない",
             "kanaOut": "い",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "adj-i"
@@ -2202,7 +2278,8 @@
             "kanaIn": "こない",
             "kanaOut": "くる",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "vk"
@@ -2212,7 +2289,8 @@
             "kanaIn": "さない",
             "kanaOut": "す",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2222,7 +2300,8 @@
             "kanaIn": "しない",
             "kanaOut": "する",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "vs"
@@ -2232,7 +2311,8 @@
             "kanaIn": "たない",
             "kanaOut": "つ",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2242,7 +2322,8 @@
             "kanaIn": "なない",
             "kanaOut": "ぬ",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2252,7 +2333,8 @@
             "kanaIn": "ばない",
             "kanaOut": "ぶ",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2262,7 +2344,8 @@
             "kanaIn": "まない",
             "kanaOut": "む",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2272,7 +2355,8 @@
             "kanaIn": "らない",
             "kanaOut": "る",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -2282,7 +2366,8 @@
             "kanaIn": "わない",
             "kanaOut": "う",
             "rulesIn": [
-                "adj-i"
+                "adj-i",
+                "neg-de"
             ],
             "rulesOut": [
                 "v5"
@@ -3593,5 +3678,37 @@
                 "vk"
             ]
         }
+    ],
+    "progressive or perfect": [
+        {
+            "kanaIn": "いる",
+            "kanaOut": "",
+            "rulesIn": [
+                "v1"
+            ],
+            "rulesOut": [
+                "iru"
+            ]
+        },
+        {
+            "kanaIn": "る",
+            "kanaOut": "",
+            "rulesIn": [
+                "v1"
+            ],
+            "rulesOut": [
+                "iru"
+            ]
+        },
+        {
+            "kanaIn": "おる",
+            "kanaOut": "",
+            "rulesIn": [
+                "v1"
+            ],
+            "rulesOut": [
+                "iru"
+            ]
+        }
     ]
 }
diff --git a/ext/bg/legal.html b/ext/bg/legal.html
index 28c7fb21..26ac033d 100644
--- a/ext/bg/legal.html
+++ b/ext/bg/legal.html
@@ -8,10 +8,10 @@
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
     </head>
     <body>
-        <div class="container-fluid">
+        <div class="container">
             <h3>Yomichan License</h3>
 <pre>
-Copyright (C) 2016-2017  Alex Yatskov
+Copyright (C) 2016-2019  Alex Yatskov
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
@@ -28,10 +28,20 @@ along with this program.  If not, see &lt;http://www.gnu.org/licenses/&gt;.
 </pre>
             <h3>EDRDG License</h3>
 <pre>
-This package uses the <a href="http://www.csse.monash.edu.au/~jwb/edict.html">EDICT</a> and <a href="http://www.csse.monash.edu.au/~jwb/kanjidic.html">KANJIDIC</a> dictionary files. These files are
-the property of the <a href="http://www.edrdg.org/"> Electronic Dictionary Research and Development Group</a>,
-and are used in conformance with the Group's <a href="http://www.edrdg.org/edrdg/licence.html">licence</a>.
+This package uses the <a href="https://www.edrdg.org/jmdict/edict.html">EDICT</a> and <a href="https://www.edrdg.org/wiki/index.php/KANJIDIC_Project">KANJIDIC</a> dictionary files. These files are
+the property of the <a href="https://www.edrdg.org/">Electronic Dictionary Research and Development Group</a>,
+and are used in conformance with the Group's <a href="https://www.edrdg.org/edrdg/licence.html">licence</a>.
 </pre>
+            <h3>Third-Party Software Licenses</h3>
+            <ul>
+                <li><a href="https://github.com/twbs/bootstrap/blob/v3.3.7/LICENSE" target="_blank" rel="noopener">Bootstrap v3.3.7</a></li>
+                <li><a href="https://github.com/minhur/bootstrap-toggle/blob/2.2.0/LICENSE" target="_blank" rel="noopener">Bootstrap Toggle v2.2.0</a></li>
+                <li><a href="https://github.com/dfahlander/Dexie.js/blob/v2.0.0-beta.10/LICENSE" target="_blank" rel="noopener">Dexie v2.0.0-beta.10</a></li>
+                <li><a href="https://github.com/wycats/handlebars.js/blob/v4.0.6/LICENSE" target="_blank" rel="noopener">Handlebars v4.0.6</a></li>
+                <li><a href="https://github.com/jquery/jquery/blob/3.2.1/LICENSE.txt" target="_blank" rel="noopener">jQuery v3.2.1</a></li>
+                <li><a href="https://github.com/Stuk/jszip/blob/v3.1.3/LICENSE.markdown" target="_blank" rel="noopener">JSZip v3.1.3</a></li>
+                <li><a href="https://github.com/WaniKani/WanaKana/blob/2.2.3/LICENSE" target="_blank" rel="noopener">WanaKana v2.2.3</a></li>
+            </ul>
         </div>
     </div>
 </body>
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 38c5a4e9..668b2436 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -9,22 +9,20 @@
         <link rel="stylesheet" type="text/css" href="/mixed/css/display.css">
     </head>
     <body>
-        <div class="container-fluid">
-            <div id="intro">
+        <div class="container">
+            <div id="intro" style="overflow: hidden;">
                 <div class="page-header">
                     <h1>Yomichan Search</h1>
                 </div>
-                <p>Search your installed dictionaries by entering a Japanese expression into the field below.</p>
+                <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
             </div>
 
-            <p>
-                <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" disabled>
-                    </span>
-                </form>
-            </p>
+            <form class="input-group" style="padding-top: 10px;">
+                <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" disabled>
+                </span>
+            </form>
 
             <div id="spinner">
                 <img src="/mixed/img/spinner.gif">
@@ -34,7 +32,6 @@
         </div>
 
         <script src="/mixed/lib/handlebars.min.js"></script>
-        <script src="/mixed/lib/jquery.min.js"></script>
         <script src="/mixed/lib/wanakana.min.js"></script>
 
         <script src="/mixed/js/extension.js"></script>
@@ -49,6 +46,7 @@
         <script src="/fg/js/source.js"></script>
         <script src="/mixed/js/display.js"></script>
         <script src="/mixed/js/japanese.js"></script>
+        <script src="/mixed/js/scroll.js"></script>
 
         <script src="/bg/js/search.js"></script>
         <script src="/bg/js/search-frontend.js"></script>
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index d38aa090..0bc5e14c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -6,116 +6,14 @@
         <title>Yomichan Options</title>
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="/mixed/lib/bootstrap/css/bootstrap-theme.min.css">
-        <style>
-            #anki-spinner, #anki-general, #anki-error,
-            #dict-spinner, #dict-error, #dict-warning, #dict-purge, #dict-import-progress,
-            #debug, .options-advanced, .storage-hidden, #storage-spinner {
-                display: none;
-            }
-
-            .tab-content {
-                border-bottom: 1px #ddd solid;
-                border-left: 1px #ddd solid;
-                border-right: 1px #ddd solid;
-                padding: 10px;
-            }
-
-            #field-templates {
-                font-family: monospace;
-                overflow-x: hidden;
-                white-space: pre;
-            }
-
-            .bottom-links {
-                padding-bottom: 1em;
-            }
-
-            .label-light {
-                font-weight: normal;
-            }
-
-            .form-control.is-invalid {
-                border-color: #f00000;
-            }
-
-            .condition>.condition-prefix:after {
-                content: "IF";
-            }
-            .condition:nth-child(n+2)>.condition-prefix:after {
-                content: "AND";
-            }
-
-            .input-group .condition-prefix,
-            .input-group .condition-group-separator-label {
-                width: 60px;
-                text-align: center;
-            }
-            .input-group .condition-group-separator-label {
-                padding: 6px 12px;
-                font-weight: bold;
-                display: inline-block;
-            }
-            .input-group .condition-type,
-            .input-group .condition-operator {
-                width: auto;
-                text-align: center;
-                text-align-last: center;
-            }
-
-            .condition-group>.condition>div:first-child {
-                border-bottom-left-radius: 0;
-            }
-            .condition-group>.condition:nth-child(n+2)>div:first-child {
-                border-top-left-radius: 0;
-            }
-            .condition-group>.condition:nth-child(n+2)>div:last-child>button {
-                border-top-right-radius: 0;
-            }
-            .condition-group>.condition:nth-last-child(n+2)>div:last-child>button {
-                border-bottom-right-radius: 0;
-            }
-            .condition-group-options>.condition-add {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
-
-            .condition-groups>*:last-of-type {
-                display: none;
-            }
-
-            #custom-popup-css {
-                width: 100%;
-                min-height: 34px;
-                height: 96px;
-                resize: vertical;
-                font-family: 'Courier New', Courier, monospace;
-                white-space: pre;
-            }
-
-            [data-show-for-browser] {
-                display: none;
-            }
-
-            [data-browser=edge] [data-show-for-browser~=edge],
-            [data-browser=chrome] [data-show-for-browser~=chrome],
-            [data-browser=firefox] [data-show-for-browser~=firefox],
-            [data-browser=firefox-mobile] [data-show-for-browser~=firefox-mobile] {
-                display: initial;
-            }
-
-            @media screen and (max-width: 740px) {
-                .col-xs-6 {
-                    float: none;
-                    width: 100%;
-                }
-                .col-xs-6+.col-xs-6 {
-                    margin-top: 15px;
-                }
-            }
-        </style>
+        <link rel="stylesheet" type="text/css" href="/bg/css/settings.css">
     </head>
     <body>
-        <div class="container-fluid">
+        <div class="container">
+            <div class="page-header">
+                <h1>Yomichan Options</h1>
+            </div>
+
             <div class="profile-form">
                 <h3>Profiles</h3>
 
@@ -211,7 +109,8 @@
                     <div class="input-group-addon condition-prefix"></div>
                     <div class="input-group-btn"><select class="form-control btn btn-default condition-type"><optgroup label="Type"></optgroup></select></div>
                     <div class="input-group-btn"><select class="form-control btn btn-default condition-operator"><optgroup label="Operator"></optgroup></select></div>
-                    <input type="text" class="form-control" />
+                    <div class="condition-line-break"></div>
+                    <div class="condition-input"><input type="text" class="form-control" /></div>
                     <div class="input-group-btn"><button class="btn btn-danger condition-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
                 </div></template>
                 <template id="condition-group-separator-template"><div class="input-group">
@@ -293,14 +192,14 @@
                 <div class="form-group">
                     <div class="row">
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Popup position for horizontal text</label>
+                            <label for="popup-horizontal-text-position">Popup position for horizontal text</label>
                             <select class="form-control" id="popup-horizontal-text-position">
                                 <option value="below">Below text</option>
                                 <option value="above">Above text</option>
                             </select>
                         </div>
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Popup position for vertical text</label>
+                            <label for="popup-vertical-text-position">Popup position for vertical text</label>
                             <select class="form-control" id="popup-vertical-text-position">
                                 <option value="default">Same as for horizontal text</option>
                                 <option value="before">Before text reading direction</option>
@@ -315,11 +214,11 @@
                 <div class="form-group options-advanced">
                     <div class="row">
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Popup width <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-width">Popup width <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="1" id="popup-width" class="form-control">
                         </div>
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Popup height <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-height">Popup height <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="1" id="popup-height" class="form-control">
                         </div>
                     </div>
@@ -328,11 +227,11 @@
                 <div class="form-group options-advanced">
                     <div class="row">
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Horizontal popup offset <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-horizontal-offset">Horizontal popup offset <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="0" id="popup-horizontal-offset" class="form-control">
                         </div>
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Vertical popup offset <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-vertical-offset">Vertical popup offset <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="0" id="popup-vertical-offset" class="form-control">
                         </div>
                     </div>
@@ -341,11 +240,11 @@
                 <div class="form-group options-advanced">
                     <div class="row">
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Horizontal popup offset for vertical text <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-horizontal-offset2">Horizontal popup offset for vertical text <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="0" id="popup-horizontal-offset2" class="form-control">
                         </div>
                         <div class="col-xs-6">
-                            <label for="popup-display-mode">Vertical popup offset for vertical text <span class="label-light">(in pixels)</span></label>
+                            <label for="popup-vertical-offset2">Vertical popup offset for vertical text <span class="label-light">(in pixels)</span></label>
                             <input type="number" min="0" id="popup-vertical-offset2" class="form-control">
                         </div>
                     </div>
@@ -414,6 +313,10 @@
                 </p>
 
                 <div class="checkbox">
+                    <label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries</label>
+                </div>
+
+                <div class="checkbox">
                     <label><input type="checkbox" id="enable-scanning-on-search-page"> Enable scanning on search page</label>
                 </div>
 
@@ -465,7 +368,8 @@
                         <a href="https://foosoft.net/projects/yomichan" target="_blank" rel="noopener">download free dictionaries</a>
                         for use with this extension and to learn about importing proprietary EPWING dictionaries.
                     </p>
-                    <input type="file" id="dict-file">
+                    <button class="btn btn-primary" id="dict-file-button">Import Dictionary</button>
+                    <div hidden><input type="file" id="dict-file"></div>
                 </div>
             </div>
 
@@ -499,7 +403,7 @@
                 </div></div>
 
                 <div>
-                    <input type="button" value="Refresh" id="storage-refresh" />
+                    <button class="btn btn-default" id="storage-refresh">Refresh</button>
                 </div>
             </div>
 
@@ -617,6 +521,29 @@
             </div>
 
             <div>
+                <h3>Keyboard Shortcuts</h3>
+
+                <p class="help-block">
+                    Yomichan includes keyboard shortcuts for common actions which can be adjusted
+                    using the web browser's settings.
+                    Instructions on how to access this settings page are listed below for a few browsers.
+                </p>
+
+                <h4>Chrome</h4>
+                <ul class="help-block">
+                    <li>Open the settings page (<a href="chrome://settings/">chrome://settings/</a>)</li>
+                    <li>Click the "Extensions" link in the left sidebar (<a href="chrome://extensions/">chrome://extensions/</a>)</li>
+                    <li>Open the left side panel using the hamburger (<strong>&#8801;</strong>) menu button, then click "Keyboard shortcuts"</li>
+                </ul>
+
+                <h4>Firefox</h4>
+                <ul class="help-block">
+                    <li>Open the extensions page (<a href="about:addons">about:addons</a>)</li>
+                    <li>Click the button on the right with the gear icon, then click "Manage Extension Shortcuts"</li>
+                </ul>
+            </div>
+
+            <div>
                 <h3>Support Development</h3>
 
                 <p class="help-block">
@@ -635,7 +562,7 @@
             <pre id="debug"></pre>
 
             <div class="pull-right bottom-links">
-                <small><a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
+                <small><span id="extension-info"></span> &bull; <a href="search.html">Search</a> &bull; <a href="https://foosoft.net/projects/yomichan/" target="_blank" rel="noopener">Homepage</a> &bull; <a href="legal.html">Legal</a></small>
             </div>
         </div>
 
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 465db589..52c7faa3 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -31,7 +31,6 @@
             </div>
         </div>
 
-        <script src="/mixed/lib/jquery.min.js"></script>
         <script src="/mixed/lib/wanakana.min.js"></script>
 
         <script src="/mixed/js/extension.js"></script>
@@ -41,6 +40,7 @@
         <script src="/fg/js/document.js"></script>
         <script src="/fg/js/source.js"></script>
         <script src="/mixed/js/display.js"></script>
+        <script src="/mixed/js/scroll.js"></script>
 
         <script src="/fg/js/float.js"></script>
 
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index fd7986b8..88842eef 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -19,7 +19,7 @@
 
 class DisplayFloat extends Display {
     constructor() {
-        super($('#spinner'), $('#definitions'));
+        super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this.autoPlayAudioTimer = null;
         this.styleNode = null;
 
@@ -30,7 +30,7 @@ class DisplayFloat extends Display {
 
         this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract});
 
-        $(window).on('message', utilAsync(this.onMessage.bind(this)));
+        window.addEventListener('message', (e) => this.onMessage(e), false);
     }
 
     onError(error) {
@@ -42,8 +42,16 @@ class DisplayFloat extends Display {
     }
 
     onOrphaned() {
-        $('#definitions').hide();
-        $('#error-orphaned').show();
+        const definitions = document.querySelector('#definitions');
+        const errorOrphaned = document.querySelector('#error-orphaned');
+
+        if (definitions !== null) {
+            definitions.style.setProperty('display', 'none', 'important');
+        }
+
+        if (errorOrphaned !== null) {
+            errorOrphaned.style.setProperty('display', 'block', 'important');
+        }
     }
 
     onSearchClear() {
@@ -55,60 +63,25 @@ class DisplayFloat extends Display {
     }
 
     onMessage(e) {
-        const handlers = {
-            termsShow: ({definitions, options, context}) => {
-                this.termsShow(definitions, options, context);
-            },
-
-            kanjiShow: ({definitions, options, context}) => {
-                this.kanjiShow(definitions, options, context);
-            },
-
-            clearAutoPlayTimer: () => {
-                this.clearAutoPlayTimer();
-            },
-
-            orphaned: () => {
-                this.onOrphaned();
-            },
-
-            setOptions: (options) => {
-                const css = options.general.customPopupCss;
-                if (css) {
-                    this.setStyle(css);
-                }
-            },
-
-            popupNestedInitialize: ({id, depth, parentFrameId, url}) => {
-                this.optionsContext.depth = depth;
-                this.optionsContext.url = url;
-                popupNestedInitialize(id, depth, parentFrameId, url);
-            }
-        };
-
-        const {action, params} = e.originalEvent.data;
-        const handler = handlers[action];
-        if (handler) {
-            handler(params);
+        const {action, params} = e.data;
+        const handlers = DisplayFloat.messageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
         }
     }
 
     onKeyDown(e) {
-        const handlers = {
-            67: /* c */ () => {
-                if (e.ctrlKey && !window.getSelection().toString()) {
-                    this.onSelectionCopy();
-                    return true;
-                }
+        const key = Display.getKeyFromEvent(e);
+        const handlers = DisplayFloat.onKeyDownHandlers;
+        if (handlers.hasOwnProperty(key)) {
+            const handler = handlers[key];
+            if (handler(this, e)) {
+                e.preventDefault();
+                return;
             }
-        };
-
-        const handler = handlers[e.keyCode];
-        if (handler && handler()) {
-            e.preventDefault();
-        } else {
-            super.onKeyDown(e);
         }
+        super.onKeyDown(e);
     }
 
     autoPlayAudio() {
@@ -123,6 +96,18 @@ class DisplayFloat extends Display {
         }
     }
 
+    initialize(options, popupInfo, url) {
+        const css = options.general.customPopupCss;
+        if (css) {
+            this.setStyle(css);
+        }
+
+        const {id, depth, parentFrameId} = popupInfo;
+        this.optionsContext.depth = depth;
+        this.optionsContext.url = url;
+        popupNestedInitialize(id, depth, parentFrameId, url);
+    }
+
     setStyle(css) {
         const parent = document.head;
 
@@ -138,4 +123,22 @@ class DisplayFloat extends Display {
     }
 }
 
+DisplayFloat.onKeyDownHandlers = {
+    'C': (self, e) => {
+        if (e.ctrlKey && !window.getSelection().toString()) {
+            self.onSelectionCopy();
+            return true;
+        }
+        return false;
+    }
+};
+
+DisplayFloat.messageHandlers = {
+    termsShow: (self, {definitions, options, context}) => self.termsShow(definitions, options, context),
+    kanjiShow: (self, {definitions, options, context}) => self.kanjiShow(definitions, options, context),
+    clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(),
+    orphaned: (self) => self.onOrphaned(),
+    initialize: (self, {options, popupInfo, url}) => self.initialize(options, popupInfo, url)
+};
+
 window.yomichan_display = new DisplayFloat();
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 167e82c0..58dc0e4a 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -55,7 +55,7 @@ class Frontend {
         try {
             this.options = await apiOptionsGet(this.getOptionsContext());
 
-            window.addEventListener('message', this.onFrameMessage.bind(this));
+            window.addEventListener('message', this.onWindowMessage.bind(this));
             window.addEventListener('mousedown', this.onMouseDown.bind(this));
             window.addEventListener('mousemove', this.onMouseMove.bind(this));
             window.addEventListener('mouseover', this.onMouseOver.bind(this));
@@ -71,7 +71,7 @@ class Frontend {
                 window.addEventListener('contextmenu', this.onContextMenu.bind(this));
             }
 
-            chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
+            chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this));
         } catch (e) {
             this.onError(e);
         }
@@ -128,32 +128,24 @@ class Frontend {
         }
 
         this.popupTimerClear();
-        this.searchClear();
+        this.searchClear(true);
     }
 
     onMouseOut(e) {
         this.popupTimerClear();
     }
 
-    onFrameMessage(e) {
-        const handlers = {
-            popupClose: () => {
-                this.searchClear();
-            },
-
-            selectionCopy: () => {
-                document.execCommand('copy');
-            }
-        };
-
-        const handler = handlers[e.data];
-        if (handler) {
-            handler();
+    onWindowMessage(e) {
+        const action = e.data;
+        const handlers = Frontend.windowMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this);
         }
     }
 
     onResize() {
-        this.searchClear();
+        this.searchClear(true);
     }
 
     onClick(e) {
@@ -240,20 +232,11 @@ class Frontend {
         this.contextMenuChecking = false;
     }
 
-    onBgMessage({action, params}, sender, callback) {
-        const handlers = {
-            optionsUpdate: () => {
-                this.updateOptions();
-            },
-
-            popupSetVisible: ({visible}) => {
-                this.popup.setVisible(visible);
-            }
-        };
-
-        const handler = handlers[action];
-        if (handler) {
-            handler(params);
+    onRuntimeMessage({action, params}, sender, callback) {
+        const handlers = Frontend.runtimeMessageHandlers;
+        if (handlers.hasOwnProperty(action)) {
+            const handler = handlers[action];
+            handler(this, params);
             callback();
         }
     }
@@ -265,7 +248,7 @@ class Frontend {
     async updateOptions() {
         this.options = await apiOptionsGet(this.getOptionsContext());
         if (!this.options.enable) {
-            this.searchClear();
+            this.searchClear(false);
         }
     }
 
@@ -320,7 +303,7 @@ class Frontend {
                 textSource.cleanup();
             }
             if (hideResults && this.options.scanning.autoHideResults) {
-                this.searchClear();
+                this.searchClear(true);
             }
 
             this.pendingLookup = false;
@@ -333,7 +316,7 @@ class Frontend {
 
         const searchText = textSource.text();
         if (searchText.length === 0) {
-            return;
+            return false;
         }
 
         const {definitions, length} = await apiTermsFind(searchText, this.getOptionsContext());
@@ -366,7 +349,7 @@ class Frontend {
 
         const searchText = textSource.text();
         if (searchText.length === 0) {
-            return;
+            return false;
         }
 
         const definitions = await apiKanjiFind(searchText, this.getOptionsContext());
@@ -392,8 +375,8 @@ class Frontend {
         return true;
     }
 
-    searchClear() {
-        this.popup.hide();
+    searchClear(changeFocus) {
+        this.popup.hide(changeFocus);
         this.popup.clearAutoPlayTimer();
 
         if (this.options.scanning.selectText && this.textSourceLast) {
@@ -529,4 +512,25 @@ class Frontend {
     }
 }
 
+Frontend.windowMessageHandlers = {
+    popupClose: (self) => {
+        self.searchClear(true);
+    },
+
+    selectionCopy: () => {
+        document.execCommand('copy');
+    }
+};
+
+Frontend.runtimeMessageHandlers = {
+    optionsUpdate: (self) => {
+        self.updateOptions();
+    },
+
+    popupSetVisible: (self, {visible}) => {
+        self.popup.setVisible(visible);
+    }
+};
+
+
 window.yomichan_frontend = Frontend.create();
diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js
index 396f7556..cb9741be 100644
--- a/ext/fg/js/popup-proxy-host.js
+++ b/ext/fg/js/popup-proxy-host.js
@@ -40,7 +40,7 @@ class PopupProxyHost {
             createNestedPopup: ({parentId}) => this.createNestedPopup(parentId),
             show: ({id, elementRect, options}) => this.show(id, elementRect, options),
             showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options),
-            hide: ({id}) => this.hide(id),
+            hide: ({id, changeFocus}) => this.hide(id, changeFocus),
             setVisible: ({id, visible}) => this.setVisible(id, visible),
             containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
             termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context),
@@ -98,9 +98,9 @@ class PopupProxyHost {
         return await popup.showOrphaned(elementRect, options);
     }
 
-    async hide(id) {
+    async hide(id, changeFocus) {
         const popup = this.getPopup(id);
-        return popup.hide();
+        return popup.hide(changeFocus);
     }
 
     async setVisible(id, visible) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 235e1730..072cebc9 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -58,11 +58,11 @@ class PopupProxy {
         return await this.invokeHostApi('showOrphaned', {id, elementRect, options});
     }
 
-    async hide() {
+    async hide(changeFocus) {
         if (this.id === null) {
             return;
         }
-        return await this.invokeHostApi('hide', {id: this.id});
+        return await this.invokeHostApi('hide', {id: this.id, changeFocus});
     }
 
     async setVisible(visible) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index 08965084..9dff6f28 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -56,17 +56,19 @@ class Popup {
         return new Promise((resolve) => {
             const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null);
             this.container.addEventListener('load', () => {
-                this.invokeApi('popupNestedInitialize', {
-                    id: this.id,
-                    depth: this.depth,
-                    parentFrameId,
+                this.invokeApi('initialize', {
+                    options: {
+                        general: {
+                            customPopupCss: options.general.customPopupCss
+                        }
+                    },
+                    popupInfo: {
+                        id: this.id,
+                        depth: this.depth,
+                        parentFrameId
+                    },
                     url: this.url
                 });
-                this.invokeApi('setOptions', {
-                    general: {
-                        customPopupCss: options.general.customPopupCss
-                    }
-                });
                 resolve();
             });
             this.observeFullscreen();
@@ -105,7 +107,7 @@ class Popup {
         container.style.height = `${height}px`;
         container.style.visibility = 'visible';
 
-        this.hideChildren();
+        this.hideChildren(true);
     }
 
     static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) {
@@ -206,16 +208,21 @@ class Popup {
         this.invokeApi('orphaned');
     }
 
-    hide() {
-        this.hideChildren();
+    hide(changeFocus) {
+        if (this.isContainerHidden()) {
+            changeFocus = false;
+        }
+        this.hideChildren(changeFocus);
         this.hideContainer();
-        this.focusParent();
+        if (changeFocus) {
+            this.focusParent();
+        }
     }
 
-    hideChildren() {
-        // recursively hides all children
-        if (this.child && !this.child.isContainerHidden()) {
-            this.child.hide();
+    hideChildren(changeFocus) {
+        // Recursively hides all children.
+        if (this.child !== null && !this.child.isContainerHidden()) {
+            this.child.hide(changeFocus);
         }
     }
 
diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index 4642de50..ee4f58e2 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -83,120 +83,142 @@ class TextSourceRange {
     }
 
     static shouldEnter(node) {
-        if (node.nodeType !== 1) {
-            return false;
-        }
-
-        const skip = ['RT', 'SCRIPT', 'STYLE'];
-        if (skip.includes(node.nodeName.toUpperCase())) {
-            return false;
+        switch (node.nodeName.toUpperCase()) {
+            case 'RT':
+            case 'SCRIPT':
+            case 'STYLE':
+                return false;
         }
 
         const style = window.getComputedStyle(node);
-        const hidden =
+        return !(
             style.visibility === 'hidden' ||
             style.display === 'none' ||
-            parseFloat(style.fontSize) === 0;
+            parseFloat(style.fontSize) === 0);
+    }
 
-        return !hidden;
+    static getRubyElement(node) {
+        node = TextSourceRange.getParentElement(node);
+        if (node !== null && node.nodeName.toUpperCase() === "RT") {
+            node = node.parentNode;
+            return (node !== null && node.nodeName.toUpperCase() === "RUBY") ? node : null;
+        }
+        return null;
     }
 
     static seekForward(node, offset, length) {
         const state = {node, offset, remainder: length, content: ''};
-        if (!TextSourceRange.seekForwardHelper(node, state)) {
-            return state;
+        const TEXT_NODE = Node.TEXT_NODE;
+        const ELEMENT_NODE = Node.ELEMENT_NODE;
+        let resetOffset = false;
+
+        const ruby = TextSourceRange.getRubyElement(node);
+        if (ruby !== null) {
+            node = ruby;
+            resetOffset = true;
         }
 
-        for (let current = node; current !== null; current = current.parentElement) {
-            for (let sibling = current.nextSibling; sibling !== null; sibling = sibling.nextSibling) {
-                if (!TextSourceRange.seekForwardHelper(sibling, state)) {
-                    return state;
+        while (node !== null) {
+            let visitChildren = true;
+            const nodeType = node.nodeType;
+
+            if (nodeType === TEXT_NODE) {
+                state.node = node;
+                if (TextSourceRange.seekForwardTextNode(state, resetOffset)) {
+                    break;
                 }
+                resetOffset = true;
+            } else if (nodeType === ELEMENT_NODE) {
+                visitChildren = TextSourceRange.shouldEnter(node);
             }
+
+            node = TextSourceRange.getNextNode(node, visitChildren);
         }
 
         return state;
     }
 
-    static seekForwardHelper(node, state) {
-        if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) {
-            const offset = state.node === node ? state.offset : 0;
-
-            let consumed = 0;
-            let stripped = 0;
-            while (state.remainder - consumed > 0) {
-                const currentChar = node.nodeValue[offset + consumed + stripped];
-                if (!currentChar) {
-                    break;
-                } else if (currentChar.match(IGNORE_TEXT_PATTERN)) {
-                    stripped++;
-                } else {
-                    consumed++;
-                    state.content += currentChar;
-                }
-            }
-
-            state.node = node;
-            state.offset = offset + consumed + stripped;
-            state.remainder -= consumed;
-        } else if (TextSourceRange.shouldEnter(node)) {
-            for (let i = 0; i < node.childNodes.length; ++i) {
-                if (!TextSourceRange.seekForwardHelper(node.childNodes[i], state)) {
+    static seekForwardTextNode(state, resetOffset) {
+        const nodeValue = state.node.nodeValue;
+        const nodeValueLength = nodeValue.length;
+        let content = state.content;
+        let offset = resetOffset ? 0 : state.offset;
+        let remainder = state.remainder;
+        let result = false;
+
+        for (; offset < nodeValueLength; ++offset) {
+            const c = nodeValue[offset];
+            if (!IGNORE_TEXT_PATTERN.test(c)) {
+                content += c;
+                if (--remainder <= 0) {
+                    result = true;
+                    ++offset;
                     break;
                 }
             }
         }
 
-        return state.remainder > 0;
+        state.offset = offset;
+        state.content = content;
+        state.remainder = remainder;
+        return result;
     }
 
     static seekBackward(node, offset, length) {
         const state = {node, offset, remainder: length, content: ''};
-        if (!TextSourceRange.seekBackwardHelper(node, state)) {
-            return state;
+        const TEXT_NODE = Node.TEXT_NODE;
+        const ELEMENT_NODE = Node.ELEMENT_NODE;
+        let resetOffset = false;
+
+        const ruby = TextSourceRange.getRubyElement(node);
+        if (ruby !== null) {
+            node = ruby;
+            resetOffset = true;
         }
 
-        for (let current = node; current !== null; current = current.parentElement) {
-            for (let sibling = current.previousSibling; sibling !== null; sibling = sibling.previousSibling) {
-                if (!TextSourceRange.seekBackwardHelper(sibling, state)) {
-                    return state;
+        while (node !== null) {
+            let visitChildren = true;
+            const nodeType = node.nodeType;
+
+            if (nodeType === TEXT_NODE) {
+                state.node = node;
+                if (TextSourceRange.seekBackwardTextNode(state, resetOffset)) {
+                    break;
                 }
+                resetOffset = true;
+            } else if (nodeType === ELEMENT_NODE) {
+                visitChildren = TextSourceRange.shouldEnter(node);
             }
+
+            node = TextSourceRange.getPreviousNode(node, visitChildren);
         }
 
         return state;
     }
 
-    static seekBackwardHelper(node, state) {
-        if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) {
-            const offset = state.node === node ? state.offset : node.length;
-
-            let consumed = 0;
-            let stripped = 0;
-            while (state.remainder - consumed > 0) {
-                const currentChar = node.nodeValue[offset - 1 - consumed - stripped]; // negative indices are undefined in JS
-                if (!currentChar) {
-                    break;
-                } else if (currentChar.match(IGNORE_TEXT_PATTERN)) {
-                    stripped++;
-                } else {
-                    consumed++;
-                    state.content = currentChar + state.content;
-                }
-            }
-
-            state.node = node;
-            state.offset = offset - consumed - stripped;
-            state.remainder -= consumed;
-        } else if (TextSourceRange.shouldEnter(node)) {
-            for (let i = node.childNodes.length - 1; i >= 0; --i) {
-                if (!TextSourceRange.seekBackwardHelper(node.childNodes[i], state)) {
+    static seekBackwardTextNode(state, resetOffset) {
+        const nodeValue = state.node.nodeValue;
+        let content = state.content;
+        let offset = resetOffset ? nodeValue.length : state.offset;
+        let remainder = state.remainder;
+        let result = false;
+
+        for (; offset > 0; --offset) {
+            const c = nodeValue[offset - 1];
+            if (!IGNORE_TEXT_PATTERN.test(c)) {
+                content = c + content;
+                if (--remainder <= 0) {
+                    result = true;
+                    --offset;
                     break;
                 }
             }
         }
 
-        return state.remainder > 0;
+        state.offset = offset;
+        state.content = content;
+        state.remainder = remainder;
+        return result;
     }
 
     static getParentElement(node) {
@@ -219,22 +241,38 @@ class TextSourceRange {
     static getNodesInRange(range) {
         const end = range.endContainer;
         const nodes = [];
-        for (let node = range.startContainer; node !== null; node = TextSourceRange.getNextNode(node)) {
+        for (let node = range.startContainer; node !== null; node = TextSourceRange.getNextNode(node, true)) {
             nodes.push(node);
             if (node === end) { break; }
         }
         return nodes;
     }
 
-    static getNextNode(node) {
-        let next = node.firstChild;
+    static getNextNode(node, visitChildren) {
+        let next = visitChildren ? node.firstChild : null;
         if (next === null) {
             while (true) {
                 next = node.nextSibling;
                 if (next !== null) { break; }
 
                 next = node.parentNode;
-                if (node === null) { break; }
+                if (next === null) { break; }
+
+                node = next;
+            }
+        }
+        return next;
+    }
+
+    static getPreviousNode(node, visitChildren) {
+        let next = visitChildren ? node.lastChild : null;
+        if (next === null) {
+            while (true) {
+                next = node.previousSibling;
+                if (next !== null) { break; }
+
+                next = node.parentNode;
+                if (next === null) { break; }
 
                 node = next;
             }
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index eadb9dae..8a4cf4a7 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -230,3 +230,7 @@ div.glossary-item.compact-glossary {
 .info-output td {
     text-align: right;
 }
+
+.entry:not(.entry-current) .current {
+    display: none;
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index ca1738a6..dc64dbea 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -28,11 +28,14 @@ class Display {
         this.index = 0;
         this.audioCache = {};
         this.optionsContext = {};
+        this.eventListeners = [];
 
         this.dependencies = {};
 
-        $(document).keydown(this.onKeyDown.bind(this));
-        $(document).on('wheel', this.onWheel.bind(this));
+        this.windowScroll = new WindowScroll();
+
+        document.addEventListener('keydown', this.onKeyDown.bind(this));
+        document.addEventListener('wheel', this.onWheel.bind(this), {passive: false});
     }
 
     onError(error) {
@@ -52,12 +55,13 @@ class Display {
         try {
             e.preventDefault();
 
-            const link = $(e.target);
+            const link = e.target;
+            this.windowScroll.toY(0);
             const context = {
                 source: {
                     definitions: this.definitions,
-                    index: Display.entryIndexFind(link),
-                    scroll: $('html,body').scrollTop()
+                    index: this.entryIndexFind(link),
+                    scroll: this.windowScroll.y
                 }
             };
 
@@ -67,7 +71,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            const kanjiDefs = await apiKanjiFind(link.text(), this.optionsContext);
+            const kanjiDefs = await apiKanjiFind(link.textContent, this.optionsContext);
             this.kanjiShow(kanjiDefs, this.options, context);
         } catch (e) {
             this.onError(e);
@@ -80,7 +84,7 @@ class Display {
 
             const {docRangeFromPoint, docSentenceExtract} = this.dependencies;
 
-            const clickedElement = $(e.target);
+            const clickedElement = e.target;
             const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options);
             if (textSource === null) {
                 return false;
@@ -102,11 +106,12 @@ class Display {
                 textSource.cleanup();
             }
 
+            this.windowScroll.toY(0);
             const context = {
                 source: {
                     definitions: this.definitions,
-                    index: Display.entryIndexFind(clickedElement),
-                    scroll: $('html,body').scrollTop()
+                    index: this.entryIndexFind(clickedElement),
+                    scroll: this.windowScroll.y
                 }
             };
 
@@ -124,161 +129,51 @@ class Display {
 
     onAudioPlay(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const definitionIndex = Display.entryIndexFind(link);
-        const expressionIndex = link.closest('.entry').find('.expression .action-play-audio').index(link);
+        const link = e.currentTarget;
+        const entry = link.closest('.entry');
+        const definitionIndex = this.entryIndexFind(entry);
+        const expressionIndex = Display.indexOf(entry.querySelectorAll('.expression .action-play-audio'), link);
         this.audioPlay(this.definitions[definitionIndex], expressionIndex);
     }
 
     onNoteAdd(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const index = Display.entryIndexFind(link);
-        this.noteAdd(this.definitions[index], link.data('mode'));
+        const link = e.currentTarget;
+        const index = this.entryIndexFind(link);
+        this.noteAdd(this.definitions[index], link.dataset.mode);
     }
 
     onNoteView(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const index = Display.entryIndexFind(link);
-        apiNoteView(link.data('noteId'));
+        const link = e.currentTarget;
+        apiNoteView(link.dataset.noteId);
     }
 
     onKeyDown(e) {
-        const noteTryAdd = mode => {
-            const button = Display.adderButtonFind(this.index, mode);
-            if (button.length !== 0 && !button.hasClass('disabled')) {
-                this.noteAdd(this.definitions[this.index], mode);
-            }
-        };
-
-        const noteTryView = mode => {
-            const button = Display.viewerButtonFind(this.index);
-            if (button.length !== 0 && !button.hasClass('disabled')) {
-                apiNoteView(button.data('noteId'));
+        const key = Display.getKeyFromEvent(e);
+        const handlers = Display.onKeyDownHandlers;
+        if (handlers.hasOwnProperty(key)) {
+            const handler = handlers[key];
+            if (handler(this, e)) {
+                e.preventDefault();
             }
-        };
-
-        const handlers = {
-            27: /* escape */ () => {
-                this.onSearchClear();
-                return true;
-            },
-
-            33: /* page up */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index - 3, null, true);
-                    return true;
-                }
-            },
-
-            34: /* page down */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index + 3, null, true);
-                    return true;
-                }
-            },
-
-            35: /* end */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.definitions.length - 1, null, true);
-                    return true;
-                }
-            },
-
-            36: /* home */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(0, null, true);
-                    return true;
-                }
-            },
-
-            38: /* up */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index - 1, null, true);
-                    return true;
-                }
-            },
-
-            40: /* down */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index + 1, null, true);
-                    return true;
-                }
-            },
-
-            66: /* b */ () => {
-                if (e.altKey) {
-                    this.sourceTermView();
-                    return true;
-                }
-            },
-
-            69: /* e */ () => {
-                if (e.altKey) {
-                    noteTryAdd('term-kanji');
-                    return true;
-                }
-            },
-
-            75: /* k */ () => {
-                if (e.altKey) {
-                    noteTryAdd('kanji');
-                    return true;
-                }
-            },
-
-            82: /* r */ () => {
-                if (e.altKey) {
-                    noteTryAdd('term-kana');
-                    return true;
-                }
-            },
-
-            80: /* p */ () => {
-                if (e.altKey) {
-                    if ($('.entry').eq(this.index).data('type') === 'term') {
-                        this.audioPlay(this.definitions[this.index], this.firstExpressionIndex);
-                    }
-
-                    return true;
-                }
-            },
-
-            86: /* v */ () => {
-                if (e.altKey) {
-                    noteTryView();
-                }
-            }
-        };
-
-        const handler = handlers[e.keyCode];
-        if (handler && handler()) {
-            e.preventDefault();
         }
     }
 
     onWheel(e) {
-        const event = e.originalEvent;
-        const handler = () => {
-            if (event.altKey) {
-                if (event.deltaY < 0) { // scroll up
-                    this.entryScrollIntoView(this.index - 1, null, true);
-                    return true;
-                } else if (event.deltaY > 0) { // scroll down
-                    this.entryScrollIntoView(this.index + 1, null, true);
-                    return true;
-                }
+        if (e.altKey) {
+            const delta = e.deltaY;
+            if (delta !== 0) {
+                this.entryScrollIntoView(this.index + (delta > 0 ? 1 : -1), null, true);
+                e.preventDefault();
             }
-        };
-
-        if (handler()) {
-            event.preventDefault();
         }
     }
 
     async termsShow(definitions, options, context) {
         try {
+            this.clearEventListeners();
+
             if (!context || context.focus !== false) {
                 window.focus();
             }
@@ -310,7 +205,7 @@ class Display {
             }
 
             const content = await apiTemplateRender('terms.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
@@ -318,12 +213,14 @@ class Display {
                 this.autoPlayAudio();
             }
 
-            $('.action-add-note').click(this.onNoteAdd.bind(this));
-            $('.action-view-note').click(this.onNoteView.bind(this));
-            $('.action-play-audio').click(this.onAudioPlay.bind(this));
-            $('.kanji-link').click(this.onKanjiLookup.bind(this));
-            $('.source-term').click(this.onSourceTermView.bind(this));
-            $('.glossary-item').click(this.onTermLookup.bind(this));
+            this.addEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this));
+            this.addEventListeners('.action-view-note', 'click', this.onNoteView.bind(this));
+            this.addEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
+            this.addEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
+            this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this));
+            if (this.options.scanning.enablePopupSearch) {
+                this.addEventListeners('.glossary-item', 'click', this.onTermLookup.bind(this));
+            }
 
             await this.adderButtonUpdate(['term-kanji', 'term-kana'], sequence);
         } catch (e) {
@@ -333,6 +230,8 @@ class Display {
 
     async kanjiShow(definitions, options, context) {
         try {
+            this.clearEventListeners();
+
             if (!context || context.focus !== false) {
                 window.focus();
             }
@@ -360,13 +259,13 @@ class Display {
             }
 
             const content = await apiTemplateRender('kanji.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
-            $('.action-add-note').click(this.onNoteAdd.bind(this));
-            $('.action-view-note').click(this.onNoteView.bind(this));
-            $('.source-term').click(this.onSourceTermView.bind(this));
+            this.addEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this));
+            this.addEventListeners('.action-view-note', 'click', this.onNoteView.bind(this));
+            this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this));
 
             await this.adderButtonUpdate(['kanji'], sequence);
         } catch (e) {
@@ -388,14 +287,13 @@ class Display {
             for (let i = 0; i < states.length; ++i) {
                 const state = states[i];
                 for (const mode in state) {
-                    const button = Display.adderButtonFind(i, mode);
-                    if (state[mode]) {
-                        button.removeClass('disabled');
-                    } else {
-                        button.addClass('disabled');
+                    const button = this.adderButtonFind(i, mode);
+                    if (button === null) {
+                        continue;
                     }
 
-                    button.removeClass('pending');
+                    button.classList.toggle('disabled', !state[mode]);
+                    button.classList.remove('pending');
                 }
             }
         } catch (e) {
@@ -407,22 +305,29 @@ class Display {
         index = Math.min(index, this.definitions.length - 1);
         index = Math.max(index, 0);
 
-        $('.current').hide().eq(index).show();
+        const entryPre = this.getEntry(this.index);
+        if (entryPre !== null) {
+            entryPre.classList.remove('entry-current');
+        }
+
+        const entry = this.getEntry(index);
+        if (entry !== null) {
+            entry.classList.add('entry-current');
+        }
 
-        const container = $('html,body').stop();
-        const entry = $('.entry').eq(index);
+        this.windowScroll.stop();
         let target;
 
         if (scroll) {
             target = scroll;
         } else {
-            target = index === 0 ? 0 : entry.offset().top;
+            target = index === 0 || entry === null ? 0 : Display.getElementTop(entry);
         }
 
         if (smooth) {
-            container.animate({scrollTop: target}, 200);
+            this.windowScroll.animate(this.windowScroll.x, target, 200);
         } else {
-            container.scrollTop(target);
+            this.windowScroll.toY(target);
         }
 
         this.index = index;
@@ -442,9 +347,23 @@ class Display {
         }
     }
 
+    noteTryAdd(mode) {
+        const button = this.adderButtonFind(this.index, mode);
+        if (button !== null && !button.classList.contains('disabled')) {
+            this.noteAdd(this.definitions[this.index], mode);
+        }
+    }
+
+    noteTryView() {
+        const button = this.viewerButtonFind(this.index);
+        if (button !== null && !button.classList.contains('disabled')) {
+            apiNoteView(button.dataset.noteId);
+        }
+    }
+
     async noteAdd(definition, mode) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const context = {};
             if (this.noteUsesScreenshot()) {
@@ -457,21 +376,28 @@ class Display {
             const noteId = await apiDefinitionAdd(definition, mode, context, this.optionsContext);
             if (noteId) {
                 const index = this.definitions.indexOf(definition);
-                Display.adderButtonFind(index, mode).addClass('disabled');
-                Display.viewerButtonFind(index).removeClass('pending disabled').data('noteId', noteId);
+                const adderButton = this.adderButtonFind(index, mode);
+                if (adderButton !== null) {
+                    adderButton.classList.add('disabled');
+                }
+                const viewerButton = this.viewerButtonFind(index);
+                if (viewerButton !== null) {
+                    viewerButton.classList.remove('pending', 'disabled');
+                    viewerButton.dataset.noteId = noteId;
+                }
             } else {
                 throw 'Note could note be added';
             }
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
     async audioPlay(definition, expressionIndex) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
             let url = await apiAudioGetUrl(expression, this.options.general.audioSource);
@@ -503,7 +429,7 @@ class Display {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
@@ -540,6 +466,15 @@ class Display {
         return apiForward('popupSetVisible', {visible});
     }
 
+    setSpinnerVisible(visible) {
+        this.spinner.style.display = visible ? 'block' : '';
+    }
+
+    getEntry(index) {
+        const entries = this.container.querySelectorAll('.entry');
+        return index >= 0 && index < entries.length ? entries[index] : null;
+    }
+
     static clozeBuild(sentence, source) {
         const result = {
             sentence: sentence.text.trim()
@@ -554,19 +489,162 @@ class Display {
         return result;
     }
 
-    static entryIndexFind(element) {
-        return $('.entry').index(element.closest('.entry'));
+    entryIndexFind(element) {
+        const entry = element.closest('.entry');
+        return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1;
     }
 
-    static adderButtonFind(index, mode) {
-        return $('.entry').eq(index).find(`.action-add-note[data-mode="${mode}"]`);
+    adderButtonFind(index, mode) {
+        const entry = this.getEntry(index);
+        return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null;
     }
 
-    static viewerButtonFind(index) {
-        return $('.entry').eq(index).find('.action-view-note');
+    viewerButtonFind(index) {
+        const entry = this.getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-note') : null;
     }
 
     static delay(time) {
         return new Promise((resolve) => setTimeout(resolve, time));
     }
+
+    static indexOf(nodeList, node) {
+        for (let i = 0, ii = nodeList.length; i < ii; ++i) {
+            if (nodeList[i] === node) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    addEventListeners(selector, type, listener, options) {
+        this.container.querySelectorAll(selector).forEach((node) => {
+            node.addEventListener(type, listener, options);
+            this.eventListeners.push([node, type, listener, options]);
+        });
+    }
+
+    clearEventListeners() {
+        for (const [node, type, listener, options] of this.eventListeners) {
+            node.removeEventListener(type, listener, options);
+        }
+        this.eventListeners = [];
+    }
+
+    static getElementTop(element) {
+        const elementRect = element.getBoundingClientRect();
+        const documentRect = document.documentElement.getBoundingClientRect();
+        return elementRect.top - documentRect.top;
+    }
+
+    static getKeyFromEvent(event) {
+        const key = event.key;
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
 }
+
+Display.onKeyDownHandlers = {
+    'Escape': (self) => {
+        self.onSearchClear();
+        return true;
+    },
+
+    'PageUp': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index - 3, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'PageDown': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index + 3, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'End': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.definitions.length - 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'Home': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(0, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'ArrowUp': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index - 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'ArrowDown': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index + 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'B': (self, e) => {
+        if (e.altKey) {
+            self.sourceTermView();
+            return true;
+        }
+        return false;
+    },
+
+    'E': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('term-kanji');
+            return true;
+        }
+        return false;
+    },
+
+    'K': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('kanji');
+            return true;
+        }
+        return false;
+    },
+
+    'R': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('term-kana');
+            return true;
+        }
+        return false;
+    },
+
+    'P': (self, e) => {
+        if (e.altKey) {
+            const entry = self.getEntry(self.index);
+            if (entry !== null && entry.dataset.type === 'term') {
+                self.audioPlay(self.definitions[self.index], self.firstExpressionIndex);
+            }
+            return true;
+        }
+        return false;
+    },
+
+    'V': (self, e) => {
+        if (e.altKey) {
+            self.noteTryView();
+            return true;
+        }
+        return false;
+    }
+};
diff --git a/ext/mixed/js/extension.js b/ext/mixed/js/extension.js
index d7085e5b..5c803132 100644
--- a/ext/mixed/js/extension.js
+++ b/ext/mixed/js/extension.js
@@ -17,13 +17,24 @@
  */
 
 
+// toIterable is required on Edge for cross-window origin objects.
 function toIterable(value) {
     if (typeof Symbol !== 'undefined' && typeof value[Symbol.iterator] !== 'undefined') {
         return value;
     }
 
-    const array = JSON.parse(JSON.stringify(value));
-    return Array.isArray(array) ? array : [];
+    if (value !== null && typeof value === 'object') {
+        const length = value.length;
+        if (typeof length === 'number' && Number.isFinite(length)) {
+            const array = [];
+            for (let i = 0; i < length; ++i) {
+                array.push(value[i]);
+            }
+            return array;
+        }
+    }
+
+    throw 'Could not convert to iterable';
 }
 
 function extensionHasChrome() {
diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js
new file mode 100644
index 00000000..824fd92b
--- /dev/null
+++ b/ext/mixed/js/scroll.js
@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+class WindowScroll {
+    constructor() {
+        this.animationRequestId = null;
+        this.animationStartTime = 0;
+        this.animationStartX = 0;
+        this.animationStartY = 0;
+        this.animationEndTime = 0;
+        this.animationEndX = 0;
+        this.animationEndY = 0;
+        this.requestAnimationFrameCallback = (t) => this.onAnimationFrame(t);
+    }
+
+    toY(y) {
+        this.to(this.x, y);
+    }
+
+    toX(x) {
+        this.to(x, this.y);
+    }
+
+    to(x, y) {
+        this.stop();
+        window.scroll(x, y);
+    }
+
+    animate(x, y, time) {
+        this.animationStartX = this.x;
+        this.animationStartY = this.y;
+        this.animationStartTime = window.performance.now();
+        this.animationEndX = x;
+        this.animationEndY = y;
+        this.animationEndTime = this.animationStartTime + time;
+        this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback);
+    }
+
+    stop() {
+        if (this.animationRequestId === null) {
+            return;
+        }
+
+        window.cancelAnimationFrame(this.animationRequestId);
+        this.animationRequestId = null;
+    }
+
+    onAnimationFrame(time) {
+        if (time >= this.animationEndTime) {
+            window.scroll(this.animationEndX, this.animationEndY);
+            this.animationRequestId = null;
+            return;
+        }
+
+        const t = WindowScroll.easeInOutCubic((time - this.animationStartTime) / (this.animationEndTime - this.animationStartTime));
+        window.scroll(
+            WindowScroll.lerp(this.animationStartX, this.animationEndX, t),
+            WindowScroll.lerp(this.animationStartY, this.animationEndY, t)
+        );
+
+        this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback);
+    }
+
+    get x() {
+        return window.scrollX || window.pageXOffset;
+    }
+
+    get y() {
+        return window.scrollY || window.pageYOffset;
+    }
+
+    static easeInOutCubic(t) {
+        if (t < 0.5) {
+            return (4.0 * t * t * t);
+        } else {
+            t = 1.0 - t;
+            return 1.0 - (4.0 * t * t * t);
+        }
+    }
+
+    static lerp(start, end, percent) {
+        return (end - start) * percent + start;
+    }
+}