Merge pull request #2 from pyanderson/porting-to-firefox

Porting to Firefox

.gitignore

@@ -1,2 +1,9 @@
 *.zip
+*.xpi
+*.crx
+*.pem
+src/manifest.json
+# editors
 *.swp
+*.sublime-project
+*.sublime-workspace

README.md

@@ -1,7 +1,11 @@
 # Grimório do Tormenta20 para o Roll20
 
-[Roll20: Grimório do Tormenta20](https://chrome.google.com/webstore/detail/roll20-grim%C3%B3rio-do-tormen/lplnbanhibpehlmiiakcacambjleeeng).
+[Chrome Extension](https://chrome.google.com/webstore/detail/roll20-grim%C3%B3rio-do-tormen/lplnbanhibpehlmiiakcacambjleeeng)
+[Firefox Extension](https://addons.mozilla.org/pt-BR/firefox/addon/roll20-grim%C3%B3rio-do-tormenta20/)
 
 Todo o conteúdo do arquivo [src/data/spells.json](src/data/spells.json) está sob a licença [OPEN GAME LICENSE](OPEN_GAME_LICENSE).
 
 Icons from [freepik](https://www.freepik.com).
+
+## Notas do Desenvolvedor
+- O firefox ainda não tem suporte para a versão 3 do manifest, por isso é necessário ter as duas versões disponíveis.

src/manifest.json → chrome/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Roll20: Grimório do Tormenta20",
   "description": "Escolha magias diretamente na sua ficha!",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "manifest_version": 3,
   "content_scripts": [
     {

firefox/manifest.json

@@ -0,0 +1,35 @@
+{
+  "name": "Roll20: Grimório do Tormenta20",
+  "description": "Escolha magias diretamente na sua ficha!",
+  "version": "0.0.3",
+  "manifest_version": 2,
+  "content_scripts": [
+    {
+      "matches": [
+        "https://app.roll20.net/editor*"
+      ],
+      "js": [
+        "third-party/jquery-3.6.0.min.js",
+        "third-party/jquery-ui-1.12.1.min.js",
+        "jquery-patch.js",
+        "render.js",
+        "sheet.js",
+        "index.js"
+      ],
+      "run_at": "document_end"
+    }
+  ],
+  "web_accessible_resources": [
+    "data/*",
+    "index.css"
+  ],
+  "icons": {
+    "16": "images/16.png",
+    "32": "images/32.png",
+    "48": "images/48.png",
+    "128": "images/128.png"
+  },
+  "permissions": [
+    "activeTab"
+  ]
+}

prepare.sh

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+set -e
+
+if [[ "$1" =~ ^(chrome|firefox)$ ]]; then
+    echo "preparing $1"
+    cp "$1"/manifest.json src/manifest.json
+    [ -e "$1".zip ] && rm "$1".zip
+    cd src && zip -r ../"$1".zip * && cd ..
+    echo "$1 done"
+else
+    echo "invalid option: $1"
+fi

src/jquery-patch.js

@@ -2,7 +2,7 @@
 
 // https://stackoverflow.com/a/49023264
 function add_on_create_event() {
-  const observers = [];
+  let observers = [];
   $.event.special.create = {
 
     setup: function setup() {
@@ -37,8 +37,27 @@ function add_on_create_event() {
     }
   };
 
+  /*
+  To improve in memory usage and to prevent memory leaks, Firefox disallows add-ons to
+  keep strong references to DOM objects after their parent document has been destroyed.
+  A dead object, is holding a strong (keep alive) reference to a DOM element that persists
+  even after it was destroyed in the DOM.
+  More info here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Dead_object
+  */
+  function removeDeadObjectsReferences() {
+    observers = observers.filter(function (element) {
+      try {
+        return element[0].location != null;
+      }
+      catch (e) {
+        return false;
+      }
+    });
+  }
+
   function getObserverData(element) {
     const $el = $(element);
+    removeDeadObjectsReferences();
     return $.grep(observers, function (item) {
       return $el.is(item[0]);
     })[0];

src/sheet.js

@@ -30,9 +30,9 @@ class CharacterSheet {
   render_buttons() {
     const sheet = this;
     sheet.spells_div.on('click', 'button.repcontrol_add', function () {
-      sheet.render_dialogs();
+      sheet.render_dialogs(); // render dialogs to new spells.
     });
-    sheet.render_dialogs();
+    sheet.render_dialogs(); // render dialogs to speels that already exists.
   }
 
   render_dialogs() {