make user-select-none CSS class:

- use it in legend text
- rm now useless user-select purge step in to-svg

Author: etpinard

build/plotcss.js

@@ -8,6 +8,7 @@ var rules = {
     "X a": "text-decoration:none;",
     "X a:hover": "text-decoration:none;",
     "X .crisp": "shape-rendering:crispEdges;",
+    "X .user-select-none": "-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;",
     "X svg": "overflow:hidden;",
     "X svg a": "fill:#447adb;",
     "X svg a:hover": "fill:#3c6dc5;",

src/components/legend/draw.js

@@ -336,13 +336,8 @@ function drawTexts(context, gd, d, i, traces) {
         y: 0,
         'data-unformatted': name
     })
-    .style({
-        'text-anchor': 'start',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none',
-        'user-select': 'none'
-    })
+    .style('text-anchor', 'start')
+    .classed('user-select-none', true)
     .call(Drawing.font, fullLayout.legend.font)
     .text(name);
 

src/css/_base.scss

@@ -22,6 +22,10 @@ a {
 
 .crisp { shape-rendering: crispEdges; }
 
+.user-select-none {
+    @include vendor('user-select', none);
+}
+
 //Required for IE11. Other browsers set this by default.
 svg { overflow: hidden; }
 

src/snapshot/tosvg.js

@@ -107,12 +107,7 @@ module.exports = function toSVG(gd, format) {
     svg.node().style.background = '';
 
     svg.selectAll('text')
-        .attr({'data-unformatted': null})
-        .style({
-            '-webkit-user-select': null,
-            '-moz-user-select': null,
-            '-ms-user-select': null
-        })
+        .attr('data-unformatted', null)
         .each(function() {
             // hidden text is pre-formatting mathjax, the browser ignores it but it can still confuse batik
             var txt = d3.select(this);