Expose a11y modes of web renderers to chrome://accessibility.

content/browser/resources/accessibility/accessibility.js

 // Copyright (c) 2013 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.
 
 cr.define('accessibility', function() {
   'use strict';
 
+  // Note: keep these values in sync with the values in

[dmazzoni, 2017/02/13 19:53:42]

Things that need to be kept in sync are always a maintenance burden - especially
when they cross language boundaries like this.

How about doing one of the following two things:

1. Add a PRESUBMIT that fails if you try to modify 
    content/common/accessibility_mode_enums.h without
    also modifying this file to match. You can use the
    one in ui/accessibility/ as a good example to copy.

2. Alternatively, have accessibility.js load the list of enums
    from C++ code in JSON, for example it would get
    something like {1: "native", 2: "web", ...} during
    initialization.

[dougt, 2017/02/14 15:21:52]

Yes, this makes sense.  I would like to do this work in a separate CL.  Wdyt?

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=692087

Note that we have a similar comment here:
https://cs.chromium.org/chromium/src/content/common/accessibility_mode_enums....
which I can address.

+  // content/common/accessibility_mode_enums.h
+  const MODE_FLAG_NATIVE_APIS = 1 << 0;
+  const MODE_FLAG_WEB_CONTENTS = 1 << 1;
+  const MODE_FLAG_INLINE_TEXT_BOXES = 1 << 2;
+  const MODE_FLAG_SCREEN_READER = 1 << 3;
+  const MODE_FLAG_HTML = 1 << 4;
+
   function requestData() {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', 'targets-data.json', false);
     xhr.send(null);
     if (xhr.status === 200) {
       console.log(xhr.responseText);
       return JSON.parse(xhr.responseText);
     }
     return [];
   }
 
-  // TODO(aboxhall): add a mechanism to request individual and global a11y
-  // mode, xhr them on toggle... or just re-requestData and be smarter about
-  // ID-ing rows?
-
-  function toggleAccessibility(data, element) {
+  function toggleAccessibility(data, element, mode) {
     chrome.send('toggleAccessibility',
-                [String(data.processId), String(data.routeId)]);
-    var a11y_was_on = (element.textContent.match(/on/) != null);
-    element.textContent = ' accessibility ' + (a11y_was_on ? ' off' : ' on');
-    var row = element.parentElement;
-    if (a11y_was_on) {
-      while (row.lastChild != element)
-        row.removeChild(row.lastChild);
-    } else {
-      row.appendChild(document.createTextNode(' | '));
-      row.appendChild(createShowAccessibilityTreeElement(data, row, false));
-    }
+                [String(data.processId), String(data.routeId), mode]);
+    document.location.reload();
   }
 
   function requestAccessibilityTree(data, element) {
     chrome.send('requestAccessibilityTree',
                 [String(data.processId), String(data.routeId)]);
   }
 
   function initialize() {
     console.log('initialize');
     var data = requestData();
@@ skipping 15 matching lines @@
 
   function bindCheckbox(name, value) {
     if (value == 'on')
       $(name).checked = true;
     if (value == 'disabled') {
       $(name).disabled = true;
       $(name).labels[0].classList.add('disabled');
     }
     $(name).addEventListener('change', function() {
       chrome.send('setGlobalFlag', [name, $(name).checked]);
-      document.location.reload(); // FIXME see TODO above
+      document.location.reload();
     });
   }
 
   function addToPagesList(data) {
     // TODO: iterate through data and pages rows instead
     var id = data['processId'] + '.' + data['routeId'];
     var row = document.createElement('div');
     row.className = 'row';
     row.id = id;
     formatRow(row, data);
 
     row.processId = data.processId;
     row.routeId = data.routeId;
 
     var list = $('pages');
     list.appendChild(row);
   }
 
   function formatRow(row, data) {
     if (!('url' in data)) {
       if ('error' in data) {
         row.appendChild(createErrorMessageElement(data, row));
         return;
       }
     }
+
+    var siteInfo = document.createElement('div');
     var properties = ['favicon_url', 'name', 'url'];
     for (var j = 0; j < properties.length; j++)
-      row.appendChild(formatValue(data, properties[j]));
+      siteInfo.appendChild(formatValue(data, properties[j]));
+    row.appendChild(siteInfo);
 
-    row.appendChild(createToggleAccessibilityElement(data));
-    if (data['a11y_mode']) {
-      row.appendChild(document.createTextNode(' | '));
-      if ('tree' in data) {
-        row.appendChild(createShowAccessibilityTreeElement(data, row, true));
-        row.appendChild(document.createTextNode(' | '));
-        row.appendChild(createHideAccessibilityTreeElement(row.id));
-        row.appendChild(createAccessibilityTreeElement(data));
-      }
-      else {
-        row.appendChild(createShowAccessibilityTreeElement(data, row, false));
-        if ('error' in data)
-          row.appendChild(createErrorMessageElement(data, row));
-      }
+    row.appendChild(createModeElement(MODE_FLAG_NATIVE_APIS, data))
+    row.appendChild(createModeElement(MODE_FLAG_WEB_CONTENTS, data))
+    row.appendChild(createModeElement(MODE_FLAG_INLINE_TEXT_BOXES, data))
+    row.appendChild(createModeElement(MODE_FLAG_SCREEN_READER, data))
+    row.appendChild(createModeElement(MODE_FLAG_HTML, data))
+
+    row.appendChild(document.createTextNode(' | '));
+
+    if ('tree' in data) {
+      row.appendChild(createShowAccessibilityTreeElement(data, row, true));
+      row.appendChild(createHideAccessibilityTreeElement(row.id));
+      row.appendChild(createAccessibilityTreeElement(data));
+    }
+    else {
+      row.appendChild(createShowAccessibilityTreeElement(data, row, false));
+      if ('error' in data)
+        row.appendChild(createErrorMessageElement(data, row));
     }
   }
 
   function formatValue(data, property) {
     var value = data[property];
 
     if (property == 'favicon_url') {
       var faviconElement = document.createElement('img');
       if (value)
         faviconElement.src = value;
       faviconElement.alt = "";
       return faviconElement;
     }
 
     var text = value ? String(value) : '';
     if (text.length > 100)
       text = text.substring(0, 100) + '\u2026';  // ellipsis
 
     var span = document.createElement('span');
     span.textContent = ' ' + text + ' ';
     span.className = property;
     return span;
   }
 
-  function createToggleAccessibilityElement(data) {
+  function getNameForAccessibilityMode(mode) {
+    switch (mode) {
+      case MODE_FLAG_NATIVE_APIS:
+        return "native"
+      case MODE_FLAG_WEB_CONTENTS:
+        return "web"
+      case MODE_FLAG_INLINE_TEXT_BOXES:
+        return "inline text"
+      case MODE_FLAG_SCREEN_READER:
+        return "screen reader"
+      case MODE_FLAG_HTML:
+        return "html"
+    }
+    return "unknown"
+  }
+
+  function createModeElement(mode, data) {
+    var currentMode = data['a11y_mode'];
     var link = document.createElement('a', 'action-link');
     link.setAttribute('role', 'button');
-    var full_a11y_on = data['a11y_mode'];
-    link.textContent = 'accessibility ' + (full_a11y_on ? 'on' : 'off');
-    link.setAttribute('aria-pressed', (full_a11y_on ? 'true' : 'false'));
+
+    var stateText = ((currentMode & mode) != 0) ? 'true' : 'false';
+    link.textContent = getNameForAccessibilityMode(mode) + ": " + stateText;
+    link.setAttribute('aria-pressed', stateText);
     link.addEventListener('click',
-                          toggleAccessibility.bind(this, data, link));
+                          toggleAccessibility.bind(this, data, link, mode));
     return link;
   }
 
   function createShowAccessibilityTreeElement(data, row, opt_refresh) {
     var link = document.createElement('a', 'action-link');
     link.setAttribute('role', 'button');
     if (opt_refresh)
       link.textContent = 'refresh accessibility tree';
     else
       link.textContent = 'show accessibility tree';
@@ skipping 54 matching lines @@
     return treeElement;
   }
 
   return {
     initialize: initialize,
     showTree: showTree
   };
 });
 
 document.addEventListener('DOMContentLoaded', accessibility.initialize);