add reader pause/delete buttons

reader.html

@@ -21,6 +21,42 @@ p
     margin-top: 5px;
     margin-bottom: 5px;
 }
+button
+{
+    background: rgb(255,255,255);
+    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(244,241,238,1) 72%, rgba(219,211,197,1) 100%);
+    border: none;
+    border-radius: 5px;
+    outline: 1px solid rgba(0, 0, 0, 0.5);
+    -moz-outline-radius: 5px;
+    cursor: pointer;
+    font-size: 65%;
+    font-weight: 600;
+    height: 2em;
+    transition: all .05s ease-in-out;
+}
+#button_pause:hover
+{
+    opacity: 1.0;
+}
+#button_delete:hover
+{
+    opacity: 1.0;
+}
+#button_pause
+{
+    opacity: 0.35;
+    position: fixed;
+    right: 5px;
+    bottom: calc( 10px + 2em );
+}
+#button_delete
+{
+    opacity: 0.35;
+    position: fixed;
+    right: 5px;
+    bottom: 5px;
+}
 </style>
 <style id=new_color_style>
 body > p:nth-of-type(1)
@@ -30,7 +66,6 @@ body > p:nth-of-type(1)
 </style>
 <script src="include/browser-polyfill.min.js" charset="UTF-8"></script>
 <script src="reader.js" charset="UTF-8"></script>
-<script src="texthook.js" charset="UTF-8"></script>
 </head>
 
 <body lang="ja">
@@ -38,6 +73,8 @@ body > p:nth-of-type(1)
 <p><i>This page grabs from the clipboard automatically if it contains Japanese text. If this page is not opened, Nazeka will never access the clipboard.</i></p>
 <p><i>Use the context menu (right click the page) to toggle Nazeka.</i></p>
 <div style="position:absolute;visibility:hidden"><textarea id="nazeka-paste-target"></textarea></div>
+<button id=button_pause>Pause</button>
+<button id=button_delete>Delete Newest</button>
 </body>
 
 </html>

reader.js

@@ -95,9 +95,9 @@ function reader_update(text)
 {
     if(!reader_might_have_japanese(text))
         return;
-    
     let target = document.body;
     let newnode = document.createElement("p");
+    newnode.className = "nazeka_reader_insertion";
     if(reader_settings.reader_convert_newlines)
     {
         newnode.textContent = "";
@@ -150,6 +150,8 @@ async function send_reader_mode(x, y, text)
 let reader_text_previous = "";
 function reader_cycle_text(text)
 {
+    if(document.getElementById("button_pause").innerText != "Pause")
+        return;
     if(text != "" && text != reader_text_previous)
     {
         reader_update(text);
@@ -183,8 +185,29 @@ browser.runtime.onMessage.addListener((req, sender) =>
     return Promise.resolve(undefined);
 });
 
+function toggle_pause()
+{
+    let target = document.getElementById("button_pause");
+    if(target.innerText == "Pause")
+        target.innerText = "Unpause";
+    else
+        target.innerText = "Pause";
+}
+
+function delete_newest()
+{
+    let target = document.getElementsByTagName("p")[0];
+    if(target.className == "nazeka_reader_insertion")
+    {
+        target.remove();
+        document.getElementById("linecount").innerText = parseInt(document.getElementById("linecount").innerText)-1;
+    }
+}
+
 window.onload = () =>
 {
     send_reader_mode();
     update_styles();
+    document.getElementById("button_pause").onclick = toggle_pause;
+    document.getElementById("button_delete").onclick = delete_newest;
 }

texthook.js

@@ -1289,7 +1289,7 @@ async function settings_init()
         getvar("fgcolor");
         getvar("hlcolor");
         getvar("hlcolor2");
-        getvar("hlcolor2");
+        getvar("titlecolor");
         getvar("font");
         getvar("hlfont");