From 6f444b80f54f363268e3d2a882303d1872bcdde3 Mon Sep 17 00:00:00 2001
From: mossroy <mossroy@mossroy.fr>
Date: Fri, 8 Jan 2016 12:12:28 +0100
Subject: [PATCH 1/2] Make CSS dependencies work on Firefox OS devices.

Fixes #144
---
 www/js/app.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index fcc7aca8..a9bc46a5 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1001,8 +1001,21 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
                     var titleName = util.removeUrlParameters(hrefMatch[1]);
                     selectedArchive.getTitleByName(titleName).then(function(title) {
                         selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
-                            var cssContent = encodeURIComponent(util.uintToString(content));
-                            link.attr("href", 'data:text/css;charset=UTF-8,' + cssContent);
+                            var cssContent = util.uintToString(content);
+                            // For some reason, Firefox OS does not accept the syntax <link rel="stylesheet" href="data:text/css,...">
+                            // So we replace the tag with a <style>...</style>
+                            // while copying some attributes of the original tag
+                            var mediaAttributeValue = link.attr('media');
+                            var mediaAttribute = '';
+                            if (mediaAttributeValue) {
+                                mediaAttribute = ' media="' + mediaAttributeValue + '"';
+                            }
+                            var disabledAttributeValue = link.attr('media');
+                            var disabledAttribute = '';
+                            if (disabledAttributeValue) {
+                                disabledAttribute = ' disabled="' + disabledAttributeValue + '"';
+                            }
+                            link.replaceWith('<style type="text/css"' + mediaAttribute + disabledAttribute + '>' + cssContent + '</style>');
                         });
                     }).fail(function () {
                         console.error("could not find title for CSS : " + hrefMatch[1]);

From 6d01835edb31ccaea456f974be91bc5cc3fb7861 Mon Sep 17 00:00:00 2001
From: mossroy <mossroy@mossroy.fr>
Date: Fri, 8 Jan 2016 14:08:14 +0100
Subject: [PATCH 2/2] Improvement for #144 : escape the CSS content (for the
 jQuery mode).

In case there would be HTML tags in it
---
 www/js/app.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/www/js/app.js b/www/js/app.js
index a9bc46a5..ab69bb3c 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1003,19 +1003,26 @@ define(['jquery', 'abstractBackend', 'util', 'cookies','geometry','osabstraction
                         selectedArchive.readBinaryFile(title, function (readableTitleName, content) {
                             var cssContent = util.uintToString(content);
                             // For some reason, Firefox OS does not accept the syntax <link rel="stylesheet" href="data:text/css,...">
-                            // So we replace the tag with a <style>...</style>
+                            // So we replace the tag with a <style type="text/css">...</style>
                             // while copying some attributes of the original tag
+                            // Cf http://jonraasch.com/blog/javascript-style-node
+                            var cssElement = document.createElement('style');
+                            cssElement.type = 'text/css';
+
+                            if (cssElement.styleSheet) {
+                                cssElement.styleSheet.cssText = cssContent;
+                            } else {
+                                cssElement.appendChild(document.createTextNode(cssContent));
+                            }
                             var mediaAttributeValue = link.attr('media');
-                            var mediaAttribute = '';
                             if (mediaAttributeValue) {
-                                mediaAttribute = ' media="' + mediaAttributeValue + '"';
+                                cssElement.media = mediaAttributeValue;
                             }
                             var disabledAttributeValue = link.attr('media');
-                            var disabledAttribute = '';
                             if (disabledAttributeValue) {
-                                disabledAttribute = ' disabled="' + disabledAttributeValue + '"';
+                                cssElement.disabled = disabledAttributeValue;
                             }
-                            link.replaceWith('<style type="text/css"' + mediaAttribute + disabledAttribute + '>' + cssContent + '</style>');
+                            link.replaceWith(cssElement);
                         });
                     }).fail(function () {
                         console.error("could not find title for CSS : " + hrefMatch[1]);