Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: makes types of divs more specific #5988

Merged
merged 3 commits into from
Mar 9, 2022
Merged

chore: makes types of divs more specific #5988

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f2b5b9e
chore: cast to a more specific type when creating a div
rachel-fenichel Mar 7, 2022
a35efbf
chore: make types more specific for divs
rachel-fenichel Mar 8, 2022
dc133ee
chore: format
rachel-fenichel Mar 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions core/dropdowndiv.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);

Expand Down
3 changes: 2 additions & 1 deletion core/inject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Comment on lines +62 to +63
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If only it would work to type the variable rather than the initialiser:

  const /** !HTMLDivElement */ subContainer = document.createElement('div');

Alas…

subContainer.className = 'injectionDiv';
subContainer.tabIndex = 0;
aria.setState(subContainer, aria.State.LABEL, Msg['WORKSPACE_ARIA_LABEL']);
Expand Down
2 changes: 1 addition & 1 deletion core/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const Menu = class {

/**
* The menu's root DOM element.
* @type {?Element}
* @type {?HTMLDivElement}
* @private
*/
this.element_ = null;
Expand Down
11 changes: 7 additions & 4 deletions core/menuitem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const MenuItem = class {

/**
* The DOM element for the menu item.
* @type {?Element}
* @type {?HTMLDivElement}
* @private
*/
this.element_ = null;
Expand Down Expand Up @@ -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;

Expand All @@ -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);
}
Expand Down
29 changes: 17 additions & 12 deletions core/toolbox/category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand All @@ -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;
}
Expand Down
9 changes: 5 additions & 4 deletions core/toolbox/collapsible_category.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ class CollapsibleToolboxCategory extends ToolboxCategory {

/**
* Container for any child categories.
* @type {?Element}
* @type {?HTMLDivElement}
* @protected
*/
this.subcategoriesDiv_ = null;
Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -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();
Expand Down
11 changes: 6 additions & 5 deletions core/toolbox/separator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ class ToolboxSeparator extends ToolboxItem {
this.cssConfig_ = {'container': 'blocklyTreeSeparator'};

/**
* @type {?Element}
* @type {?HTMLDivElement}
* @private
*/
this.htmlDiv_ = null;
Expand All @@ -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;
Expand All @@ -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_));
}
}

Expand Down
22 changes: 12 additions & 10 deletions core/toolbox/toolbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
Expand All @@ -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';
Expand All @@ -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) {
Expand Down
10 changes: 5 additions & 5 deletions core/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
Expand Down
4 changes: 2 additions & 2 deletions core/utils/dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading