Redo mascot exporting.

src/General/Settings.coffee

@@ -674,7 +674,7 @@ Settings =
     if mode is 'default'
       mascotoptions = $.el 'div',
         id: 'mascot-options'
-        innerHTML: """<a class=edit name='#{name}' href='javascript:;'>Edit</a><a class=delete name='#{name}' href='javascript:;'>Delete</a><a class=export name='#{name}' href='javascript:;'>Export</a>"""
+        innerHTML: """<a class=edit href='javascript:;'>Edit</a><a class=delete href='javascript:;'>Delete</a><a class=export href='javascript:;'>Export</a>"""
 
       $.on $('.edit',   mascotoptions), 'click', cb.edit
       $.on $('.delete', mascotoptions), 'click', cb.delete
@@ -847,9 +847,23 @@ Settings =
       export: (e) ->
         e.stopPropagation()
         name = @parentElement.parentElement.id
-        exportMascot = Mascots[name]
-        exportMascot['Mascot'] = name
-        exportedMascot = "data:application/json," + encodeURIComponent(JSON.stringify(exportMascot))
+        data = Mascots[name]
+        data['Mascot'] = name
+
+        a = $.el 'a',
+          className: 'export-button'
+          textContent: 'Save me!'
+          download: "#{name}-#{Date.now()}.json"
+          href: "data:application/json;base64,#{btoa unescape encodeURIComponent JSON.stringify data, null, 2}"
+          target: '_blank'
+        <% if (type !== 'userscript') { %>
+        a.click()
+        <% } else { %>
+        # XXX Firefox won't let us download automatically.
+        $.on a, 'click', (e) ->
+          e.stopPropagation()
+        $.add @parentElement.parentElement, a
+        <% } %>
 
       restore: ->
         if confirm "Are you sure you want to restore \"#{@id}\"?"
@@ -867,7 +881,6 @@ Settings =
         $.toggleClass @, 'enabled'
         $.set g.MASCOTSTRING, Conf[g.MASCOTSTRING]
 
-
     theme:
       select: ->
         if currentTheme = $.id(Conf['theme'])

src/General/css/layout.css

@@ -1768,6 +1768,7 @@ article li {
 .mascot img {
   max-width: 200px;
 }
+.export-button,
 .mascotname,
 #mascot-options {
   #{Style.sizing}: border-box;
@@ -1787,6 +1788,13 @@ article li {
   right: 0;
   left: 0;
 }
+.export-button {
+  position: absolute;
+  bottom: 1.7em;
+  right: 0;
+  left: 0;
+  text-align: center;
+}
 #mascot-options a {
   display: inline-block;
   width: 33%;

src/General/css/theme.css

@@ -9,6 +9,7 @@
 #content .thumb {
   box-shadow: 0 0 5px #{theme["Reply Border"]};
 }
+.export-button,
 .mascotname,
 #mascot-options {
   background: #{theme["Dialog Background"]};