Add some reader settings and fix the z-index dodging code

background-script.js

@@ -2,6 +2,44 @@
 
 'use strict';
 
+// updated by a timer looping function, based on local storage set by the options page
+// we only use a tiny number of settings here
+
+let settings = {
+reader_width: 800,
+reader_height: 300
+};
+
+async function settings_init()
+{
+    try
+    {
+        async function getvar(name, defval)
+        {
+            let temp = (await browser.storage.local.get(name))[name];
+            if(temp == undefined)
+                temp = defval;
+            settings[name] = temp;
+        }
+        getvar("reader_width", 800);
+        getvar("reader_height", 300);
+    } catch(err) {} // options not stored yet
+}
+
+settings_init();
+
+browser.storage.onChanged.addListener((updates, storageArea) =>
+{
+    if(storageArea != "local") return;
+    for(let setting of Object.entries(updates))
+    {
+        let option = setting[0];
+        let value = setting[1];
+        if(Object.keys(settings).includes(option))
+            settings[option] = value.newValue;
+    }
+});
+
 // We use JMdict converted to JSON. It's like 32MB so we don't want to load it for every tab.
 // So we need to use a background script and send messages to it from the content script.
 // Unfortunately webextensions don't have an easy way to load files, even from in the extension.
@@ -1553,7 +1591,9 @@ function open_reader(info, tab)
     {
         browser.windows.create({
             url:browser.extension.getURL("reader.html"),
-            type:"popup"
+            type:"popup",
+            width:settings.reader_width,
+            height:settings.reader_height
         });
     } catch(err) {}
 }

options.js

@@ -1,3 +1,5 @@
+// Copyright 2017; Licensed under the Apache License, Version 2.0: https://www.apache.org/licenses/LICENSE-2.0
+
 'use strict';
 
 let settings = [];
@@ -28,6 +30,12 @@ function defaults()
         default: true,
         label: "Show original text"
     });
+    settings.push({
+        id: "popup_follows_mouse",
+        kind: "checkbox",
+        default: true,
+        label: "Popup follows mouse (even if it doesn't update)"
+    });
     settings.push({
         id: "length",
         kind: "number",
@@ -59,12 +67,6 @@ function defaults()
         default: true,
         label: "Strict matching for alternative matches"
     });
-    settings.push({
-        id: "popup_follows_mouse",
-        kind: "checkbox",
-        default: true,
-        label: "Popup follows mouse (even if it doesn't update)"
-    });
     
     // display
     settings.push({
@@ -170,7 +172,6 @@ function defaults()
         default: "",
         label: "Font override (highlighted text only) (without trailing comma)"
     });
-    
     settings.push({
         id: "ignore_linebreaks",
         kind: "checkbox",
@@ -184,6 +185,36 @@ function defaults()
         label: "Sticky mode"
     });
     
+    // reader
+    settings.push({
+        kind: "dummy",
+        label: "Reader"
+    });
+    settings.push({
+        id: "reader_width",
+        kind: "number",
+        min: 100,
+        max: 10000,
+        step: 1,
+        default: 806,
+        label: "Reader window default width"
+    });
+    settings.push({
+        id: "reader_height",
+        kind: "number",
+        min: 50,
+        max: 10000,
+        step: 1,
+        default: 300,
+        label: "Reader window default height"
+    });
+    settings.push({
+        id: "reader_reverse",
+        kind: "checkbox",
+        default: false,
+        label: "Reader insert at bottom (not recommended)"
+    });
+    
     // other (added imperatively)
     settings.push({
         kind: "dummy",

reader.js

@@ -2,6 +2,44 @@
 
 'use strict';
 
+// updated by a timer looping function, based on local storage set by the options page
+// we only use a tiny number of settings here
+
+let settings = {
+reader_reverse: false
+};
+
+async function settings_init()
+{
+    try
+    {
+        async function getvar(name, defval)
+        {
+            let temp = (await browser.storage.local.get(name))[name];
+            if(temp == undefined)
+                temp = defval;
+            settings[name] = temp;
+        }
+        getvar("reader_reverse", false);
+    } catch(err) {} // options not stored yet
+}
+
+settings_init();
+
+browser.storage.onChanged.addListener((updates, storageArea) =>
+{
+    if(storageArea != "local") return;
+    for(let setting of Object.entries(updates))
+    {
+        let option = setting[0];
+        let value = setting[1];
+        if(Object.keys(settings).includes(option))
+            settings[option] = value.newValue;
+    }
+});
+
+// actual reder code
+
 function might_have_japanese(text)
 {
     for(let char of text)
@@ -19,7 +57,10 @@ function update(text)
     let newnode = document.createElement("p");
     newnode.textContent = text;
     
-    target.insertBefore(newnode, document.body.firstChild);
+    if(!settings.reader_reverse)
+        target.insertBefore(newnode, document.body.firstChild);
+    else
+        target.appendChild(newnode);
 }
 
 let text_previous = "";

texthook.js

@@ -890,6 +890,7 @@ async function settings_init()
         
         getvar("ignore_linebreaks", false);
         getvar("sticky", false);
+        getvar("popup_follows_mouse", true);
         
         if(!settings.enabled && exists_div())
             delete_div();
@@ -1315,14 +1316,14 @@ function update(event)
             {
                 if(textNode.nodeType == 1 && !nodeResetSeen.has(textNode) && !acceptable_element(textNode))
                 {
-                    let style = window.getComputedStyle(textNode);
+                    let style = getComputedStyle(textNode)
                     let bg_color = style.getPropertyValue("background-color"); 
                     if(bg_color == "rgba(0, 0, 0, 0)")
                     {
                         nodeIsBad = true;
-                        nodeResetList.push([textNode, style.getPropertyValue("z-index")]);
+                        nodeResetList.unshift([textNode, style.getPropertyValue("z-index")]);
                         nodeResetSeen.add(textNode);
-                        textNode.style.zIndex = -1000000000000000000000;
+                        textNode.style.zIndex = "-1000000000000000000000";
                         continue;
                     }
                 }