Use keyMirror to ensure enum key-value sync

package.json

@@ -57,6 +57,7 @@
     "html-webpack-plugin": "^3.2.0",
     "immutable": "3.8.2",
     "jest": "^21.0.0",
+    "keymirror": "0.1.1",
     "lodash.bindall": "4.4.0",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.0",
@@ -97,8 +98,8 @@
     "scratch-paint": "0.2.0-prerelease.20180611155341",
     "scratch-render": "0.1.0-prerelease.20180605145739",
     "scratch-storage": "0.5.0",
-    "scratch-vm": "0.1.0-prerelease.1528399883",
     "scratch-svg-renderer": "0.2.0-prerelease.20180607141644",
+    "scratch-vm": "0.1.0-prerelease.1528399883",
     "selenium-webdriver": "3.6.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.21.0",

src/lib/layout-constants.js

@@ -1,39 +1,41 @@
+import keyMirror from 'keymirror';
+
 /**
  * Names for each state of the stage size toggle
  * @enum {string}
  */
-const STAGE_SIZE_MODES = {
+const STAGE_SIZE_MODES = keyMirror({
     /**
      * The "large stage" button is pressed; the user would like a large stage.
      */
-    large: 'large',
+    large: null,
 
     /**
      * The "small stage" button is pressed; the user would like a small stage.
      */
-    small: 'small'
-};
+    small: null
+});
 
 /**
  * Names for each stage render size
  * @enum {string}
  */
-const STAGE_DISPLAY_SIZES = {
+const STAGE_DISPLAY_SIZES = keyMirror({
     /**
      * Large stage with wide browser
      */
-    large: 'large',
+    large: null,
 
     /**
      * Large stage with narrow browser
      */
-    largeConstrained: 'largeConstrained',
+    largeConstrained: null,
 
     /**
      * Small stage (ignores browser width)
      */
-    small: 'small'
-};
+    small: null
+});
 
 const STAGE_DISPLAY_SCALES = {};
 STAGE_DISPLAY_SCALES[STAGE_DISPLAY_SIZES.large] = 1; // large mode, wide browser (standard)