chore: makes types of divs more specific (#5988)

* chore: cast to a more specific type when creating a div * chore: make types more specific for divs * chore: format
2026-01-07 09:00:11 +01:00 · 2022-03-08 16:00:31 -08:00
parent e11b5834e5
commit 3740d51089
11 changed files with 67 additions and 54 deletions
--- a/core/dropdowndiv.js
+++ b/core/dropdowndiv.js
@@ -103,19 +103,19 @@ let themeClassName = '';

 /**
 * The content element.
- * @type {!Element}
+ * @type {!HTMLDivElement}
 */
 let div;

 /**
 * The content element.
- * @type {!Element}
+ * @type {!HTMLDivElement}
 */
 let content;

 /**
 * The arrow element.
- * @type {!Element}
+ * @type {!HTMLDivElement}
 */
 let arrow;

@@ -177,16 +177,16 @@ const createDom = function() {
  if (div) {
    return;  // Already created.
  }
-  div = document.createElement('div');
+  div = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  div.className = 'blocklyDropDownDiv';
  const parentDiv = common.getParentContainer() || document.body;
  parentDiv.appendChild(div);

-  content = document.createElement('div');
+  content = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  content.className = 'blocklyDropDownContent';
  div.appendChild(content);

-  arrow = document.createElement('div');
+  arrow = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  arrow.className = 'blocklyDropDownArrow';
  div.appendChild(arrow);

--- a/core/inject.js
+++ b/core/inject.js
@@ -59,7 +59,8 @@ const inject = function(container, opt_options) {
  }
  const options =
      new Options(opt_options || (/** @type {!BlocklyOptions} */ ({})));
-  const subContainer = document.createElement('div');
+  const subContainer =
+      /** @type {!HTMLDivElement} */ (document.createElement('div'));
  subContainer.className = 'injectionDiv';
  subContainer.tabIndex = 0;
  aria.setState(subContainer, aria.State.LABEL, Msg['WORKSPACE_ARIA_LABEL']);
--- a/core/menu.js
+++ b/core/menu.js
@@ -98,7 +98,7 @@ const Menu = class {

    /**
     * The menu's root DOM element.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @private
     */
    this.element_ = null;
--- a/core/menuitem.js
+++ b/core/menuitem.js
@@ -54,7 +54,7 @@ const MenuItem = class {

    /**
     * The DOM element for the menu item.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @private
     */
    this.element_ = null;
@@ -107,7 +107,8 @@ const MenuItem = class {
   * @return {!Element} Completed DOM.
   */
  createDom() {
-    const element = document.createElement('div');
+    const element =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    element.id = idGenerator.getNextUniqueId();
    this.element_ = element;

@@ -121,11 +122,13 @@ const MenuItem = class {
                           '') +
        (this.rightToLeft_ ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : '');

-    const content = document.createElement('div');
+    const content =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    content.className = 'blocklyMenuItemContent goog-menuitem-content';
    // Add a checkbox for checkable menu items.
    if (this.checkable_) {
-      const checkbox = document.createElement('div');
+      const checkbox =
+          /** @type {!HTMLDivElement} */ (document.createElement('div'));
      checkbox.className = 'blocklyMenuItemCheckbox goog-menuitem-checkbox';
      content.appendChild(checkbox);
    }
--- a/core/toolbox/category.js
+++ b/core/toolbox/category.js
@@ -67,21 +67,21 @@ class ToolboxCategory extends ToolboxItem {

    /**
     * The html container for the category.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @protected
     */
    this.htmlDiv_ = null;

    /**
     * The html element for the category row.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @protected
     */
    this.rowDiv_ = null;

    /**
     * The html element that holds children elements of the category row.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @protected
     */
    this.rowContents_ = null;
@@ -204,16 +204,18 @@ class ToolboxCategory extends ToolboxItem {

  /**
   * Creates the DOM for the category.
-   * @return {!Element} The parent element for the category.
+   * @return {!HTMLDivElement} The parent element for the category.
   * @protected
   */
  createDom_() {
    this.htmlDiv_ = this.createContainer_();
    aria.setRole(this.htmlDiv_, aria.Role.TREEITEM);
    aria.setState(
-        /** @type {!Element} */ (this.htmlDiv_), aria.State.SELECTED, false);
+        /** @type {!HTMLDivElement} */ (this.htmlDiv_), aria.State.SELECTED,
+        false);
    aria.setState(
-        /** @type {!Element} */ (this.htmlDiv_), aria.State.LEVEL, this.level_);
+        /** @type {!HTMLDivElement} */ (this.htmlDiv_), aria.State.LEVEL,
+        this.level_);

    this.rowDiv_ = this.createRowContainer_();
    this.rowDiv_.style.pointerEvents = 'auto';
@@ -240,11 +242,12 @@ class ToolboxCategory extends ToolboxItem {

  /**
   * Creates the container that holds the row and any subcategories.
-   * @return {!Element} The div that holds the icon and the label.
+   * @return {!HTMLDivElement} The div that holds the icon and the label.
   * @protected
   */
  createContainer_() {
-    const container = document.createElement('div');
+    const container =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(container, this.cssConfig_['container']);
    return container;
  }
@@ -252,11 +255,12 @@ class ToolboxCategory extends ToolboxItem {
  /**
   * Creates the parent of the contents container. All clicks will happen on
   * this div.
-   * @return {!Element} The div that holds the contents container.
+   * @return {!HTMLDivElement} The div that holds the contents container.
   * @protected
   */
  createRowContainer_() {
-    const rowDiv = document.createElement('div');
+    const rowDiv =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(rowDiv, this.cssConfig_['row']);
    let nestedPadding = ToolboxCategory.nestedPadding * this.getLevel();
    nestedPadding = nestedPadding.toString() + 'px';
@@ -268,11 +272,12 @@ class ToolboxCategory extends ToolboxItem {
  /**
   * Creates the container for the label and icon.
   * This is necessary so we can set all subcategory pointer events to none.
-   * @return {!Element} The div that holds the icon and the label.
+   * @return {!HTMLDivElement} The div that holds the icon and the label.
   * @protected
   */
  createRowContentsContainer_() {
-    const contentsContainer = document.createElement('div');
+    const contentsContainer =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(contentsContainer, this.cssConfig_['rowcontentcontainer']);
    return contentsContainer;
  }
--- a/core/toolbox/collapsible_category.js
+++ b/core/toolbox/collapsible_category.js
@@ -47,7 +47,7 @@ class CollapsibleToolboxCategory extends ToolboxCategory {

    /**
     * Container for any child categories.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @protected
     */
    this.subcategoriesDiv_ = null;
@@ -170,11 +170,12 @@ class CollapsibleToolboxCategory extends ToolboxCategory {
  /**
   * Create the DOM for all subcategories.
   * @param {!Array<!IToolboxItem>} subcategories The subcategories.
-   * @return {!Element} The div holding all the subcategories.
+   * @return {!HTMLDivElement} The div holding all the subcategories.
   * @protected
   */
  createSubCategoriesDom_(subcategories) {
-    const contentsContainer = document.createElement('div');
+    const contentsContainer =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(contentsContainer, this.cssConfig_['contents']);

    for (let i = 0; i < subcategories.length; i++) {
@@ -207,7 +208,7 @@ class CollapsibleToolboxCategory extends ToolboxCategory {
      this.closeIcon_(this.iconDom_);
    }
    aria.setState(
-        /** @type {!Element} */ (this.htmlDiv_), aria.State.EXPANDED,
+        /** @type {!HTMLDivElement} */ (this.htmlDiv_), aria.State.EXPANDED,
        isExpanded);

    this.parentToolbox_.handleToolboxItemResize();
--- a/core/toolbox/separator.js
+++ b/core/toolbox/separator.js
@@ -48,7 +48,7 @@ class ToolboxSeparator extends ToolboxItem {
    this.cssConfig_ = {'container': 'blocklyTreeSeparator'};

    /**
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @private
     */
    this.htmlDiv_ = null;
@@ -66,11 +66,12 @@ class ToolboxSeparator extends ToolboxItem {

  /**
   * Creates the DOM for a separator.
-   * @return {!Element} The parent element for the separator.
+   * @return {!HTMLDivElement} The parent element for the separator.
   * @protected
   */
  createDom_() {
-    const container = document.createElement('div');
+    const container =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(container, this.cssConfig_['container']);
    this.htmlDiv_ = container;
    return container;
@@ -80,14 +81,14 @@ class ToolboxSeparator extends ToolboxItem {
   * @override
   */
  getDiv() {
-    return /** @type {!Element} */ (this.htmlDiv_);
+    return /** @type {!HTMLDivElement} */ (this.htmlDiv_);
  }

  /**
   * @override
   */
  dispose() {
-    dom.removeNode(/** @type {!Element} */ (this.htmlDiv_));
+    dom.removeNode(/** @type {!HTMLDivElement} */ (this.htmlDiv_));
  }
 }

--- a/core/toolbox/toolbox.js
+++ b/core/toolbox/toolbox.js
@@ -107,13 +107,13 @@ class Toolbox extends DeleteArea {

    /**
     * The html container for the toolbox.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     */
    this.HtmlDiv = null;

    /**
     * The html container for the contents of a toolbox.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
     * @protected
     */
    this.contentsDiv_ = null;
@@ -241,7 +241,7 @@ class Toolbox extends DeleteArea {
  /**
   * Creates the DOM for the toolbox.
   * @param {!WorkspaceSvg} workspace The workspace this toolbox is on.
-   * @return {!Element} The HTML container for the toolbox.
+   * @return {!HTMLDivElement} The HTML container for the toolbox.
   * @protected
   */
  createDom_(workspace) {
@@ -262,11 +262,12 @@ class Toolbox extends DeleteArea {

  /**
   * Creates the container div for the toolbox.
-   * @return {!Element} The HTML container for the toolbox.
+   * @return {!HTMLDivElement} The HTML container for the toolbox.
   * @protected
   */
  createContainer_() {
-    const toolboxContainer = document.createElement('div');
+    const toolboxContainer =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    toolboxContainer.setAttribute('layout', this.isHorizontal() ? 'h' : 'v');
    dom.addClass(toolboxContainer, 'blocklyToolboxDiv');
    dom.addClass(toolboxContainer, 'blocklyNonSelectable');
@@ -276,11 +277,12 @@ class Toolbox extends DeleteArea {

  /**
   * Creates the container for all the contents in the toolbox.
-   * @return {!Element} The HTML container for the toolbox contents.
+   * @return {!HTMLDivElement} The HTML container for the toolbox contents.
   * @protected
   */
  createContentsContainer_() {
-    const contentsContainer = document.createElement('div');
+    const contentsContainer =
+        /** @type {!HTMLDivElement} */ (document.createElement('div'));
    dom.addClass(contentsContainer, 'blocklyToolboxContents');
    if (this.isHorizontal()) {
      contentsContainer.style.flexDirection = 'row';
@@ -290,9 +292,9 @@ class Toolbox extends DeleteArea {

  /**
   * Adds event listeners to the toolbox container div.
-   * @param {!Element} container The HTML container for the toolbox.
-   * @param {!Element} contentsContainer The HTML container for the contents
-   *     of the toolbox.
+   * @param {!HTMLDivElement} container The HTML container for the toolbox.
+   * @param {!HTMLDivElement} contentsContainer The HTML container for the
+   *     contents of the toolbox.
   * @protected
   */
  attachEvents_(container, contentsContainer) {
--- a/core/tooltip.js
+++ b/core/tooltip.js
@@ -192,13 +192,13 @@ exports.MARGINS = MARGINS;

 /**
 * The HTML container.  Set once by createDom.
- * @type {Element}
+ * @type {?HTMLDivElement}
 */
 let DIV = null;

 /**
 * Returns the HTML tooltip container.
- * @returns {Element} The HTML tooltip container.
+ * @returns {?HTMLDivElement} The HTML tooltip container.
 * @alias Blockly.Tooltip.getDiv
 */
 const getDiv = function() {
@@ -210,7 +210,7 @@ Object.defineProperties(exports, {
  /**
   * The HTML container.  Set once by createDom.
   * @name Blockly.Tooltip.DIV
-   * @type {Element}
+   * @type {HTMLDivElement}
   * @deprecated Use Blockly.Tooltip.getDiv() and .setDiv().
   *     (September 2021)
   * @suppress {checkTypes}
@@ -274,7 +274,7 @@ const createDom = function() {
    return;  // Already created.
  }
  // Create an HTML container for popup overlays (e.g. editor widgets).
-  DIV = document.createElement('div');
+  DIV = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  DIV.className = 'blocklyTooltipDiv';
  const container = common.getParentContainer() || document.body;
  container.appendChild(DIV);
@@ -465,7 +465,7 @@ const renderDefaultContent = function() {
  // Create new text, line by line.
  const lines = tip.split('\n');
  for (let i = 0; i < lines.length; i++) {
-    const div = document.createElement('div');
+    const div = /** @type {!HTMLDivElement} */ (document.createElement('div'));
    div.appendChild(document.createTextNode(lines[i]));
    DIV.appendChild(div);
  }
--- a/core/utils/dom.js
+++ b/core/utils/dom.js
@@ -403,11 +403,11 @@ const measureFontMetrics = function(text, fontSize, fontWeight, fontFamily) {
  span.style.font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
  span.textContent = text;

-  const block = document.createElement('div');
+  const block = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  block.style.width = '1px';
  block.style.height = 0;

-  const div = document.createElement('div');
+  const div = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  div.setAttribute('style', 'position: fixed; top: 0; left: 0; display: flex;');
  div.appendChild(span);
  div.appendChild(block);
--- a/core/widgetdiv.js
+++ b/core/widgetdiv.js
@@ -56,13 +56,13 @@ let themeClassName = '';

 /**
 * The HTML container for popup overlays (e.g. editor widgets).
- * @type {?Element}
+ * @type {?HTMLDivElement}
 */
 let DIV;

 /**
 * Returns the HTML container for editor widgets.
- * @return {?Element} The editor widget container.
+ * @return {?HTMLDivElement} The editor widget container.
 * @alias Blockly.WidgetDiv.getDiv
 */
 const getDiv = function() {
@@ -72,7 +72,7 @@ exports.getDiv = getDiv;

 /**
 * Allows unit tests to reset the div.
- * @param {?Element} newDiv The new value for the DIV field.
+ * @param {?HTMLDivElement} newDiv The new value for the DIV field.
 * @alias Blockly.WidgetDiv.testOnly_setDiv
 * @ignore
 */
@@ -109,7 +109,7 @@ const createDom = function() {
    return;  // Already created.
  }

-  DIV = document.createElement('div');
+  DIV = /** @type {!HTMLDivElement} */ (document.createElement('div'));
  DIV.className = 'blocklyWidgetDiv';
  const container = common.getParentContainer() || document.body;
  container.appendChild(DIV);