fix: Fix compilation errors under Closure's strict mode (google#6073)

* fix: Fix errors under strict compilation.

* fix: Fix tests that referenced properties converted to data attributes.

* fix: Incorporate feedback on resolving compiler errors.

* refactor: Revert changes to skew and translate attributes.

* refactor: Introduce LegacyContextMenuOption type to correspond to documented fields.

* refactor: Introduce PathLeftShape and PathDownShape vs casting to PuzzleTab/Notch.

* chore: Added nullability modifiers to type annotations.

* refactor: Export FlyoutItem directly.

* chore: clang-format renderers/zelos/drawer.js.

core/block_animations.js

@@ -20,6 +20,16 @@ const dom = goog.require('Blockly.utils.dom');
 const {BlockSvg} = goog.requireType('Blockly.BlockSvg');
 const {Svg} = goog.require('Blockly.utils.Svg');
 
+/**
+ * A bounding box for a cloned block.
+ * @typedef {{
+ *    x: number,
+ *    y: number,
+ *    width: number,
+ *    height: number
+ * }}
+ */
+let CloneRect;  // eslint-disable-line no-unused-vars
 
 /**
  * PID of disconnect UI animation.  There can only be one at a time.
@@ -47,13 +57,13 @@ const disposeUiEffect = function(block) {
   const xy = workspace.getSvgXY(svgGroup);
   // Deeply clone the current block.
   const clone = svgGroup.cloneNode(true);
-  clone.translateX_ = xy.x;
-  clone.translateY_ = xy.y;
   clone.setAttribute('transform', 'translate(' + xy.x + ',' + xy.y + ')');
   workspace.getParentSvg().appendChild(clone);
-  clone.bBox_ = clone.getBBox();
+  const bBox = clone.getBBox();
+  const cloneRect =
+      {'x': xy.x, 'y': xy.y, 'width': bBox.width, 'height': bBox.height};
   // Start the animation.
-  disposeUiStep(clone, workspace.RTL, new Date, workspace.scale);
+  disposeUiStep(clone, cloneRect, workspace.RTL, new Date, workspace.scale);
 };
 exports.disposeUiEffect = disposeUiEffect;
 
@@ -62,25 +72,26 @@ exports.disposeUiEffect = disposeUiEffect;
  * This is a class method, not an instance method since the original block has
  * been destroyed and is no longer accessible.
  * @param {!Element} clone SVG element to animate and dispose of.
+ * @param {!CloneRect} rect Starting rect of the clone.
  * @param {boolean} rtl True if RTL, false if LTR.
  * @param {!Date} start Date of animation's start.
  * @param {number} workspaceScale Scale of workspace.
  */
-const disposeUiStep = function(clone, rtl, start, workspaceScale) {
-  const ms = new Date - start;
+const disposeUiStep = function(clone, rect, rtl, start, workspaceScale) {
+  const ms = (new Date).getTime() - start.getTime();
   const percent = ms / 150;
   if (percent > 1) {
     dom.removeNode(clone);
   } else {
-    const x = clone.translateX_ +
-        (rtl ? -1 : 1) * clone.bBox_.width * workspaceScale / 2 * percent;
-    const y = clone.translateY_ + clone.bBox_.height * workspaceScale * percent;
+    const x =
+        rect.x + (rtl ? -1 : 1) * rect.width * workspaceScale / 2 * percent;
+    const y = rect.y + rect.height * workspaceScale * percent;
     const scale = (1 - percent) * workspaceScale;
     clone.setAttribute(
         'transform',
         'translate(' + x + ',' + y + ')' +
             ' scale(' + scale + ')');
-    setTimeout(disposeUiStep, 10, clone, rtl, start, workspaceScale);
+    setTimeout(disposeUiStep, 10, clone, rect, rtl, start, workspaceScale);
   }
 };
 
@@ -129,7 +140,7 @@ exports.connectionUiEffect = connectionUiEffect;
  * @param {number} scale Scale of workspace.
  */
 const connectionUiStep = function(ripple, start, scale) {
-  const ms = new Date - start;
+  const ms = (new Date).getTime() - start.getTime();
   const percent = ms / 150;
   if (percent > 1) {
     dom.removeNode(ripple);
@@ -174,19 +185,21 @@ const disconnectUiStep = function(group, magnitude, start) {
   const DURATION = 200;  // Milliseconds.
   const WIGGLES = 3;     // Half oscillations.
 
-  const ms = new Date - start;
+  const ms = (new Date).getTime() - start.getTime();
   const percent = ms / DURATION;
 
   if (percent > 1) {
-    group.skew_ = '';
+    (/** @type {?} */ (group)).skew_ = '';
   } else {
     const skew = Math.round(
         Math.sin(percent * Math.PI * WIGGLES) * (1 - percent) * magnitude);
-    group.skew_ = 'skewX(' + skew + ')';
+    (/** @type {?} */ (group)).skew_ = 'skewX(' + skew + ')';
     disconnectGroup = group;
     disconnectPid = setTimeout(disconnectUiStep, 10, group, magnitude, start);
   }
-  group.setAttribute('transform', group.translate_ + group.skew_);
+  group.setAttribute(
+      'transform',
+      (/** @type {?} */ (group)).translate_ + (/** @type {?} */ (group)).skew_);
 };
 
 /**
@@ -198,8 +211,8 @@ const disconnectUiStop = function() {
   if (disconnectGroup) {
     clearTimeout(disconnectPid);
     const group = disconnectGroup;
-    group.skew_ = '';
-    group.setAttribute('transform', group.translate_);
+    (/** @type {?} */ (group)).skew_ = '';
+    group.setAttribute('transform', (/** @type {?} */ (group)).translate_);
     disconnectGroup = null;
   }
 };

core/block_dragger.js

@@ -30,6 +30,8 @@ const {Coordinate} = goog.require('Blockly.utils.Coordinate');
 const {IBlockDragger} = goog.require('Blockly.IBlockDragger');
 /* eslint-disable-next-line no-unused-vars */
 const {IDragTarget} = goog.requireType('Blockly.IDragTarget');
+/* eslint-disable-next-line no-unused-vars */
+const {Icon} = goog.requireType('Blockly.Icon');
 const {InsertionMarkerManager} = goog.require('Blockly.InsertionMarkerManager');
 /* eslint-disable-next-line no-unused-vars */
 const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
@@ -99,7 +101,7 @@ const BlockDragger = class {
      * A list of all of the icons (comment, warning, and mutator) that are
      * on this block and its descendants.  Moving an icon moves the bubble that
      * extends from it if that bubble is open.
-     * @type {Array<!Object>}
+     * @type {Array<!IconPositionData>}
      * @protected
      */
     this.dragIconData_ = initIconData(block);
@@ -450,12 +452,23 @@ const BlockDragger = class {
   }
 };
 
+/**
+ * Data about the position of a given icon.
+ * @typedef {{
+ *        location:!Coordinate,
+ *        icon:!Icon,
+ * }}
+ */
+let IconPositionData;
+exports.IconPositionData = IconPositionData;
+
 /**
  * Make a list of all of the icons (comment, warning, and mutator) that are
  * on this block and its descendants.  Moving an icon moves the bubble that
  * extends from it if that bubble is open.
  * @param {!BlockSvg} block The root block that is being dragged.
- * @return {!Array<!Object>} The list of all icons and their locations.
+ * @return {!Array<!IconPositionData>} The list of all icons and their
+ *     locations.
  */
 const initIconData = function(block) {
   // Build a list of icons that need to be moved and where they started.

core/block_svg.js

@@ -26,7 +26,6 @@ const dom = goog.require('Blockly.utils.dom');
 const eventUtils = goog.require('Blockly.Events.utils');
 const internalConstants = goog.require('Blockly.internalConstants');
 const svgMath = goog.require('Blockly.utils.svgMath');
-const userAgent = goog.require('Blockly.utils.userAgent');
 const {ASTNode} = goog.require('Blockly.ASTNode');
 const {Block} = goog.require('Blockly.Block');
 /* eslint-disable-next-line no-unused-vars */
@@ -131,7 +130,8 @@ class BlockSvg extends Block {
 
     /**
      * An optional method for defining custom block context menu items.
-     * @type {undefined|?function(!Array<!Object>)}
+     * @type {undefined|?function(!Array<!ContextMenuRegistry.ContextMenuOption|
+     *                                   !ContextMenuRegistry.LegacyContextMenuOption>)}
      */
     this.customContextMenu = this.customContextMenu;
 
@@ -196,7 +196,7 @@ class BlockSvg extends Block {
      * @private
      */
     this.svgGroup_ = dom.createSvgElement(Svg.G, {}, null);
-    this.svgGroup_.translate_ = '';
+    (/** @type {?} */ (this.svgGroup_)).translate_ = '';
 
     /**
      * A block style object.
@@ -252,13 +252,7 @@ class BlockSvg extends Block {
     Tooltip.bindMouseEvents(svgPath);
 
     // Expose this block's ID on its top-level SVG group.
-    if (this.svgGroup_.dataset) {
-      this.svgGroup_.dataset['id'] = this.id;
-    } else if (userAgent.IE) {
-      // SVGElement.dataset is not available on IE11, but data-* properties
-      // can be set with setAttribute().
-      this.svgGroup_.setAttribute('data-id', this.id);
-    }
+    this.svgGroup_.setAttribute('data-id', this.id);
 
     this.doInit_();
   }
@@ -552,10 +546,13 @@ class BlockSvg extends Block {
     if (this.useDragSurface_) {
       this.workspace.getBlockDragSurface().translateSurface(newLoc.x, newLoc.y);
     } else {
-      this.svgGroup_.translate_ =
+      (/** @type {?} */ (this.svgGroup_)).translate_ =
           'translate(' + newLoc.x + ',' + newLoc.y + ')';
-      this.svgGroup_.setAttribute(
-          'transform', this.svgGroup_.translate_ + this.svgGroup_.skew_);
+      (/** @type {?} */ (this.svgGroup_))
+          .setAttribute(
+              'transform',
+              (/** @type {?} */ (this.svgGroup_)).translate_ +
+                  (/** @type {?} */ (this.svgGroup_)).skew_);
     }
   }
 
@@ -744,7 +741,9 @@ class BlockSvg extends Block {
 
   /**
    * Generate the context menu for this block.
-   * @return {?Array<!Object>} Context menu options or null if no menu.
+   * @return {?Array<!ContextMenuRegistry.ContextMenuOption|
+   *                 !ContextMenuRegistry.LegacyContextMenuOption>}
+   *     Context menu options or null if no menu.
    * @protected
    */
   generateContextMenu() {
@@ -815,8 +814,8 @@ class BlockSvg extends Block {
   setDragging(adding) {
     if (adding) {
       const group = this.getSvgRoot();
-      group.translate_ = '';
-      group.skew_ = '';
+      (/** @type {?} */ (group)).translate_ = '';
+      (/** @type {?} */ (group)).skew_ = '';
       common.draggingConnections.push(...this.getConnections_(true));
       dom.addClass(
           /** @type {!Element} */ (this.svgGroup_), 'blocklyDragging');

core/browser_events.js

@@ -211,12 +211,22 @@ exports.unbind = unbind;
  * @alias Blockly.browserEvents.isTargetInput
  */
 const isTargetInput = function(e) {
-  return e.target.type === 'textarea' || e.target.type === 'text' ||
-      e.target.type === 'number' || e.target.type === 'email' ||
-      e.target.type === 'password' || e.target.type === 'search' ||
-      e.target.type === 'tel' || e.target.type === 'url' ||
-      e.target.isContentEditable ||
-      (e.target.dataset && e.target.dataset.isTextInput === 'true');
+  if (e.target instanceof HTMLElement) {
+    if (e.target.isContentEditable ||
+        e.target.getAttribute('data-is-text-input') === 'true') {
+      return true;
+    }
+
+    if (e.target instanceof HTMLInputElement) {
+      const target = e.target;
+      return target.type === 'textarea' || target.type === 'text' ||
+          target.type === 'number' || target.type === 'email' ||
+          target.type === 'password' || target.type === 'search' ||
+          target.type === 'tel' || target.type === 'url';
+    }
+  }
+
+  return false;
 };
 exports.isTargetInput = isTargetInput;
 
@@ -240,7 +250,7 @@ exports.isRightButton = isRightButton;
  * Returns the converted coordinates of the given mouse event.
  * The origin (0,0) is the top-left corner of the Blockly SVG.
  * @param {!Event} e Mouse event.
- * @param {!Element} svg SVG element.
+ * @param {!SVGSVGElement} svg SVG element.
  * @param {?SVGMatrix} matrix Inverted screen CTM to use.
  * @return {!SVGPoint} Object with .x and .y properties.
  * @alias Blockly.browserEvents.mouseToSvg
@@ -259,7 +269,7 @@ exports.mouseToSvg = mouseToSvg;
 
 /**
  * Returns the scroll delta of a mouse event in pixel units.
- * @param {!Event} e Mouse event.
+ * @param {!WheelEvent} e Mouse event.
  * @return {{x: number, y: number}} Scroll delta object with .x and .y
  *    properties.
  * @alias Blockly.browserEvents.getScrollDeltaPixels

core/bubble.js

@@ -47,8 +47,8 @@ const Bubble = class {
   /**
    * @param {!WorkspaceSvg} workspace The workspace on which to draw the
    *     bubble.
-   * @param {!Element} content SVG content for the bubble.
-   * @param {!Element} shape SVG element to avoid eclipsing.
+   * @param {!SVGElement} content SVG content for the bubble.
+   * @param {!SVGElement} shape SVG element to avoid eclipsing.
    * @param {!Coordinate} anchorXY Absolute position of bubble's
    *     anchor point.
    * @param {?number} bubbleWidth Width of bubble, or null if not resizable.
@@ -227,7 +227,7 @@ const Bubble = class {
       'filter': 'url(#' +
           this.workspace_.getRenderer().getConstants().embossFilterId + ')',
     };
-    if (userAgent.JAVA_FX) {
+    if (userAgent.JavaFx) {
       // Multiple reports that JavaFX can't handle filters.
       // https://github.com/google/blockly/issues/99
       filter = {};
@@ -302,9 +302,7 @@ const Bubble = class {
    * @param {string} id ID of block.
    */
   setSvgId(id) {
-    if (this.bubbleGroup_.dataset) {
-      this.bubbleGroup_.dataset['blockId'] = id;
-    }
+    this.bubbleGroup_.setAttribute('data-block-id', id);
   }
 
   /**
@@ -443,7 +441,7 @@ const Bubble = class {
 
     const optimalLeft = this.getOptimalRelativeLeft_(viewMetrics);
     const optimalTop = this.getOptimalRelativeTop_(viewMetrics);
-    const bbox = this.shape_.getBBox();
+    const bbox = (/** @type {!SVGGraphicsElement} */ (this.shape_)).getBBox();
 
     const topPosition = {
       x: optimalLeft,

core/bubble_dragger.js

@@ -29,8 +29,7 @@ const {IBubble} = goog.requireType('Blockly.IBubble');
 const {IDeleteArea} = goog.requireType('Blockly.IDeleteArea');
 /* eslint-disable-next-line no-unused-vars */
 const {IDragTarget} = goog.requireType('Blockly.IDragTarget');
-/* eslint-disable-next-line no-unused-vars */
-const {WorkspaceCommentSvg} = goog.requireType('Blockly.WorkspaceCommentSvg');
+const {WorkspaceCommentSvg} = goog.require('Blockly.WorkspaceCommentSvg');
 /* eslint-disable-next-line no-unused-vars */
 const {WorkspaceSvg} = goog.requireType('Blockly.WorkspaceSvg');
 /** @suppress {extraRequire} */
@@ -243,12 +242,9 @@ const BubbleDragger = class {
    * @private
    */
   fireMoveEvent_() {
-    if (this.draggingBubble_.isComment) {
-      // TODO (adodson): Resolve build errors when requiring
-      // WorkspaceCommentSvg.
+    if (this.draggingBubble_ instanceof WorkspaceCommentSvg) {
       const event = /** @type {!CommentMove} */
-          (new (eventUtils.get(eventUtils.COMMENT_MOVE))(
-              /** @type {!WorkspaceCommentSvg} */ (this.draggingBubble_)));
+          (new (eventUtils.get(eventUtils.COMMENT_MOVE))(this.draggingBubble_));
       event.setOldCoordinate(this.startXY_);
       event.recordNew();
       eventUtils.fire(event);

core/clipboard.js

@@ -73,7 +73,7 @@ exports.paste = paste;
 const duplicate = function(toDuplicate) {
   const oldCopyData = copyData;
   copy(toDuplicate);
-  const pastedThing = toDuplicate.workspace.paste(copyData.saveInfo);
+  const pastedThing = toDuplicate.toCopyData().source.paste(copyData.saveInfo);
   copyData = oldCopyData;
   return pastedThing;
 };

core/comment.js

@@ -108,7 +108,7 @@ class Comment extends Icon {
 
     /**
      * The editable text area, or null if not created.
-     * @type {?Element}
+     * @type {?HTMLTextAreaElement}
      * @private
      */
     this.textarea_ = null;
@@ -181,7 +181,8 @@ class Comment extends Icon {
     body.setAttribute('xmlns', dom.HTML_NS);
     body.className = 'blocklyMinimalBody';
 
-    this.textarea_ = document.createElementNS(dom.HTML_NS, 'textarea');
+    this.textarea_ = /** @type {!HTMLTextAreaElement} */ (
+        document.createElementNS(dom.HTML_NS, 'textarea'));
     const textarea = this.textarea_;
     textarea.className = 'blocklyCommentTextarea';
     textarea.setAttribute('dir', this.block_.RTL ? 'RTL' : 'LTR');