Migrate core/widgetdiv.js to goog.module syntax (#5331)

* Migrate core/widgetdiv.js to ES6 const/let

* Migrate core/widgetdiv.js to goog.module

* Migrate core/widgetdiv.js to named requires

* clang-format core/widgetdiv.js

* Mark WidgetDiv.DIV as deprecated and refactor callers to use setters/getters

* Fix deprecation date

* Refactor tests to make setDiv() in core/widgetdiv.js test-only

* Fix type annotations for WidgetDiv.DIV and move test cleanup into sharedTestTeardown

core/contextmenu.js

@@ -174,7 +174,10 @@ const position_ = function(menu, e, rtl) {
  * @private
  */
 const createWidget_ = function(menu) {
-  const div = WidgetDiv.DIV;
+  const div = WidgetDiv.getDiv();
+  if (!div) {
+    throw Error('Attempting to create a context menu when widget div is null');
+  }
   menu.render(div);
   const menuDom = menu.getElement();
   dom.addClass(

core/field_multilineinput.js

@@ -330,7 +330,7 @@ FieldMultilineInput.prototype.showEditor_ = function(_opt_e, opt_quietInput) {
  * @protected
  */
 FieldMultilineInput.prototype.widgetCreate_ = function() {
-  const div = WidgetDiv.DIV;
+  const div = WidgetDiv.getDiv();
   const scale = this.workspace_.getScale();
 
   const htmlInput =

core/field_textinput.js

@@ -341,7 +341,7 @@ FieldTextInput.prototype.showInlineEditor_ = function(quietInput) {
  */
 FieldTextInput.prototype.widgetCreate_ = function() {
   Events.setGroup(true);
-  const div = WidgetDiv.DIV;
+  const div = WidgetDiv.getDiv();
 
   dom.addClass(this.getClickTarget_(), 'editing');
 
@@ -406,7 +406,7 @@ FieldTextInput.prototype.widgetDispose_ = function() {
 
   // Actual disposal.
   this.unbindInputEvents_();
-  const style = WidgetDiv.DIV.style;
+  const style = WidgetDiv.getDiv().style;
   style.width = 'auto';
   style.height = 'auto';
   style.fontSize = '';
@@ -509,7 +509,7 @@ FieldTextInput.prototype.setEditorValue_ = function(newValue) {
  * @protected
  */
 FieldTextInput.prototype.resizeEditor_ = function() {
-  const div = WidgetDiv.DIV;
+  const div = WidgetDiv.getDiv();
   const bBox = this.getScaledBBox();
   div.style.width = bBox.right - bBox.left + 'px';
   div.style.height = bBox.bottom - bBox.top + 'px';

core/widgetdiv.js

@@ -16,131 +16,168 @@
  * @name Blockly.WidgetDiv
  * @namespace
  */
-goog.provide('Blockly.WidgetDiv');
+goog.module('Blockly.WidgetDiv');
+goog.module.declareLegacyNamespace();
 
-goog.require('Blockly.common');
+/* eslint-disable-next-line no-unused-vars */
-goog.require('Blockly.utils.dom');
+const Rect = goog.requireType('Blockly.utils.Rect');
-
+/* eslint-disable-next-line no-unused-vars */
-goog.requireType('Blockly.utils.Rect');
+const Size = goog.requireType('Blockly.utils.Size');
-goog.requireType('Blockly.utils.Size');
+/* eslint-disable-next-line no-unused-vars */
-goog.requireType('Blockly.WorkspaceSvg');
+const WorkspaceSvg = goog.requireType('Blockly.WorkspaceSvg');
+const common = goog.require('Blockly.common');
+const deprecation = goog.require('Blockly.utils.deprecation');
+const dom = goog.require('Blockly.utils.dom');
 
 
 /**
  * The object currently using this container.
  * @type {Object}
- * @private
  */
-Blockly.WidgetDiv.owner_ = null;
+let owner = null;
 
 /**
  * Optional cleanup function set by whichever object uses the widget.
  * @type {Function}
- * @private
  */
-Blockly.WidgetDiv.dispose_ = null;
+let dispose = null;
 
 /**
  * A class name representing the current owner's workspace renderer.
  * @type {string}
- * @private
  */
-Blockly.WidgetDiv.rendererClassName_ = '';
+let rendererClassName = '';
 
 /**
  * A class name representing the current owner's workspace theme.
  * @type {string}
- * @private
  */
-Blockly.WidgetDiv.themeClassName_ = '';
+let themeClassName = '';
+
+/**
+ * The HTML container for popup overlays (e.g. editor widgets).
+ * @type {?Element}
+ */
+let DIV;
+/** @deprecated September 2021 */
+exports.DIV = DIV;
+
+/**
+ * Returns the HTML container for editor widgets.
+ * @return {?Element} The editor widget container.
+ */
+const getDiv = function() {
+  return DIV;
+};
+exports.getDiv = getDiv;
+
+/**
+ * Allows unit tests to reset the div.
+ * @param {?Element} newDiv The new value for the DIV field.
+ */
+const testOnly_setDiv = function(newDiv) {
+  DIV = newDiv;
+};
+exports.testOnly_setDiv = testOnly_setDiv;
+
+Object.defineProperties(exports, {
+  DIV: {
+    get: function() {
+      deprecation.warn(
+        'Blockly.WidgetDiv.DIV', 'September 2021', 'September 2022',
+        'Blockly.WidgetDiv.getDiv()');
+      return getDiv();
+    }
+  }
+});
 
 /**
  * Create the widget div and inject it onto the page.
  */
-Blockly.WidgetDiv.createDom = function() {
+const createDom = function() {
-  if (Blockly.WidgetDiv.DIV) {
+  if (DIV) {
     return;  // Already created.
   }
-  /**
+
-   * The HTML container for popup overlays (e.g. editor widgets).
+  DIV = document.createElement('div');
-   * @type {!Element}
+  DIV.className = 'blocklyWidgetDiv';
-   */
+  const container = common.getParentContainer() || document.body;
-  Blockly.WidgetDiv.DIV = document.createElement('div');
+  container.appendChild(DIV);
-  Blockly.WidgetDiv.DIV.className = 'blocklyWidgetDiv';
-  var container = Blockly.common.getParentContainer() || document.body;
-  container.appendChild(Blockly.WidgetDiv.DIV);
 };
+exports.createDom = createDom;
 
 /**
  * Initialize and display the widget div.  Close the old one if needed.
  * @param {!Object} newOwner The object that will be using this container.
  * @param {boolean} rtl Right-to-left (true) or left-to-right (false).
- * @param {Function} dispose Optional cleanup function to be run when the
+ * @param {Function} newDispose Optional cleanup function to be run when the
  *     widget is closed.
  */
-Blockly.WidgetDiv.show = function(newOwner, rtl, dispose) {
+const show = function(newOwner, rtl, newDispose) {
-  Blockly.WidgetDiv.hide();
+  hide();
-  Blockly.WidgetDiv.owner_ = newOwner;
+  owner = newOwner;
-  Blockly.WidgetDiv.dispose_ = dispose;
+  dispose = newDispose;
-  var div = Blockly.WidgetDiv.DIV;
+  const div = DIV;
   div.style.direction = rtl ? 'rtl' : 'ltr';
   div.style.display = 'block';
-  var mainWorkspace =
+  const mainWorkspace =
-    /** @type {!Blockly.WorkspaceSvg} */ (Blockly.common.getMainWorkspace());
+      /** @type {!WorkspaceSvg} */ (common.getMainWorkspace());
-  Blockly.WidgetDiv.rendererClassName_ =
+  rendererClassName = mainWorkspace.getRenderer().getClassName();
-      mainWorkspace.getRenderer().getClassName();
+  themeClassName = mainWorkspace.getTheme().getClassName();
-  Blockly.WidgetDiv.themeClassName_ = mainWorkspace.getTheme().getClassName();
+  dom.addClass(div, rendererClassName);
-  Blockly.utils.dom.addClass(div, Blockly.WidgetDiv.rendererClassName_);
+  dom.addClass(div, themeClassName);
-  Blockly.utils.dom.addClass(div, Blockly.WidgetDiv.themeClassName_);
 };
+exports.show = show;
 
 /**
  * Destroy the widget and hide the div.
  */
-Blockly.WidgetDiv.hide = function() {
+const hide = function() {
-  if (!Blockly.WidgetDiv.isVisible()) {
+  if (!isVisible()) {
     return;
   }
-  Blockly.WidgetDiv.owner_ = null;
+  owner = null;
 
-  var div = Blockly.WidgetDiv.DIV;
+  const div = DIV;
   div.style.display = 'none';
   div.style.left = '';
   div.style.top = '';
-  Blockly.WidgetDiv.dispose_ && Blockly.WidgetDiv.dispose_();
+  dispose && dispose();
-  Blockly.WidgetDiv.dispose_ = null;
+  dispose = null;
   div.textContent = '';
 
-  if (Blockly.WidgetDiv.rendererClassName_) {
+  if (rendererClassName) {
-    Blockly.utils.dom.removeClass(div, Blockly.WidgetDiv.rendererClassName_);
+    dom.removeClass(div, rendererClassName);
-    Blockly.WidgetDiv.rendererClassName_ = '';
+    rendererClassName = '';
   }
-  if (Blockly.WidgetDiv.themeClassName_) {
+  if (themeClassName) {
-    Blockly.utils.dom.removeClass(div, Blockly.WidgetDiv.themeClassName_);
+    dom.removeClass(div, themeClassName);
-    Blockly.WidgetDiv.themeClassName_ = '';
+    themeClassName = '';
   }
-  (/** @type {!Blockly.WorkspaceSvg} */ (
+  (/** @type {!WorkspaceSvg} */ (common.getMainWorkspace())).markFocused();
-    Blockly.common.getMainWorkspace())).markFocused();
 };
+exports.hide = hide;
 
 /**
  * Is the container visible?
  * @return {boolean} True if visible.
  */
-Blockly.WidgetDiv.isVisible = function() {
+const isVisible = function() {
-  return !!Blockly.WidgetDiv.owner_;
+  return !!owner;
 };
+exports.isVisible = isVisible;
 
 /**
  * Destroy the widget and hide the div if it is being used by the specified
  * object.
  * @param {!Object} oldOwner The object that was using this container.
  */
-Blockly.WidgetDiv.hideIfOwner = function(oldOwner) {
+const hideIfOwner = function(oldOwner) {
-  if (Blockly.WidgetDiv.owner_ == oldOwner) {
+  if (owner == oldOwner) {
-    Blockly.WidgetDiv.hide();
+    hide();
   }
 };
+exports.hideIfOwner = hideIfOwner;
 
 /**
  * Set the widget div's position and height.  This function does nothing clever:
@@ -148,12 +185,11 @@ Blockly.WidgetDiv.hideIfOwner = function(oldOwner) {
  * @param {number} x Horizontal location (window coordinates, not body).
  * @param {number} y Vertical location (window coordinates, not body).
  * @param {number} height The height of the widget div (pixels).
- * @private
  */
-Blockly.WidgetDiv.positionInternal_ = function(x, y, height) {
+const positionInternal = function(x, y, height) {
-  Blockly.WidgetDiv.DIV.style.left = x + 'px';
+  DIV.style.left = x + 'px';
-  Blockly.WidgetDiv.DIV.style.top = y + 'px';
+  DIV.style.top = y + 'px';
-  Blockly.WidgetDiv.DIV.style.height = height + 'px';
+  DIV.style.height = height + 'px';
 };
 
 /**
@@ -161,56 +197,53 @@ Blockly.WidgetDiv.positionInternal_ = function(x, y, height) {
  * The widget should be placed adjacent to but not overlapping the anchor
  * rectangle.  The preferred position is directly below and aligned to the left
  * (LTR) or right (RTL) side of the anchor.
- * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the
+ * @param {!Rect} viewportBBox The bounding rectangle of the
  *     current viewport, in window coordinates.
- * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor,
+ * @param {!Rect} anchorBBox The bounding rectangle of the anchor,
  *     in window coordinates.
- * @param {!Blockly.utils.Size} widgetSize The size of the widget that is inside
+ * @param {!Size} widgetSize The size of the widget that is inside
  *     the widget div, in window coordinates.
  * @param {boolean} rtl Whether the workspace is in RTL mode.  This determines
  *     horizontal alignment.
- * @package
  */
-Blockly.WidgetDiv.positionWithAnchor = function(viewportBBox, anchorBBox,
+const positionWithAnchor = function(viewportBBox, anchorBBox, widgetSize, rtl) {
-    widgetSize, rtl) {
+  const y = calculateY(viewportBBox, anchorBBox, widgetSize);
-  var y = Blockly.WidgetDiv.calculateY_(viewportBBox, anchorBBox, widgetSize);
+  const x = calculateX(viewportBBox, anchorBBox, widgetSize, rtl);
-  var x = Blockly.WidgetDiv.calculateX_(viewportBBox, anchorBBox, widgetSize,
-      rtl);
 
   if (y < 0) {
-    Blockly.WidgetDiv.positionInternal_(x, 0, widgetSize.height + y);
+    positionInternal(x, 0, widgetSize.height + y);
   } else {
-    Blockly.WidgetDiv.positionInternal_(x, y, widgetSize.height);
+    positionInternal(x, y, widgetSize.height);
   }
 };
+/** @package */
+exports.positionWithAnchor = positionWithAnchor;
 
 /**
  * Calculate an x position (in window coordinates) such that the widget will not
  * be offscreen on the right or left.
- * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the
+ * @param {!Rect} viewportBBox The bounding rectangle of the
  *     current viewport, in window coordinates.
- * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor,
+ * @param {!Rect} anchorBBox The bounding rectangle of the anchor,
  *     in window coordinates.
- * @param {!Blockly.utils.Size} widgetSize The dimensions of the widget inside
+ * @param {!Size} widgetSize The dimensions of the widget inside
  *     the widget div.
  * @param {boolean} rtl Whether the Blockly workspace is in RTL mode.
  * @return {number} A valid x-coordinate for the top left corner of the widget
  *     div, in window coordinates.
- * @private
  */
-Blockly.WidgetDiv.calculateX_ = function(viewportBBox, anchorBBox, widgetSize,
+const calculateX = function(viewportBBox, anchorBBox, widgetSize, rtl) {
-    rtl) {
   if (rtl) {
     // Try to align the right side of the field and the right side of widget.
-    var widgetLeft = anchorBBox.right - widgetSize.width;
+    const widgetLeft = anchorBBox.right - widgetSize.width;
     // Don't go offscreen left.
-    var x = Math.max(widgetLeft, viewportBBox.left);
+    const x = Math.max(widgetLeft, viewportBBox.left);
     // But really don't go offscreen right:
     return Math.min(x, viewportBBox.right - widgetSize.width);
   } else {
     // Try to align the left side of the field and the left side of widget.
     // Don't go offscreen right.
-    var x = Math.min(anchorBBox.left, viewportBBox.right - widgetSize.width);
+    const x = Math.min(anchorBBox.left, viewportBBox.right - widgetSize.width);
     // But left is more important, because that's where the text is.
     return Math.max(x, viewportBBox.left);
   }
@@ -219,17 +252,16 @@ Blockly.WidgetDiv.calculateX_ = function(viewportBBox, anchorBBox, widgetSize,
 /**
  * Calculate a y position (in window coordinates) such that the widget will not
  * be offscreen on the top or bottom.
- * @param {!Blockly.utils.Rect} viewportBBox The bounding rectangle of the
+ * @param {!Rect} viewportBBox The bounding rectangle of the
  *     current viewport, in window coordinates.
- * @param {!Blockly.utils.Rect} anchorBBox The bounding rectangle of the anchor,
+ * @param {!Rect} anchorBBox The bounding rectangle of the anchor,
  *     in window coordinates.
- * @param {!Blockly.utils.Size} widgetSize The dimensions of the widget inside
+ * @param {!Size} widgetSize The dimensions of the widget inside
  *     the widget div.
  * @return {number} A valid y-coordinate for the top left corner of the widget
  *     div, in window coordinates.
- * @private
  */
-Blockly.WidgetDiv.calculateY_ = function(viewportBBox, anchorBBox, widgetSize) {
+const calculateY = function(viewportBBox, anchorBBox, widgetSize) {
   // Flip the widget vertically if off the bottom.
   if (anchorBBox.bottom + widgetSize.height >= viewportBBox.bottom) {
     // The bottom of the widget is at the top of the field.

demos/custom-fields/pitch/field_pitch.js

@@ -68,7 +68,7 @@ CustomFields.FieldPitch.NOTES = 'C3 D3 E3 F3 G3 A3 B3 C4 D4 E4 F4 G4 A4'.split(/
 CustomFields.FieldPitch.prototype.showEditor_ = function() {
   CustomFields.FieldPitch.superClass_.showEditor_.call(this);
 
-  var div = Blockly.WidgetDiv.DIV;
+  var div = Blockly.WidgetDiv.getDiv();
   if (!div.firstChild) {
     // Mobile interface uses Blockly.prompt.
     return;

tests/deps.js

@@ -216,7 +216,7 @@ goog.addDependency('../../core/variable_model.js', ['Blockly.VariableModel'], ['
 goog.addDependency('../../core/variables.js', ['Blockly.Variables'], ['Blockly.Blocks', 'Blockly.Msg', 'Blockly.VariableModel', 'Blockly.Xml', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/variables_dynamic.js', ['Blockly.VariablesDynamic'], ['Blockly.Blocks', 'Blockly.Msg', 'Blockly.VariableModel', 'Blockly.Variables', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/warning.js', ['Blockly.Warning'], ['Blockly.Bubble', 'Blockly.Events', 'Blockly.Events.BubbleOpen', 'Blockly.Icon', 'Blockly.utils.Svg', 'Blockly.utils.dom', 'Blockly.utils.object'], {'lang': 'es6', 'module': 'goog'});
-goog.addDependency('../../core/widgetdiv.js', ['Blockly.WidgetDiv'], ['Blockly.common', 'Blockly.utils.dom']);
+goog.addDependency('../../core/widgetdiv.js', ['Blockly.WidgetDiv'], ['Blockly.common', 'Blockly.utils.deprecation', 'Blockly.utils.dom'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/workspace.js', ['Blockly.Workspace'], ['Blockly.ConnectionChecker', 'Blockly.Events', 'Blockly.Options', 'Blockly.VariableMap', 'Blockly.registry', 'Blockly.utils', 'Blockly.utils.math'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/workspace_audio.js', ['Blockly.WorkspaceAudio'], ['Blockly.internalConstants', 'Blockly.utils.global', 'Blockly.utils.userAgent'], {'lang': 'es6', 'module': 'goog'});
 goog.addDependency('../../core/workspace_comment.js', ['Blockly.WorkspaceComment'], ['Blockly.Events', 'Blockly.Events.CommentChange', 'Blockly.Events.CommentCreate', 'Blockly.Events.CommentDelete', 'Blockly.Events.CommentMove', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.xml'], {'lang': 'es6', 'module': 'goog'});

tests/mocha/field_textinput_test.js

@@ -168,7 +168,7 @@ suite('Text Input Fields', function() {
           };
           field.clickTarget_ = document.createElement('div');
           Blockly.mainWorkspace = workspace;
-          Blockly.WidgetDiv.DIV = document.createElement('div');
+          Blockly.WidgetDiv.createDom();
           this.stub = sinon.stub(field, 'resizeEditor_');
         };
 

tests/mocha/test_helpers.js

@@ -240,6 +240,8 @@ function sharedTestTeardown() {
     for (let i = 0; i < messages.length; i++) {
       delete Blockly.Msg[messages[i]];
     }
+
+    Blockly.WidgetDiv.testOnly_setDiv(null);
   }
 }
 

tests/mocha/widget_div_test.js

@@ -40,7 +40,7 @@ suite('WidgetDiv', function() {
           anchorBBox, rtl, expectedX, expectedY, expectedHeight) {
         Blockly.WidgetDiv.positionWithAnchor(
             this.viewportBBox, anchorBBox, this.widgetSize, rtl);
-        var style = Blockly.WidgetDiv.DIV.style;
+        var style = Blockly.WidgetDiv.getDiv().style;
         chai.assert.equal(style.left, expectedX + 'px', 'Left');
         chai.assert.equal(style.top, expectedY + 'px', 'Top');
         chai.assert.equal(style.height, expectedHeight + 'px', 'Height');