Merge pull request #35235 from code-dot-org/dtp_candidate_35fc2936

DTP (Test > Production: 35fc293)

apps/Gruntfile.js

@@ -593,21 +593,27 @@ describe('entry tests', () => {
     'datasets/edit_manifest':
       './src/sites/studio/pages/datasets/edit_manifest.js',
     levelbuilder: './src/sites/studio/pages/levelbuilder.js',
-    'levels/editors/_all': './src/sites/studio/pages/levels/editors/_all.js',
     'levels/editors/_applab':
       './src/sites/studio/pages/levels/editors/_applab.js',
-    'levels/editors/_blockly':
-      './src/sites/studio/pages/levels/editors/_blockly.js',
     'levels/editors/_craft':
       './src/sites/studio/pages/levels/editors/_craft.js',
-    'levels/editors/_droplet':
-      './src/sites/studio/pages/levels/editors/_droplet.js',
     'levels/editors/_dsl': './src/sites/studio/pages/levels/editors/_dsl.js',
+    'levels/editors/fields/_blockly':
+      './src/sites/studio/pages/levels/editors/fields/_blockly.js',
+    'levels/editors/fields/_callouts':
+      './src/sites/studio/pages/levels/editors/fields/_callouts.js',
+    'levels/editors/fields/_droplet':
+      './src/sites/studio/pages/levels/editors/fields/_droplet.js',
+    'levels/editors/fields/_grid':
+      './src/sites/studio/pages/levels/editors/fields/_grid.js',
+    'levels/editors/fields/_preload_assets':
+      './src/sites/studio/pages/levels/editors/fields/_preload_assets.js',
+    'levels/editors/fields/_special_level_types':
+      './src/sites/studio/pages/levels/editors/fields/_special_level_types.js',
     'levels/editors/fields/_video':
       './src/sites/studio/pages/levels/editors/fields/_video.js',
     'levels/editors/_gamelab':
       './src/sites/studio/pages/levels/editors/_gamelab.js',
-    'levels/editors/_grid': './src/sites/studio/pages/levels/editors/_grid.js',
     'levels/editors/_pixelation':
       './src/sites/studio/pages/levels/editors/_pixelation.js',
     'levels/editors/_studio':

apps/README.md

@@ -165,8 +165,8 @@ if (IN_UNIT_TEST) {
 These if statements will be removed from production source files at build time.
 
 The test runner starts a server which can serve files in the apps directory to
-your test code. Only whitelisted files and directories are available. See the
-`config.karma.options.files` array in `Gruntfile.js` for the whitelist. When
+your test code. Only allowlisted files and directories are available. See the
+`config.karma.options.files` array in `Gruntfile.js` for the allowlist. When
 fetching files served by the test runner, prefix the file path with
 `/base/`. For example, to load the `test/audio/assets/win.mp3` file in an
 `<audio>` tag inside your test, you could write:
@@ -224,7 +224,7 @@ A static version of the styleguide is hosted at https://code-dot-org.github.io/c
 
 ![code-studio-common bundle](https://user-images.githubusercontent.com/1070243/44691985-abe8dc80-aa15-11e8-95a3-0835ca3529df.png)
 
-Bloated javascript bundles getting you down? Run `yarn build:analyze` to generate an interactive treemap visualization of the contents of all of our bundles. This will automatically open the report in your browser, or you can find the generated html page in the apps build directory at code-dot-org/apps/build/package/js/report.html. This uses [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). 
+Bloated javascript bundles getting you down? Run `yarn build:analyze` to generate an interactive treemap visualization of the contents of all of our bundles. This will automatically open the report in your browser, or you can find the generated html page in the apps build directory at code-dot-org/apps/build/package/js/report.html. This uses [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer).
 
 
 ### Localization

apps/src/applab/Exporter.js

@@ -35,14 +35,14 @@ import {
   fetchWebpackRuntime
 } from '../util/exporter';
 
-// This whitelist determines which appOptions properties
+// This allowlist determines which appOptions properties
 // will get exported with the applab app, appearing in the
-// final applab.js file. It's a recursive whitelist, so
+// final applab.js file. It's a recursive allowlist, so
 // each key/value pair is the name of a property and either
 // a boolean indicating whether or not that property should
-// be included or another whitelist for subproperties at that
+// be included or another allowlist for subproperties at that
 // location.
-const APP_OPTIONS_WHITELIST = {
+const APP_OPTIONS_ALLOWLIST = {
   levelGameName: true,
   skinId: true,
   baseUrl: true,
@@ -144,18 +144,18 @@ const APP_OPTIONS_WHITELIST = {
 
 // this configuration forces certain values to show up
 // in the appOptions config. These values will be assigned
-// regardless of whether or not they are in the whitelist
+// regardless of whether or not they are in the allowlist
 const APP_OPTIONS_OVERRIDES = {
   readonlyWorkspace: true
 };
 
 export function getAppOptionsFile(expoMode, channelId) {
-  function getAppOptionsAtPath(whitelist, sourceOptions) {
-    if (!whitelist || !sourceOptions) {
+  function getAppOptionsAtPath(allowlist, sourceOptions) {
+    if (!allowlist || !sourceOptions) {
       return null;
     }
     return _.reduce(
-      whitelist,
+      allowlist,
       (memo, value, key) => {
         if (value === true) {
           memo[key] = sourceOptions[key];
@@ -170,11 +170,11 @@ export function getAppOptionsFile(expoMode, channelId) {
       {}
     );
   }
-  const options = getAppOptionsAtPath(APP_OPTIONS_WHITELIST, getAppOptions());
+  const options = getAppOptionsAtPath(APP_OPTIONS_ALLOWLIST, getAppOptions());
   _.merge(options, APP_OPTIONS_OVERRIDES);
   options.nativeExport = expoMode;
   if (!expoMode) {
-    // call non-whitelisted hasDataAPIs() function and persist as a bool in
+    // call non-allowlisted hasDataAPIs() function and persist as a bool in
     // the exported options:
     const {shareWarningInfo = {}} = getAppOptions();
     const {hasDataAPIs} = shareWarningInfo;

apps/src/applab/commands.js

@@ -1004,7 +1004,7 @@ applabCommands.getAttribute = function(opts) {
   return divApplab.contains(element) ? String(element[attribute]) : false;
 };
 
-// Whitelist of HTML Element attributes which can be modified, to
+// Allowlist of HTML Element attributes which can be modified, to
 // prevent DOM manipulation which would violate the sandbox.
 var MUTABLE_ATTRIBUTES = ['scrollTop'];
 

apps/src/applab/designElements/elementUtils.js

@@ -96,9 +96,9 @@ export function removeIdPrefix(element) {
   element.setAttribute('id', getId(element));
 }
 
-// TODO(dave): remove blacklist once element ids inside divApplab
+// TODO(dave): remove denylist once element ids inside divApplab
 // are namespaced: https://www.pivotaltracker.com/story/show/113011395
-var ELEMENT_ID_BLACKLIST = [
+var ELEMENT_ID_DENYLIST = [
   'finishButton',
   'submitButton',
   'unsubmitButton',
@@ -110,7 +110,7 @@ var TURTLE_CANVAS_ID = 'turtleCanvas';
 
 /**
  * Returns true if newId is available and won't collide with other elements.
- * Always reject element ids which are blacklisted or already exist outside divApplab.
+ * Always reject element ids which are denylisted or already exist outside divApplab.
  * Allow or reject other element types based on the options specified.
  * @param {string} newId The id to evaluate.
  * @param {Object.<string, boolean>} options Optional map of options
@@ -131,8 +131,8 @@ export function isIdAvailable(newId, options) {
     return false;
   }
 
-  // Don't allow blacklisted elements.
-  if (ELEMENT_ID_BLACKLIST.indexOf(newId) !== -1) {
+  // Don't allow denylisted elements.
+  if (ELEMENT_ID_DENYLIST.indexOf(newId) !== -1) {
     return false;
   }
 

apps/src/applab/designElements/image.jsx

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import PropTypes from 'prop-types';
 import React from 'react';
+import objectFitImages from 'object-fit-images';
 import PropertyRow from './PropertyRow';
 import ColorPickerPropertyRow from './ColorPickerPropertyRow';
 import BooleanPropertyRow from './BooleanPropertyRow';
@@ -12,7 +13,6 @@ import {ICON_PREFIX_REGEX} from '../constants';
 import EnumPropertyRow from './EnumPropertyRow';
 import BorderProperties from './BorderProperties';
 import * as elementUtils from './elementUtils';
-import {applabObjectFitImages} from '../applabObjectFitImages';
 
 class ImageProperties extends React.Component {
   static propTypes = {
@@ -179,12 +179,10 @@ function setObjectFitStyles(element, value, forceObjectFitNow) {
   // Set a style that will be picked up by objectFitImages() for old browsers:
   element.style.fontFamily = `'object-fit: ${value};'`;
   if (forceObjectFitNow) {
-    //
     // Enable polyfill for this element so we can use object-fit (it relies on
     // the style in font-family and avoid scale-down & using it in media queries)
     // See https://www.npmjs.com/package/object-fit-images for details.
-    //
-    applabObjectFitImages(element);
+    objectFitImages(element);
   }
 }
 

apps/src/applab/designMode.js

@@ -8,6 +8,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import RGBColor from 'rgbcolor';
+import objectFitImages from 'object-fit-images';
 import DesignWorkspace from './DesignWorkspace';
 import * as assetPrefix from '../assetManagement/assetPrefix';
 import elementLibrary from './designElements/library';
@@ -22,7 +23,6 @@ import logToCloud from '../logToCloud';
 import {actions} from './redux/applab';
 import * as screens from './redux/screens';
 import {getStore} from '../redux';
-import {applabObjectFitImages} from './applabObjectFitImages';
 import firehoseClient from '../lib/util/firehose';
 import project from '../code-studio/initApp/project';
 
@@ -1377,9 +1377,7 @@ function makeDraggable(jqueryElements) {
 
     elm.css('position', 'static');
   });
-  setTimeout(() => {
-    applabObjectFitImages();
-  }, 0);
+  setTimeout(() => objectFitImages(), 0);
 }
 
 /**

apps/src/applab/sanitizeHtml.js

@@ -68,7 +68,7 @@ function warnAboutUnsafeHtml(warn, unsafe, safe, warnings) {
     allowedAttributes: false,
     allowedSchemes: allSchemes,
     // Use transformTags to ignore certain attributes, since allowedAttributes
-    // can only accept a whitelist not a blacklist.
+    // can only accept an allowlist not a denylist.
     transformTags: {
       '*': function(tagName, attribs) {
         for (var i = 0; i < ignoredAttributes.length; i++) {
@@ -98,7 +98,7 @@ function warnAboutUnsafeHtml(warn, unsafe, safe, warnings) {
  * @returns {boolean} Whether the element id is valid.
  */
 function isIdAvailable(elementId) {
-  // We only care if an ID is blacklisted or already in use in this case.
+  // We only care if an ID is denylisted or already in use in this case.
   var options = {
     allowCodeElements: false,
     allowDesignElements: true,
@@ -111,7 +111,7 @@ function isIdAvailable(elementId) {
 }
 
 /**
- * Sanitize html using a whitelist of tags and attributes.
+ * Sanitize html using a allowlist of tags and attributes.
  * see default options at https://www.npmjs.com/package/sanitize-html
  * @param {string} unsafe Unsafe html to sanitize.
  * @param {function(removed, unsafe, safe, warnings)} warn Optional function

apps/src/code-studio/pd/foorm/Foorm.jsx

@@ -45,7 +45,8 @@ export default class Foorm extends React.Component {
       prev: 'sv_prev_button foorm-button',
       next: 'sv_next_button foorm-button foorm-button-right',
       complete: 'sv_complete_btn foorm-button'
-    }
+    },
+    row: 'sv_row foorm-adjust-row'
   };
 
   constructor(props) {