[chrome:accessibility] Line-by-line navigation of accessibility internals output

Allow line-by-line navigation of the accessibility tree and accessibility
events by splitting the output element into lines and wrapping each line
as a div.

Bug: 877714,785493
Change-Id: I1fe60beb8e98ea49eab6fc372c74ab131beb9772
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1978822
Commit-Queue: Abigail Klein <abigailbklein@google.com>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#743862}

chrome/browser/resources/accessibility/accessibility.js

@@ -263,11 +263,11 @@ cr.define('accessibility', function() {
   }
 
   function insertHeadingInline(parentElement, headingText, id) {
-    const h4 = document.createElement('h4');
-    h4.textContent = headingText;
-    h4.style.display = 'inline';
-    h4.id = id + ':title';
-    parentElement.appendChild(h4);
+    const h3 = document.createElement('h3');
+    h3.textContent = headingText;
+    h3.style.display = 'inline';
+    h3.id = id + ':title';
+    parentElement.appendChild(h3);
   }
 
   function formatValue(data, property) {
@@ -480,7 +480,12 @@ cr.define('accessibility', function() {
       treeElement = document.createElement('pre');
       treeElement.id = id + ':' + type;
     }
-    treeElement.textContent = data[type];
+    const dataSplitByLine = data[type].split(/\n/);
+    for (let i = 0; i < dataSplitByLine.length; i++) {
+      const lineElement = document.createElement('div');
+      lineElement.textContent = dataSplitByLine[i];
+      treeElement.appendChild(lineElement);
+    }
     return treeElement;
   }