[Read Aloud] Add event listeners for line spacing.

Bug: 1465029
Change-Id: Ie52ab06816f7445025375b6901dda44e7a6576de
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4781625
Reviewed-by: Kristi Saney <kristislee@google.com>
Commit-Queue: Lauren Winston <lwinston@google.com>
Cr-Commit-Position: refs/heads/main@{#1184453}

chrome/browser/resources/side_panel/read_anything/read_anything_toolbar.html

@@ -128,17 +128,17 @@
       <iron-icon class="button-image" icon="cr:arrow-back"></iron-icon>
       $i18n{back}
     </button>
-    <button class="dropdown-item" on-click="onLineSpacingStandardClick_">
+    <button class="dropdown-item" data$="[[menuStateEnum_.LINE_STANDARD]]">
       <iron-icon class="button-image"
       icon="read-anything:line-spacing-standard"></iron-icon>
       $i18n{lineSpacingStandardTitle}
     </button>
-    <button class="dropdown-item" on-click="onLineSpacingLooseClick_">
+    <button class="dropdown-item" data$="[[menuStateEnum_.LOOSE]]">
       <iron-icon class="button-image"
       icon="read-anything:line-spacing-loose"></iron-icon>
       $i18n{lineSpacingLooseTitle}
     </button>
-    <button class="dropdown-item" on-click="onLineSpacingVeryLooseClick_">
+    <button class="dropdown-item" data$="[[menuStateEnum_.VERY_LOOSE]]">
       <iron-icon class="button-image"
       icon="read-anything:line-spacing-very-loose"></iron-icon>
       $i18n{lineSpacingVeryLooseTitle}

chrome/browser/resources/side_panel/read_anything/read_anything_toolbar.ts

@@ -25,6 +25,12 @@ export interface ReadAnythingToolbar {
   };
 }
 
+enum MenuStateValue {
+  LINE_STANDARD = 0,
+  LOOSE = 1,
+  VERY_LOOSE = 2,
+}
+
 
 const ReadAnythingToolbarBase = WebUiListenerMixin(PolymerElement);
 export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
@@ -38,7 +44,12 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
   }
 
   static get properties() {
-    return {};
+    return {
+      menuStateEnum_: {
+        type: Object,
+        value: MenuStateValue,
+      },
+    };
   }
 
   private showAtPositionConfig_: ShowAtPositionConfig = {
@@ -47,6 +58,10 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
     anchorAlignmentY: AnchorAlignment.AFTER_END,
   };
 
+  // This is needed to keep a reference to any dynamically added callbacks so
+  // that they can be removed with #removeEventListener.
+  private elementCallbackMap = new Map<any, () => void>();
+
   override connectedCallback() {
     super.connectedCallback();
 
@@ -69,6 +84,70 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
         });
       }
     });
+
+    // Configure on-click listeners for line spacing.
+    const onLineSpacingClick = (element: number) => {
+      let data: number|undefined;
+
+      switch (element) {
+        case MenuStateValue.LINE_STANDARD:
+          chrome.readingMode.onStandardLineSpacing();
+          data = chrome.readingMode.standardLineSpacing;
+          break;
+        case MenuStateValue.LOOSE:
+          chrome.readingMode.onLooseLineSpacing();
+          data = chrome.readingMode.looseLineSpacing;
+          break;
+        case MenuStateValue.VERY_LOOSE:
+          chrome.readingMode.onVeryLooseLineSpacing();
+          data = chrome.readingMode.veryLooseLineSpacing;
+          break;
+        default:
+          // Do nothing;
+      }
+
+      if (this.contentPage && data) {
+        this.contentPage.updateLineSpacing(
+            chrome.readingMode.getLineSpacingValue(data));
+      }
+      this.closeMenus_();
+    };
+    this.addOnClickListeners(this.$.lineSpacingSubmenu, onLineSpacingClick);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeOnClickListeners(this.$.lineSpacingSubmenu);
+  }
+
+  private removeOnClickListeners(menu: CrActionMenuElement) {
+    const nodes = Array.from(menu.children);
+    nodes.forEach((element) => {
+      if ((element instanceof HTMLButtonElement) &&
+          !element.classList.contains('back') && element.hasAttribute('data')) {
+        const callback = this.elementCallbackMap.get(element);
+        if (callback) {
+          element.removeEventListener('click', callback);
+        }
+        this.elementCallbackMap.delete(element);
+      }
+    });
+  }
+
+  private addOnClickListeners(
+      menu: CrActionMenuElement,
+      onMenuElementClick: (element: number) => void) {
+    const nodes = Array.from(menu.children);
+    nodes.forEach((element) => {
+      if ((element instanceof HTMLButtonElement) &&
+          !element.classList.contains('back') && element.hasAttribute('data')) {
+        const callback = () => {
+          onMenuElementClick(parseInt(element.getAttribute('data')!));
+        };
+        this.elementCallbackMap.set(element, callback);
+        element.addEventListener('click', callback);
+      }
+    });
   }
 
   private onDefaultTheme_() {
@@ -145,30 +224,6 @@ export class ReadAnythingToolbar extends ReadAnythingToolbarBase {
     menuToOpen.showAt(button, this.showAtPositionConfig_);
   }
 
-  private onLineSpacingStandardClick_() {
-    chrome.readingMode.onStandardLineSpacing();
-    this.onLineSpacingClick_(chrome.readingMode.standardLineSpacing);
-  }
-
-  private onLineSpacingLooseClick_() {
-    chrome.readingMode.onLooseLineSpacing();
-    this.onLineSpacingClick_(chrome.readingMode.looseLineSpacing);
-  }
-
-  private onLineSpacingVeryLooseClick_() {
-    chrome.readingMode.onVeryLooseLineSpacing();
-    this.onLineSpacingClick_(chrome.readingMode.veryLooseLineSpacing);
-  }
-
-  private onLineSpacingClick_(lineSpacing: number) {
-    if (this.contentPage) {
-      this.contentPage.updateLineSpacing(
-          chrome.readingMode.getLineSpacingValue(lineSpacing));
-    }
-
-    this.closeMenus_();
-  }
-
   private onLetterSpacingStandardClick_() {
     chrome.readingMode.onStandardLetterSpacing();
     this.onLetterSpacingClick_(chrome.readingMode.standardLetterSpacing);