a11y-extensions: modularize Panel

This is part of the go/unified-accessibility-component-extensions effort
(item 3).

Process:
- open
  out/Release/resources/chromeos/accessibility/chromevox/chromeVox*.js
- search for the last instances of 'goog.provide' (which is in
  topological dependency order)
- convert that class to an ES6 module

R=josiahk@google.com

AX-Relnotes: n/a
Bug: none
Test: cq
Change-Id: I0efe93817baabbfe7248aa1750ca87c6f0afe682
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3535079
Reviewed-by: Josiah Krutz <josiahk@google.com>
Commit-Queue: David Tseng <dtseng@chromium.org>
Cr-Commit-Position: refs/heads/main@{#983018}

chrome/browser/resources/chromeos/accessibility/chromevox/BUILD.gn

@@ -92,11 +92,6 @@ chromevox_modules = [
   "injected/loader.js",
   "injected/script_installer.js",
   "learn_mode/kbexplorer.js",
-  "panel/i_search.js",
-  "panel/panel.js",
-  "panel/panel_menu.js",
-  "panel/panel_menu_item.js",
-  "panel/panel_mode.js",
   "third_party/tamachiyomi/ja_phonetic_data.js",
   "third_party/tamachiyomi/ja_phonetic_map.js",
 ]
@@ -132,6 +127,12 @@ chromevox_es6_modules = [
   "common/tts_background.js",
   "common/tts_base.js",
   "options/options.js",
+  "panel/i_search.js",
+  "panel/panel.js",
+  "panel/panel_interface.js",
+  "panel/panel_menu.js",
+  "panel/panel_menu_item.js",
+  "panel/panel_mode.js",
 ]
 
 # Closure library modules needed by chromevox.

chrome/browser/resources/chromeos/accessibility/chromevox/background/panel_command.js

@@ -79,4 +79,5 @@ PanelCommandType = {
   OPEN_MENUS_MOST_RECENT: 'open_menus_most_recent',
   SEARCH: 'search',
   TUTORIAL: 'tutorial',
+  ENABLE_TEST_HOOKS: 'enable_test_hooks',
 };

chrome/browser/resources/chromeos/accessibility/chromevox/panel/i_search.js

@@ -6,17 +6,8 @@
  * @fileoverview Objects related to incremental search.
  */
 
-goog.provide('ISearch');
-goog.provide('ISearchHandler');
-goog.provide('ISearchUI');
+import {PanelInterface} from './panel_interface.js';
 
-goog.require('AutomationUtil');
-goog.require('ChromeVoxState');
-goog.require('Output');
-goog.require('constants');
-goog.require('cursors.Cursor');
-
-goog.scope(function() {
 const AutomationNode = chrome.automation.AutomationNode;
 const Dir = constants.Dir;
 const RoleType = chrome.automation.RoleType;
@@ -26,7 +17,7 @@ const RoleType = chrome.automation.RoleType;
  * incremental search.
  * @interface
  */
-ISearchHandler = class {
+class ISearchHandler {
   constructor() {}
 
   /**
@@ -45,13 +36,13 @@ ISearchHandler = class {
    * @param {number} end The index into the name where the search match ends.
    */
   onSearchResultChanged(node, start, end) {}
-};
+}
 
 
 /**
  * Controls an incremental search.
  */
-ISearch = class {
+export class ISearch {
   /**
    * @param {!cursors.Cursor} cursor
    */
@@ -88,7 +79,7 @@ ISearch = class {
   /**
    * Performs a search.
    * @param {string} searchStr
-   * @param {Dir} dir
+   * @param {constants.Dir} dir
    * @param {boolean=} opt_nextObject
    */
   search(searchStr, dir, opt_nextObject) {
@@ -125,13 +116,13 @@ ISearch = class {
   clear() {
     clearTimeout(this.callbackId_);
   }
-};
+}
 
 
 /**
  * @implements {ISearchHandler}
  */
-ISearchUI = class {
+export class ISearchUI {
   /**
    * @param {Element} input
    */
@@ -184,10 +175,10 @@ ISearchUI = class {
         this.dir_ = Dir.FORWARD;
         break;
       case 'Escape':
-        Panel.closeMenusAndRestoreFocus();
+        PanelInterface.instance.closeMenusAndRestoreFocus();
         return false;
       case 'Enter':
-        Panel.setPendingCallback(function() {
+        PanelInterface.instance.setPendingCallback(function() {
           const node = this.iSearch_.cursor.node;
           if (!node) {
             return;
@@ -196,7 +187,7 @@ ISearchUI = class {
               .ChromeVoxState.instance['navigateToRange'](
                   cursors.Range.fromNode(node));
         }.bind(this));
-        Panel.closeMenusAndRestoreFocus();
+        PanelInterface.instance.closeMenusAndRestoreFocus();
         return false;
       default:
         return false;
@@ -268,5 +259,4 @@ ISearchUI = class {
     input.removeEventListener('keydown', this.onKeyDown, true);
     input.removeEventListener('textInput', this.onTextInput, false);
   }
-};
-});  // goog.scope
+}

chrome/browser/resources/chromeos/accessibility/chromevox/panel/i_search_test.js

@@ -16,6 +16,12 @@ ChromeVoxISearchTest = class extends ChromeVoxNextE2ETest {
     return ['ISearch', 'ISearchHandler'];
   }
 
+  /** @override */
+  async setUpDeferred() {
+    await super.setUpDeferred();
+    await importModule('ISearch', '/chromevox/panel/i_search.js');
+  }
+
   get linksAndHeadingsDoc() {
     return `
       <p>start</p>

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel.html

@@ -9,6 +9,8 @@
 <link href="panel.css" rel="stylesheet" type="text/css">
 
 <script type="text/javascript" src="../chromeVoxPanelScript.js"></script>
+
+<script type="module" src="panel.js"></script>
 </head>
 
 <body>

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel.js

@@ -6,40 +6,18 @@
  * @fileoverview The ChromeVox panel and menus.
  */
 
-goog.provide('Panel');
-
-goog.require('BrailleCommandData');
-goog.require('CommandStore');
-goog.require('EventGenerator');
-goog.require('EventSourceType');
-goog.require('GestureCommandData');
-goog.require('ISearchUI');
-goog.require('KeyCode');
-goog.require('KeyMap');
-goog.require('KeyUtil');
-goog.require('LocaleOutputHelper');
-goog.require('Msgs');
-goog.require('PanelCommand');
-goog.require('PanelMenu');
-goog.require('PanelMenuItem');
-goog.require('PanelMode');
-goog.require('PanelModeInfo');
-goog.require('QueueMode');
-goog.require('constants');
+import {ISearchUI} from './i_search.js';
+import {PanelInterface} from './panel_interface.js';
+import {PanelMenu, PanelNodeMenu, PanelSearchMenu} from './panel_menu.js';
+import {PanelMenuItem} from './panel_menu_item.js';
+import {PanelMode, PanelModeInfo} from './panel_mode.js';
 
 /**
  * Class to manage the panel.
  */
-Panel = class {
-  constructor() {}
-
-  /**
-   * A callback function to be executed to perform the action from selecting
-   * a menu item after the menu has been closed and focus has been restored
-   * to the page or wherever it was previously.
-   * @param {?Function} callback
-   */
-  static setPendingCallback(callback) {
+export class Panel extends PanelInterface {
+  /** @override */
+  setPendingCallback(callback) {
     /** @type {?Function} @private */
     Panel.pendingCallback_ = callback;
   }
@@ -110,7 +88,8 @@ Panel = class {
     /** @private {Object} */
     Panel.tutorial = null;
 
-    Panel.setPendingCallback(null);
+    PanelInterface.instance = new Panel();
+    PanelInterface.instance.setPendingCallback(null);
     Panel.updateFromPrefs();
 
     Msgs.addTranslatedMessagesToDom(document);
@@ -137,7 +116,7 @@ Panel = class {
         return;
       }
 
-      Panel.closeMenusAndRestoreFocus();
+      PanelInterface.instance.closeMenusAndRestoreFocus();
     }, false);
 
     /** @type {Window} */
@@ -236,6 +215,8 @@ Panel = class {
         break;
       case PanelCommandType.CLOSE_CHROMEVOX:
         Panel.onClose();
+      case PanelCommandType.ENABLE_TEST_HOOKS:
+        window.Panel = Panel;
         break;
     }
   }
@@ -945,7 +926,7 @@ Panel = class {
     if (target && Panel.activeMenu_) {
       Panel.pendingCallback_ = Panel.activeMenu_.getCallbackForElement(target);
     }
-    Panel.closeMenusAndRestoreFocus();
+    PanelInterface.instance.closeMenusAndRestoreFocus();
   }
 
   /**
@@ -1017,7 +998,7 @@ Panel = class {
         Panel.advanceItemBy(1);
         break;
       case 'Escape':
-        Panel.closeMenusAndRestoreFocus();
+        PanelInterface.instance.closeMenusAndRestoreFocus();
         break;
       case 'PageUp':
         Panel.advanceItemBy(10);
@@ -1034,7 +1015,7 @@ Panel = class {
       case 'Enter':
       case ' ':
         Panel.pendingCallback_ = Panel.getCallbackForCurrentItem();
-        Panel.closeMenusAndRestoreFocus();
+        PanelInterface.instance.closeMenusAndRestoreFocus();
         break;
       default:
         // Don't mark this event as handled.
@@ -1076,11 +1057,8 @@ Panel = class {
     return null;
   }
 
-  /**
-   * Close the menus and restore focus to the page. If a menu item's callback
-   * was queued, execute it once focus is restored.
-   */
-  static closeMenusAndRestoreFocus() {
+  /** @override */
+  closeMenusAndRestoreFocus() {
     const bkgnd = chrome.extension.getBackgroundPage();
     bkgnd.chrome.automation.getDesktop(function(desktop) {
       // Watch for a blur on the panel.
@@ -1296,7 +1274,7 @@ Panel = class {
     }
     Panel.searchMenu.activateItem(0);
   }
-};
+}
 
 /**
  * An observer that reacts to ChromeVox range changes.
@@ -1305,6 +1283,10 @@ Panel = class {
 Panel.PanelStateObserver = class {
   constructor() {}
 
+  /**
+   * @param {cursors.Range} range The new range.
+   * @param {boolean=} opt_fromEditing
+   */
   onCurrentRangeChanged(range, opt_fromEditing) {
     if (Panel.mode_ === PanelMode.FULLSCREEN_TUTORIAL) {
       if (Panel.tutorial && Panel.tutorial.restartNudges) {

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel_interface.js

@@ -0,0 +1,26 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview An interface to control the ChromeVox Panel.
+ */
+
+export class PanelInterface {
+  /**
+   * Close the menus and restore focus to the page. If a menu item's callback
+   * was queued, execute it once focus is restored.
+   */
+  closeMenusAndRestoreFocus() {}
+
+  /**
+   * A callback function to be executed to perform the action from selecting
+   * a menu item after the menu has been closed and focus has been restored
+   * to the page or wherever it was previously.
+   * @param {?Function} callback
+   */
+  setPendingCallback(callback) {}
+}
+
+/** @type {PanelInterface} */
+PanelInterface.instance;

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel_loader.js

@@ -7,4 +7,23 @@
  *
  */
 
-goog.require('Panel');
+goog.require('AutomationTreeWalker');
+goog.require('AutomationUtil');
+goog.require('BrailleCommandData');
+goog.require('ChromeVoxState');
+goog.require('CommandStore');
+goog.require('EventGenerator');
+goog.require('EventSourceType');
+goog.require('GestureCommandData');
+goog.require('KeyCode');
+goog.require('KeyMap');
+goog.require('KeyUtil');
+goog.require('LocaleOutputHelper');
+goog.require('Msgs');
+goog.require('Output');
+goog.require('Output');
+goog.require('PanelCommand');
+goog.require('QueueMode');
+goog.require('constants');
+goog.require('cursors.Cursor');
+goog.require('cursors.Range');

chrome/browser/resources/chromeos/accessibility/chromevox/panel/panel_menu.js

@@ -6,18 +6,9 @@
  * @fileoverview A drop-down menu in the ChromeVox panel.
  */
 
-goog.provide('PanelMenu');
-goog.provide('PanelNodeMenu');
-goog.provide('PanelSearchMenu');
-
-goog.require('AutomationTreeWalker');
-goog.require('Msgs');
-goog.require('Output');
-goog.require('PanelMenuItem');
-goog.require('constants');
-goog.require('cursors.Range');
-
-PanelMenu = class {
+import {PanelMenuItem} from './panel_menu_item.js';
+
+export class PanelMenu {
   /**
    * @param {string} menuMsg The msg id of the menu.
    */
@@ -316,10 +307,10 @@ PanelMenu = class {
     }
     return -1;
   }
-};
+}
 
 
-PanelNodeMenu = class extends PanelMenu {
+export class PanelNodeMenu extends PanelMenu {
   /**
    * @param {string} menuMsg The msg id of the menu.
    * @param {chrome.automation.AutomationNode} node ChromeVox's current
@@ -436,7 +427,7 @@ PanelNodeMenu = class extends PanelMenu {
           Msgs.getMsg('panel_menu_item_none'), '', '', '', function() {});
     }
   }
-};
+}
 
 /**
  * The number of nodes to search before posting a task to finish
@@ -450,7 +441,7 @@ PanelNodeMenu.MAX_NODES_BEFORE_ASYNC = 100;
  * Implements a menu that allows users to dynamically search the contents of the
  * ChromeVox menus.
  */
-PanelSearchMenu = class extends PanelMenu {
+export class PanelSearchMenu extends PanelMenu {
   /**
    * @param {!string} menuMsg The msg id of the menu.
    */
@@ -600,4 +591,4 @@ PanelSearchMenu = class extends PanelMenu {
   scrollToBottom() {
     this.activateItem(this.items_.length - 1);
   }
-};
+}