drop legacy builds, unneeded polyfills, document drop of IE11 support

ACCESSIBILITY.md

@@ -30,14 +30,14 @@ should fallback gracefully without breaking other aspects of the app.
 This table covers high-level compatibility, with individual features to be detailed
 elsewhere in this document.
 
-|   | Icon | Browser | Notes | Issues |
-|---|---|---|---|---|
+|   | Icon | Browser | Notes |
+|---|---|---|---|
 | ✅ | ![chrome logo] | [Chrome](https://en.wikipedia.org/wiki/Google_Chrome) | |
-| ✅* | ![firefox logo] | [Firefox](https://en.wikipedia.org/wiki/Firefox) | \*Minor known issues | [#7132](https://github.com/openstreetmap/iD/issues/7132) |
+| ✅ | ![firefox logo] | [Firefox](https://en.wikipedia.org/wiki/Firefox) | |
 | ✅ | ![safari logo] | [Safari](https://en.wikipedia.org/wiki/Safari_(web_browser)) | |
 | 🟩 | ![opera logo] | [Opera](https://en.wikipedia.org/wiki/Opera_(web_browser)) | |
 | 🟩 | ![edge logo] | [Edge](https://en.wikipedia.org/wiki/Microsoft_Edge) | |
-| 🟠 | ![ie logo] | [Internet Explorer](https://en.wikipedia.org/wiki/Internet_Explorer) | IE has been discontinued, but [IE 11 is still maintained](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge). iD [polyfills](https://en.wikipedia.org/wiki/Polyfill_(programming)) modern web features for IE 11 where possible, but full support should not be expected |
+| ❌ | ![ie logo] | [Internet Explorer](https://en.wikipedia.org/wiki/Internet_Explorer) | IE has been discontinued, but [IE 11 is still maintained](https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge). iD uses features of modern web standard which are not supported by Internet Explorer. |
 | ✅ | ![webkit logo] | [iOS](https://en.wikipedia.org/wiki/IOS) browsers | All browsers on iOS (e.g. Safari, Chrome, Firefox, Edge) use the [WebKit](https://en.wikipedia.org/wiki/WebKit) engine and should thus have equivalent support |
 | 🟩 | ![android logo] | [Android](https://en.wikipedia.org/wiki/Android_(operating_system)) browsers | Browsers on Android can use their own engines, so support may vary, but there are currently no known issues |
 | 🟩 | 🌐 | Others | iD should run on any browser implementing [modern web standards](https://www.w3.org/standards/). Hardware factors such as screen size may affect usability |
@@ -74,7 +74,7 @@ It's impractical to ensure every single input device works as expected, so the t
 | 🟩 | ![apple adb mouse] | Single-button [mouse](https://en.wikipedia.org/wiki/Computer_mouse) | Primary click (e.g. left-click) can be used for all pointer interactions. Long-clicking on map features opens the edit menu |
 | 🟩 | ![ibm mouse] | Multi-button mouse | Secondary click (e.g. right-click) can be used on map features to open the edit menu. Middle click, etc., are not needed by iD but are passed through to the browser |
 | 🟩 | [![magic mouse]](https://en.wikipedia.org/wiki/Magic_Mouse) | Multi-touch mouse | 2D scrolling in the map is treated as panning, not zooming |
-| 🟠 | ![vertical scroll wheel] | Vertical [scroll wheel](https://en.wikipedia.org/wiki/Scroll_wheel) | Should zoom the map in and out | [#5550](https://github.com/openstreetmap/iD/issues/5550) | 
+| 🟠 | ![vertical scroll wheel] | Vertical [scroll wheel](https://en.wikipedia.org/wiki/Scroll_wheel) | Should zoom the map in and out | [#5550](https://github.com/openstreetmap/iD/issues/5550) |
 | ❌ |  | Horizontal scroll wheel | Currently does nothing in the map | [#7134](https://github.com/openstreetmap/iD/issues/7134) |
 | 🤷 | [![apple mighty mouse]](https://en.wikipedia.org/wiki/Apple_Mighty_Mouse) | Scroll ball | Works like combined vertical/horizontal scroll wheels |
 | 🟩 | 🖲 | [Trackball](https://en.wikipedia.org/wiki/Trackball) | |

CHANGELOG.md

@@ -41,10 +41,13 @@ _Breaking developer changes, which may affect downstream projects or sites that
 
 # Unreleased
 
+#### :newspaper: News
+* Drop legacy support for Internet Explorer 11 ([#8811])
 #### :hammer: Development
 * Switch build system to [esbuild](https://esbuild.github.io/) for much faster builds ([#8774], thanks [@ mbrzakovic] and [@bhousel])
 
 [#8774]: https://github.com/openstreetmap/iD/pull/8774
+[#8811]: https://github.com/openstreetmap/iD/issues/8811
 
 # 2.20.4
 ##### 2022-Feb-03

CONTRIBUTING.md

@@ -322,9 +322,7 @@ instead of surprising us with a pull request.
 
 ### JavaScript
 
-Legacy iD code was written with ES5 syntax, however we now support most ES6 syntax via [Rollup.js](https://rollupjs.org/guide/en) and the [Rollup Bublé plugin](https://github.com/rollup/plugins/tree/master/packages/buble). You can find details about Bublé [here](https://buble.surge.sh/guide/).
-
-In order to continue to support older browsers like IE11 and our PhantomJS-based test runner, we also include the [browser-polyfills](https://github.com/tiagomapmarques/browser-polyfills#what-does-it-have) package.
+iD code was initially written with ES5 syntax, however we do now develop using ES6 syntax.
 
 We mostly follow the Airbnb style guide for JavaScript:
 - [Modern ES6](https://github.com/airbnb/javascript)
@@ -360,7 +358,7 @@ Just like HTML and JavaScript, 4 space soft tabs always.
 ```
 
 We write vanilla CSS with no preprocessing step. Since iD targets modern browsers,
-(Chrome, Firefox, Safari, Opera, IE11, and Edge) feel free to use newer features wisely.
+(Chrome, Firefox, Safari, Opera, and Edge) feel free to use newer features wisely.
 
 
 ### Tests

README.md

@@ -8,7 +8,7 @@
 * It's intentionally simple. It lets you do the most basic tasks while
   not breaking other people's data.
 * It supports all popular modern desktop browsers: Chrome, Firefox, Safari,
-  Opera, Edge, and IE11.
+  Opera, and Edge.
 * iD is not yet designed for mobile browsers, but this is something we hope to add!
 * Data is rendered with [d3.js](https://d3js.org/).
 

dist/index.html

@@ -30,16 +30,14 @@
       newScript.type = 'text/javascript';
       newScript.onload = checkScript;
       newScript.onerror = checkScript;
-
-      var isIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
-      newScript.src = isIE11 ? 'iD.legacy.min.js' : 'iD.min.js';
+      newScript.src = 'iD.min.js';
 
       document.getElementsByTagName('head')[0].appendChild(newScript);
 
 
       function checkScript() {
         if (typeof iD === 'undefined' || !iD.utilDetect().support) {
-          container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
+          container.innerHTML = 'Sorry, your browser is not currently supported. Please use another <a href="https://github.com/openstreetmap/iD#basics">browser</a> or <a href="https://wiki.openstreetmap.org/wiki/Editors">editor</a> to contribute to the map.';
           container.style.padding = '20px';
 
         } else {

index.html

@@ -30,16 +30,14 @@
       newScript.type = 'text/javascript';
       newScript.onload = checkScript;
       newScript.onerror = checkScript;
-
-      var isIE11 = !!(navigator.userAgent.match(/Trident/) && !navigator.userAgent.match(/MSIE/));
-      newScript.src = isIE11 ? 'dist/iD.legacy.js' : 'dist/iD.js';
+      newScript.src = 'dist/iD.js';
 
       document.getElementsByTagName('head')[0].appendChild(newScript);
 
 
       function checkScript() {
         if (typeof iD === 'undefined' || !iD.utilDetect().support) {
-          container.innerHTML = 'Sorry, your browser is not currently supported. Please use Potlatch 2 to edit the map.';
+          container.innerHTML = 'Sorry, your browser is not currently supported. Please use another <a href="https://github.com/openstreetmap/iD#basics">browser</a> or <a href="https://wiki.openstreetmap.org/wiki/Editors">editor</a> to contribute to the map.';
           container.style.padding = '20px';
 
         } else {

modules/renderer/background.js

@@ -10,15 +10,13 @@ import { geoExtent, geoMetersToOffset, geoOffsetToMeters} from '../geo';
 import { rendererBackgroundSource } from './background_source';
 import { rendererTileLayer } from './tile_layer';
 import { utilQsString, utilStringQs } from '../util';
-import { utilDetect } from '../util/detect';
 import { utilRebind } from '../util/rebind';
 
 
 let _imageryIndex = null;
 
 export function rendererBackground(context) {
   const dispatch = d3_dispatch('change');
-  const detected = utilDetect();
   const baseLayer = rendererTileLayer(context).projection(context.projection);
   let _checkedBlocklists = [];
   let _isValid = true;
@@ -110,20 +108,18 @@ export function rendererBackground(context) {
 
 
     let baseFilter = '';
-    if (detected.cssfilters) {
-      if (_brightness !== 1) {
-        baseFilter += ` brightness(${_brightness})`;
-      }
-      if (_contrast !== 1) {
-        baseFilter += ` contrast(${_contrast})`;
-      }
-      if (_saturation !== 1) {
-        baseFilter += ` saturate(${_saturation})`;
-      }
-      if (_sharpness < 1) {  // gaussian blur
-        const blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
-        baseFilter += ` blur(${blur}px)`;
-      }
+    if (_brightness !== 1) {
+      baseFilter += ` brightness(${_brightness})`;
+    }
+    if (_contrast !== 1) {
+      baseFilter += ` contrast(${_contrast})`;
+    }
+    if (_saturation !== 1) {
+      baseFilter += ` saturate(${_saturation})`;
+    }
+    if (_sharpness < 1) {  // gaussian blur
+      const blur = d3_interpolateNumber(0.5, 5)(1 - _sharpness);
+      baseFilter += ` blur(${blur}px)`;
     }
 
     let base = selection.selectAll('.layer-background')
@@ -134,11 +130,7 @@ export function rendererBackground(context) {
       .attr('class', 'layer layer-background')
       .merge(base);
 
-    if (detected.cssfilters) {
-      base.style('filter', baseFilter || null);
-    } else {
-      base.style('opacity', _brightness);
-    }
+    base.style('filter', baseFilter || null);
 
 
     let imagery = base.selectAll('.layer-imagery')
@@ -153,7 +145,7 @@ export function rendererBackground(context) {
 
     let maskFilter = '';
     let mixBlendMode = '';
-    if (detected.cssfilters && _sharpness > 1) {  // apply unsharp mask
+    if (_sharpness > 1) {  // apply unsharp mask
       mixBlendMode = 'overlay';
       maskFilter = 'saturate(0) blur(3px) invert(1)';
 
@@ -165,7 +157,7 @@ export function rendererBackground(context) {
     }
 
     let mask = base.selectAll('.layer-unsharp-mask')
-      .data(detected.cssfilters && _sharpness > 1 ? [0] : []);
+      .data(_sharpness > 1 ? [0] : []);
 
     mask.exit()
       .remove();

modules/renderer/background_source.js

@@ -132,15 +132,9 @@ export function rendererBackgroundSource(data) {
 
         if (source.type === 'wms') {
             var tileToProjectedCoords = (function(x, y, z) {
-                //polyfill for IE11, PhantomJS
-                var sinh = Math.sinh || function(x) {
-                    var y = Math.exp(x);
-                    return (y - 1 / y) / 2;
-                };
-
                 var zoomSize = Math.pow(2, z);
                 var lon = x / zoomSize * Math.PI * 2 - Math.PI;
-                var lat = Math.atan(sinh(Math.PI * (1 - 2 * y / zoomSize)));
+                var lat = Math.atan(Math.sinh(Math.PI * (1 - 2 * y / zoomSize)));
 
                 switch (source.projection) {
                     case 'EPSG:4326':

modules/ui/conflicts.js

@@ -9,7 +9,6 @@ import { JXON } from '../util/jxon';
 import { geoExtent } from '../geo';
 import { osmChangeset } from '../osm';
 import { svgIcon } from '../svg/icon';
-import { utilDetect } from '../util/detect';
 
 import {
     utilEntityOrMemberSelector,
@@ -81,7 +80,6 @@ export function uiConflicts(context) {
 
 
         // Download changes link
-        var detected = utilDetect();
         var changeset = new osmChangeset();
 
         delete changeset.id;  // Export without changeset_id
@@ -94,18 +92,10 @@ export function uiConflicts(context) {
             .append('a')
             .attr('class', 'download-changes');
 
-        if (detected.download) {      // All except IE11 and Edge
-            linkEnter                 // download the data as a file
-                .attr('href', window.URL.createObjectURL(blob))
-                .attr('download', fileName);
-
-        } else {                      // IE11 and Edge
-            linkEnter                 // open data uri in a new tab
-                .attr('target', '_blank')
-                .on('click.download', function() {
-                    navigator.msSaveBlob(blob, fileName);
-                });
-        }
+        // download the data as a file
+        linkEnter
+            .attr('href', window.URL.createObjectURL(blob))
+            .attr('download', fileName);
 
         linkEnter
             .call(svgIcon('#iD-icon-load', 'inline'))

modules/ui/sections/background_display_options.js

@@ -6,7 +6,6 @@ import { prefs } from '../../core/preferences';
 import { t, localizer } from '../../core/localizer';
 import { svgIcon } from '../../svg/icon';
 import { uiSection } from '../section';
-import { utilDetect } from '../../util/detect';
 
 
 export function uiSectionBackgroundDisplayOptions(context) {
@@ -15,14 +14,11 @@ export function uiSectionBackgroundDisplayOptions(context) {
         .label(t.html('background.display_options'))
         .disclosureContent(renderDisclosureContent);
 
-    var _detected = utilDetect();
     var _storedOpacity = prefs('background-opacity');
     var _minVal = 0;
-    var _maxVal = _detected.cssfilters ? 3 : 1;
+    var _maxVal = 3;
 
-    var _sliders = _detected.cssfilters
-        ? ['brightness', 'contrast', 'saturation', 'sharpness']
-        : ['brightness'];
+    var _sliders = ['brightness', 'contrast', 'saturation', 'sharpness'];
 
     var _options = {
         brightness: (_storedOpacity !== null ? (+_storedOpacity) : 1),

modules/ui/sections/changes.js

@@ -7,7 +7,6 @@ import { JXON } from '../../util/jxon';
 import { actionDiscardTags } from '../../actions/discard_tags';
 import { osmChangeset } from '../../osm';
 import { svgIcon } from '../../svg/icon';
-import { utilDetect } from '../../util/detect';
 import { uiSection } from '../section';
 
 import {
@@ -18,8 +17,6 @@ import {
 
 
 export function uiSectionChanges(context) {
-    var detected = utilDetect();
-
     var _discardTags = {};
     fileFetcher.get('discarded')
         .then(function(d) { _discardTags = d; })
@@ -116,18 +113,9 @@ export function uiSectionChanges(context) {
             .append('a')
             .attr('class', 'download-changes');
 
-        if (detected.download) {      // All except IE11 and Edge
-            linkEnter                 // download the data as a file
-                .attr('href', window.URL.createObjectURL(blob))
-                .attr('download', fileName);
-
-        } else {                      // IE11 and Edge
-            linkEnter                 // open data uri in a new tab
-                .attr('target', '_blank')
-                .on('click.download', function() {
-                    navigator.msSaveBlob(blob, fileName);
-                });
-        }
+        linkEnter
+            .attr('href', window.URL.createObjectURL(blob))
+            .attr('download', fileName);
 
         linkEnter
             .call(svgIcon('#iD-icon-load', 'inline'))

modules/ui/settings/custom_data.js

@@ -45,7 +45,7 @@ export function uiSettingsCustomData(context) {
             .attr('class', 'field-file')
             .attr('type', 'file')
             .attr('accept', '.gpx,.kml,.geojson,.json,application/gpx+xml,application/vnd.google-earth.kml+xml,application/geo+json,application/json')
-            .property('files', _currSettings.fileList)  // works for all except IE11
+            .property('files', _currSettings.fileList)
             .on('change', function(d3_event) {
                 var files = d3_event.target.files;
                 if (files && files.length) {

modules/util/detect.js

@@ -52,15 +52,13 @@ export function utilDetect(refresh) {
   if (_detected.browser.toLowerCase() === 'msie') {
     _detected.ie = true;
     _detected.browser = 'Internet Explorer';
-    _detected.support = parseFloat(_detected.version) >= 11;
+    _detected.support = false;
   } else {
     _detected.ie = false;
     _detected.support = true;
   }
 
   _detected.filedrop = (window.FileReader && 'ondrop' in window);
-  _detected.download = !(_detected.ie || _detected.browser.toLowerCase() === 'edge');
-  _detected.cssfilters = !(_detected.ie || _detected.browser.toLowerCase() === 'edge');
 
 
   /* Platform */