refactor: convert row.js and base.js to ES6 classes (#5957)

* fix: remove unnecessary properties from rows

* refactor: run conversion script on measurables

* clean: cleanup from conversion

* fix: make debug build happy

* clean: format

* fix: remove widthWithConnectedBlocks assignment on element

* fix: add inline docs for statementEdge

core/renderers/common/debugger.js

@@ -9,6 +9,7 @@
  */
 'use strict';
 
+
 /**
  * Methods for rendering debug graphics.
  * @class
@@ -21,7 +22,9 @@ const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 const {ConnectionType} = goog.require('Blockly.ConnectionType');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {Field} = goog.require('Blockly.blockRendering.Field');
 const {FieldLabel} = goog.require('Blockly.FieldLabel');
+const {InputConnection} = goog.require('Blockly.blockRendering.InputConnection');
 /* eslint-disable-next-line no-unused-vars */
 const {InRowSpacer} = goog.requireType('Blockly.blockRendering.InRowSpacer');
 /* eslint-disable-next-line no-unused-vars */
@@ -184,7 +187,8 @@ class Debug {
           },
           this.svgRoot_));
 
-      if (Types.isField(elem) && elem.field instanceof FieldLabel) {
+      if (Types.isField(elem) && elem instanceof Field &&
+          elem.field instanceof FieldLabel) {
         const baseline = this.constants_.FIELD_TEXT_BASELINE;
         this.debugElements_.push(dom.createSvgElement(
             Svg.RECT, {
@@ -202,7 +206,8 @@ class Debug {
     }
 
 
-    if (Types.isInput(elem) && Debug.config.connections) {
+    if (Types.isInput(elem) && elem instanceof InputConnection &&
+        Debug.config.connections) {
       this.drawConnection(elem.connectionModel);
     }
   }

core/renderers/common/drawer.js

@@ -19,6 +19,7 @@ const debug = goog.require('Blockly.blockRendering.debug');
 const svgPaths = goog.require('Blockly.utils.svgPaths');
 /* eslint-disable-next-line no-unused-vars */
 const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
+const {Connection} = goog.require('Blockly.blockRendering.Connection');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
 /* eslint-disable-next-line no-unused-vars */
@@ -149,7 +150,8 @@ class Drawer {
         this.outlinePath_ += this.constants_.OUTSIDE_CORNERS.topLeft;
       } else if (Types.isRightRoundedCorner(elem)) {
         this.outlinePath_ += this.constants_.OUTSIDE_CORNERS.topRight;
-      } else if (Types.isPreviousConnection(elem)) {
+      } else if (
+          Types.isPreviousConnection(elem) && elem instanceof Connection) {
         this.outlinePath_ += elem.shape.pathLeft;
       } else if (Types.isHat(elem)) {
         this.outlinePath_ += this.constants_.START_HAT.path;
@@ -241,7 +243,7 @@ class Drawer {
     let rightCornerYOffset = 0;
     let outlinePath = '';
     for (let i = elems.length - 1, elem; (elem = elems[i]); i--) {
-      if (Types.isNextConnection(elem)) {
+      if (Types.isNextConnection(elem) && elem instanceof Connection) {
         outlinePath += elem.shape.pathRight;
       } else if (Types.isLeftSquareCorner(elem)) {
         outlinePath += svgPaths.lineOnAxis('H', bottomRow.xPos);

core/renderers/common/info.js

@@ -568,7 +568,7 @@ class RenderInfo {
    * Modify the given row to add the given amount of padding around its fields.
    * The exact location of the padding is based on the alignment property of the
    * last input in the field.
-   * @param {Row} row The row to add padding to.
+   * @param {!Row} row The row to add padding to.
    * @param {number} missingSpace How much padding to add.
    * @protected
    */

core/renderers/geras/highlighter.js

@@ -32,6 +32,7 @@ const {RenderInfo} = goog.requireType('Blockly.geras.RenderInfo');
 const {Renderer} = goog.requireType('Blockly.geras.Renderer');
 /* eslint-disable-next-line no-unused-vars */
 const {Row} = goog.requireType('Blockly.blockRendering.Row');
+const {SpacerRow} = goog.require('Blockly.blockRendering.SpacerRow');
 /* eslint-disable-next-line no-unused-vars */
 const {TopRow} = goog.require('Blockly.blockRendering.TopRow');
 const {Types} = goog.require('Blockly.blockRendering.Types');
@@ -193,7 +194,7 @@ class Highlighter {
    */
   drawRightSideRow(row) {
     const rightEdge = row.xPos + row.width - this.highlightOffset_;
-    if (row.followsStatement) {
+    if (row instanceof SpacerRow && row.followsStatement) {
       this.steps_ += svgPaths.lineOnAxis('H', rightEdge);
     }
     if (this.RTL_) {

core/renderers/geras/info.js

@@ -386,9 +386,10 @@ class RenderInfo extends BaseRenderInfo {
     // Walk backgrounds through rows on the block, keeping track of the right
     // input edge.
     let nextRightEdge = 0;
+    const rowNextRightEdges = new WeakMap();
     let prevInput = null;
     for (let i = this.rows.length - 1, row; (row = this.rows[i]); i--) {
-      row.nextRightEdge = nextRightEdge;
+      rowNextRightEdges.set(row, nextRightEdge);
       if (Types.isInputRow(row)) {
         if (row.hasStatement) {
           this.alignStatementRow_(
@@ -396,7 +397,7 @@ class RenderInfo extends BaseRenderInfo {
         }
         if (prevInput && prevInput.hasStatement &&
             row.width < prevInput.width) {
-          row.nextRightEdge = prevInput.width;
+          rowNextRightEdges.set(row, prevInput.width);
         } else {
           nextRightEdge = row.width;
         }
@@ -411,10 +412,11 @@ class RenderInfo extends BaseRenderInfo {
         prevRightEdge = this.getDesiredRowWidth_(row);
       } else if (Types.isSpacer(row)) {
         // Set the spacer row to the max of the prev or next input width.
-        row.width = Math.max(prevRightEdge, row.nextRightEdge);
+        row.width = Math.max(prevRightEdge, rowNextRightEdges.get(row));
       } else {
         const currentWidth = row.width;
-        const desiredWidth = Math.max(prevRightEdge, row.nextRightEdge);
+        const desiredWidth =
+            Math.max(prevRightEdge, rowNextRightEdges.get(row));
         const missingSpace = desiredWidth - currentWidth;
         if (missingSpace > 0) {
           this.addAlignmentPadding_(row, missingSpace);

core/renderers/measurables/base.js

@@ -25,37 +25,40 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
  * The base class to represent a part of a block that takes up space during
  * rendering.  The constructor for each non-spacer Measurable records the size
  * of the block element (e.g. field, statement input).
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
- * @alias Blockly.blockRendering.Measurable
  */
-const Measurable = function(constants) {
-  /** @type {number} */
-  this.width = 0;
-
-  /** @type {number} */
-  this.height = 0;
-
-  /** @type {number} */
-  this.type = Types.NONE;
-
-  /** @type {number} */
-  this.xPos = 0;
-
-  /** @type {number} */
-  this.centerline = 0;
-
+class Measurable {
   /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
-   * @protected
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
+   * @package
+   * @alias Blockly.blockRendering.Measurable
    */
-  this.constants_ = constants;
+  constructor(constants) {
+    /** @type {number} */
+    this.width = 0;
 
-  /** @type {number} */
-  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
-};
+    /** @type {number} */
+    this.height = 0;
+
+    /** @type {number} */
+    this.type = Types.NONE;
+
+    /** @type {number} */
+    this.xPos = 0;
+
+    /** @type {number} */
+    this.centerline = 0;
+
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     * @protected
+     */
+    this.constants_ = constants;
+
+    /** @type {number} */
+    this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+  }
+}
 
 exports.Measurable = Measurable;

core/renderers/measurables/input_row.js

@@ -18,7 +18,10 @@ goog.module('Blockly.blockRendering.InputRow');
 
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {InputConnection} = goog.require('Blockly.blockRendering.InputConnection');
+const {ExternalValueInput} = goog.require('Blockly.blockRendering.ExternalValueInput');
 const {Row} = goog.require('Blockly.blockRendering.Row');
+const {StatementInput} = goog.require('Blockly.blockRendering.StatementInput');
 const {Types} = goog.require('Blockly.blockRendering.Types');
 
 
@@ -57,11 +60,12 @@ class InputRow extends Row {
     for (let i = 0; i < this.elements.length; i++) {
       const elem = this.elements[i];
       this.width += elem.width;
-      if (Types.isInput(elem)) {
-        if (Types.isStatementInput(elem)) {
+      if (Types.isInput(elem) && elem instanceof InputConnection) {
+        if (Types.isStatementInput(elem) && elem instanceof StatementInput) {
           connectedBlockWidths += elem.connectedBlockWidth;
         } else if (
-            Types.isExternalInput(elem) && elem.connectedBlockWidth !== 0) {
+            Types.isExternalInput(elem) && elem instanceof ExternalValueInput &&
+            elem.connectedBlockWidth !== 0) {
           connectedBlockWidths +=
               (elem.connectedBlockWidth - elem.connectionWidth);
         }

core/renderers/measurables/row.js

@@ -28,207 +28,220 @@ const {Types} = goog.require('Blockly.blockRendering.Types');
 /**
  * An object representing a single row on a rendered block and all of its
  * subcomponents.
- * @param {!ConstantProvider} constants The rendering
- *   constants provider.
- * @package
- * @constructor
- * @alias Blockly.blockRendering.Row
  */
-const Row = function(constants) {
+class Row {
   /**
-   * The type of this rendering object.
+   * @param {!ConstantProvider} constants The rendering
+   *   constants provider.
    * @package
-   * @type {number}
+   * @alias Blockly.blockRendering.Row
    */
-  this.type = Types.ROW;
+  constructor(constants) {
+    /**
+     * The type of this rendering object.
+     * @package
+     * @type {number}
+     */
+    this.type = Types.ROW;
 
-  /**
-   * An array of elements contained in this row.
-   * @package
-   * @type {!Array<!Measurable>}
-   */
-  this.elements = [];
+    /**
+     * An array of elements contained in this row.
+     * @package
+     * @type {!Array<!Measurable>}
+     */
+    this.elements = [];
 
-  /**
-   * The height of the row.
-   * @package
-   * @type {number}
-   */
-  this.height = 0;
+    /**
+     * The height of the row.
+     * @package
+     * @type {number}
+     */
+    this.height = 0;
 
-  /**
-   * The width of the row, from the left edge of the block to the right.
-   * Does not include child blocks unless they are inline.
-   * @package
-   * @type {number}
-   */
-  this.width = 0;
+    /**
+     * The width of the row, from the left edge of the block to the right.
+     * Does not include child blocks unless they are inline.
+     * @package
+     * @type {number}
+     */
+    this.width = 0;
 
-  /**
-   * The minimum height of the row.
-   * @package
-   * @type {number}
-   */
-  this.minHeight = 0;
+    /**
+     * The minimum height of the row.
+     * @package
+     * @type {number}
+     */
+    this.minHeight = 0;
 
-  /**
-   * The minimum width of the row, from the left edge of the block to the right.
-   * Does not include child blocks unless they are inline.
-   * @package
-   * @type {number}
-   */
-  this.minWidth = 0;
+    /**
+     * The minimum width of the row, from the left edge of the block to the
+     * right. Does not include child blocks unless they are inline.
+     * @package
+     * @type {number}
+     */
+    this.minWidth = 0;
 
-  /**
-   * The width of the row, from the left edge of the block to the edge of the
-   * block or any connected child blocks.
-   * @package
-   * @type {number}
-   */
-  this.widthWithConnectedBlocks = 0;
+    /**
+     * The width of the row, from the left edge of the block to the edge of the
+     * block or any connected child blocks.
+     * @package
+     * @type {number}
+     */
+    this.widthWithConnectedBlocks = 0;
 
-  /**
-   * The Y position of the row relative to the origin of the block's svg group.
-   * @package
-   * @type {number}
-   */
-  this.yPos = 0;
+    /**
+     * The Y position of the row relative to the origin of the block's svg
+     * group.
+     * @package
+     * @type {number}
+     */
+    this.yPos = 0;
 
-  /**
-   * The X position of the row relative to the origin of the block's svg group.
-   * @package
-   * @type {number}
-   */
-  this.xPos = 0;
+    /**
+     * The X position of the row relative to the origin of the block's svg
+     * group.
+     * @package
+     * @type {number}
+     */
+    this.xPos = 0;
 
-  /**
-   * Whether the row has any external inputs.
-   * @package
-   * @type {boolean}
-   */
-  this.hasExternalInput = false;
+    /**
+     * Whether the row has any external inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasExternalInput = false;
 
-  /**
-   * Whether the row has any statement inputs.
-   * @package
-   * @type {boolean}
-   */
-  this.hasStatement = false;
+    /**
+     * Whether the row has any statement inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasStatement = false;
 
-  /**
-   * Whether the row has any inline inputs.
-   * @package
-   * @type {boolean}
-   */
-  this.hasInlineInput = false;
+    /**
+     * Where the left edge of all of the statement inputs on the block should
+     * be. This makes sure that statement inputs which are proceded by fields
+     * of varius widths are all aligned.
+     * @type {number}
+     */
+    this.statementEdge = 0;
 
-  /**
-   * Whether the row has any dummy inputs.
-   * @package
-   * @type {boolean}
-   */
-  this.hasDummyInput = false;
+    /**
+     * Whether the row has any inline inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasInlineInput = false;
 
-  /**
-   * Whether the row has a jagged edge.
-   * @package
-   * @type {boolean}
-   */
-  this.hasJaggedEdge = false;
+    /**
+     * Whether the row has any dummy inputs.
+     * @package
+     * @type {boolean}
+     */
+    this.hasDummyInput = false;
 
-  /**
-   * The renderer's constant provider.
-   * @type {!ConstantProvider}
-   * @protected
-   */
-  this.constants_ = constants;
+    /**
+     * Whether the row has a jagged edge.
+     * @package
+     * @type {boolean}
+     */
+    this.hasJaggedEdge = false;
 
-  /**
-   * @type {number}
-   */
-  this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
+    /**
+     * The renderer's constant provider.
+     * @type {!ConstantProvider}
+     * @protected
+     */
+    this.constants_ = constants;
 
-  /**
-   * Alignment of the row.
-   * @package
-   * @type {?number}
-   */
-  this.align = null;
-};
+    /**
+     * @type {number}
+     */
+    this.notchOffset = this.constants_.NOTCH_OFFSET_LEFT;
 
-/**
- * Get the last input on this row, if it has one.
- * @return {InputConnection} The last input on the row,
- *     or null.
- * @package
- */
-// TODO: Consider moving this to InputRow, if possible.
-Row.prototype.getLastInput = function() {
-  for (let i = this.elements.length - 1; i >= 0; i--) {
-    const elem = this.elements[i];
-    if (Types.isInput(elem)) {
-      return /** @type {InputConnection} */ (elem);
-    }
+    /**
+     * Alignment of the row.
+     * @package
+     * @type {?number}
+     */
+    this.align = null;
   }
-  return null;
-};
 
-/**
- * Inspect all subcomponents and populate all size properties on the row.
- * @package
- */
-Row.prototype.measure = function() {
-  throw Error('Unexpected attempt to measure a base Row.');
-};
-
-/**
- * Determines whether this row should start with an element spacer.
- * @return {boolean} Whether the row should start with a spacer.
- * @package
- */
-Row.prototype.startsWithElemSpacer = function() {
-  return true;
-};
-
-/**
- * Determines whether this row should end with an element spacer.
- * @return {boolean} Whether the row should end with a spacer.
- * @package
- */
-Row.prototype.endsWithElemSpacer = function() {
-  return true;
-};
-
-/**
- * Convenience method to get the first spacer element on this row.
- * @return {InRowSpacer} The first spacer element on
- *   this row.
- * @package
- */
-Row.prototype.getFirstSpacer = function() {
-  for (let i = 0; i < this.elements.length; i++) {
-    const elem = this.elements[i];
-    if (Types.isSpacer(elem)) {
-      return /** @type {InRowSpacer} */ (elem);
+  /**
+   * Get the last input on this row, if it has one.
+   * @return {InputConnection} The last input on the row,
+   *     or null.
+   * @package
+   */
+  getLastInput() {
+    // TODO: Consider moving this to InputRow, if possible.
+    for (let i = this.elements.length - 1; i >= 0; i--) {
+      const elem = this.elements[i];
+      if (Types.isInput(elem)) {
+        return /** @type {InputConnection} */ (elem);
+      }
     }
+    return null;
   }
-  return null;
-};
 
-/**
- * Convenience method to get the last spacer element on this row.
- * @return {InRowSpacer} The last spacer element on
- *   this row.
- * @package
- */
-Row.prototype.getLastSpacer = function() {
-  for (let i = this.elements.length - 1; i >= 0; i--) {
-    const elem = this.elements[i];
-    if (Types.isSpacer(elem)) {
-      return /** @type {InRowSpacer} */ (elem);
-    }
+  /**
+   * Inspect all subcomponents and populate all size properties on the row.
+   * @package
+   */
+  measure() {
+    throw Error('Unexpected attempt to measure a base Row.');
   }
-  return null;
-};
+
+  /**
+   * Determines whether this row should start with an element spacer.
+   * @return {boolean} Whether the row should start with a spacer.
+   * @package
+   */
+  startsWithElemSpacer() {
+    return true;
+  }
+
+  /**
+   * Determines whether this row should end with an element spacer.
+   * @return {boolean} Whether the row should end with a spacer.
+   * @package
+   */
+  endsWithElemSpacer() {
+    return true;
+  }
+
+  /**
+   * Convenience method to get the first spacer element on this row.
+   * @return {InRowSpacer} The first spacer element on
+   *   this row.
+   * @package
+   */
+  getFirstSpacer() {
+    for (let i = 0; i < this.elements.length; i++) {
+      const elem = this.elements[i];
+      if (Types.isSpacer(elem)) {
+        return /** @type {InRowSpacer} */ (elem);
+      }
+    }
+    return null;
+  }
+
+  /**
+   * Convenience method to get the last spacer element on this row.
+   * @return {InRowSpacer} The last spacer element on
+   *   this row.
+   * @package
+   */
+  getLastSpacer() {
+    for (let i = this.elements.length - 1; i >= 0; i--) {
+      const elem = this.elements[i];
+      if (Types.isSpacer(elem)) {
+        return /** @type {InRowSpacer} */ (elem);
+      }
+    }
+    return null;
+  }
+}
 
 exports.Row = Row;

core/renderers/measurables/top_row.js

@@ -18,6 +18,7 @@ goog.module('Blockly.blockRendering.TopRow');
 const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.blockRendering.ConstantProvider');
+const {Hat} = goog.require('Blockly.blockRendering.Hat');
 /* eslint-disable-next-line no-unused-vars */
 const {PreviousConnection} = goog.requireType('Blockly.blockRendering.PreviousConnection');
 const {Row} = goog.require('Blockly.blockRendering.Row');
@@ -110,7 +111,7 @@ class TopRow extends Row {
       const elem = this.elements[i];
       width += elem.width;
       if (!(Types.isSpacer(elem))) {
-        if (Types.isHat(elem)) {
+        if (Types.isHat(elem) && elem instanceof Hat) {
           ascenderHeight = Math.max(ascenderHeight, elem.ascenderHeight);
         } else {
           height = Math.max(height, elem.height);

core/renderers/zelos/info.js

@@ -22,9 +22,13 @@ const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 const {BottomRow} = goog.require('Blockly.zelos.BottomRow');
 /* eslint-disable-next-line no-unused-vars */
 const {ConstantProvider} = goog.requireType('Blockly.zelos.ConstantProvider');
+const {Field} = goog.require('Blockly.blockRendering.Field');
 const {FieldImage} = goog.require('Blockly.FieldImage');
 const {FieldLabel} = goog.require('Blockly.FieldLabel');
 const {FieldTextInput} = goog.require('Blockly.FieldTextInput');
+/* eslint-disable-next-line no-unused-vars */
+const {Input} = goog.requireType('Blockly.Input');
+const {InputConnection} = goog.require('Blockly.blockRendering.InputConnection');
 const {InRowSpacer} = goog.require('Blockly.blockRendering.InRowSpacer');
 /* eslint-disable-next-line no-unused-vars */
 const {Measurable} = goog.requireType('Blockly.blockRendering.Measurable');
@@ -33,6 +37,8 @@ const {RenderInfo: BaseRenderInfo} = goog.require('Blockly.blockRendering.Render
 const {Renderer} = goog.requireType('Blockly.zelos.Renderer');
 const {RightConnectionShape} = goog.require('Blockly.zelos.RightConnectionShape');
 /* eslint-disable-next-line no-unused-vars */
+const {Row} = goog.require('Blockly.blockRendering.Row');
+/* eslint-disable-next-line no-unused-vars */
 const {SpacerRow} = goog.requireType('Blockly.blockRendering.SpacerRow');
 const {StatementInput} = goog.require('Blockly.zelos.StatementInput');
 const {TopRow} = goog.require('Blockly.zelos.TopRow');
@@ -100,6 +106,14 @@ class RenderInfo extends BaseRenderInfo {
     this.rightSide = this.outputConnection ?
         new RightConnectionShape(this.constants_) :
         null;
+
+    /**
+     * A map of rows to right aligned dummy inputs within those rows. Used to
+     * add padding between left and right aligned inputs.
+     * @type {!WeakMap<!Row, !Input>}
+     * @private
+     */
+    this.rightAlignedDummyInputs_ = new WeakMap();
   }
 
   /**
@@ -254,7 +268,7 @@ class RenderInfo extends BaseRenderInfo {
         !Types.isStatementInput(elem)) {
       return row.yPos + this.constants_.EMPTY_STATEMENT_INPUT_HEIGHT / 2;
     }
-    if (Types.isInlineInput(elem)) {
+    if (Types.isInlineInput(elem) && elem instanceof InputConnection) {
       const connectedBlock = elem.connectedBlock;
       if (connectedBlock && connectedBlock.outputConnection &&
           connectedBlock.nextConnection) {
@@ -273,7 +287,7 @@ class RenderInfo extends BaseRenderInfo {
     // padding later.
     if (input.type === inputTypes.DUMMY && activeRow.hasDummyInput &&
         activeRow.align === Align.LEFT && input.align === Align.RIGHT) {
-      activeRow.rightAlignedDummyInput = input;
+      this.rightAlignedDummyInputs_.set(activeRow, input);
     } else if (input.type === inputTypes.STATEMENT) {
       // Handle statements without next connections correctly.
       activeRow.elements.push(new StatementInput(this.constants_, input));
@@ -291,15 +305,15 @@ class RenderInfo extends BaseRenderInfo {
    * @override
    */
   addAlignmentPadding_(row, missingSpace) {
-    if (row.rightAlignedDummyInput) {
+    if (this.rightAlignedDummyInputs_.get(row)) {
       let alignmentDivider;
       for (let i = 0; i < row.elements.length; i++) {
         const elem = row.elements[i];
         if (Types.isSpacer(elem)) {
           alignmentDivider = elem;
         }
-        if (Types.isField(elem) &&
-            elem.parentInput === row.rightAlignedDummyInput) {
+        if (Types.isField(elem) && elem instanceof Field &&
+            elem.parentInput === this.rightAlignedDummyInputs_.get(row)) {
           break;
         }
       }
@@ -351,7 +365,7 @@ class RenderInfo extends BaseRenderInfo {
           }
           if (prevInRowSpacer && (Types.isField(elem) || Types.isInput(elem))) {
             if (xCursor < minXPos &&
-                !(Types.isField(elem) &&
+                !(Types.isField(elem) && elem instanceof Field &&
                   (elem.field instanceof FieldLabel ||
                    elem.field instanceof FieldImage))) {
               const difference = minXPos - xCursor;
@@ -459,7 +473,6 @@ class RenderInfo extends BaseRenderInfo {
         const row = this.rows[i];
         if (Types.isTopOrBottomRow(row)) {
           row.elements[1].width -= totalNegativeSpacing;
-          row.elements[1].widthWithConnectedBlocks -= totalNegativeSpacing;
         }
         row.width -= totalNegativeSpacing;
         row.widthWithConnectedBlocks -= totalNegativeSpacing;
@@ -498,7 +511,7 @@ class RenderInfo extends BaseRenderInfo {
           return 0;
       }
     }
-    if (Types.isInlineInput(elem)) {
+    if (Types.isInlineInput(elem) && elem instanceof InputConnection) {
       const connectedBlock = elem.connectedBlock;
       const innerShape = connectedBlock ?
           connectedBlock.pathObject.outputShapeType :
@@ -516,7 +529,7 @@ class RenderInfo extends BaseRenderInfo {
       }
       return connectionWidth -
           this.constants_.SHAPE_IN_SHAPE_PADDING[outerShape][innerShape];
-    } else if (Types.isField(elem)) {
+    } else if (Types.isField(elem) && elem instanceof Field) {
       // Special case for text inputs.
       if (outerShape === constants.SHAPES.ROUND &&
           elem.field instanceof FieldTextInput) {
@@ -555,9 +568,11 @@ class RenderInfo extends BaseRenderInfo {
           !!nextSpacer.precedesStatement;
 
       if (hasPrevNotch) {
+        const elem = row.elements[1];
         const hasSingleTextOrImageField = row.elements.length === 3 &&
-            (row.elements[1].field instanceof FieldLabel ||
-             row.elements[1].field instanceof FieldImage);
+            elem instanceof Field &&
+            (elem.field instanceof FieldLabel ||
+             elem.field instanceof FieldImage);
         if (!firstRow && hasSingleTextOrImageField) {
           // Remove some padding if we have a single image or text field.
           prevSpacer.height -= this.constants_.SMALL_PADDING;
@@ -572,8 +587,8 @@ class RenderInfo extends BaseRenderInfo {
           const minVerticalTightNestingHeight = 40;
           for (let j = 0; j < row.elements.length; j++) {
             const elem = row.elements[j];
-            if (Types.isInlineInput(elem) && elem.connectedBlock &&
-                !elem.connectedBlock.isShadow() &&
+            if (elem instanceof InputConnection && Types.isInlineInput(elem) &&
+                elem.connectedBlock && !elem.connectedBlock.isShadow() &&
                 elem.connectedBlock.getHeightWidth().height >=
                     minVerticalTightNestingHeight) {
               hasNonShadowConnectedBlocks = true;

scripts/gulpfiles/chunks.json

@@ -141,7 +141,6 @@
     "./core/renderers/zelos/measurables/bottom_row.js",
     "./core/renderers/zelos/info.js",
     "./core/renderers/measurables/top_row.js",
-    "./core/renderers/measurables/statement_input.js",
     "./core/renderers/measurables/square_corner.js",
     "./core/renderers/measurables/spacer_row.js",
     "./core/renderers/measurables/round_corner.js",
@@ -159,6 +158,7 @@
     "./core/renderers/measurables/previous_connection.js",
     "./core/renderers/measurables/output_connection.js",
     "./core/renderers/measurables/jagged_edge.js",
+    "./core/renderers/measurables/statement_input.js",
     "./core/renderers/measurables/input_row.js",
     "./core/renderers/measurables/inline_input.js",
     "./core/scrollbar.js",
@@ -177,9 +177,9 @@
     "./core/icon.js",
     "./core/renderers/measurables/icon.js",
     "./core/renderers/measurables/hat.js",
-    "./core/renderers/measurables/field.js",
     "./core/renderers/measurables/external_value_input.js",
     "./core/renderers/common/info.js",
+    "./core/renderers/measurables/field.js",
     "./core/renderers/common/debugger.js",
     "./core/renderers/measurables/input_connection.js",
     "./core/renderers/measurables/in_row_spacer.js",

tests/deps.js

@@ -144,8 +144,8 @@ goog.addDependency('../../core/rendered_connection.js', ['Blockly.RenderedConnec
 goog.addDependency('../../core/renderers/common/block_rendering.js', ['Blockly.blockRendering'], ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.Connection', 'Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.Field', 'Blockly.blockRendering.Hat', 'Blockly.blockRendering.IPathObject', 'Blockly.blockRendering.Icon', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.JaggedEdge', 'Blockly.blockRendering.MarkerSvg', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.blockRendering.PathObject', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Renderer', 'Blockly.blockRendering.RoundCorner', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.SquareCorner', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.debug', 'Blockly.registry', 'Blockly.utils.deprecation'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/constants.js', ['Blockly.blockRendering.ConstantProvider'], ['Blockly.ConnectionType', 'Blockly.utils.Svg', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.object', 'Blockly.utils.parsing', 'Blockly.utils.svgPaths', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/debug.js', ['Blockly.blockRendering.debug'], [], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/common/debugger.js', ['Blockly.blockRendering.Debug'], ['Blockly.ConnectionType', 'Blockly.FieldLabel', 'Blockly.blockRendering.Types', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/common/drawer.js', ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Types', 'Blockly.blockRendering.debug', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/common/debugger.js', ['Blockly.blockRendering.Debug'], ['Blockly.ConnectionType', 'Blockly.FieldLabel', 'Blockly.blockRendering.Field', 'Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.Types', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/common/drawer.js', ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.debug', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/i_path_object.js', ['Blockly.blockRendering.IPathObject'], [], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/info.js', ['Blockly.blockRendering.RenderInfo'], ['Blockly.Input', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.Field', 'Blockly.blockRendering.Hat', 'Blockly.blockRendering.Icon', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.JaggedEdge', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.RoundCorner', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.SquareCorner', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.inputTypes'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/common/marker_svg.js', ['Blockly.blockRendering.MarkerSvg'], ['Blockly.ASTNode', 'Blockly.ConnectionType', 'Blockly.Events.MarkerMove', 'Blockly.Events.utils', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
@@ -155,7 +155,7 @@ goog.addDependency('../../core/renderers/geras/constants.js', ['Blockly.geras.Co
 goog.addDependency('../../core/renderers/geras/drawer.js', ['Blockly.geras.Drawer'], ['Blockly.blockRendering.Drawer', 'Blockly.blockRendering.debug', 'Blockly.geras.Highlighter', 'Blockly.geras.InlineInput', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/geras/geras.js', ['Blockly.geras'], ['Blockly.geras.ConstantProvider', 'Blockly.geras.Drawer', 'Blockly.geras.HighlightConstantProvider', 'Blockly.geras.Highlighter', 'Blockly.geras.InlineInput', 'Blockly.geras.PathObject', 'Blockly.geras.RenderInfo', 'Blockly.geras.Renderer', 'Blockly.geras.StatementInput'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/geras/highlight_constants.js', ['Blockly.geras.HighlightConstantProvider'], ['Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/geras/highlighter.js', ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.geras.InlineInput', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/geras/highlighter.js', ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.Types', 'Blockly.geras.InlineInput', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/geras/info.js', ['Blockly.geras.RenderInfo'], ['Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Types', 'Blockly.geras.InlineInput', 'Blockly.geras.StatementInput', 'Blockly.inputTypes'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/geras/measurables/inline_input.js', ['Blockly.geras.InlineInput'], ['Blockly.blockRendering.InlineInput'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/geras/measurables/statement_input.js', ['Blockly.geras.StatementInput'], ['Blockly.blockRendering.StatementInput'], {'lang': 'es6', 'module': 'goog'});
@@ -171,7 +171,7 @@ goog.addDependency('../../core/renderers/measurables/icon.js', ['Blockly.blockRe
 goog.addDependency('../../core/renderers/measurables/in_row_spacer.js', ['Blockly.blockRendering.InRowSpacer'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/inline_input.js', ['Blockly.blockRendering.InlineInput'], ['Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/input_connection.js', ['Blockly.blockRendering.InputConnection'], ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/measurables/input_row.js', ['Blockly.blockRendering.InputRow'], ['Blockly.blockRendering.Row', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/measurables/input_row.js', ['Blockly.blockRendering.InputRow'], ['Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/jagged_edge.js', ['Blockly.blockRendering.JaggedEdge'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/next_connection.js', ['Blockly.blockRendering.NextConnection'], ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/output_connection.js', ['Blockly.blockRendering.OutputConnection'], ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
@@ -181,7 +181,7 @@ goog.addDependency('../../core/renderers/measurables/row.js', ['Blockly.blockRen
 goog.addDependency('../../core/renderers/measurables/spacer_row.js', ['Blockly.blockRendering.SpacerRow'], ['Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/square_corner.js', ['Blockly.blockRendering.SquareCorner'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/statement_input.js', ['Blockly.blockRendering.StatementInput'], ['Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/measurables/top_row.js', ['Blockly.blockRendering.TopRow'], ['Blockly.blockRendering.Row', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/measurables/top_row.js', ['Blockly.blockRendering.TopRow'], ['Blockly.blockRendering.Hat', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.Types'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/measurables/types.js', ['Blockly.blockRendering.Types'], [], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/minimalist/constants.js', ['Blockly.minimalist.ConstantProvider'], ['Blockly.blockRendering.ConstantProvider'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/minimalist/drawer.js', ['Blockly.minimalist.Drawer'], ['Blockly.blockRendering.Drawer'], {'lang': 'es6', 'module': 'goog'});
@@ -193,7 +193,7 @@ goog.addDependency('../../core/renderers/thrasos/renderer.js', ['Blockly.thrasos
 goog.addDependency('../../core/renderers/thrasos/thrasos.js', ['Blockly.thrasos'], ['Blockly.thrasos.RenderInfo', 'Blockly.thrasos.Renderer'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/zelos/constants.js', ['Blockly.zelos.ConstantProvider'], ['Blockly.ConnectionType', 'Blockly.blockRendering.ConstantProvider', 'Blockly.utils.Svg', 'Blockly.utils.colour', 'Blockly.utils.dom', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/zelos/drawer.js', ['Blockly.zelos.Drawer'], ['Blockly.blockRendering.Drawer', 'Blockly.blockRendering.Types', 'Blockly.blockRendering.debug', 'Blockly.utils.svgPaths'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/renderers/zelos/info.js', ['Blockly.zelos.RenderInfo'], ['Blockly.FieldImage', 'Blockly.FieldLabel', 'Blockly.FieldTextInput', 'Blockly.Input', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Types', 'Blockly.inputTypes', 'Blockly.zelos.BottomRow', 'Blockly.zelos.RightConnectionShape', 'Blockly.zelos.StatementInput', 'Blockly.zelos.TopRow'], {'lang': 'es6', 'module': 'goog'});
+goog.addDependency('../../core/renderers/zelos/info.js', ['Blockly.zelos.RenderInfo'], ['Blockly.FieldImage', 'Blockly.FieldLabel', 'Blockly.FieldTextInput', 'Blockly.Input', 'Blockly.blockRendering.Field', 'Blockly.blockRendering.InRowSpacer', 'Blockly.blockRendering.InputConnection', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.Types', 'Blockly.inputTypes', 'Blockly.zelos.BottomRow', 'Blockly.zelos.RightConnectionShape', 'Blockly.zelos.StatementInput', 'Blockly.zelos.TopRow'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/zelos/marker_svg.js', ['Blockly.zelos.MarkerSvg'], ['Blockly.blockRendering.MarkerSvg', 'Blockly.utils.Svg', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/zelos/measurables/bottom_row.js', ['Blockly.zelos.BottomRow'], ['Blockly.blockRendering.BottomRow'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/renderers/zelos/measurables/inputs.js', ['Blockly.zelos.StatementInput'], ['Blockly.blockRendering.StatementInput'], {'lang': 'es6', 'module': 'goog'});