Merge pull request #104 from plotly/firefox-toImage

Fix Firefox toImage failures

Author: etpinard

src/plots/layout_attributes.js

@@ -18,7 +18,7 @@ var extendFlat = Plotly.Lib.extendFlat;
 module.exports = {
     font: {
         family: extendFlat({}, fontAttrs.family, {
-            dflt: '"Open sans", verdana, arial, sans-serif'
+            dflt: '"Open Sans", verdana, arial, sans-serif'
         }),
         size: extendFlat({}, fontAttrs.size, {
             dflt: 12

src/plots/plots.js

@@ -288,8 +288,8 @@ plots.addLinks = function(gd) {
     linkContainer.enter().append('text')
         .classed('js-plot-link-container', true)
         .style({
-            'font-family':'"Open Sans",Arial,sans-serif',
-            'font-size':'12px',
+            'font-family':'"Open Sans", Arial, sans-serif',
+            'font-size': '12px',
             'fill': Plotly.Color.defaultLine,
             'pointer-events': 'all'
         })

src/snapshot/tosvg.js

@@ -113,8 +113,21 @@ module.exports = function toSVG(gd, format) {
             // serialized svg because the style attribute itself is double-quoted!
             // Is this an IE thing? Any other attributes or style elements that can have quotes in them?
             // TODO: this looks like a noop right now - what happened to it?
+
+            /*
+             * Font-family styles with double quotes in them breaks the to-image
+             * step in FF42 because the style attribute itself is wrapped in
+             * double quotes. See:
+             *
+             * - http://codepen.io/etpinard/pen/bEdQWK
+             * - https://github.com/plotly/plotly.js/pull/104
+             *
+             * for more info.
+             */
             var ff = txt.style('font-family');
-            if(ff && ff.indexOf('"') !== -1) txt.style('font-family', ff.replace(/"/g, '"'));
+            if(ff && ff.indexOf('"') !== -1) {
+                txt.style('font-family', ff.replace(/"/g, '\\\''));
+            }
         });
 
     if(format === 'pdf' || format === 'eps') {