chrome://system: Don't use invalid IDs

Sanitize the log names before using them as IDs for query selection.

Move 'btn' to be a prefix (and add a similar 'div' prefix) to ensure
that the ID always starts with a letter.

Fixed: 1410051
Change-Id: If841e7644153ef249327a728438cf9baf09dc70b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4195755
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1097498}

chrome/browser/resources/about_sys/about_sys.js

diff --git a/chrome/browser/resources/about_sys/about_sys.js b/chrome/browser/resources/about_sys/about_sys.js
index 18a3faf6..874b181 100644
--- a/chrome/browser/resources/about_sys/about_sys.js
+++ b/chrome/browser/resources/about_sys/about_sys.js
@@ -22,11 +22,11 @@
 // </if>
 
 function getValueDivForButton(button) {
-  return $(button.id.substr(0, button.id.length - 4));
+  return $('div-' + button.id.substr(4));
 }
 
 function getButtonForValueDiv(valueDiv) {
-  return $(valueDiv.id + '-btn');
+  return $('btn-' + valueDiv.id.substr(4));
 }
 
 function handleDragOver(e) {
@@ -112,6 +112,15 @@
 }
 
 /**
+ * Replace characters that are invalid as part of an id for querySelector.
+ * @param {string} name
+ * @return {string} The sanitized name
+ */
+function getSanitizedName(name) {
+  return name.replace(/[^a-zA-Z0-9]/g, '-');
+}
+
+/**
  * For a particular log entry, create the DOM node representing it in the
  * log entry table.
  * @param{log} A dictionary with the keys statName and statValue
@@ -150,7 +159,7 @@
   const buttonCell = document.createElement('td');
   buttonCell.className = 'button-cell';
   const button = document.createElement('button');
-  button.id = log.statName + '-value-btn';
+  button.id = 'btn-' + getSanitizedName(log.statName) + '-value';
   button.className = 'expand-status';
   button.onclick = changeCollapsedStatus;
   buttonCell.appendChild(button);
@@ -159,7 +168,7 @@
   const valueCell = document.createElement('td');
   const valueDiv = document.createElement('div');
   valueDiv.className = 'stat-value';
-  valueDiv.id = log.statName + '-value';
+  valueDiv.id = 'div-' + getSanitizedName(log.statName) + '-value';
   valueDiv.textContent = log.statValue;
   valueCell.appendChild(valueDiv);
   row.appendChild(valueCell);