blockly 8.0.4 → 8.0.5-beta.0

package/core/{field_dropdown.js → field_dropdown.ts}

@@ -9,7 +9,6 @@
  * In the interests of a consistent UI, the toolbox shares some functions and
  * properties with the context menu.
  */
-'use strict';
 
 /**
  * Dropdown input field.  Used for editable titles and variables.
@@ -17,101 +16,114 @@
  * properties with the context menu.
  * @class
  */
-goog.module('Blockly.FieldDropdown');
-
-const aria = goog.require('Blockly.utils.aria');
-const dom = goog.require('Blockly.utils.dom');
-const dropDownDiv = goog.require('Blockly.dropDownDiv');
-const fieldRegistry = goog.require('Blockly.fieldRegistry');
-const parsing = goog.require('Blockly.utils.parsing');
-const userAgent = goog.require('Blockly.utils.userAgent');
-const utilsString = goog.require('Blockly.utils.string');
-const {Coordinate} = goog.require('Blockly.utils.Coordinate');
-const {Field} = goog.require('Blockly.Field');
-const {MenuItem} = goog.require('Blockly.MenuItem');
-const {Menu} = goog.require('Blockly.Menu');
-/* eslint-disable-next-line no-unused-vars */
-const {Sentinel} = goog.requireType('Blockly.utils.Sentinel');
-const {Svg} = goog.require('Blockly.utils.Svg');
+import * as goog from '../closure/goog/goog.js';
+goog.declareModuleId('Blockly.FieldDropdown');
+
+import type {BlockSvg} from './block_svg.js';
+import * as dropDownDiv from './dropdowndiv.js';
+import {FieldConfig, Field} from './field.js';
+import * as fieldRegistry from './field_registry.js';
+import {Menu} from './menu.js';
+import {MenuItem} from './menuitem.js';
+import * as aria from './utils/aria.js';
+import {Coordinate} from './utils/coordinate.js';
+import * as dom from './utils/dom.js';
+import * as parsing from './utils/parsing.js';
+import type {Sentinel} from './utils/sentinel.js';
+import * as utilsString from './utils/string.js';
+import {Svg} from './utils/svg.js';
+import * as userAgent from './utils/useragent.js';
 
 
 /**
  * Class for an editable dropdown field.
- * @extends {Field}
  * @alias Blockly.FieldDropdown
  */
-class FieldDropdown extends Field {
+export class FieldDropdown extends Field {
+  /** Horizontal distance that a checkmark overhangs the dropdown. */
+  static CHECKMARK_OVERHANG = 25;
+
   /**
-   * @param {(!Array<!Array>|!Function|!Sentinel)} menuGenerator
-   *     A non-empty array of options for a dropdown list, or a function which
-   *     generates these options.
-   *     Also accepts Field.SKIP_SETUP if you wish to skip setup (only used by
-   *     subclasses that want to handle configuration and setting the field
-   *     value after their own constructors have run).
-   * @param {Function=} opt_validator A function that is called to validate
-   *     changes to the field's value. Takes in a language-neutral dropdown
-   *     option & returns a validated language-neutral dropdown option, or null
-   *     to abort the change.
-   * @param {Object=} opt_config A map of options used to configure the field.
-   *     See the [field creation documentation]{@link
-   *     https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown#creation}
-   *     for a list of properties this parameter supports.
-   * @throws {TypeError} If `menuGenerator` options are incorrectly structured.
+   * Maximum height of the dropdown menu, as a percentage of the viewport
+   * height.
    */
-  constructor(menuGenerator, opt_validator, opt_config) {
-    super(Field.SKIP_SETUP);
+  static MAX_MENU_HEIGHT_VH = 0.45;
+  static ARROW_CHAR: AnyDuringMigration;
 
-    /**
-     * A reference to the currently selected menu item.
-     * @type {?MenuItem}
-     * @private
-     */
-    this.selectedMenuItem_ = null;
+  /** A reference to the currently selected menu item. */
+  private selectedMenuItem_: MenuItem|null = null;
 
-    /**
-     * The dropdown menu.
-     * @type {?Menu}
-     * @protected
-     */
-    this.menu_ = null;
+  /** The dropdown menu. */
+  protected menu_: Menu|null = null;
 
-    /**
-     * SVG image element if currently selected option is an image, or null.
-     * @type {?SVGImageElement}
-     * @private
-     */
-    this.imageElement_ = null;
+  /**
+   * SVG image element if currently selected option is an image, or null.
+   */
+  private imageElement_: SVGImageElement|null = null;
 
-    /**
-     * Tspan based arrow element.
-     * @type {?SVGTSpanElement}
-     * @private
-     */
-    this.arrow_ = null;
+  /** Tspan based arrow element. */
+  private arrow_: SVGTSpanElement|null = null;
 
-    /**
-     * SVG based arrow element.
-     * @type {?SVGElement}
-     * @private
-     */
-    this.svgArrow_ = null;
+  /** SVG based arrow element. */
+  private svgArrow_: SVGElement|null = null;
 
-    /**
-     * Serializable fields are saved by the serializer, non-serializable fields
-     * are not. Editable fields should also be serializable.
-     * @type {boolean}
-     */
-    this.SERIALIZABLE = true;
+  /**
+   * Serializable fields are saved by the serializer, non-serializable fields
+   * are not. Editable fields should also be serializable.
+   */
+  override SERIALIZABLE = true;
 
-    /**
-     * Mouse cursor style when over the hotspot that initiates the editor.
-     * @type {string}
-     */
-    this.CURSOR = 'default';
+  /** Mouse cursor style when over the hotspot that initiates the editor. */
+  override CURSOR = 'default';
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  protected menuGenerator_!: AnyDuringMigration[][]|
+      ((this: FieldDropdown) => AnyDuringMigration[][]);
+
+  /** A cache of the most recently generated options. */
+  // AnyDuringMigration because:  Type 'null' is not assignable to type
+  // 'string[][]'.
+  private generatedOptions_: string[][] = null as AnyDuringMigration;
 
+  /**
+   * The prefix field label, of common words set after options are trimmed.
+   * @internal
+   */
+  override prefixField: string|null = null;
+
+  /**
+   * The suffix field label, of common words set after options are trimmed.
+   * @internal
+   */
+  override suffixField: string|null = null;
+  // TODO(b/109816955): remove '!', see go/strict-prop-init-fix.
+  private selectedOption_!: Array<string|ImageProperties>;
+  override clickTarget_: AnyDuringMigration;
+
+  /**
+   * @param menuGenerator A non-empty array of options for a dropdown list, or a
+   *     function which generates these options. Also accepts Field.SKIP_SETUP
+   *     if you wish to skip setup (only used by subclasses that want to handle
+   *     configuration and setting the field value after their own constructors
+   *     have run).
+   * @param opt_validator A function that is called to validate changes to the
+   *     field's value. Takes in a language-neutral dropdown option & returns a
+   *     validated language-neutral dropdown option, or null to abort the
+   *     change.
+   * @param opt_config A map of options used to configure the field.
+   *     See the [field creation documentation]{@link
+   * https://developers.google.com/blockly/guides/create-custom-blocks/fields/built-in-fields/dropdown#creation}
+   * for a list of properties this parameter supports.
+   * @throws {TypeError} If `menuGenerator` options are incorrectly structured.
+   */
+  constructor(
+      menuGenerator: AnyDuringMigration[][]|Function|Sentinel,
+      opt_validator?: Function, opt_config?: FieldConfig) {
+    super(Field.SKIP_SETUP);
 
     // If we pass SKIP_SETUP, don't do *anything* with the menu generator.
-    if (menuGenerator === Field.SKIP_SETUP) return;
+    if (menuGenerator === Field.SKIP_SETUP) {
+      return;
+    }
 
     if (Array.isArray(menuGenerator)) {
       validateOptions(menuGenerator);
@@ -120,60 +132,34 @@ class FieldDropdown extends Field {
     /**
      * An array of options for a dropdown list,
      * or a function which generates these options.
-     * @type {(!Array<!Array>|!function(this:FieldDropdown): !Array<!Array>)}
-     * @protected
      */
-    this.menuGenerator_ =
-        /**
-         * @type {(!Array<!Array>|
-         *    !function(this:FieldDropdown):!Array<!Array>)}
-         */
-        (menuGenerator);
-
-    /**
-     * A cache of the most recently generated options.
-     * @type {Array<!Array<string>>}
-     * @private
-     */
-    this.generatedOptions_ = null;
-
-    /**
-     * The prefix field label, of common words set after options are trimmed.
-     * @type {?string}
-     * @package
-     */
-    this.prefixField = null;
-
-    /**
-     * The suffix field label, of common words set after options are trimmed.
-     * @type {?string}
-     * @package
-     */
-    this.suffixField = null;
+    this.menuGenerator_ = menuGenerator as AnyDuringMigration[][] |
+        ((this: FieldDropdown) => AnyDuringMigration[][]);
 
     this.trimOptions_();
 
     /**
      * The currently selected option. The field is initialized with the
      * first option selected.
-     * @type {!Array<string|!ImageProperties>}
-     * @private
      */
     this.selectedOption_ = this.getOptions(false)[0];
 
-    if (opt_config) this.configure_(opt_config);
+    if (opt_config) {
+      this.configure_(opt_config);
+    }
     this.setValue(this.selectedOption_[1]);
-    if (opt_validator) this.setValidator(opt_validator);
+    if (opt_validator) {
+      this.setValidator(opt_validator);
+    }
   }
 
   /**
    * Sets the field's value based on the given XML element. Should only be
    * called by Blockly.Xml.
-   * @param {!Element} fieldElement The element containing info about the
-   *    field's state.
-   * @package
+   * @param fieldElement The element containing info about the field's state.
+   * @internal
    */
-  fromXml(fieldElement) {
+  override fromXml(fieldElement: Element) {
     if (this.isOptionListDynamic()) {
       this.getOptions(false);
     }
@@ -182,11 +168,10 @@ class FieldDropdown extends Field {
 
   /**
    * Sets the field's value based on the given state.
-   * @param {*} state The state to apply to the dropdown field.
-   * @override
-   * @package
+   * @param state The state to apply to the dropdown field.
+   * @internal
    */
-  loadState(state) {
+  override loadState(state: AnyDuringMigration) {
     if (this.loadLegacyState(FieldDropdown, state)) {
       return;
     }
@@ -198,19 +183,19 @@ class FieldDropdown extends Field {
 
   /**
    * Create the block UI for this dropdown.
-   * @package
+   * @internal
    */
-  initView() {
+  override initView() {
     if (this.shouldAddBorderRect_()) {
       this.createBorderRect_();
     } else {
-      this.clickTarget_ = this.sourceBlock_.getSvgRoot();
+      this.clickTarget_ = (this.sourceBlock_ as BlockSvg).getSvgRoot();
     }
     this.createTextElement_();
 
     this.imageElement_ = dom.createSvgElement(Svg.IMAGE, {}, this.fieldGroup_);
 
-    if (this.getConstants().FIELD_DROPDOWN_SVG_ARROW) {
+    if (this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW) {
       this.createSVGArrow_();
     } else {
       this.createTextArrow_();
@@ -223,75 +208,79 @@ class FieldDropdown extends Field {
 
   /**
    * Whether or not the dropdown should add a border rect.
-   * @return {boolean} True if the dropdown field should add a border rect.
-   * @protected
+   * @return True if the dropdown field should add a border rect.
    */
-  shouldAddBorderRect_() {
-    return !this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW ||
-        (this.getConstants().FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW &&
-         !this.sourceBlock_.isShadow());
+  protected shouldAddBorderRect_(): boolean {
+    return !this.getConstants()!.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW ||
+        this.getConstants()!.FIELD_DROPDOWN_NO_BORDER_RECT_SHADOW &&
+        !this.sourceBlock_.isShadow();
   }
 
-  /**
-   * Create a tspan based arrow.
-   * @protected
-   */
-  createTextArrow_() {
+  /** Create a tspan based arrow. */
+  protected createTextArrow_() {
     this.arrow_ = dom.createSvgElement(Svg.TSPAN, {}, this.textElement_);
-    this.arrow_.appendChild(document.createTextNode(
+    this.arrow_!.appendChild(document.createTextNode(
         this.sourceBlock_.RTL ? FieldDropdown.ARROW_CHAR + ' ' :
                                 ' ' + FieldDropdown.ARROW_CHAR));
     if (this.sourceBlock_.RTL) {
-      this.textElement_.insertBefore(this.arrow_, this.textContent_);
+      // AnyDuringMigration because:  Argument of type 'SVGTSpanElement | null'
+      // is not assignable to parameter of type 'Node'.
+      this.textElement_.insertBefore(
+          this.arrow_ as AnyDuringMigration, this.textContent_);
     } else {
-      this.textElement_.appendChild(this.arrow_);
+      // AnyDuringMigration because:  Argument of type 'SVGTSpanElement | null'
+      // is not assignable to parameter of type 'Node'.
+      this.textElement_.appendChild(this.arrow_ as AnyDuringMigration);
     }
   }
 
-  /**
-   * Create an SVG based arrow.
-   * @protected
-   */
-  createSVGArrow_() {
+  /** Create an SVG based arrow. */
+  protected createSVGArrow_() {
     this.svgArrow_ = dom.createSvgElement(
         Svg.IMAGE, {
-          'height': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px',
-          'width': this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px',
+          'height': this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px',
+          'width': this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE + 'px',
         },
         this.fieldGroup_);
-    this.svgArrow_.setAttributeNS(
+    this.svgArrow_!.setAttributeNS(
         dom.XLINK_NS, 'xlink:href',
-        this.getConstants().FIELD_DROPDOWN_SVG_ARROW_DATAURI);
+        this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_DATAURI);
   }
 
   /**
    * Create a dropdown menu under the text.
-   * @param {Event=} opt_e Optional mouse event that triggered the field to
-   *     open, or undefined if triggered programmatically.
-   * @protected
+   * @param opt_e Optional mouse event that triggered the field to open, or
+   *     undefined if triggered programmatically.
    */
-  showEditor_(opt_e) {
+  protected override showEditor_(opt_e?: Event) {
     this.dropdownCreate_();
-    if (opt_e && typeof opt_e.clientX === 'number') {
-      this.menu_.openingCoords = new Coordinate(opt_e.clientX, opt_e.clientY);
+    // AnyDuringMigration because:  Property 'clientX' does not exist on type
+    // 'Event'.
+    if (opt_e && typeof (opt_e as AnyDuringMigration).clientX === 'number') {
+      // AnyDuringMigration because:  Property 'clientY' does not exist on type
+      // 'Event'. AnyDuringMigration because:  Property 'clientX' does not exist
+      // on type 'Event'.
+      this.menu_!.openingCoords = new Coordinate(
+          (opt_e as AnyDuringMigration).clientX,
+          (opt_e as AnyDuringMigration).clientY);
     } else {
-      this.menu_.openingCoords = null;
+      this.menu_!.openingCoords = null;
     }
 
     // Remove any pre-existing elements in the dropdown.
     dropDownDiv.clearContent();
     // Element gets created in render.
-    this.menu_.render(dropDownDiv.getContentDiv());
-    const menuElement = /** @type {!Element} */ (this.menu_.getElement());
+    this.menu_!.render(dropDownDiv.getContentDiv());
+    const menuElement = this.menu_!.getElement() as Element;
     dom.addClass(menuElement, 'blocklyDropdownMenu');
 
-    if (this.getConstants().FIELD_DROPDOWN_COLOURED_DIV) {
-      const primaryColour = (this.sourceBlock_.isShadow()) ?
-          this.sourceBlock_.getParent().getColour() :
+    if (this.getConstants()!.FIELD_DROPDOWN_COLOURED_DIV) {
+      const primaryColour = this.sourceBlock_.isShadow() ?
+          this.sourceBlock_.getParent()!.getColour() :
           this.sourceBlock_.getColour();
-      const borderColour = (this.sourceBlock_.isShadow()) ?
-          this.sourceBlock_.getParent().style.colourTertiary :
-          this.sourceBlock_.style.colourTertiary;
+      const borderColour = this.sourceBlock_.isShadow() ?
+          (this.sourceBlock_.getParent() as BlockSvg).style.colourTertiary :
+          (this.sourceBlock_ as BlockSvg).style.colourTertiary;
       dropDownDiv.setColour(primaryColour, borderColour);
     }
 
@@ -300,20 +289,17 @@ class FieldDropdown extends Field {
     // Focusing needs to be handled after the menu is rendered and positioned.
     // Otherwise it will cause a page scroll to get the misplaced menu in
     // view. See issue #1329.
-    this.menu_.focus();
+    this.menu_!.focus();
 
     if (this.selectedMenuItem_) {
-      this.menu_.setHighlighted(this.selectedMenuItem_);
+      this.menu_!.setHighlighted(this.selectedMenuItem_);
     }
 
     this.applyColour();
   }
 
-  /**
-   * Create the dropdown editor.
-   * @private
-   */
-  dropdownCreate_() {
+  /** Create the dropdown editor. */
+  private dropdownCreate_() {
     const menu = new Menu();
     menu.setRole(aria.Role.LISTBOX);
     this.menu_ = menu;
@@ -345,9 +331,8 @@ class FieldDropdown extends Field {
 
   /**
    * Disposes of events and DOM-references belonging to the dropdown editor.
-   * @private
    */
-  dropdownDispose_() {
+  private dropdownDispose_() {
     if (this.menu_) {
       this.menu_.dispose();
     }
@@ -358,30 +343,27 @@ class FieldDropdown extends Field {
 
   /**
    * Handle an action in the dropdown menu.
-   * @param {!MenuItem} menuItem The MenuItem selected within menu.
-   * @private
+   * @param menuItem The MenuItem selected within menu.
    */
-  handleMenuActionEvent_(menuItem) {
+  private handleMenuActionEvent_(menuItem: MenuItem) {
     dropDownDiv.hideIfOwner(this, true);
-    this.onItemSelected_(/** @type {!Menu} */ (this.menu_), menuItem);
+    this.onItemSelected_(this.menu_ as Menu, menuItem);
   }
 
   /**
    * Handle the selection of an item in the dropdown menu.
-   * @param {!Menu} menu The Menu component clicked.
-   * @param {!MenuItem} menuItem The MenuItem selected within menu.
-   * @protected
+   * @param menu The Menu component clicked.
+   * @param menuItem The MenuItem selected within menu.
    */
-  onItemSelected_(menu, menuItem) {
+  protected onItemSelected_(menu: Menu, menuItem: MenuItem) {
     this.setValue(menuItem.getValue());
   }
 
   /**
    * Factor out common words in statically defined options.
    * Create prefix and/or suffix labels.
-   * @private
    */
-  trimOptions_() {
+  private trimOptions_() {
     const options = this.menuGenerator_;
     if (!Array.isArray(options)) {
       return;
@@ -429,42 +411,45 @@ class FieldDropdown extends Field {
   }
 
   /**
-   * @return {boolean} True if the option list is generated by a function.
+   * @return True if the option list is generated by a function.
    *     Otherwise false.
    */
-  isOptionListDynamic() {
+  isOptionListDynamic(): boolean {
     return typeof this.menuGenerator_ === 'function';
   }
 
   /**
    * Return a list of the options for this dropdown.
-   * @param {boolean=} opt_useCache For dynamic options, whether or not to use
-   *     the cached options or to re-generate them.
-   * @return {!Array<!Array>} A non-empty array of option tuples:
+   * @param opt_useCache For dynamic options, whether or not to use the cached
+   *     options or to re-generate them.
+   * @return A non-empty array of option tuples:
    *     (human-readable text or image, language-neutral name).
    * @throws {TypeError} If generated options are incorrectly structured.
    */
-  getOptions(opt_useCache) {
+  getOptions(opt_useCache?: boolean): AnyDuringMigration[][] {
     if (this.isOptionListDynamic()) {
       if (!this.generatedOptions_ || !opt_useCache) {
-        this.generatedOptions_ = this.menuGenerator_.call(this);
+        // AnyDuringMigration because:  Property 'call' does not exist on type
+        // 'any[][] | ((this: FieldDropdown) => any[][])'.
+        this.generatedOptions_ =
+            (this.menuGenerator_ as AnyDuringMigration).call(this);
         validateOptions(this.generatedOptions_);
       }
       return this.generatedOptions_;
     }
-    return /** @type {!Array<!Array<string>>} */ (this.menuGenerator_);
+    return this.menuGenerator_ as string[][];
   }
 
   /**
    * Ensure that the input value is a valid language-neutral option.
-   * @param {*=} opt_newValue The input value.
-   * @return {?string} A valid language-neutral option, or null if invalid.
-   * @protected
+   * @param opt_newValue The input value.
+   * @return A valid language-neutral option, or null if invalid.
    */
-  doClassValidation_(opt_newValue) {
+  protected override doClassValidation_(opt_newValue?: AnyDuringMigration):
+      string|null {
     let isValueValid = false;
     const options = this.getOptions(true);
-    for (let i = 0, option; (option = options[i]); i++) {
+    for (let i = 0, option; option = options[i]; i++) {
       // Options are tuples of human-readable text and language-neutral values.
       if (option[1] === opt_newValue) {
         isValueValid = true;
@@ -480,19 +465,18 @@ class FieldDropdown extends Field {
       }
       return null;
     }
-    return /** @type {string} */ (opt_newValue);
+    return opt_newValue as string;
   }
 
   /**
    * Update the value of this dropdown field.
-   * @param {*} newValue The value to be saved. The default validator guarantees
-   * that this is one of the valid dropdown options.
-   * @protected
+   * @param newValue The value to be saved. The default validator guarantees
+   *     that this is one of the valid dropdown options.
    */
-  doValueUpdate_(newValue) {
+  protected override doValueUpdate_(newValue: AnyDuringMigration) {
     super.doValueUpdate_(newValue);
     const options = this.getOptions(true);
-    for (let i = 0, option; (option = options[i]); i++) {
+    for (let i = 0, option; option = options[i]; i++) {
       if (option[1] === this.value_) {
         this.selectedOption_ = option;
       }
@@ -501,15 +485,14 @@ class FieldDropdown extends Field {
 
   /**
    * Updates the dropdown arrow to match the colour/style of the block.
-   * @package
+   * @internal
    */
-  applyColour() {
+  override applyColour() {
+    const style = (this.sourceBlock_ as BlockSvg).style;
     if (this.borderRect_) {
-      this.borderRect_.setAttribute(
-          'stroke', this.sourceBlock_.style.colourTertiary);
+      this.borderRect_.setAttribute('stroke', style.colourTertiary);
       if (this.menu_) {
-        this.borderRect_.setAttribute(
-            'fill', this.sourceBlock_.style.colourTertiary);
+        this.borderRect_.setAttribute('fill', style.colourTertiary);
       } else {
         this.borderRect_.setAttribute('fill', 'transparent');
       }
@@ -517,27 +500,23 @@ class FieldDropdown extends Field {
     // Update arrow's colour.
     if (this.sourceBlock_ && this.arrow_) {
       if (this.sourceBlock_.isShadow()) {
-        this.arrow_.style.fill = this.sourceBlock_.style.colourSecondary;
+        this.arrow_.style.fill = style.colourSecondary;
       } else {
-        this.arrow_.style.fill = this.sourceBlock_.style.colourPrimary;
+        this.arrow_.style.fill = style.colourPrimary;
       }
     }
   }
 
-  /**
-   * Draws the border with the correct width.
-   * @protected
-   */
-  render_() {
+  /** Draws the border with the correct width. */
+  protected override render_() {
     // Hide both elements.
     this.textContent_.nodeValue = '';
-    this.imageElement_.style.display = 'none';
+    this.imageElement_!.style.display = 'none';
 
     // Show correct element.
     const option = this.selectedOption_ && this.selectedOption_[0];
     if (option && typeof option === 'object') {
-      this.renderSelectedImage_(
-          /** @type {!ImageProperties} */ (option));
+      this.renderSelectedImage_((option));
     } else {
       this.renderSelectedText_();
     }
@@ -547,16 +526,20 @@ class FieldDropdown extends Field {
 
   /**
    * Renders the selected option, which must be an image.
-   * @param {!ImageProperties} imageJson Selected
-   *   option that must be an image.
-   * @private
+   * @param imageJson Selected option that must be an image.
    */
-  renderSelectedImage_(imageJson) {
-    this.imageElement_.style.display = '';
-    this.imageElement_.setAttributeNS(
+  private renderSelectedImage_(imageJson: ImageProperties) {
+    this.imageElement_!.style.display = '';
+    this.imageElement_!.setAttributeNS(
         dom.XLINK_NS, 'xlink:href', imageJson.src);
-    this.imageElement_.setAttribute('height', imageJson.height);
-    this.imageElement_.setAttribute('width', imageJson.width);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.imageElement_!.setAttribute(
+        'height', imageJson.height as AnyDuringMigration);
+    // AnyDuringMigration because:  Argument of type 'number' is not assignable
+    // to parameter of type 'string'.
+    this.imageElement_!.setAttribute(
+        'width', imageJson.width as AnyDuringMigration);
 
     const imageHeight = Number(imageJson.height);
     const imageWidth = Number(imageJson.width);
@@ -564,21 +547,21 @@ class FieldDropdown extends Field {
     // Height and width include the border rect.
     const hasBorder = !!this.borderRect_;
     const height = Math.max(
-        hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
+        hasBorder ? this.getConstants()!.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
         imageHeight + IMAGE_Y_PADDING);
     const xPadding =
-        hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0;
+        hasBorder ? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING : 0;
     let arrowWidth = 0;
     if (this.svgArrow_) {
       arrowWidth = this.positionSVGArrow_(
           imageWidth + xPadding,
-          height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2);
+          height / 2 - this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE / 2);
     } else {
       arrowWidth = dom.getFastTextWidth(
-          /** @type {!SVGTSpanElement} */ (this.arrow_),
-          this.getConstants().FIELD_TEXT_FONTSIZE,
-          this.getConstants().FIELD_TEXT_FONTWEIGHT,
-          this.getConstants().FIELD_TEXT_FONTFAMILY);
+          this.arrow_ as SVGTSpanElement,
+          this.getConstants()!.FIELD_TEXT_FONTSIZE,
+          this.getConstants()!.FIELD_TEXT_FONTWEIGHT,
+          this.getConstants()!.FIELD_TEXT_FONTFAMILY);
     }
     this.size_.width = imageWidth + arrowWidth + xPadding * 2;
     this.size_.height = height;
@@ -586,44 +569,41 @@ class FieldDropdown extends Field {
     let arrowX = 0;
     if (this.sourceBlock_.RTL) {
       const imageX = xPadding + arrowWidth;
-      this.imageElement_.setAttribute('x', imageX);
+      this.imageElement_!.setAttribute('x', imageX.toString());
     } else {
       arrowX = imageWidth + arrowWidth;
       this.textElement_.setAttribute('text-anchor', 'end');
-      this.imageElement_.setAttribute('x', xPadding);
+      this.imageElement_!.setAttribute('x', xPadding.toString());
     }
-    this.imageElement_.setAttribute('y', height / 2 - imageHeight / 2);
+    this.imageElement_!.setAttribute(
+        'y', (height / 2 - imageHeight / 2).toString());
 
     this.positionTextElement_(arrowX + xPadding, imageWidth + arrowWidth);
   }
 
-  /**
-   * Renders the selected option, which must be text.
-   * @private
-   */
-  renderSelectedText_() {
+  /** Renders the selected option, which must be text. */
+  private renderSelectedText_() {
     // Retrieves the selected option to display through getText_.
     this.textContent_.nodeValue = this.getDisplayText_();
-    dom.addClass(
-        /** @type {!Element} */ (this.textElement_), 'blocklyDropdownText');
+    dom.addClass(this.textElement_ as Element, 'blocklyDropdownText');
     this.textElement_.setAttribute('text-anchor', 'start');
 
     // Height and width include the border rect.
     const hasBorder = !!this.borderRect_;
     const height = Math.max(
-        hasBorder ? this.getConstants().FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
-        this.getConstants().FIELD_TEXT_HEIGHT);
+        hasBorder ? this.getConstants()!.FIELD_DROPDOWN_BORDER_RECT_HEIGHT : 0,
+        this.getConstants()!.FIELD_TEXT_HEIGHT);
     const textWidth = dom.getFastTextWidth(
-        this.textElement_, this.getConstants().FIELD_TEXT_FONTSIZE,
-        this.getConstants().FIELD_TEXT_FONTWEIGHT,
-        this.getConstants().FIELD_TEXT_FONTFAMILY);
+        this.textElement_, this.getConstants()!.FIELD_TEXT_FONTSIZE,
+        this.getConstants()!.FIELD_TEXT_FONTWEIGHT,
+        this.getConstants()!.FIELD_TEXT_FONTFAMILY);
     const xPadding =
-        hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0;
+        hasBorder ? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING : 0;
     let arrowWidth = 0;
     if (this.svgArrow_) {
       arrowWidth = this.positionSVGArrow_(
           textWidth + xPadding,
-          height / 2 - this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE / 2);
+          height / 2 - this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE / 2);
     }
     this.size_.width = textWidth + arrowWidth + xPadding * 2;
     this.size_.height = height;
@@ -633,20 +613,19 @@ class FieldDropdown extends Field {
 
   /**
    * Position a drop-down arrow at the appropriate location at render-time.
-   * @param {number} x X position the arrow is being rendered at, in px.
-   * @param {number} y Y position the arrow is being rendered at, in px.
-   * @return {number} Amount of space the arrow is taking up, in px.
-   * @private
+   * @param x X position the arrow is being rendered at, in px.
+   * @param y Y position the arrow is being rendered at, in px.
+   * @return Amount of space the arrow is taking up, in px.
    */
-  positionSVGArrow_(x, y) {
+  private positionSVGArrow_(x: number, y: number): number {
     if (!this.svgArrow_) {
       return 0;
     }
     const hasBorder = !!this.borderRect_;
     const xPadding =
-        hasBorder ? this.getConstants().FIELD_BORDER_RECT_X_PADDING : 0;
-    const textPadding = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_PADDING;
-    const svgArrowSize = this.getConstants().FIELD_DROPDOWN_SVG_ARROW_SIZE;
+        hasBorder ? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING : 0;
+    const textPadding = this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_PADDING;
+    const svgArrowSize = this.getConstants()!.FIELD_DROPDOWN_SVG_ARROW_SIZE;
     const arrowX = this.sourceBlock_.RTL ? xPadding : x + textPadding;
     this.svgArrow_.setAttribute(
         'transform', 'translate(' + arrowX + ',' + y + ')');
@@ -657,11 +636,9 @@ class FieldDropdown extends Field {
    * Use the `getText_` developer hook to override the field's text
    * representation.  Get the selected option text. If the selected option is an
    * image we return the image alt text.
-   * @return {?string} Selected option text.
-   * @protected
-   * @override
+   * @return Selected option text.
    */
-  getText_() {
+  protected override getText_(): string|null {
     if (!this.selectedOption_) {
       return null;
     }
@@ -674,27 +651,35 @@ class FieldDropdown extends Field {
 
   /**
    * Construct a FieldDropdown from a JSON arg object.
-   * @param {!Object} options A JSON object with options (options).
-   * @return {!FieldDropdown} The new field instance.
-   * @package
+   * @param options A JSON object with options (options).
+   * @return The new field instance.
    * @nocollapse
+   * @internal
    */
-  static fromJson(options) {
+  static fromJson(options: FieldDropdownFromJsonConfig): FieldDropdown {
+    if (!options.options) {
+      throw new Error(
+          'options are required for the dropdown field. The ' +
+          'options property must be assigned an array of ' +
+          '[humanReadableValue, languageNeutralValue] tuples.');
+    }
     // `this` might be a subclass of FieldDropdown if that class doesn't
     // override the static fromJson method.
-    return new this(options['options'], undefined, options);
+    return new this(options.options, undefined, options);
   }
 
   /**
    * Use the calculated prefix and suffix lengths to trim all of the options in
    * the given array.
-   * @param {!Array<!Array>} options Array of option tuples:
+   * @param options Array of option tuples:
    *     (human-readable text or image, language-neutral name).
-   * @param {number} prefixLength The length of the common prefix.
-   * @param {number} suffixLength The length of the common suffix
-   * @return {!Array<!Array>} A new array with all of the option text trimmed.
+   * @param prefixLength The length of the common prefix.
+   * @param suffixLength The length of the common suffix
+   * @return A new array with all of the option text trimmed.
    */
-  static applyTrim_(options, prefixLength, suffixLength) {
+  static applyTrim_(
+      options: AnyDuringMigration[][], prefixLength: number,
+      suffixLength: number): AnyDuringMigration[][] {
     const newOptions = [];
     // Remove the prefix and suffix from the options.
     for (let i = 0; i < options.length; i++) {
@@ -708,52 +693,47 @@ class FieldDropdown extends Field {
 }
 
 /**
- * Dropdown image properties.
- * @typedef {{
- *            src:string,
- *            alt:string,
- *            width:number,
- *            height:number
- *          }}
+ * Definition of a human-readable image dropdown option.
  */
-let ImageProperties;  // eslint-disable-line no-unused-vars
+export interface ImageProperties {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+}
 
 /**
- * Horizontal distance that a checkmark overhangs the dropdown.
+ * An individual option in the dropdown menu. The first element is the human-
+ * readable value (text or image), and the second element is the language-
+ * neutral value.
  */
-FieldDropdown.CHECKMARK_OVERHANG = 25;
+export type MenuOption = [string | ImageProperties, string];
 
 /**
- * Maximum height of the dropdown menu, as a percentage of the viewport height.
+ * fromJson config for the dropdown field.
  */
-FieldDropdown.MAX_MENU_HEIGHT_VH = 0.45;
+export interface FieldDropdownFromJsonConfig extends FieldConfig {
+  options?: MenuOption[];
+}
 
 /**
  * The y offset from the top of the field to the top of the image, if an image
  * is selected.
- * @type {number}
- * @const
  */
 const IMAGE_Y_OFFSET = 5;
 
-/**
- * The total vertical padding above and below an image.
- * @type {number}
- * @const
- */
-const IMAGE_Y_PADDING = IMAGE_Y_OFFSET * 2;
+/** The total vertical padding above and below an image. */
+const IMAGE_Y_PADDING: number = IMAGE_Y_OFFSET * 2;
 
-/**
- * Android can't (in 2014) display "▾", so use "▼" instead.
- */
+/** Android can't (in 2014) display "▾", so use "▼" instead. */
 FieldDropdown.ARROW_CHAR = userAgent.ANDROID ? '\u25BC' : '\u25BE';
 
 /**
  * Validates the data structure to be processed as an options list.
- * @param {?} options The proposed dropdown options.
+ * @param options The proposed dropdown options.
  * @throws {TypeError} If proposed options are incorrectly structured.
  */
-const validateOptions = function(options) {
+function validateOptions(options: AnyDuringMigration) {
   if (!Array.isArray(options)) {
     throw TypeError('FieldDropdown options must be an array.');
   }
@@ -776,8 +756,8 @@ const validateOptions = function(options) {
               'a string. Found ' + tuple[1] + ' in: ',
           tuple);
     } else if (
-        tuple[0] && (typeof tuple[0] !== 'string') &&
-        (typeof tuple[0].src !== 'string')) {
+        tuple[0] && typeof tuple[0] !== 'string' &&
+        typeof tuple[0].src !== 'string') {
       foundError = true;
       console.error(
           'Invalid option[' + i + ']: Each FieldDropdown option must have a ' +
@@ -788,8 +768,6 @@ const validateOptions = function(options) {
   if (foundError) {
     throw TypeError('Found invalid FieldDropdown options.');
   }
-};
+}
 
 fieldRegistry.register('field_dropdown', FieldDropdown);
-
-exports.FieldDropdown = FieldDropdown;