Adding ROUGH DRAFT locale switcher for development purposes, see phet…

…sims/chipper#1302

js/NavigationBar.ts

@@ -28,7 +28,7 @@ import StringProperty from '../../axon/js/StringProperty.js';
 import Dimension2 from '../../dot/js/Dimension2.js';
 import IntentionalAny from '../../phet-core/js/types/IntentionalAny.js';
 import PhetFont from '../../scenery-phet/js/PhetFont.js';
-import { AlignBox, Color, HBox, ManualConstraint, RelaxedManualConstraint, Node, PDOMPeer, Rectangle, Text } from '../../scenery/js/imports.js';
+import { AlignBox, Color, FireListener, GridBox, HBox, ManualConstraint, Node, Path, PDOMPeer, Rectangle, RelaxedManualConstraint, Text } from '../../scenery/js/imports.js';
 import Tandem from '../../tandem/js/Tandem.js';
 import A11yButtonsHBox from './A11yButtonsHBox.js';
 import HomeButton from './HomeButton.js';
@@ -43,6 +43,10 @@ import ReadOnlyProperty from '../../axon/js/ReadOnlyProperty.js';
 import Bounds2 from '../../dot/js/Bounds2.js';
 import Screen from './Screen.js';
 import BooleanProperty from '../../axon/js/BooleanProperty.js';
+import localeInfoModule from '../../chipper/js/data/localeInfoModule.js';
+import localeProperty from './localeProperty.js';
+import globeAmericasSolidShape from '../../sherpa/js/fontawesome-5/globeAmericasSolidShape.js';
+import Panel from '../../sun/js/Panel.js';
 
 // constants
 // for layout of the NavigationBar, used in the following way:
@@ -68,6 +72,7 @@ class NavigationBar extends Node {
   private readonly background: Rectangle;
   private readonly barContents: Node;
   private readonly a11yButtonsHBox: A11yButtonsHBox;
+  private readonly localeNode: Node;
   private readonly homeButton: HomeButton | null = null; // mutated if multiscreen sim
 
   public constructor( sim: Sim, tandem: Tandem ) {
@@ -128,6 +133,52 @@ class NavigationBar extends Node {
     );
     this.barContents.addChild( phetButton );
 
+    this.localeNode = new Path( globeAmericasSolidShape, {
+      scale: 0.04,
+      fill: new DerivedProperty( [ this.navigationBarFillProperty ], color => {
+        return color.equals( Color.BLACK ) ? 'white' : 'black';
+      } ),
+      inputListeners: [
+        new FireListener( {
+          fire: () => {
+            localePopup.visible = !localePopup.visible;
+          }
+        } )
+      ],
+      cursor: 'pointer'
+    } );
+    this.localeNode.mouseArea = this.localeNode.localBounds.dilated( 5 );
+    this.localeNode.touchArea = this.localeNode.localBounds.dilated( 5 );
+
+    const localePopup = new Panel( new GridBox( {
+      xMargin: 10,
+      yMargin: 3,
+      xAlign: 'left',
+      autoRows: 15,
+      children: localeProperty.validValues!.map( locale => {
+        // @ts-ignore
+        return new Text( localeInfoModule[ locale ].localizedName, {
+          font: new PhetFont( 14 ),
+          cursor: 'pointer',
+          inputListeners: [
+            new FireListener( {
+              fire: () => {
+                localeProperty.value = locale;
+                localePopup.visible = false;
+              }
+            } )
+          ]
+        } );
+      } )
+    } ), {
+      visible: false
+    } );
+    sim.topLayer.addChild( localePopup );
+
+    ManualConstraint.create( sim.rootNode, [ this.localeNode, localePopup ], ( localeNodeProxy, popupProxy ) => {
+      popupProxy.rightBottom = localeNodeProxy.rightTop;
+    } );
+
     // a11y HBox, button fills determined by state of navigationBarFillProperty
     this.a11yButtonsHBox = new A11yButtonsHBox(
       sim,
@@ -136,6 +187,7 @@ class NavigationBar extends Node {
       }
     );
     this.barContents.addChild( this.a11yButtonsHBox );
+    this.barContents.addChild( this.localeNode );
 
     // pdom - tell this node that it is aria-labelled by its own labelContent.
     this.addAriaLabelledbyAssociation( {
@@ -153,7 +205,7 @@ class NavigationBar extends Node {
 
       // title can occupy all space to the left of the PhET button
       titleText.maxWidth = HomeScreenView.LAYOUT_BOUNDS.width - TITLE_LEFT_MARGIN - TITLE_RIGHT_MARGIN -
-                           PHET_BUTTON_LEFT_MARGIN - this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN -
+                           PHET_BUTTON_LEFT_MARGIN - this.a11yButtonsHBox.width - this.localeNode.width - PHET_BUTTON_LEFT_MARGIN -
                            phetButton.width - PHET_BUTTON_RIGHT_MARGIN;
     }
     else {
@@ -217,7 +269,7 @@ class NavigationBar extends Node {
 
       // available width right of center
       const availableRight = ( HomeScreenView.LAYOUT_BOUNDS.width / 2 ) - PHET_BUTTON_LEFT_MARGIN -
-                             this.a11yButtonsHBox.width - PHET_BUTTON_LEFT_MARGIN - phetButton.width -
+                             this.a11yButtonsHBox.width - this.localeNode.width - PHET_BUTTON_LEFT_MARGIN - phetButton.width -
                              PHET_BUTTON_RIGHT_MARGIN;
 
       // total available width for the screen buttons when they are centered
@@ -305,11 +357,14 @@ class NavigationBar extends Node {
       phetButtonProxy.right = backgroundProxy.right - PHET_BUTTON_RIGHT_MARGIN;
     } );
 
-    ManualConstraint.create( this.barContents, [ phetButton, this.a11yButtonsHBox ], ( phetButtonProxy, a11yButtonsHBoxProxy ) => {
+    ManualConstraint.create( this.barContents, [ phetButton, this.a11yButtonsHBox, this.localeNode ], ( phetButtonProxy, a11yButtonsHBoxProxy, localeNodeProxy ) => {
       a11yButtonsHBoxProxy.right = phetButtonProxy.left - PHET_BUTTON_LEFT_MARGIN;
 
       // The icon is vertically adjusted in KeyboardHelpButton, so that the centers can be aligned here
       a11yButtonsHBoxProxy.centerY = phetButtonProxy.centerY;
+
+      localeNodeProxy.centerY = phetButtonProxy.centerY;
+      localeNodeProxy.right = Math.min( a11yButtonsHBoxProxy.left, phetButtonProxy.left ) - PHET_BUTTON_LEFT_MARGIN;
     } );
 
     this.layout( 1, NAVIGATION_BAR_SIZE.width, NAVIGATION_BAR_SIZE.height );

js/Sim.ts

@@ -240,7 +240,7 @@ export default class Sim extends PhetioObject {
     } );
 
   // layer for popups, dialogs, and their backgrounds and barriers
-  private readonly topLayer: TopLayerNode = new Node( {
+  public readonly topLayer: TopLayerNode = new Node( {
     children: [ this.barrierRectangle ]
   } );
 

js/localeProperty.ts

@@ -13,7 +13,7 @@ import joist from './joist.js';
 const localeProperty = new StringProperty( phet.chipper.locale || 'en', {
   tandem: Tandem.GENERAL_VIEW.createTandem( 'localeProperty' ),
   phetioFeatured: true,
-  validValues: Object.keys( phet.chipper.strings )
+  validValues: Object.keys( phet.chipper.strings ).sort()
 } );
 
 joist.register( 'localeProperty', localeProperty );