chore: remove underscores from menuitem and menu (#6567)

* chore: remove underscores in menuitem.ts

* chore: remove underscores in menu.ts

* chore: format

core/menu.ts

@@ -33,7 +33,7 @@ export class Menu {
    * (Nulls are never in the array, but typing the array as nullable prevents
    * the compiler from objecting to .indexOf(null))
    */
-  private readonly menuItems_: MenuItem[] = [];
+  private readonly menuItems: MenuItem[] = [];
 
   /**
    * Coordinates of the mousedown event that caused this menu to open. Used to
@@ -46,28 +46,28 @@ export class Menu {
    * This is the element that we will listen to the real focus events on.
    * A value of null means no menu item is highlighted.
    */
-  private highlightedItem_: MenuItem|null = null;
+  private highlightedItem: MenuItem|null = null;
 
   /** Mouse over event data. */
-  private mouseOverHandler_: browserEvents.Data|null = null;
+  private mouseOverHandler: browserEvents.Data|null = null;
 
   /** Click event data. */
-  private clickHandler_: browserEvents.Data|null = null;
+  private clickHandler: browserEvents.Data|null = null;
 
   /** Mouse enter event data. */
-  private mouseEnterHandler_: browserEvents.Data|null = null;
+  private mouseEnterHandler: browserEvents.Data|null = null;
 
   /** Mouse leave event data. */
-  private mouseLeaveHandler_: browserEvents.Data|null = null;
+  private mouseLeaveHandler: browserEvents.Data|null = null;
 
   /** Key down event data. */
-  private onKeyDownHandler_: browserEvents.Data|null = null;
+  private onKeyDownHandler: browserEvents.Data|null = null;
 
   /** The menu's root DOM element. */
-  private element_: HTMLDivElement|null = null;
+  private element: HTMLDivElement|null = null;
 
   /** ARIA name for this menu. */
-  private roleName_: aria.Role|null = null;
+  private roleName: aria.Role|null = null;
 
   /** Constructs a new Menu instance. */
   constructor() {}
@@ -79,7 +79,7 @@ export class Menu {
    * @internal
    */
   addChild(menuItem: MenuItem) {
-    this.menuItems_.push(menuItem);
+    this.menuItems.push(menuItem);
   }
 
   /**
@@ -93,27 +93,27 @@ export class Menu {
     // goog-menu is deprecated, use blocklyMenu.  May 2020.
     element.className = 'blocklyMenu goog-menu blocklyNonSelectable';
     element.tabIndex = 0;
-    if (this.roleName_) {
-      aria.setRole(element, this.roleName_);
+    if (this.roleName) {
+      aria.setRole(element, this.roleName);
     }
-    this.element_ = element;
+    this.element = element;
 
     // Add menu items.
-    for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) {
+    for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) {
       element.appendChild(menuItem.createDom());
     }
 
     // Add event handlers.
-    this.mouseOverHandler_ = browserEvents.conditionalBind(
-        element, 'mouseover', this, this.handleMouseOver_, true);
-    this.clickHandler_ = browserEvents.conditionalBind(
-        element, 'click', this, this.handleClick_, true);
-    this.mouseEnterHandler_ = browserEvents.conditionalBind(
-        element, 'mouseenter', this, this.handleMouseEnter_, true);
-    this.mouseLeaveHandler_ = browserEvents.conditionalBind(
-        element, 'mouseleave', this, this.handleMouseLeave_, true);
-    this.onKeyDownHandler_ = browserEvents.conditionalBind(
-        element, 'keydown', this, this.handleKeyEvent_);
+    this.mouseOverHandler = browserEvents.conditionalBind(
+        element, 'mouseover', this, this.handleMouseOver, true);
+    this.clickHandler = browserEvents.conditionalBind(
+        element, 'click', this, this.handleClick, true);
+    this.mouseEnterHandler = browserEvents.conditionalBind(
+        element, 'mouseenter', this, this.handleMouseEnter, true);
+    this.mouseLeaveHandler = browserEvents.conditionalBind(
+        element, 'mouseleave', this, this.handleMouseLeave, true);
+    this.onKeyDownHandler = browserEvents.conditionalBind(
+        element, 'keydown', this, this.handleKeyEvent);
 
     container.appendChild(element);
     return element;
@@ -126,7 +126,7 @@ export class Menu {
    * @internal
    */
   getElement(): HTMLDivElement|null {
-    return this.element_;
+    return this.element;
   }
 
   /**
@@ -143,7 +143,7 @@ export class Menu {
   }
 
   /** Blur the menu element. */
-  private blur_() {
+  private blur() {
     const el = this.getElement();
     if (el) {
       el.blur();
@@ -158,38 +158,38 @@ export class Menu {
    * @internal
    */
   setRole(roleName: aria.Role) {
-    this.roleName_ = roleName;
+    this.roleName = roleName;
   }
 
   /** Dispose of this menu. */
   dispose() {
     // Remove event handlers.
-    if (this.mouseOverHandler_) {
-      browserEvents.unbind(this.mouseOverHandler_);
-      this.mouseOverHandler_ = null;
+    if (this.mouseOverHandler) {
+      browserEvents.unbind(this.mouseOverHandler);
+      this.mouseOverHandler = null;
     }
-    if (this.clickHandler_) {
-      browserEvents.unbind(this.clickHandler_);
-      this.clickHandler_ = null;
+    if (this.clickHandler) {
+      browserEvents.unbind(this.clickHandler);
+      this.clickHandler = null;
     }
-    if (this.mouseEnterHandler_) {
-      browserEvents.unbind(this.mouseEnterHandler_);
-      this.mouseEnterHandler_ = null;
+    if (this.mouseEnterHandler) {
+      browserEvents.unbind(this.mouseEnterHandler);
+      this.mouseEnterHandler = null;
     }
-    if (this.mouseLeaveHandler_) {
-      browserEvents.unbind(this.mouseLeaveHandler_);
-      this.mouseLeaveHandler_ = null;
+    if (this.mouseLeaveHandler) {
+      browserEvents.unbind(this.mouseLeaveHandler);
+      this.mouseLeaveHandler = null;
     }
-    if (this.onKeyDownHandler_) {
-      browserEvents.unbind(this.onKeyDownHandler_);
-      this.onKeyDownHandler_ = null;
+    if (this.onKeyDownHandler) {
+      browserEvents.unbind(this.onKeyDownHandler);
+      this.onKeyDownHandler = null;
     }
 
     // Remove menu items.
-    for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) {
+    for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) {
       menuItem.dispose();
     }
-    this.element_ = null;
+    this.element = null;
   }
 
   // Child component management.
@@ -201,7 +201,7 @@ export class Menu {
    * @param elem DOM element whose owner is to be returned.
    * @returns Menu item for which the DOM element belongs to.
    */
-  private getMenuItem_(elem: Element): MenuItem|null {
+  private getMenuItem(elem: Element): MenuItem|null {
     const menuElem = this.getElement();
     // Node might be the menu border (resulting in no associated menu item), or
     // a menu item's div, or some element within the menu item.
@@ -211,7 +211,7 @@ export class Menu {
     while (currentElement && currentElement !== menuElem) {
       if (currentElement.classList.contains('blocklyMenuItem')) {
         // Having found a menu item's div, locate that menu item in this menu.
-        for (let i = 0, menuItem; menuItem = this.menuItems_[i]; i++) {
+        for (let i = 0, menuItem; menuItem = this.menuItems[i]; i++) {
           if (menuItem.getElement() === currentElement) {
             return menuItem;
           }
@@ -231,14 +231,14 @@ export class Menu {
    * @internal
    */
   setHighlighted(item: MenuItem|null) {
-    const currentHighlighted = this.highlightedItem_;
+    const currentHighlighted = this.highlightedItem;
     if (currentHighlighted) {
       currentHighlighted.setHighlighted(false);
-      this.highlightedItem_ = null;
+      this.highlightedItem = null;
     }
     if (item) {
       item.setHighlighted(true);
-      this.highlightedItem_ = item;
+      this.highlightedItem = item;
       // Bring the highlighted item into view. This has no effect if the menu is
       // not scrollable.
       const el = this.getElement() as Element;
@@ -255,10 +255,10 @@ export class Menu {
    * @internal
    */
   highlightNext() {
-    const index = this.highlightedItem_ ?
-        this.menuItems_.indexOf(this.highlightedItem_) :
+    const index = this.highlightedItem ?
+        this.menuItems.indexOf(this.highlightedItem) :
         -1;
-    this.highlightHelper_(index, 1);
+    this.highlightHelper(index, 1);
   }
 
   /**
@@ -268,20 +268,20 @@ export class Menu {
    * @internal
    */
   highlightPrevious() {
-    const index = this.highlightedItem_ ?
-        this.menuItems_.indexOf(this.highlightedItem_) :
+    const index = this.highlightedItem ?
+        this.menuItems.indexOf(this.highlightedItem) :
         -1;
-    this.highlightHelper_(index < 0 ? this.menuItems_.length : index, -1);
+    this.highlightHelper(index < 0 ? this.menuItems.length : index, -1);
   }
 
   /** Highlights the first highlightable item. */
-  private highlightFirst_() {
-    this.highlightHelper_(-1, 1);
+  private highlightFirst() {
+    this.highlightHelper(-1, 1);
   }
 
   /** Highlights the last highlightable item. */
-  private highlightLast_() {
-    this.highlightHelper_(this.menuItems_.length, -1);
+  private highlightLast() {
+    this.highlightHelper(this.menuItems.length, -1);
   }
 
   /**
@@ -291,10 +291,10 @@ export class Menu {
    * @param startIndex Start index.
    * @param delta Step direction: 1 to go down, -1 to go up.
    */
-  private highlightHelper_(startIndex: number, delta: number) {
+  private highlightHelper(startIndex: number, delta: number) {
     let index = startIndex + delta;
     let menuItem;
-    while (menuItem = this.menuItems_[index]) {
+    while (menuItem = this.menuItems[index]) {
       if (menuItem.isEnabled()) {
         this.setHighlighted(menuItem);
         break;
@@ -310,12 +310,12 @@ export class Menu {
    *
    * @param e Mouse event to handle.
    */
-  private handleMouseOver_(e: Event) {
-    const menuItem = this.getMenuItem_(e.target as Element);
+  private handleMouseOver(e: Event) {
+    const menuItem = this.getMenuItem(e.target as Element);
 
     if (menuItem) {
       if (menuItem.isEnabled()) {
-        if (this.highlightedItem_ !== menuItem) {
+        if (this.highlightedItem !== menuItem) {
           this.setHighlighted(menuItem);
         }
       } else {
@@ -329,7 +329,7 @@ export class Menu {
    *
    * @param e Click event to handle.
    */
-  private handleClick_(e: Event) {
+  private handleClick(e: Event) {
     const oldCoords = this.openingCoords;
     // Clear out the saved opening coords immediately so they're not used twice.
     this.openingCoords = null;
@@ -351,7 +351,7 @@ export class Menu {
       }
     }
 
-    const menuItem = this.getMenuItem_(e.target as Element);
+    const menuItem = this.getMenuItem(e.target as Element);
     if (menuItem) {
       menuItem.performAction();
     }
@@ -362,7 +362,7 @@ export class Menu {
    *
    * @param _e Mouse event to handle.
    */
-  private handleMouseEnter_(_e: Event) {
+  private handleMouseEnter(_e: Event) {
     this.focus();
   }
 
@@ -371,9 +371,9 @@ export class Menu {
    *
    * @param _e Mouse event to handle.
    */
-  private handleMouseLeave_(_e: Event) {
+  private handleMouseLeave(_e: Event) {
     if (this.getElement()) {
-      this.blur_();
+      this.blur();
       this.setHighlighted(null);
     }
   }
@@ -387,27 +387,20 @@ export class Menu {
    *
    * @param e Key event to handle.
    */
-  private handleKeyEvent_(e: Event) {
-    if (!this.menuItems_.length) {
+  private handleKeyEvent(e: Event) {
+    if (!this.menuItems.length) {
       // Empty menu.
       return;
     }
-    // AnyDuringMigration because:  Property 'altKey' does not exist on type
-    // 'Event'. AnyDuringMigration because:  Property 'metaKey' does not exist
-    // on type 'Event'. AnyDuringMigration because:  Property 'ctrlKey' does not
-    // exist on type 'Event'. AnyDuringMigration because:  Property 'shiftKey'
-    // does not exist on type 'Event'.
-    if ((e as AnyDuringMigration).shiftKey ||
-        (e as AnyDuringMigration).ctrlKey ||
-        (e as AnyDuringMigration).metaKey || (e as AnyDuringMigration).altKey) {
+    const keyboardEvent = e as KeyboardEvent;
+    if (keyboardEvent.shiftKey || keyboardEvent.ctrlKey ||
+        keyboardEvent.metaKey || keyboardEvent.altKey) {
       // Do not handle the key event if any modifier key is pressed.
       return;
     }
 
-    const highlighted = this.highlightedItem_;
-    // AnyDuringMigration because:  Property 'keyCode' does not exist on type
-    // 'Event'.
-    switch ((e as AnyDuringMigration).keyCode) {
+    const highlighted = this.highlightedItem;
+    switch (keyboardEvent.keyCode) {
       case KeyCodes.ENTER:
       case KeyCodes.SPACE:
         if (highlighted) {
@@ -425,12 +418,12 @@ export class Menu {
 
       case KeyCodes.PAGE_UP:
       case KeyCodes.HOME:
-        this.highlightFirst_();
+        this.highlightFirst();
         break;
 
       case KeyCodes.PAGE_DOWN:
       case KeyCodes.END:
-        this.highlightLast_();
+        this.highlightLast();
         break;
 
       default:
@@ -449,10 +442,10 @@ export class Menu {
    * @internal
    */
   getSize(): Size {
-    const menuDom = this.getElement();
-    const menuSize = style.getSize(menuDom as Element);
+    const menuDom = this.getElement() as HTMLDivElement;
+    const menuSize = style.getSize(menuDom);
     // Recalculate height for the total content, not only box height.
-    menuSize.height = menuDom!.scrollHeight;
+    menuSize.height = menuDom.scrollHeight;
     return menuSize;
   }
 }

core/menuitem.ts

@@ -24,28 +24,28 @@ import * as idGenerator from './utils/idgenerator.js';
  */
 export class MenuItem {
   /** Is the menu item clickable, as opposed to greyed-out. */
-  private enabled_ = true;
+  private enabled = true;
 
   /** The DOM element for the menu item. */
-  private element_: HTMLDivElement|null = null;
+  private element: HTMLDivElement|null = null;
 
   /** Whether the menu item is rendered right-to-left. */
-  private rightToLeft_ = false;
+  private rightToLeft = false;
 
   /** ARIA name for this menu. */
-  private roleName_: aria.Role|null = null;
+  private roleName: aria.Role|null = null;
 
   /** Is this menu item checkable. */
-  private checkable_ = false;
+  private checkable = false;
 
   /** Is this menu item currently checked. */
-  private checked_ = false;
+  private checked = false;
 
   /** Is this menu item currently highlighted. */
-  private highlight_ = false;
+  private highlight = false;
 
   /** Bound function to call when this menu item is clicked. */
-  private actionHandler_: Function|null = null;
+  private actionHandler: Function|null = null;
 
   /**
    * @param content Text caption to display as the content of the item, or a
@@ -64,22 +64,22 @@ export class MenuItem {
   createDom(): Element {
     const element = (document.createElement('div'));
     element.id = idGenerator.getNextUniqueId();
-    this.element_ = element;
+    this.element = element;
 
     // Set class and style
     // goog-menuitem* is deprecated, use blocklyMenuItem*.  May 2020.
     element.className = 'blocklyMenuItem goog-menuitem ' +
-        (this.enabled_ ? '' :
-                         'blocklyMenuItemDisabled goog-menuitem-disabled ') +
-        (this.checked_ ? 'blocklyMenuItemSelected goog-option-selected ' : '') +
-        (this.highlight_ ? 'blocklyMenuItemHighlight goog-menuitem-highlight ' :
-                           '') +
-        (this.rightToLeft_ ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : '');
+        (this.enabled ? '' :
+                        'blocklyMenuItemDisabled goog-menuitem-disabled ') +
+        (this.checked ? 'blocklyMenuItemSelected goog-option-selected ' : '') +
+        (this.highlight ? 'blocklyMenuItemHighlight goog-menuitem-highlight ' :
+                          '') +
+        (this.rightToLeft ? 'blocklyMenuItemRtl goog-menuitem-rtl ' : '');
 
     const content = (document.createElement('div'));
     content.className = 'blocklyMenuItemContent goog-menuitem-content';
     // Add a checkbox for checkable menu items.
-    if (this.checkable_) {
+    if (this.checkable) {
       const checkbox = (document.createElement('div'));
       checkbox.className = 'blocklyMenuItemCheckbox goog-menuitem-checkbox';
       content.appendChild(checkbox);
@@ -93,20 +93,19 @@ export class MenuItem {
     element.appendChild(content);
 
     // Initialize ARIA role and state.
-    if (this.roleName_) {
-      aria.setRole(element, this.roleName_);
+    if (this.roleName) {
+      aria.setRole(element, this.roleName);
     }
     aria.setState(
-        element, aria.State.SELECTED,
-        this.checkable_ && this.checked_ || false);
-    aria.setState(element, aria.State.DISABLED, !this.enabled_);
+        element, aria.State.SELECTED, this.checkable && this.checked || false);
+    aria.setState(element, aria.State.DISABLED, !this.enabled);
 
     return element;
   }
 
   /** Dispose of this menu item. */
   dispose() {
-    this.element_ = null;
+    this.element = null;
   }
 
   /**
@@ -116,7 +115,7 @@ export class MenuItem {
    * @internal
    */
   getElement(): Element|null {
-    return this.element_;
+    return this.element;
   }
 
   /**
@@ -126,7 +125,7 @@ export class MenuItem {
    * @internal
    */
   getId(): string {
-    return this.element_!.id;
+    return this.element!.id;
   }
 
   /**
@@ -146,7 +145,7 @@ export class MenuItem {
    * @internal
    */
   setRightToLeft(rtl: boolean) {
-    this.rightToLeft_ = rtl;
+    this.rightToLeft = rtl;
   }
 
   /**
@@ -156,7 +155,7 @@ export class MenuItem {
    * @internal
    */
   setRole(roleName: aria.Role) {
-    this.roleName_ = roleName;
+    this.roleName = roleName;
   }
 
   /**
@@ -167,7 +166,7 @@ export class MenuItem {
    * @internal
    */
   setCheckable(checkable: boolean) {
-    this.checkable_ = checkable;
+    this.checkable = checkable;
   }
 
   /**
@@ -177,7 +176,7 @@ export class MenuItem {
    * @internal
    */
   setChecked(checked: boolean) {
-    this.checked_ = checked;
+    this.checked = checked;
   }
 
   /**
@@ -187,7 +186,7 @@ export class MenuItem {
    * @internal
    */
   setHighlighted(highlight: boolean) {
-    this.highlight_ = highlight;
+    this.highlight = highlight;
 
     const el = this.getElement();
     if (el && this.isEnabled()) {
@@ -212,7 +211,7 @@ export class MenuItem {
    * @internal
    */
   isEnabled(): boolean {
-    return this.enabled_;
+    return this.enabled;
   }
 
   /**
@@ -222,7 +221,7 @@ export class MenuItem {
    * @internal
    */
   setEnabled(enabled: boolean) {
-    this.enabled_ = enabled;
+    this.enabled = enabled;
   }
 
   /**
@@ -232,8 +231,8 @@ export class MenuItem {
    * @internal
    */
   performAction() {
-    if (this.isEnabled() && this.actionHandler_) {
-      this.actionHandler_(this);
+    if (this.isEnabled() && this.actionHandler) {
+      this.actionHandler(this);
     }
   }
 
@@ -246,6 +245,6 @@ export class MenuItem {
    * @internal
    */
   onAction(fn: (p1: MenuItem) => void, obj: object) {
-    this.actionHandler_ = fn.bind(obj);
+    this.actionHandler = fn.bind(obj);
   }
 }