Add a small UI shift when running the sim in PhET-iO brand with assertions enabled

[zepumph]

From PhET-iO meeting today over in https://github.com/phetsims/studio/issues/253#issuecomment-1099873680.

@arouinfar, can you look into a couple of mockups for us?

I also want to note that right now it may make sense to run this off of if assertions are enabled or not, but in the future it may be best to have a more central point of "We are in PhET-iO and we are in the debug/development mode." I think that may be added in https://github.com/phetsims/studio/issues/253, so we will need to check on that.

[arouinfar]

Here are a few ideas:

My preference would be to change the color of the menu dots. It's clearly visible and doesn't shift the layout or alter the branding. Tagging to for review in design meeting.

[zepumph]

I also really like the kabob menu icon change. Want to mock up that same color with opposite colors (like projector mode) to make sure things have enough contrast for both? Or do we need two different colors?

[zepumph]

In my opinion it would be a mistake to change the logo. It would be a fair bit of work, and would likely end up being confusing to our branding and as a communication device.

[arouinfar]

In my opinion it would be a mistake to change the logo.

I totally agree. It's a bad idea from a branding perspective and likely more technically difficult to implement.

Want to mock up that same color with opposite colors (like projector mode) to make sure things have enough contrast for both? Or do we need two different colors?

Good thought! I used WebAim's contrast checker and rgb(255, 0, 0) and rgb(255, 85, 0) (PhetColorScheme.RED_COLORBLIND) both pass against black and white backgrounds.

[zepumph]

What would it take to "flip the switch" and implement this coloring when assertions ("PhET-iO debug mode") are enabled.

[arouinfar]

Discussed in 4/21/22 design meeting:

• Changing the color of the menu dots isn't viable because many clients disable the PhET Menu, which hides the dots.
• Adding an extra icon to the navbar isn't ideal because the navbar can get crowded (long sim title, 5 screens, up to 3 a11y icons) and there could be layout issues to work out.
• A simple solution would be to underline the PhET-iO logo. rgb(255, 0, 0) has sufficient contrast against black and white. Other colors considered were yellow (insufficient contrast with white) and magenta (might get confusing when using alt input).
• We could also add a message to the console that lets users know they are running the debug version. The console message alone isn't sufficient because we want to make it very clear which version is running.
• If a client accidentally provides students with the debug link, the red underline isn't terribly obtrusive (but something like a bug icon would be).

@zepumph mocked this up, and the team was happy with this direction.

[zepumph]

```diff Index: js/PhetButton.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/js/PhetButton.ts b/js/PhetButton.ts --- a/js/PhetButton.ts (revision 8a034748ec31602ae85bb2c618277bc7cd905e37) +++ b/js/PhetButton.ts (date 1650580998458) @@ -11,9 +11,7 @@ import IReadOnlyProperty from '../../axon/js/IReadOnlyProperty.js'; import Property from '../../axon/js/Property.js'; import Bounds2 from '../../dot/js/Bounds2.js'; -import { AriaHasPopUpMutator, Color } from '../../scenery/js/imports.js'; -import { Image } from '../../scenery/js/imports.js'; -import { Node } from '../../scenery/js/imports.js'; +import { AriaHasPopUpMutator, Color, Image, Line, Node, VBox } from '../../scenery/js/imports.js'; import pushButtonSoundPlayer from '../../tambo/js/shared-sound-players/pushButtonSoundPlayer.js'; import Tandem from '../../tandem/js/Tandem.js'; import IOType from '../../tandem/js/types/IOType.js'; @@ -81,7 +79,15 @@ } ); // The icon combines the PhET logo and the menu icon - const icon = new Node( { children: [ logoImage, menuIcon ] } ); + const icon = new Node( { + children: [ new VBox( { + align: 'bottom', + spacing: 1, + children: [ logoImage, new Line( 0, 0, logoImage.width, 0, { + stroke: 'red', lineWidth: 2 + } ) ] + } ), menuIcon ] + } ); super( icon, backgroundFillProperty, tandem, { highlightExtensionWidth: 6, ```

[samreid]

In today's meeting, @kathy-phet and @arouinfar surmised that this indicator would display in studio since studio will be running in debug mode. @zepumph is that what you were thinking?

[samreid]

@kathy-phet said this would be good to implement for next week. @arouinfar and/or @kathy-phet also indicated it doesn't need to look pixel perfect since it only displays in the debug mode. Self-assigning.

[samreid]

I added a first draft of the proposal. Some notes:

• In order to not disrupt the layout, I put it within the bounds of the existing PhET-iO logo. Ideally a future version would be a bit lower.
• I reduced the line width. Tried to strike a balance between "easily visible" and "not too obtrusive"
• This only shows in PhET-iO brand and only when the ?ea query parameter is supplied.

Questions for @arouinfar

• Is this design acceptable for this week? Any design changes necessary for our May 10 deadline? Please test in phettest.

Questions for @zepumph

• Do we want to check the existence of assert or check for the ?ea query parameter? Are there more ways to enable assertions other than ?ea that we should respect?
• More general code review

Note to self:

• I can see that the "preview sim" has the underline, but it shouldn't. It is being caused by queryString: '?sim=gravity-and-orbits&phetioDebug&phetioElementsDisplay=all', in the rendered html. UPDATE: It's OK, phetmarks was adding phetioDebug for local testing.

Stating some concerns for the record, even though there was consensus in https://github.com/phetsims/joist/issues/802#issuecomment-1105786270

• Everyone agreed that this depiction shouldn't be part of the logo. But even if the underline is moved several pixels lower, it still feels like part of the logo.
• Since this will be visible to all clients using studio, I recommend spending more time to come up with a more aesthetically pleasing indicator.

Also marking as blocks-publication until review is complete.

[kathy-phet]

In today's meeting, @kathy-phet and @arouinfar surmised that this indicator would display in studio since studio will be running in debug mode. @zepumph is that what you were thinking?

I recall that Amy and I did discuss this with MK when we were deciding what design would be, and we all agreed it would be fine. So I don't think this will be new to him when he is back.

[arouinfar]

Is this design acceptable for this week? Any design changes necessary for our May 10 deadline? Please test in phettest.

Here's what it currently looks like on phettest:

@samreid I think this looks fine for client training, but I'll go ahead and tag for design meeting to discuss the other issues you've raised.

[zepumph]

I'm not sure if this was discussed last week, but I will say that in studio when the sim is in an iframe, I can only barely see this. Perhaps if it was a bit thicker and just on top of the bottom portion of the log? I'm not sure what is best.

[zepumph]

The design team liked these tweaks today. I'll do it!

Index: js/PhetButton.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/js/PhetButton.ts b/js/PhetButton.ts
--- a/js/PhetButton.ts  (revision 13b40c29f126e68383bd7f510168880a5e8dcd80)
+++ b/js/PhetButton.ts  (date 1652391603537)
@@ -82,13 +82,11 @@
       [

         // The underline in phet-io phetioDebug mode
-        new Line( 0, 0, logoImage.width, 0, {
-          stroke: 'red', lineWidth: 0.6,
-          centerX: logoImage.centerX,
+        new Line( 0, 0, logoImage.width - 7, 0, {
+          stroke: 'red', lineWidth: 3,
+          left: logoImage.left,
           bottom: logoImage.bottom
-        } ),
-
-        logoImage, menuIcon ] :
+        } ), logoImage, menuIcon ] :
       [ logoImage, menuIcon ];

     // The icon combines the PhET logo and the menu icon

[zepumph]

Here is the patch applied, as we decided in phet-io meeting. Closing.

[kathy-phet]

@zepumph - Reopening this to confirm we should have the redline if ?ea is run in standalone PhET-iO sim? I think so, because that is basically running with debug on the PhET-iO sim only. But lets check in at Thursday PhET-iO meeting to make sure we all understand how it criss crosses various combinations, and Amy can write it up well. @arouinfar

[zepumph]

We reviewed this in PhET-iO meeting and decided that there was a bug in the build standalone version. This version doesn't have assertions, but adding ?ea shows the red line still. We also went over all other use cases of phetioDebug and reviewed that they seem good. Also note the problem described in https://github.com/phetsims/studio/issues/269 was a large portion of the confusion. Closing