We're removing the special rules we've had in place for legacy browsers, especially Internet Explorer.
Required reviewers
1-2 Front-end
1 Content (messaging + Draftail functionality)
1 UX
Impacted areas of the application
The entire site, but only for browsers that don't support "modern" features (most of them have been standard for more than a decade).
updated the language in the banner to make it a little more generic / universal
renamed the banner's id and updated the style rules for it
changed the script that loaded the polyfills file so it's switching on the browser banner instead
removed the polyfills file
removed the npm entries that were only being used for the polyfills file
removed the X-UA meta tag
Screenshots
Related PRs
None
How to test
Content, we can walk you through localhost or we can push to a testing space for you to test the content editor.
Pull the branch
npm i
npm run build
./manage.py runserver
Default
Load the page
Should be no change from Prod (Specifically the very top)
Banner language and appearance
Inspector > Elements
Find <div id="browser_warning" style="display: none;"> near the top, just inside <body>
Double-click display: none; and change none to block (return)
The black banner should appear at the top of the screen, above the blue "LOCAL" etc banner
The banner should look like the attached screenshots
Code (mostly for devs)
Inspector > Elements
cmd-f for browserIsCapable
Quickly review that the <script> tag doesn't include template comments
Functionality (mostly for devs)
Choose a page template (preferably one for .html and one for .jinja)
Find and edit its var browserIsCapable = line to something that will fail, like 'fetchgibberish' in window
Reload the page (may need to npm run build-js)
The black banner should appear at the top of the screen and the window should scroll to show it (may not scroll on a reload, but shouldn't let an initial load open the banner upward)
Content editor
The localhost, etc., content editor should load and functionality correctly (draftail was using the polyfills file, too)
Pages to test, various widths:
Homepage
About & other Wagtail pages (H4CC, etc)
Calendar
Data pages ( /data/* )
Raising by the numbers (aggregate totals, contributions map)
Summary
We're removing the special rules we've had in place for legacy browsers, especially Internet Explorer.
Required reviewers
Impacted areas of the application
The entire site, but only for browsers that don't support "modern" features (most of them have been standard for more than a decade).
Screenshots
Related PRs
None
How to test
Content, we can walk you through localhost or we can push to a testing space for you to test the content editor.
npm i
npm run build
./manage.py runserver
<div id="browser_warning" style="display: none;">
near the top, just inside<body>
display: none;
and changenone
toblock
(return)browserIsCapable
<script>
tag doesn't include template commentsvar browserIsCapable =
line to something that will fail, like'fetchgibberish' in window
npm run build-js
)Pages to test, various widths: