refactor: Remove more uses of AnyDuringMigration (#6378)

* refactor: Remove uses of AnyDuringMigration from flyout_vertical.ts. * refactor: Remove uses of AnyDuringMigration in flyout_horizontal.ts. * refactor: Remove uses of AnyDuringMigration from zoom_controls.ts. * refactor: Remove uses of AnyDuringMigration from comment.ts. * refactor: Remove uses of AnyDuringMigration from dialog.ts. * refactor: Remove uses of AnyDuringMigration from icon.ts. * refactor: Remove uses of AnyDuringMigration from scrollbar_pair.ts. * refactor: Remove uses of AnyDuringMigration from workspace_audio.ts. * refactor: Remove uses of AnyDuringMigration from workspace_drag_surface_svg.ts.
2026-01-05 08:00:09 +01:00 · 2022-08-23 15:36:52 -07:00
parent 7698c072d3
commit 57a5d0d49c
10 changed files with 95 additions and 157 deletions
--- a/core/comment.ts
+++ b/core/comment.ts
@@ -208,7 +208,10 @@ export class Comment extends Icon {
   * Resize the text area accordingly.
   */
  private onBubbleResize_() {
-    if (!this.bubble_) return;
+    if (!this.isVisible() || !this.bubble_) {
+      return;
+    }
+
    this.model_.size = this.bubble_.getBubbleSize();
    this.resizeTextarea_();
  }
--- a/core/dialog.ts
+++ b/core/dialog.ts
@@ -13,8 +13,7 @@ import * as goog from '../closure/goog/goog.js';
 goog.declareModuleId('Blockly.dialog');


-let alertImplementation = function(
-    message: AnyDuringMigration, opt_callback: AnyDuringMigration) {
+let alertImplementation = function(message: string, opt_callback?: () => void) {
  window.alert(message);
  if (opt_callback) {
    opt_callback();
@@ -22,13 +21,13 @@ let alertImplementation = function(
 };

 let confirmImplementation = function(
-    message: AnyDuringMigration, callback: AnyDuringMigration) {
+    message: string, callback: (result: boolean) => void) {
  callback(window.confirm(message));
 };

 let promptImplementation = function(
-    message: AnyDuringMigration, defaultValue: AnyDuringMigration,
-    callback: AnyDuringMigration) {
+    message: string, defaultValue: string,
+    callback: (result: string|null) => void) {
  callback(window.prompt(message, defaultValue));
 };

@@ -40,8 +39,7 @@ let promptImplementation = function(
 * @param opt_callback The callback when the alert is dismissed.
 * @alias Blockly.dialog.alert
 */
-export function alert(
-    message: string, opt_callback?: () => AnyDuringMigration) {
+export function alert(message: string, opt_callback?: () => void) {
  alertImplementation(message, opt_callback);
 }

@@ -52,9 +50,7 @@ export function alert(
 * @see Blockly.dialog.alert
 * @alias Blockly.dialog.setAlert
 */
-export function setAlert(
-    alertFunction: (p1: string, p2?: () => AnyDuringMigration) =>
-        AnyDuringMigration) {
+export function setAlert(alertFunction: (p1: string, p2?: () => void) => void) {
  alertImplementation = alertFunction;
 }

@@ -66,16 +62,14 @@ export function setAlert(
 * @param callback The callback for handling user response.
 * @alias Blockly.dialog.confirm
 */
-export function confirm(
-    message: string, callback: (p1: boolean) => AnyDuringMigration) {
+export function confirm(message: string, callback: (p1: boolean) => void) {
  TEST_ONLY.confirmInternal(message, callback);
 }

 /**
 * Private version of confirm for stubbing in tests.
 */
-function confirmInternal(
-    message: string, callback: (p1: boolean) => AnyDuringMigration) {
+function confirmInternal(message: string, callback: (p1: boolean) => void) {
  confirmImplementation(message, callback);
 }

@@ -88,8 +82,7 @@ function confirmInternal(
 * @alias Blockly.dialog.setConfirm
 */
 export function setConfirm(
-    confirmFunction: (p1: string, p2: (p1: boolean) => AnyDuringMigration) =>
-        AnyDuringMigration) {
+    confirmFunction: (p1: string, p2: (p1: boolean) => void) => void) {
  confirmImplementation = confirmFunction;
 }

@@ -106,7 +99,7 @@ export function setConfirm(
 */
 export function prompt(
    message: string, defaultValue: string,
-    callback: (p1: string|null) => AnyDuringMigration) {
+    callback: (p1: string|null) => void) {
  promptImplementation(message, defaultValue, callback);
 }

@@ -118,9 +111,8 @@ export function prompt(
 * @alias Blockly.dialog.setPrompt
 */
 export function setPrompt(
-    promptFunction:
-        (p1: string, p2: string, p3: (p1: string|null) => AnyDuringMigration) =>
-            AnyDuringMigration) {
+    promptFunction: (p1: string, p2: string, p3: (p1: string|null) => void) =>
+        void) {
  promptImplementation = promptFunction;
 }

--- a/core/flyout_horizontal.ts
+++ b/core/flyout_horizontal.ts
@@ -32,11 +32,6 @@ import * as WidgetDiv from './widgetdiv.js';
 */
 export class HorizontalFlyout extends Flyout {
  override horizontalLayout = true;
-  // Record the width for workspace metrics.
-  override width_: AnyDuringMigration;
-
-  // Record the height for workspace metrics and .position.
-  override height_: AnyDuringMigration;

  /** @param workspaceOptions Dictionary of options for the workspace. */
  constructor(workspaceOptions: Options) {
@@ -264,15 +259,10 @@ export class HorizontalFlyout extends Flyout {
        }
        block!.moveBy(moveX, cursorY);

-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
-        const rect = this.createRect_(
-            block as AnyDuringMigration, moveX, cursorY, blockHW, i);
+        const rect = this.createRect_(block!, moveX, cursorY, blockHW, i);
        cursorX += blockHW.width + gaps[i];

-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
-        this.addBlockListeners_(root, block as AnyDuringMigration, rect);
+        this.addBlockListeners_(root, block!, rect);
      } else if (item.type === 'button') {
        const button = item.button as FlyoutButton;
        this.initFlyoutButton_(button, cursorX, cursorY);
@@ -358,10 +348,7 @@ export class HorizontalFlyout extends Flyout {
    if (this.height_ !== flyoutHeight) {
      for (let i = 0, block; block = blocks[i]; i++) {
        if (this.rectMap_.has(block)) {
-          // AnyDuringMigration because:  Argument of type 'SVGElement |
-          // undefined' is not assignable to parameter of type 'SVGElement'.
-          this.moveRectToBlock_(
-              this.rectMap_.get(block) as AnyDuringMigration, block);
+          this.moveRectToBlock_(this.rectMap_.get(block)!, block);
        }
      }

--- a/core/flyout_vertical.ts
+++ b/core/flyout_vertical.ts
@@ -39,12 +39,6 @@ export class VerticalFlyout extends Flyout {
  /** The name of the vertical flyout in the registry. */
  static registryName = 'verticalFlyout';

-  // Record the height for workspace metrics.
-  override height_: AnyDuringMigration;
-
-  // Record the width for workspace metrics and .position.
-  override width_: AnyDuringMigration;
-
  /** @param workspaceOptions Dictionary of options for the workspace. */
  constructor(workspaceOptions: Options) {
    super(workspaceOptions);
@@ -247,15 +241,11 @@ export class VerticalFlyout extends Flyout {
            block!.outputConnection ? cursorX - this.tabWidth_ : cursorX;
        block!.moveBy(moveX, cursorY);

-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
        const rect = this.createRect_(
-            block as AnyDuringMigration,
-            this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW, i);
+            block!, this.RTL ? moveX - blockHW.width : moveX, cursorY, blockHW,
+            i);

-        // AnyDuringMigration because:  Argument of type 'BlockSvg | undefined'
-        // is not assignable to parameter of type 'BlockSvg'.
-        this.addBlockListeners_(root, block as AnyDuringMigration, rect);
+        this.addBlockListeners_(root, block!, rect);

        cursorY += blockHW.height + gaps[i];
      } else if (item.type === 'button') {
@@ -355,10 +345,7 @@ export class VerticalFlyout extends Flyout {
          block.moveBy(newX - oldX, 0);
        }
        if (this.rectMap_.has(block)) {
-          // AnyDuringMigration because:  Argument of type 'SVGElement |
-          // undefined' is not assignable to parameter of type 'SVGElement'.
-          this.moveRectToBlock_(
-              this.rectMap_.get(block) as AnyDuringMigration, block);
+          this.moveRectToBlock_(this.rectMap_.get(block)!, block);
        }
      }
      if (this.RTL) {
--- a/core/icon.ts
+++ b/core/icon.ts
@@ -63,7 +63,7 @@ export abstract class Icon {
    this.iconGroup_ =
        dom.createSvgElement(Svg.G, {'class': 'blocklyIconGroup'});
    if (this.block_.isInFlyout) {
-      dom.addClass(this.iconGroup_ as Element, 'blocklyIconGroupReadonly');
+      dom.addClass(this.iconGroup_, 'blocklyIconGroupReadonly');
    }
    this.drawIcon_(this.iconGroup_);

--- a/core/scrollbar_pair.ts
+++ b/core/scrollbar_pair.ts
@@ -26,9 +26,9 @@ import type {WorkspaceSvg} from './workspace_svg.js';
 * @alias Blockly.ScrollbarPair
 */
 export class ScrollbarPair {
-  hScroll: AnyDuringMigration;
-  vScroll: AnyDuringMigration;
-  corner_: AnyDuringMigration;
+  hScroll: Scrollbar|null = null;
+  vScroll: Scrollbar|null = null;
+  corner_: SVGRectElement|null = null;

  /** Previously recorded metrics from the workspace. */
  private oldHostMetrics_: Metrics|null = null;
@@ -76,9 +76,6 @@ export class ScrollbarPair {
  dispose() {
    dom.removeNode(this.corner_);
    this.corner_ = null;
-    // AnyDuringMigration because:  Type 'null' is not assignable to type
-    // 'WorkspaceSvg'.
-    this.workspace = null as AnyDuringMigration;
    this.oldHostMetrics_ = null;
    if (this.hScroll) {
      this.hScroll.dispose();
@@ -149,12 +146,12 @@ export class ScrollbarPair {
      if (!this.oldHostMetrics_ ||
          this.oldHostMetrics_.viewWidth !== hostMetrics.viewWidth ||
          this.oldHostMetrics_.absoluteLeft !== hostMetrics.absoluteLeft) {
-        this.corner_.setAttribute('x', this.vScroll.position.x);
+        this.corner_?.setAttribute('x', String(this.vScroll.position.x));
      }
      if (!this.oldHostMetrics_ ||
          this.oldHostMetrics_.viewHeight !== hostMetrics.viewHeight ||
          this.oldHostMetrics_.absoluteTop !== hostMetrics.absoluteTop) {
-        this.corner_.setAttribute('y', this.hScroll.position.y);
+        this.corner_?.setAttribute('y', String(this.hScroll.position.y));
      }
    }

@@ -224,20 +221,14 @@ export class ScrollbarPair {

    if (updateMetrics || updateMetrics === undefined) {
      // Update metrics.
-      const xyRatio = {};
+      const xyRatio: {x?: number, y?: number} = {};
      if (this.hScroll) {
-        // AnyDuringMigration because:  Property 'x' does not exist on type
-        // '{}'.
-        (xyRatio as AnyDuringMigration).x = this.hScroll.getRatio_();
+        xyRatio.x = this.hScroll.getRatio_();
      }
      if (this.vScroll) {
-        // AnyDuringMigration because:  Property 'y' does not exist on type
-        // '{}'.
-        (xyRatio as AnyDuringMigration).y = this.vScroll.getRatio_();
+        xyRatio.y = this.vScroll.getRatio_();
      }
-      // AnyDuringMigration because:  Argument of type '{}' is not assignable to
-      // parameter of type '{ x: number; y: number; }'.
-      this.workspace.setMetrics(xyRatio as AnyDuringMigration);
+      this.workspace.setMetrics(xyRatio);
    }
  }

--- a/core/workspace_audio.ts
+++ b/core/workspace_audio.ts
@@ -33,8 +33,7 @@ export class WorkspaceAudio {
  private sounds = new Map<string, HTMLAudioElement>();

  /** Time that the last sound was played. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type 'Date'.
-  private lastSound_: Date = null as AnyDuringMigration;
+  private lastSound_: Date|null = null;

  /**
   * @param parentWorkspace The parent of the workspace this audio object
@@ -48,9 +47,6 @@ export class WorkspaceAudio {
   * @internal
   */
  dispose() {
-    // AnyDuringMigration because:  Type 'null' is not assignable to type
-    // 'WorkspaceSvg'.
-    this.parentWorkspace = null as AnyDuringMigration;
    this.sounds.clear();
  }

--- a/core/workspace_drag_surface_svg.ts
+++ b/core/workspace_drag_surface_svg.ts
@@ -32,17 +32,13 @@ export class WorkspaceDragSurfaceSvg {
  /**
   * The SVG drag surface. Set once by WorkspaceDragSurfaceSvg.createDom.
   */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private SVG_: SVGElement = null as AnyDuringMigration;
+  private SVG!: SVGElement;

  /**
   * The element to insert the block canvas and bubble canvas after when it
   * goes back in the DOM at the end of a drag.
   */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'Element'.
-  private previousSibling_: Element = null as AnyDuringMigration;
+  private previousSibling: Element|null = null;

  /** @param container Containing element. */
  constructor(private readonly container: Element) {
@@ -51,7 +47,7 @@ export class WorkspaceDragSurfaceSvg {

  /** Create the drag surface and inject it into the container. */
  createDom() {
-    if (this.SVG_) {
+    if (this.SVG) {
      return;  // Already created.
    }
    /**
@@ -62,14 +58,14 @@ export class WorkspaceDragSurfaceSvg {
     *   <g class="blocklyBubbleCanvas">/g>
     * </svg>
     */
-    this.SVG_ = dom.createSvgElement(Svg.SVG, {
+    this.SVG = dom.createSvgElement(Svg.SVG, {
      'xmlns': dom.SVG_NS,
      'xmlns:html': dom.HTML_NS,
      'xmlns:xlink': dom.XLINK_NS,
      'version': '1.1',
      'class': 'blocklyWsDragSurface blocklyOverflowVisible',
    });
-    this.container.appendChild(this.SVG_);
+    this.container.appendChild(this.SVG);
  }

  /**
@@ -87,9 +83,9 @@ export class WorkspaceDragSurfaceSvg {
    const fixedX = Math.round(x);
    const fixedY = Math.round(y);

-    this.SVG_.style.display = 'block';
+    this.SVG.style.display = 'block';
    dom.setCssTransform(
-        this.SVG_, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0)');
+        this.SVG, 'translate3d(' + fixedX + 'px, ' + fixedY + 'px, 0)');
  }

  /**
@@ -100,7 +96,7 @@ export class WorkspaceDragSurfaceSvg {
   * @internal
   */
  getSurfaceTranslation(): Coordinate {
-    return svgMath.getRelativeXY((this.SVG_));
+    return svgMath.getRelativeXY((this.SVG));
  }

  /**
@@ -115,8 +111,8 @@ export class WorkspaceDragSurfaceSvg {
      throw Error(
          'Couldn\'t clear and hide the drag surface: missing new surface.');
    }
-    const blockCanvas = this.SVG_.childNodes[0] as Element;
-    const bubbleCanvas = this.SVG_.childNodes[1] as Element;
+    const blockCanvas = this.SVG.childNodes[0] as Element;
+    const bubbleCanvas = this.SVG.childNodes[1] as Element;
    if (!blockCanvas || !bubbleCanvas ||
        !dom.hasClass(blockCanvas, 'blocklyBlockCanvas') ||
        !dom.hasClass(bubbleCanvas, 'blocklyBubbleCanvas')) {
@@ -126,8 +122,8 @@ export class WorkspaceDragSurfaceSvg {

    // If there is a previous sibling, put the blockCanvas back right
    // afterwards, otherwise insert it as the first child node in newSurface.
-    if (this.previousSibling_ !== null) {
-      dom.insertAfter(blockCanvas, this.previousSibling_);
+    if (this.previousSibling !== null) {
+      dom.insertAfter(blockCanvas, this.previousSibling);
    } else {
      newSurface.insertBefore(blockCanvas, newSurface.firstChild);
    }
@@ -135,14 +131,12 @@ export class WorkspaceDragSurfaceSvg {
    // Reattach the bubble canvas after the blockCanvas.
    dom.insertAfter(bubbleCanvas, blockCanvas);
    // Hide the drag surface.
-    this.SVG_.style.display = 'none';
-    if (this.SVG_.childNodes.length) {
+    this.SVG.style.display = 'none';
+    if (this.SVG.childNodes.length) {
      throw Error('Drag surface was not cleared.');
    }
-    dom.setCssTransform(this.SVG_, '');
-    // AnyDuringMigration because:  Type 'null' is not assignable to type
-    // 'Element'.
-    this.previousSibling_ = null as AnyDuringMigration;
+    dom.setCssTransform(this.SVG, '');
+    this.previousSibling = null;
  }

  /**
@@ -164,23 +158,19 @@ export class WorkspaceDragSurfaceSvg {
  setContentsAndShow(
      blockCanvas: SVGElement, bubbleCanvas: SVGElement,
      previousSibling: Element, width: number, height: number, scale: number) {
-    if (this.SVG_.childNodes.length) {
+    if (this.SVG.childNodes.length) {
      throw Error('Already dragging a block.');
    }
-    this.previousSibling_ = previousSibling;
+    this.previousSibling = previousSibling;
    // Make sure the blocks and bubble canvas are scaled appropriately.
    blockCanvas.setAttribute(
        'transform', 'translate(0, 0) scale(' + scale + ')');
    bubbleCanvas.setAttribute(
        'transform', 'translate(0, 0) scale(' + scale + ')');
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.SVG_.setAttribute('width', width as AnyDuringMigration);
-    // AnyDuringMigration because:  Argument of type 'number' is not assignable
-    // to parameter of type 'string'.
-    this.SVG_.setAttribute('height', height as AnyDuringMigration);
-    this.SVG_.appendChild(blockCanvas);
-    this.SVG_.appendChild(bubbleCanvas);
-    this.SVG_.style.display = 'block';
+    this.SVG.setAttribute('width', String(width));
+    this.SVG.setAttribute('height', String(height));
+    this.SVG.appendChild(blockCanvas);
+    this.SVG.appendChild(bubbleCanvas);
+    this.SVG.style.display = 'block';
  }
 }
--- a/core/zoom_controls.ts
+++ b/core/zoom_controls.ts
@@ -65,19 +65,13 @@ export class ZoomControls implements IPositionable {
  private onZoomOutWrapper_: browserEvents.Data|null = null;

  /** The zoom in svg <g> element. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGGElement'.
-  private zoomInGroup_: SVGGElement = null as AnyDuringMigration;
+  private zoomInGroup: SVGGElement|null = null;

  /** The zoom out svg <g> element. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGGElement'.
-  private zoomOutGroup_: SVGGElement = null as AnyDuringMigration;
+  private zoomOutGroup: SVGGElement|null = null;

  /** The zoom reset svg <g> element. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGGElement'.
-  private zoomResetGroup_: SVGGElement = null as AnyDuringMigration;
+  private zoomResetGroup: SVGGElement|null = null;

  /** Width of the zoom controls. */
  private readonly WIDTH_ = 32;
@@ -100,9 +94,7 @@ export class ZoomControls implements IPositionable {
  private readonly MARGIN_HORIZONTAL_ = 20;

  /** The SVG group containing the zoom controls. */
-  // AnyDuringMigration because:  Type 'null' is not assignable to type
-  // 'SVGElement'.
-  private svgGroup_: SVGElement = null as AnyDuringMigration;
+  private svgGroup: SVGElement|null = null;

  /** Left coordinate of the zoom controls. */
  private left_ = 0;
@@ -122,7 +114,7 @@ export class ZoomControls implements IPositionable {
   * @returns The zoom controls SVG group.
   */
  createDom(): SVGElement {
-    this.svgGroup_ = dom.createSvgElement(Svg.G, {});
+    this.svgGroup = dom.createSvgElement(Svg.G, {});

    // Each filter/pattern needs a unique ID for the case of multiple Blockly
    // instances on a page.  Browser behaviour becomes undefined otherwise.
@@ -135,7 +127,7 @@ export class ZoomControls implements IPositionable {
      // loose blocks at the edges of the workspace.
      this.createZoomResetSvg_(rnd);
    }
-    return this.svgGroup_;
+    return this.svgGroup;
  }

  /** Initializes the zoom controls. */
@@ -154,8 +146,8 @@ export class ZoomControls implements IPositionable {
   */
  dispose() {
    this.workspace.getComponentManager().removeComponent('zoomControls');
-    if (this.svgGroup_) {
-      dom.removeNode(this.svgGroup_);
+    if (this.svgGroup) {
+      dom.removeNode(this.svgGroup);
    }
    if (this.onZoomResetWrapper_) {
      browserEvents.unbind(this.onZoomResetWrapper_);
@@ -177,7 +169,7 @@ export class ZoomControls implements IPositionable {
   */
  getBoundingRectangle(): Rect|null {
    let height = this.SMALL_SPACING_ + 2 * this.HEIGHT_;
-    if (this.zoomResetGroup_) {
+    if (this.zoomResetGroup) {
      height += this.LARGE_SPACING_ + this.HEIGHT_;
    }
    const bottom = this.top_ + height;
@@ -202,7 +194,7 @@ export class ZoomControls implements IPositionable {
    const cornerPosition =
        uiPosition.getCornerOppositeToolbox(this.workspace, metrics);
    let height = this.SMALL_SPACING_ + 2 * this.HEIGHT_;
-    if (this.zoomResetGroup_) {
+    if (this.zoomResetGroup) {
      height += this.LARGE_SPACING_ + this.HEIGHT_;
    }
    const startRect = uiPosition.getStartPositionRect(
@@ -218,28 +210,28 @@ export class ZoomControls implements IPositionable {

    if (verticalPosition === uiPosition.verticalPosition.TOP) {
      const zoomInTranslateY = this.SMALL_SPACING_ + this.HEIGHT_;
-      this.zoomInGroup_.setAttribute(
+      this.zoomInGroup?.setAttribute(
          'transform', 'translate(0, ' + zoomInTranslateY + ')');
-      if (this.zoomResetGroup_) {
+      if (this.zoomResetGroup) {
        const zoomResetTranslateY =
            zoomInTranslateY + this.LARGE_SPACING_ + this.HEIGHT_;
-        this.zoomResetGroup_.setAttribute(
+        this.zoomResetGroup.setAttribute(
            'transform', 'translate(0, ' + zoomResetTranslateY + ')');
      }
    } else {
      const zoomInTranslateY =
-          this.zoomResetGroup_ ? this.LARGE_SPACING_ + this.HEIGHT_ : 0;
-      this.zoomInGroup_.setAttribute(
+          this.zoomResetGroup ? this.LARGE_SPACING_ + this.HEIGHT_ : 0;
+      this.zoomInGroup?.setAttribute(
          'transform', 'translate(0, ' + zoomInTranslateY + ')');
      const zoomOutTranslateY =
          zoomInTranslateY + this.SMALL_SPACING_ + this.HEIGHT_;
-      this.zoomOutGroup_.setAttribute(
+      this.zoomOutGroup?.setAttribute(
          'transform', 'translate(0, ' + zoomOutTranslateY + ')');
    }

    this.top_ = positionRect.top;
    this.left_ = positionRect.left;
-    this.svgGroup_.setAttribute(
+    this.svgGroup?.setAttribute(
        'transform', 'translate(' + this.left_ + ',' + this.top_ + ')');
  }

@@ -251,7 +243,7 @@ export class ZoomControls implements IPositionable {
   *     on the same page.
   */
  private createZoomOutSvg_(rnd: string) {
-    /* This markup will be generated and added to the .svgGroup_:
+    /* This markup will be generated and added to the .svgGroup:
        <g class="blocklyZoom">
          <clipPath id="blocklyZoomoutClipPath837493">
            <rect width="32" height="32></rect>
@@ -261,11 +253,11 @@ export class ZoomControls implements IPositionable {
              clip-path="url(#blocklyZoomoutClipPath837493)"></image>
        </g>
        */
-    this.zoomOutGroup_ =
-        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
+    this.zoomOutGroup =
+        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup);
    const clip = dom.createSvgElement(
        Svg.CLIPPATH, {'id': 'blocklyZoomoutClipPath' + rnd},
-        this.zoomOutGroup_);
+        this.zoomOutGroup);
    dom.createSvgElement(
        Svg.RECT, {
          'width': 32,
@@ -280,14 +272,14 @@ export class ZoomControls implements IPositionable {
          'y': -92,
          'clip-path': 'url(#blocklyZoomoutClipPath' + rnd + ')',
        },
-        this.zoomOutGroup_);
+        this.zoomOutGroup);
    zoomoutSvg.setAttributeNS(
        dom.XLINK_NS, 'xlink:href',
        this.workspace.options.pathToMedia + SPRITE.url);

    // Attach listener.
    this.onZoomOutWrapper_ = browserEvents.conditionalBind(
-        this.zoomOutGroup_, 'mousedown', null, this.zoom_.bind(this, -1));
+        this.zoomOutGroup, 'mousedown', null, this.zoom_.bind(this, -1));
  }

  /**
@@ -298,7 +290,7 @@ export class ZoomControls implements IPositionable {
   *     on the same page.
   */
  private createZoomInSvg_(rnd: string) {
-    /* This markup will be generated and added to the .svgGroup_:
+    /* This markup will be generated and added to the .svgGroup:
        <g class="blocklyZoom">
          <clipPath id="blocklyZoominClipPath837493">
            <rect width="32" height="32"></rect>
@@ -308,10 +300,10 @@ export class ZoomControls implements IPositionable {
              clip-path="url(#blocklyZoominClipPath837493)"></image>
        </g>
        */
-    this.zoomInGroup_ =
-        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
+    this.zoomInGroup =
+        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup);
    const clip = dom.createSvgElement(
-        Svg.CLIPPATH, {'id': 'blocklyZoominClipPath' + rnd}, this.zoomInGroup_);
+        Svg.CLIPPATH, {'id': 'blocklyZoominClipPath' + rnd}, this.zoomInGroup);
    dom.createSvgElement(
        Svg.RECT, {
          'width': 32,
@@ -326,14 +318,14 @@ export class ZoomControls implements IPositionable {
          'y': -92,
          'clip-path': 'url(#blocklyZoominClipPath' + rnd + ')',
        },
-        this.zoomInGroup_);
+        this.zoomInGroup);
    zoominSvg.setAttributeNS(
        dom.XLINK_NS, 'xlink:href',
        this.workspace.options.pathToMedia + SPRITE.url);

    // Attach listener.
    this.onZoomInWrapper_ = browserEvents.conditionalBind(
-        this.zoomInGroup_, 'mousedown', null, this.zoom_.bind(this, 1));
+        this.zoomInGroup, 'mousedown', null, this.zoom_.bind(this, 1));
  }

  /**
@@ -361,7 +353,7 @@ export class ZoomControls implements IPositionable {
   *     on the same page.
   */
  private createZoomResetSvg_(rnd: string) {
-    /* This markup will be generated and added to the .svgGroup_:
+    /* This markup will be generated and added to the .svgGroup:
        <g class="blocklyZoom">
          <clipPath id="blocklyZoomresetClipPath837493">
            <rect width="32" height="32"></rect>
@@ -371,11 +363,11 @@ export class ZoomControls implements IPositionable {
              clip-path="url(#blocklyZoomresetClipPath837493)"></image>
        </g>
        */
-    this.zoomResetGroup_ =
-        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup_);
+    this.zoomResetGroup =
+        dom.createSvgElement(Svg.G, {'class': 'blocklyZoom'}, this.svgGroup);
    const clip = dom.createSvgElement(
        Svg.CLIPPATH, {'id': 'blocklyZoomresetClipPath' + rnd},
-        this.zoomResetGroup_);
+        this.zoomResetGroup);
    dom.createSvgElement(Svg.RECT, {'width': 32, 'height': 32}, clip);
    const zoomresetSvg = dom.createSvgElement(
        Svg.IMAGE, {
@@ -384,14 +376,14 @@ export class ZoomControls implements IPositionable {
          'y': -92,
          'clip-path': 'url(#blocklyZoomresetClipPath' + rnd + ')',
        },
-        this.zoomResetGroup_);
+        this.zoomResetGroup);
    zoomresetSvg.setAttributeNS(
        dom.XLINK_NS, 'xlink:href',
        this.workspace.options.pathToMedia + SPRITE.url);

    // Attach event listeners.
    this.onZoomResetWrapper_ = browserEvents.conditionalBind(
-        this.zoomResetGroup_, 'mousedown', null, this.resetZoom_.bind(this));
+        this.zoomResetGroup, 'mousedown', null, this.resetZoom_.bind(this));
  }

  /**
--- a/tests/mocha/zoom_controls_test.js
+++ b/tests/mocha/zoom_controls_test.js
@@ -30,7 +30,7 @@ suite("Zoom Controls", function() {
      });
    }
    test("Zoom in", function() {
-      simulateClick(this.zoomControls.zoomInGroup_);
+      simulateClick(this.zoomControls.zoomInGroup);

      assertEventFired(
          this.eventsFireStub, Blockly.Events.Click,
@@ -41,7 +41,7 @@ suite("Zoom Controls", function() {
      chai.assert.closeTo(this.workspace.getScale(), 1.2, 0.05);
    });
    test("Zoom out", function() {
-      simulateClick(this.zoomControls.zoomOutGroup_);
+      simulateClick(this.zoomControls.zoomOutGroup);

      assertEventFired(
          this.eventsFireStub, Blockly.Events.Click,
@@ -52,7 +52,7 @@ suite("Zoom Controls", function() {
      chai.assert.closeTo(this.workspace.getScale(), 0.8, 0.05);
    });
    test("Reset zoom", function() {
-      simulateClick(this.zoomControls.zoomResetGroup_);
+      simulateClick(this.zoomControls.zoomResetGroup);

      assertEventFired(
          this.eventsFireStub, Blockly.Events.Click,