Switch to iframe

3 files changed, 38 insertions, 28 deletions

diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index d62839a4..e55ce2fd 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -16,35 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-.yomichan-popup {
+iframe.yomichan-popup {
     all:              initial;
     background-color: #fff;
     border:           1px solid #999;
     box-shadow:       0 0 10px rgba(0, 0, 0, .5);
-    color:            #000;
-    font-family:      sans-serif;
-    font-size:        12pt;
-    max-height:       300px;
-    max-width:        500px;
-    min-width:        200px;
+    height:           300px;
+    width:            500px;
+    resize:           both;
     overflow-y:       auto;
-    padding:          14px;
     position:         fixed;
     visibility:       hidden;
     z-index:          256;
 }
-
-.yomichan-popup ol {
-    padding-left: 1.2em;
-}
-
-.yomichan-def-expression {
-    font-family:   serif;
-    font-size:     18pt;
-}
-
-.yomichan-def-glossary {
-    clear:       both;
-    font-size:   12pt;
-    padding-top: 0.8em;
-}
diff --git a/ext/fg/css/popup.css b/ext/fg/css/popup.css
new file mode 100644
index 00000000..3eba23ee
--- /dev/null
+++ b/ext/fg/css/popup.css
@@ -0,0 +1,31 @@
+/*
+ * Copyright (C) 2016  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/>.
+ */
+
+body {
+    font-family: sans-serif;
+    font-size:   12pt;
+}
+
+.expression {
+    font-family: serif;
+    font-size:   18pt;
+}
+
+.glossary {
+    font-size:   12pt;
+}
diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index 20838e10..ea18e41f 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -25,10 +25,8 @@ class Client {
         this.enabled     = false;
         this.options     = null;
 
-        this.popup = document.createElement('div');
+        this.popup = document.createElement('iframe');
         this.popup.classList.add('yomichan-popup');
-        this.popup.addEventListener('mousedown', (e) => e.stopPropagation());
-        this.popup.addEventListener('scroll', (e) => e.stopPropagation());
         document.body.appendChild(this.popup);
 
         chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
@@ -109,8 +107,8 @@ class Client {
                 this.hidePopup();
             } else {
                 range.setEnd(range.endContainer, range.startOffset + length);
-                renderText({defs: results}, 'defs.html', (html) => {
-                    this.popup.innerHTML = html;
+                renderText({defs: results, root: chrome.extension.getURL('fg')}, 'defs.html', (html) => {
+                    this.popup.setAttribute('srcdoc', html);
                     this.showPopup(range);
                 });
             }