Merge pull request #4008 from spalger/fix/4005

[tilemap] mention desaturation compatibility issue

src/kibana/plugins/vis_types/vislib/editors/tile_map.html

@@ -108,7 +108,11 @@
   <label>
     <input type="checkbox"
     name="isDesaturated"
+    ng-disabled="!vis.type.params.canDesaturate"
     ng-model="vis.params.isDesaturated">
+
     Desaturate map tiles
+
+    <kbn-info info="Reduce the vibrancy of tile colors, this does not work in any version of Internet Explorer"
   </label>
 </div>

src/kibana/plugins/vis_types/vislib/tile_map.js

@@ -4,6 +4,7 @@ define(function (require) {
     var Schemas = Private(require('plugins/vis_types/_schemas'));
     var geoJsonConverter = Private(require('components/agg_response/geo_json/geo_json'));
     var _ = require('lodash');
+    var supports = require('utils/supports');
 
     return new VislibVisType({
       name: 'tile_map',
@@ -23,6 +24,7 @@ define(function (require) {
           addTooltip: true
         },
         mapTypes: ['Scaled Circle Markers', 'Shaded Circle Markers', 'Shaded Geohash Grid', 'Heatmap'],
+        canDesaturate: !!supports.cssFilters,
         editor: require('text!plugins/vis_types/vislib/editors/tile_map.html')
       },
       listeners: {

src/kibana/utils/supports.js

@@ -0,0 +1,23 @@
+define(function (require) {
+  var _ = require('lodash');
+
+  /**
+   * just a place to put feature detection checks
+   */
+  return {
+    cssFilters: (function () {
+      var e = document.createElement('img');
+      var rules = ['webkitFilter', 'mozFilter', 'msFilter', 'filter'];
+      var test = 'grayscale(1)';
+      rules.forEach(function (rule) { e.style[rule] = test; });
+
+      document.body.appendChild(e);
+      var styles = window.getComputedStyle(e);
+      var can = _(styles).pick(rules).contains(test);
+      document.body.removeChild(e);
+
+      return can;
+    }())
+  };
+
+});