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

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);
 

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']);

core/menu.js

@@ -98,7 +98,7 @@ const Menu = class {
 
     /**
      * The menu's root DOM element.
-     * @type {?Element}
+     * @type {?HTMLDivElement}
      * @private
      */
     this.element_ = null;

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);
     }

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,23 +242,25 @@ 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;
   }
 
   /**
    * 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;
   }

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();

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_));
   }
 }
 

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) {

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);
   }

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);