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() {}
-
-// 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';
+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',
 
-Panel.readyReceived = false;
-Panel.loaded = false;
-window.addEventListener('message', Panel.preMessageHandler);
+  /**
+   * 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,
 
-/**
+  /**
    * Captures messages before the Panel is initialized.
    */
-Panel.preMessageHandler = function() {
+  preMessageHandler: () => {
     Panel.readyReceived = true;
     if (Panel.loaded)
       Panel.sendReady();
     window.removeEventListener('message', Panel.preMessageHandler);
-};
+  },
 
-/**
+  /**
    * Initialize the panel and buttons.
    */
-Panel.init = function() {
+  init: () => {
     Panel.loaded = true;
     if (Panel.readyReceived)
       Panel.sendReady();
 
-  let div = document.getElementById(Panel.MENU_ID);
-  for (let button of div.children)
+    const div = document.getElementById(Panel.MENU_ID);
+    for (const button of div.children)
       Panel.setupButton(button);
     window.addEventListener('message', Panel.matchMessage);
-};
+  },
 
-/**
+  /**
    * Sends a message to the background when both pages are loaded.
    */
-Panel.sendReady = function() {
-  MessageHandler.sendMessage(MessageHandler.Destination.BACKGROUND, 'ready');
-};
+  sendReady: () => {
+    MessageHandler.sendMessage(
+        MessageHandler.Destination.BACKGROUND, MessageHandler.READY);
+  },
 
-/**
+  /**
    * Adds an event listener to the given button to send a message when clicked.
    * @param {!HTMLElement} button
    */
-Panel.setupButton = function(button) {
+  setupButton: (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
    */
-Panel.matchMessage = function(message) {
-  if (message.data === 'ready') {
-    clearInterval(Panel.handshakeInterval);
-    return;
-  }
+  matchMessage: (message) => {
     let matches = message.data.match(MessageHandler.SET_ACTIONS_REGEX);
     if (matches && matches.length === 2) {
-    let actions = matches[1].split(',');
+      const 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);
+      const id = matches[1];
+      const shouldAdd = matches[2] === 'on';
+      Panel.updateClass(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
    */
-Panel.setActions = function(actions) {
-  let div = document.getElementById(Panel.MENU_ID);
-  for (let button of div.children)
+  setActions: (actions) => {
+    const div = document.getElementById(Panel.MENU_ID);
+    for (const button of div.children)
       button.hidden = !actions.includes(button.id);
-};
+  },
 
-/**
- * Sets the style for the element with the given |id| by toggling
- * |className|.
+  /**
+   * Either adds or removes the class |className| for the element with the given
+   * |id|.
    * @param {string} id
    * @param {string} className
    * @param {bool} shouldAdd
    */
-Panel.updateStyle = function(id, className, shouldAdd) {
-  let htmlNode = document.getElementById(id);
+  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.