Create a message that we don't support IE 11 #954
Comments
|
Current website solution is below. The <div id="ie11Blocker">
<div class="modal">
<p>
<wicket:message key="ie11-blocking-message">
The PhET website does not support Internet Explorer. We recommend using a modern web browser such as Chrome,
Firefox, or Edge.
</wicket:message>
</p>
<button id="ie11Blocker-close">
<i class="fa fa-times"></i>
</button>
</div>
<script>
document.getElementById( 'ie11Blocker' ).addEventListener( 'click', function () {
document.getElementById( 'ie11Blocker' ).style.display = 'none';
} );
</script>
</div>#ie11Blocker {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background: rgba(0, 0, 0, .3);
z-index: 10000;
align-items: center;
}
#ie11Blocker .modal {
position: relative;
background: #efefef;
border-radius: 10px;
max-width: 410px;
margin: auto;
padding: 30px;
font-size: 20px;
font-weight: 100;
}
#ie11Blocker-close {
position: absolute;
top: 0;
right: 0;
background: transparent;
border: none;
padding: 5px 10px;
cursor: pointer;
}
@supports (display: grid) {
#ie11Blocker {
display: none !important;
}
} |
|
from 06/18/20 dev meeting: @mattpen suggested a css option that would show a dialog in IE Since the sim will definitely crash, there are concerns that not proactively preventing the sim from running on IE would be a bad UX for the user and/or interfere with the dialog shown in css. @samreid proposed a solution that would use JS to detect IE and return out before trying to run the sim. We think that some combination of these two things would be nice, such that the sim intentionally doesn't run and the user is prompted with a message. To start off, @ariel-phet is not concerned with how the dialog looks but just wants a simple message like "IE is not supported" in a dialog in the center of the screen as a proof-of-concept. @chrisklus and @Denz1994 will pair on this, and will aim to have something working by next dev meeting. |
|
We also discussed that this needs to be done before the next RC version (we think that will be density). |
|
Patch from @Denz1994 and me today: Index: templates/sim.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/sim.html (revision 985a7dbb6ce503898afce625ddba906a11ad7a21)
+++ templates/sim.html (date 1592849119000)
@@ -21,6 +21,7 @@
-->
<!-- body is only made black for the loading phase so that the splash screen is black -->
<body style="background-color:black;">
+{{PHET_IE_DETECTION}}
{{PHET_SIM_SCRIPTS}}
</body>
</html>
Index: js/grunt/packageRunnable.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- js/grunt/packageRunnable.js (revision 985a7dbb6ce503898afce625ddba906a11ad7a21)
+++ js/grunt/packageRunnable.js (date 1592849275000)
@@ -39,6 +39,8 @@
assert( typeof locale === 'string', 'Requires locale' );
assert( typeof htmlHeader === 'string', 'Requires htmlHeader' );
+ const simIEDetection = grunt.file.read( '../chipper/templates/sim-ie-detection.html' );
+
const localizedTitle = stringMap[ locale ][ getTitleStringKey( repo ) ];
// Directory on the PhET website where the latest version of the sim lives
@@ -48,6 +50,7 @@
PHET_CARRIAGE_RETURN: '\r',
PHET_SIM_TITLE: encoder.htmlEncode( localizedTitle ),
PHET_HTML_HEADER: htmlHeader,
+ PHET_IE_DETECTION: simIEDetection,
PHET_SIM_SCRIPTS: scripts.map( script => `<script type="text/javascript">${script}</script>` ).join( '\n' ),
// metadata for Open Graph protocol, see phet-edmodo#2
Index: templates/sim-development.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/sim-development.html (revision 985a7dbb6ce503898afce625ddba906a11ad7a21)
+++ templates/sim-development.html (date 1592844008000)
@@ -16,6 +16,8 @@
{{BODYSTART}}
<script type="text/javascript">
+
+ console.log( 'hello' );
window.phet = window.phet || {};
window.phet.chipper = window.phet.chipper || {};
Index: templates/sim-ie-detection.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- templates/sim-ie-detection.html (date 1592851093000)
+++ templates/sim-ie-detection.html (date 1592851093000)
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<div id="ie-detection">
+
+ <style>
+ #ie-dialog-container {
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100vh;
+ width: 100vw;
+ background: rgba(0, 0, 0, .3);
+ z-index: 10000;
+ align-items: center;
+ }
+
+ #ie-dialog-container .ie-dialog {
+ position: relative;
+ background: #efefef;
+ border-radius: 10px;
+ max-width: 410px;
+ margin: auto;
+ padding: 30px;
+ font-size: 20px;
+ font-weight: 100;
+ }
+
+ @supports (display: grid) {
+ #ie-dialog-container {
+ display: none !important;
+ }
+ }
+ </style>
+
+ <div id="ie-dialog-container">
+ <div class="ie-dialog">
+ <p>Internet Explorer is not supported.</p>
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ var ieDialogContainer = document.getElementById( 'ie-dialog-container' );
+
+ if ( ieDialogContainer.style.display === 'none' ) {
+
+ // remove all remaining scripts if IE is detected
+ var scripts = document.getElementsByTagName( 'script' );
+ for ( var i = scripts.length; i >= 0; i-- ) {
+ if ( scripts[ i ] && scripts[ i ].parentNode && scripts[ i ].parentNode.id !== 'ie-detection' ) {
+ scripts[ i ].parentNode.removeChild( scripts[ i ] );
+ console.log( scripts.length );
+ }
+ }
+ }
+ </script>
+
+</div>
\ No newline at end of file |
Molecules and Light is also ready for an RC out of master and should include this. |
|
@Denz1994 and got a script working that uses the same user agent detection that phet-core/platform.js uses. If IE is detected, we set a global flag to true and a guard that was previously added to every other script during build will stop them from running. Thanks to @jonathanolson and @mattpen for assisting us with various approaches for trying to get this working. We added this logic for the standard html builds, as well as xhtml. All built files appear to be working. For now, we've just included a simple message in a simple dialog. We can expand the message/styling per additional requests.
|
|
We will need to make this message accessible to screen readers and have a link back to the Sim page - or to somewhere useful. |
|
Thanks @Denz1994 and @chrisklus. Adding these attributes to the HTML in your snippet would essentially match the accessible markup we use in sims. I also like @terracoda idea of adding a link to leave the page. <div id="ie-dialog-container">
<div class="ie-dialog" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Warning</h2>
<p>Internet Explorer is not supported.</p>
<a>A link, maybe to PhET home page, https://phet.colorado.edu/en/help-center/running-sims, or somehwere else</a>
</div>
</div> |
|
Should we suggest the supported browsers? Or should we link to the systems support page where what we support is listed? |
|
I see there is no Systems requirement page. The info is on the sim pages. I would suggest: <div id="ie-dialog-container">
<div class="ie-dialog" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Platform Warning</h2>
<p>Internet Explorer is not supported.</p>
<p>Please try a different browser or see Systems Requirements on any Simulation Page. <a href="https://phet.colorado.edu/en/simulations/browse">Browse SImulations</a></a>
</div>
</div>Alternatively, you could link back to the simulation page for the sim they are trying to load, or link to the home page. Also, if you don't want to provide a link, you could add a close button, that closes the dialog and returns to the simulation page. That might actually be better. <div id="ie-dialog-container">
<div class="ie-dialog" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Platform Warning</h2>
<p>Internet Explorer is not supported.</p>
<p>Please try a different browser or see Systems Requirements on Simulation Page.</p>
<button>Close</button>
</div>
</div>Focus should be placed on the close button on dialog load. |
|
@amanda-phet now that this basic concept is working, could you make a mockup of a simple dialog for us to use in this case (I suggest reading through the entire issue for context). It can be very simply styled, but would appreciate your thoughts on what it might look like. |
|
We have system requirements in the help center and could create a new help center entry about IE specifically, or link to this entry about HTML5 sims https://phet.colorado.edu/en/help-center/running-sims/general#q11-header.
|
|
Nice @amanda-phet, could you use a warning icon that is more rounded - kind of in the same style as the green checkbox in this dialog? Maybe something like this: The icon could be placed left of the heading if you think that would work. [close-icon] (visually right aligned, of course) [warning-icon] Platform Warning |
|
Will we want to generalize or repurpose this dialog for other warnings? For instance, should sims that require WebGL leverage this feature? |
|
@terracoda the tricky thing about putting the icon in the heading is that the heading could run into the close icon, so I want to be sure there is ample room. (I'm assuming this will be translatable).
If we want it to look like the up-to-date dialog, I'd recommend removing the title. |
|
Removing the title works for me. |
That layout looks strange to me since there is text below it but not above it (the up-to-date dialog is more balanced). I prefer the first one, or playing with the layout of the second one a bit more if we like the title removed. Maybe "Internet Explorer is not supported" is more vertically centered and the "Please try..." text is a smaller footer. |
|
@Denz1994 and I tested this morning and the IE error page worked as expected on In the above commit, I loaded the initialization script for the xhtml version separately from the main sim script, so hopefully this fixes the problem. @Denz1994 and I are going to test again later today. |
|
@Denz1994 and I just finished testing and the xhtml version is indeed now displaying the error page. Thanks!
@zepumph would you be interested in reviewing this again? It would consist of checking my thoughts from #954 (comment), and looking at commits 576fff5 and 381be90. |
I think I prefer the last option, but don't mind adding the doc string if you feel strongly.
That seems really reasonable to me. That said it is a bit hidden, and I worry that at some point someone may add es6 to that file without realizing it. The following doc string does not feel loud enough to keep me confident that es6 will stay out of this file indefinitely:
This may be another argument for pulling the ie dialog out into its own
The testing I did:
|
|
We reviewed this during dev meeting 8/13/20 and discussed that this no longer needs to block publication. The error HTML appears in IE11 for HTML and XHTML, verified during meeting. |
…E script separately into ES5, see #954
|
@zepumph and I discussed more today and figured out a pattern we both like. We decided on pulling the IE script back into its own file, converting it back to ES6, then transpiling separately when adding it to the initialization script during a build. This required adding an option to transpile.js for supporting IE, but was simpler than what I was talking about in #954 (comment). This is working nicely on my machine and the output is appearing as expected. Marking as blocks-publication since this hasn't been retested on IE yet and assigning to @zepumph for review. |
|
I need to get to this by the end of today! |
|
Review:
Unblocking and over to @chrisklus for the last file move. |
|
I did the last few bits. Closing |
From developer meeting today we decided to remove support for IE11. But first we will need to make sure that a message displays for IE 11 when running on that browser. It is not currently clear if the message says: "IE is not supported, go away", or more like "IE is not supported, continue and good luck, it will probably fail".
Marking for developer meeting.
The text was updated successfully, but these errors were encountered: