Fix ChromeVox panel

The panel runs in a separate page context than the background page, so some js objects like UserAnnotationHandler or ChromeVoxState, which are initialized by the Background class, are never initialized.
This leads to indirect bugs from directly required classes such as Output which directly depend on ChromeVoxState or UserAnnotationHandler.

For a fix, this change initializes these singletons. Note the divergent styles in which they do so due to the way they were initially written.

For reference, not doing this initialization causes errors like:
TypeError: Cannot read property 'enabled' of undefined
    at Function.getAnnotationForNode (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1113:101)
    at Output.<anonymous> (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1190:489)
    at Array.forEach (<anonymous>)
    at Output.format_ (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1182:8)
    at Output.node_ (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1263:30)
    at Output.<anonymous> (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1243:6)
    at Output.range_ (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1247:228)
    at Output.render_ (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1179:83)
    at Output.withSpeech (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1140:104)
    at PanelNodeMenu.findMoreNodes_ (chrome-extension://mndnfokpggljbaajbnioimlmbfngpief/chromeVoxPanelScript.js:1436:118)

Change-Id: Id867f585dededc77a56f0332aba8ea1bd4ebb06a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2055415
Commit-Queue: David Tseng <dtseng@chromium.org>
Reviewed-by: Akihiro Ota <akihiroota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#741608}

chrome/browser/resources/chromeos/accessibility/chromevox/background/annotation/user_annotation_handler.js

@@ -63,7 +63,8 @@ UserAnnotationHandler = class {
    */
   static setAnnotationForIdentifier(identifier, annotation) {
     const url = identifier.pageUrl;
-    if (!UserAnnotationHandler.instance.enabled || !url) {
+    if (!UserAnnotationHandler.instance ||
+        !UserAnnotationHandler.instance.enabled || !url) {
       return;
     }
 

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

@@ -37,7 +37,20 @@ ChromeVoxState = function() {
   if (ChromeVoxState.instance) {
     throw 'Trying to create two instances of singleton ChromeVoxState.';
   }
-  ChromeVoxState.instance = this;
+  const backgroundWindow = chrome.extension.getBackgroundPage();
+  // Only install the singleton instance if we are within the background page
+  // context. Otherwise, take the instance from the background page (e.g. for
+  // the panel page).
+  if (backgroundWindow == window) {
+    ChromeVoxState.instance = this;
+  } else {
+    Object.defineProperty(ChromeVoxState, 'instance', {
+      get: () => {
+        return backgroundWindow.ChromeVoxState.instance;
+      }
+    });
+    return;
+  }
 
   /** @private {!Array<!chrome.accessibilityPrivate.ScreenRect>} */
   this.focusBounds_ = [];

chrome/browser/resources/chromeos/accessibility/chromevox/learn_mode/kbexplorer.html

@@ -10,11 +10,11 @@ h2 {
   font-family: arial;
 }
 </style>
-<script type="text/javascript" src="../../closure/base.js"></script>
-<script type="text/javascript" src="../../deps.js"></script>
+<script type="text/javascript" src="../closure/base.js"></script>
+<script type="text/javascript" src="../deps.js"></script>
 <script type="text/javascript" src="kbexplorer_loader.js"></script>
 
-<script type="text/javascript" src="../../chromeVoxKbExplorerScript.js">
+<script type="text/javascript" src="../chromeVoxKbExplorerScript.js">
 </script>
 
 </head>

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

@@ -7,10 +7,10 @@
 <title class="i18n" msgid="options_page_title">ChromeVox Options</title>
 <link rel="stylesheet" type="text/css" href="options.css">
 
-<script type="text/javascript" src="../../closure/base.js"></script>
-<script type="text/javascript" src="../../deps.js"></script>
+<script type="text/javascript" src="../closure/base.js"></script>
+<script type="text/javascript" src="../deps.js"></script>
 <script type="text/javascript" src="options_loader.js"></script>
-<script type="text/javascript" src="../../chromeVoxChromeOptionsScript.js">
+<script type="text/javascript" src="../chromeVoxChromeOptionsScript.js">
 </script>
 <script type="module"
     src="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js">

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

@@ -9,10 +9,10 @@
 <link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono|Roboto:400,700,700italic" rel="stylesheet" type="text/css">
 <link href="panel.css" rel="stylesheet" type="text/css">
 
-<script type="text/javascript" src="../../closure/base.js"></script>
-<script type="text/javascript" src="../../deps.js"></script>
+<script type="text/javascript" src="../closure/base.js"></script>
+<script type="text/javascript" src="../deps.js"></script>
 <script type="text/javascript" src="panel_loader.js"></script>
-<script type="text/javascript" src="../../chromeVoxPanelScript.js">
+<script type="text/javascript" src="../chromeVoxPanelScript.js">
 </script>
 
 </head>

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

@@ -11,6 +11,7 @@ goog.provide('Panel');
 goog.require('AnnotationsUI');
 goog.require('BackgroundKeyboardHandler');
 goog.require('BrailleCommandData');
+goog.require('ChromeVoxState');
 goog.require('EventSourceType');
 goog.require('GestureCommandData');
 goog.require('ISearchUI');
@@ -43,6 +44,12 @@ Panel = class {
    * Initialize the panel.
    */
   static init() {
+    // Called directly for initialization. In the background page context,
+    // |Background| subclasses |ChromeVoxState| (who's constructor is called as
+    // part of |Background| construction).
+    new ChromeVoxState();
+    UserAnnotationHandler.init();
+
     /** @type {Element} @private */
     Panel.speechContainer_ = $('speech-container');