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.

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

fix!: removed redundant blockyTreeRowContentContainer div #8373

Closed
wants to merge 5 commits into from
Closed
Changes from all commits
Commits
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
49 changes: 14 additions & 35 deletions core/toolbox/category.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,14 +70,11 @@ export class ToolboxCategory
/** The HTML element for the category row. */
protected rowDiv_: HTMLDivElement | null = null;

/** The HTML element that holds children elements of the category row. */
protected rowContents_: HTMLDivElement | null = null;

/** The HTML element for the toolbox icon. */
protected iconDom_: Element | null = null;
protected iconDom_: HTMLElement | null = null;

/** The HTML element for the toolbox label. */
protected labelDom_: Element | null = null;
protected labelDom_: HTMLElement | null = null;
protected cssConfig_: CssConfig;

/** True if the category is meant to be hidden, false otherwise. */
Expand Down Expand Up @@ -131,12 +128,11 @@ export class ToolboxCategory
*/
protected makeDefaultCssConfig_(): CssConfig {
return {
'container': 'blocklyToolboxCategoryContainer',
'row': 'blocklyToolboxCategory',
'rowcontentcontainer': 'blocklyTreeRowContentContainer',
'icon': 'blocklyToolboxCategoryIcon',
'container': 'blocklyToolboxCategory',
'row': 'blocklyTreeRow',
'icon': 'blocklyTreeIcon',
'label': 'blocklyTreeLabel',
'contents': 'blocklyToolboxCategoryGroup',
'contents': 'blocklyToolboxContents',
'selected': 'blocklyTreeSelected',
'openicon': 'blocklyTreeIconOpen',
'closedicon': 'blocklyTreeIconClosed',
Expand Down Expand Up @@ -198,18 +194,16 @@ export class ToolboxCategory
this.rowDiv_.style.pointerEvents = 'auto';
this.htmlDiv_.appendChild(this.rowDiv_);

this.rowContents_ = this.createRowContentsContainer_();
this.rowContents_.style.pointerEvents = 'none';
this.rowDiv_.appendChild(this.rowContents_);

this.iconDom_ = this.createIconDom_();
aria.setRole(this.iconDom_, aria.Role.PRESENTATION);
this.rowContents_.appendChild(this.iconDom_);
this.iconDom_.style.pointerEvents = 'none';
aria.setRole(this.iconDom_ as Element, aria.Role.PRESENTATION);
this.rowDiv_.appendChild(this.iconDom_ as Node);

this.labelDom_ = this.createLabelDom_(this.name_);
this.rowContents_.appendChild(this.labelDom_);

this.labelDom_.style.pointerEvents = 'none';
this.rowDiv_.appendChild(this.labelDom_ as Node);
const id = this.labelDom_.getAttribute('id');

if (id) {
aria.setState(this.htmlDiv_, aria.State.LABELLEDBY, id);
}
Expand Down Expand Up @@ -254,27 +248,12 @@ export class ToolboxCategory
return rowDiv;
}

/**
* Creates the container for the label and icon.
* This is necessary so we can set all subcategory pointer events to none.
*
* @returns The div that holds the icon and the label.
*/
protected createRowContentsContainer_(): HTMLDivElement {
const contentsContainer = document.createElement('div');
const className = this.cssConfig_['rowcontentcontainer'];
if (className) {
dom.addClass(contentsContainer, className);
}
return contentsContainer;
}

/**
* Creates the span that holds the category icon.
*
* @returns The span that holds the category icon.
*/
protected createIconDom_(): Element {
protected createIconDom_(): HTMLElement {
const toolboxIcon = document.createElement('span');
if (!this.parentToolbox_.isHorizontal()) {
const className = this.cssConfig_['icon'];
Expand All @@ -294,7 +273,7 @@ export class ToolboxCategory
* @param name The name of the category.
* @returns The span that holds the category label.
*/
protected createLabelDom_(name: string): Element {
protected createLabelDom_(name: string): HTMLElement {
const toolboxLabel = document.createElement('span');
toolboxLabel.setAttribute('id', this.getId() + '.label');
toolboxLabel.textContent = name;
Expand Down
Loading