Update JS code for Switch Access Menu Panel to use ES2016.

This is a pure refactor, with no change to code behavior.

Bug: None
Change-Id: Ib864a858b2de4aca6619ad8b002d59d075f94fa1
Reviewed-on: https://chromium-review.googlesource.com/c/1428602
Commit-Queue: Anastasia Helfinstein <anastasi@google.com>
Auto-Submit: Anastasia Helfinstein <anastasi@google.com>
Reviewed-by: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625322}

chrome/browser/resources/chromeos/switch_access/menu_panel.js

@@ -3,113 +3,123 @@
 // found in the LICENSE file.
 
 /**
- * Class to handle the Switch Access menu panel.
- * @constructor
+ * Handles the Switch Access menu panel.
  */
-function Panel() {}
+const Panel = {
+  /**
+   * This must be kept in sync with the div ID in menu_panel.html.
+   * @type {string}
+   */
+  MENU_ID: 'switchaccess_menu_actions',
+  /**
+   * This must be kept in sync with the class name in menu_panel.css.
+   * @type {string}
+   */
+  FOCUS_CLASS: 'focus',
 
-// This must be kept in sync with the div ID in menu_panel.html
-Panel.MENU_ID = 'switchaccess_menu_actions';
-// This must be kept in sync with the class name in menu_panel.css
-Panel.FOCUS_CLASS = 'focus';
+  /**
+   * Keeps track of whether we have received a 'ready' from the background page.
+   * @type {boolean}
+   */
+  readyReceived: false,
+  /**
+   * Keeps track of whether the context menu is loaded.
+   * @type {boolean}
+   */
+  loaded: false,
 
-Panel.readyReceived = false;
-Panel.loaded = false;
-window.addEventListener('message', Panel.preMessageHandler);
+  /**
+   * Captures messages before the Panel is initialized.
+   */
+  preMessageHandler: () => {
+    Panel.readyReceived = true;
+    if (Panel.loaded)
+      Panel.sendReady();
+    window.removeEventListener('message', Panel.preMessageHandler);
+  },
 
-/**
- * Captures messages before the Panel is initialized.
- */
-Panel.preMessageHandler = function() {
-  Panel.readyReceived = true;
-  if (Panel.loaded)
-    Panel.sendReady();
-  window.removeEventListener('message', Panel.preMessageHandler);
-};
+  /**
+   * Initialize the panel and buttons.
+   */
+  init: () => {
+    Panel.loaded = true;
+    if (Panel.readyReceived)
+      Panel.sendReady();
 
-/**
- * Initialize the panel and buttons.
- */
-Panel.init = function() {
-  Panel.loaded = true;
-  if (Panel.readyReceived)
-    Panel.sendReady();
+    const div = document.getElementById(Panel.MENU_ID);
+    for (const button of div.children)
+      Panel.setupButton(button);
+    window.addEventListener('message', Panel.matchMessage);
+  },
 
-  let div = document.getElementById(Panel.MENU_ID);
-  for (let button of div.children)
-    Panel.setupButton(button);
-  window.addEventListener('message', Panel.matchMessage);
-};
+  /**
+   * Sends a message to the background when both pages are loaded.
+   */
+  sendReady: () => {
+    MessageHandler.sendMessage(
+        MessageHandler.Destination.BACKGROUND, MessageHandler.READY);
+  },
 
-/**
- * Sends a message to the background when both pages are loaded.
- */
-Panel.sendReady = function() {
-  MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, 'ready');
-};
+  /**
+   * Adds an event listener to the given button to send a message when clicked.
+   * @param {!HTMLElement} button
+   */
+  setupButton: (button) => {
+    let id = button.id;
+    button.addEventListener('click', function() {
+      MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, id);
+    }.bind(id));
+  },
 
-/**
- * Adds an event listener to the given button to send a message when clicked.
- * @param {!HTMLElement} button
- */
-Panel.setupButton = function(button) {
-  let id = button.id;
-  button.addEventListener('click', function() {
-    MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, id);
-  }.bind(id));
-};
+  /**
+   * Takes the given message and sees if it matches any expected pattern. If
+   * it does, extract the parameters and pass them to the appropriate handler.
+   * If not, log as an unrecognized action.
+   *
+   * @param {Object} message
+   */
+  matchMessage: (message) => {
+    let matches = message.data.match(MessageHandler.SET_ACTIONS_REGEX);
+    if (matches && matches.length === 2) {
+      const actions = matches[1].split(',');
+      Panel.setActions(actions);
+      return;
+    }
+    matches = message.data.match(MessageHandler.SET_FOCUS_RING_REGEX);
+    if (matches && matches.length === 3) {
+      const id = matches[1];
+      const shouldAdd = matches[2] === 'on';
+      Panel.updateClass(id, Panel.FOCUS_CLASS, shouldAdd);
+      return;
+    }
+    console.log('Action not recognized: ' + message.data);
+  },
 
-/**
- * Takes the given message and sees if it matches any expected pattern. If
- * it does, extract the parameters and pass them to the appropriate handler.
- * If not, log as an unrecognized action.
- *
- * @param {Object} message
- */
-Panel.matchMessage = function(message) {
-  if (message.data === 'ready') {
-    clearInterval(Panel.handshakeInterval);
-    return;
-  }
-  let matches = message.data.match(MessageHandler.SET_ACTIONS_REGEX);
-  if (matches && matches.length === 2) {
-    let actions = matches[1].split(',');
-    Panel.setActions(actions);
-    return;
-  }
-  matches = message.data.match(MessageHandler.SET_FOCUS_RING_REGEX);
-  if (matches && matches.length === 3) {
-    let id = matches[1];
-    let shouldAdd = matches[2] === 'on';
-    Panel.updateStyle(id, Panel.FOCUS_CLASS, shouldAdd);
-    return;
-  }
-  console.log('Action not recognized: ' + message.data);
-};
+  /**
+   * Sets which buttons are enabled/disabled, based on |actions|.
+   * @param {!Array<string>} actions
+   */
+  setActions: (actions) => {
+    const div = document.getElementById(Panel.MENU_ID);
+    for (const button of div.children)
+      button.hidden = !actions.includes(button.id);
+  },
 
-/**
- * Sets which buttons are enabled/disabled, based on |actions|.
- * @param {!Array<string>} actions
- */
-Panel.setActions = function(actions) {
-  let div = document.getElementById(Panel.MENU_ID);
-  for (let button of div.children)
-    button.hidden = !actions.includes(button.id);
-};
-
-/**
- * Sets the style for the element with the given |id| by toggling
- * |className|.
- * @param {string} id
- * @param {string} className
- * @param {bool} shouldAdd
- */
-Panel.updateStyle = function(id, className, shouldAdd) {
-  let htmlNode = document.getElementById(id);
-  if (shouldAdd)
-    htmlNode.classList.add(className);
-  else
-    htmlNode.classList.remove(className);
+  /**
+   * Either adds or removes the class |className| for the element with the given
+   * |id|.
+   * @param {string} id
+   * @param {string} className
+   * @param {bool} shouldAdd
+   */
+  updateClass: (id, className, shouldAdd) => {
+    const htmlNode = document.getElementById(id);
+    if (shouldAdd)
+      htmlNode.classList.add(className);
+    else
+      htmlNode.classList.remove(className);
+  }
 };
 
+window.addEventListener('message', Panel.preMessageHandler);
 window.addEventListener('load', Panel.init);

chrome/browser/resources/chromeos/switch_access/message_handler.js

@@ -26,6 +26,12 @@ const MessageHandler = {
    */
   Destination: {BACKGROUND: 'background', MENU_PANEL: 'menu_panel.html'},
 
+  /**
+   * Constant that signals readiness.
+   * @type {string}
+   */
+  READY: 'ready',
+
   /**
    * Sends a message to the Switch Access menu panel with the given name and
    * parameters.