Attempt to do something about #456

This issue is all kinds of weird and the only people I can blame
seem to be Mozilla? I'm serious here, how else does a browser
*SOMETIMES* render a filter, but seem to always render it if it's
a Data URI instead of just an ID ...reference? I guess? I don't
know, piss off.

src/General/Header.coffee

@@ -115,7 +115,7 @@ Header =
     $.prepend d.body, shortcuts
 
     $.add boardList, fullBoardList
-    $.add Header.bar, [boardList, Header.noticesRoot, Header.toggle]
+    $.add Header.bar, [boardList, Header.toggle]
 
     Header.setCustomNav Conf['Custom Board Navigation']
     Header.generateBoardList Conf['boardnav'].replace /(\r\n|\n|\r)/g, ' '
@@ -265,7 +265,7 @@ Header =
     $.addClass doc, args[0]
     $.rmClass  doc, args[1]
     Header.bar.parentNode.className = args[2]
-    $[args[3]] Header.bar, Header.notify
+    $[args[3]] Header.bar, Header.noticesRoot
 
   toggleBarPosition: ->
     $.cb.checked.call @

src/General/css/layout.css

@@ -1866,12 +1866,6 @@ body > .center {
   bottom: auto !important;
   top: 17px;
 }
-.grayscale-mascots #mascot {
-  <%= filter %>: url('#grayscale');
-}
-.silhouettize-mascots #mascot img {
-  <%= filter %>: url('#mascot-filter');
-}
 /* Options */
 #overlay {
   position: fixed;
@@ -2116,9 +2110,6 @@ article li {
 .mascot img {
   max-width: 200px;
 }
-.silhouette img {
-  <%= filter %>: url('#mascot-filter');
-}
 .export-button,
 .mascotname,
 #mascot-options {

src/General/css/theme.css

@@ -53,7 +53,14 @@ html {
   border-color: #{theme["Reply Border"]};
 }
 .captcha-img img {
-  <%= filter %>: url("#captcha-filter");
+  <%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.captchafilter.replace /(\'|\")/g, '%22'}<% } %>#captcha-filter');
+}
+.silhouettize-mascots #mascot img,
+.silhouette img {
+  <%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.mascotfilter.replace /(\'|\")/g, '%22'}<% } %>#mascot-filter');
+}
+.grayscale-mascots #mascot {
+  <%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.grayscale.replace /(\'|\")/g, '%22'}<% } %>#grayscale');
 }
 #boardTitle {
   text-shadow:
@@ -343,7 +350,7 @@ a .name {
 }
 .a-icon,
 #shortcuts .fa {
-  #{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
+  #{unless Style.lightTheme then "<%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.iconsfilter.replace /(\'|\")/g, '%22'}<% } %>#icons-filter');" else ""}
 }
 .alternate-post-colors #threads > .thread:nth-of-type(2n+1),
 .alternate-post-colors .replyContainer:nth-of-type(2n+1) .post {

src/General/html/Features/Filters.svg

@@ -1,15 +1,5 @@
-<!-- feColorMatrix Primer: http://www.graficaobscura.com/matrix/ -->
-<svg xmlns='http://www.w3.org/2000/svg' height=0 color-interpolation-filters='sRGB'>
-  <filter id='captcha-filter'>
-    <feColorMatrix values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0' />
-  </filter>
-  <filter id='mascot-filter'>
-    <feColorMatrix values='#{Style.silhouette Style.matrix replyRGB} 0 0 0 1 0' />
-  </filter>
-  <filter id="grayscale">
-    <feColorMatrix id="color" type="saturate" values="0" />
-  </filter>
-  <filter id="icons-filter">
-    <feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' />
+<svg xmlns='http://www.w3.org/2000/svg' height='0' color-interpolation-filters='sRGB'>
+  <filter id='#{id}'>
+    <feColorMatrix #{values} />
   </filter>
 </svg>

src/Theming/Style.coffee

@@ -1,8 +1,12 @@
 Style =
   init: ->
     theme = Themes[Conf['theme']] or Themes['Yotsuba B']
-    Style.svg = $.el 'div',
-      id: 'svg_filters'
+    Style.svgs = { 
+<% if (type === 'crx') { %>
+      el: $.el 'div',
+        id: 'svg_filters'
+<% } %>
+    }
 
     items = [
       ['layoutCSS',    Style.layout,       'layout']
@@ -36,7 +40,9 @@ Style =
     $.addClass doc, 'appchan-x'
     $.addClass doc, g.VIEW
 
-    $.add d.body, Style.svg
+    <% if (type === 'crx') { %>
+    $.add d.body, Style.svgs.el
+    <% } %>
 
     for title, cat of Config.style
       for name, setting of cat
@@ -92,6 +98,8 @@ Style =
         /\.typeset/.test node.textContent
       
     return
+  
+  generateFilter: (id, values) -> """<%= grunt.file.read('src/General/html/Features/Filters.svg').replace(/>\s+</g, '><') %>"""
 
   matrix: ->
     colors = []
@@ -136,13 +144,27 @@ Style =
     """<%= grunt.file.read('src/General/css/dynamic.css').replace(/\s+/g, ' ').trim() %>"""
 
   theme: (theme) ->
-    bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')
-    replybg = new Style.color Style.colorToHex theme["Reply Background"]
+    bgColor  = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')
+    replybg  = new Style.color Style.colorToHex theme["Reply Background"]
     replyRGB = "rgb(#{replybg.shiftRGB parseInt(Conf['Silhouette Contrast'], 10), true})"
 
     Style.lightTheme = bgColor.isLight()
+    
+    svgs = [
+      ['captcha-filter', "values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0'"]
+      ['mascot-filter',  "values='#{Style.silhouette Style.matrix replyRGB} 0 0 0 1 0'"]
+      ['grayscale',      'id="color" type="saturate" values="0"']
+      ['icons-filter',   "values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'"]
+    ]
+    
+    for svg, i in svgs
+      <% if (type === 'crx') { %>
+      svgs[i] <% } else { %>
+      Style.svgs[svg[0].replace /\-/, ""] <% } %> = Style.generateFilter svg[0], svg[1]
 
-    Style.svg.innerHTML = """<%= grunt.file.read('src/General/html/Features/Filters.svg').replace(/>\s+</g, '><') %>"""
+    <% if (type === 'crx') { %>
+    Style.svgs.el.innerHTML = svgs.join ''
+    <% } %>
 
     """<%= grunt.file.read('src/General/css/theme.css').replace(/\s+/g, ' ').trim() %>""" + <%= grunt.file.read('src/General/css/themeoptions.css').replace(/\s+/g, ' ').trim() %>