Trusted Type various WebUI

This change removes innerHTML usage in various WebUI pages.

Bug: 41905
Change-Id: I195b7d0bbf040f0bf1443222da75cb8a1734c16f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2226302
Commit-Queue: Jun Kokatsu <Jun.Kokatsu@microsoft.com>
Reviewed-by: Chris Hamilton <chrisha@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Reviewed-by: Kenneth Russell <kbr@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Cr-Commit-Position: refs/heads/master@{#775757}

chrome/browser/resources/components/components.js

@@ -26,7 +26,7 @@ function renderTemplate(componentsData) {
   // This is the javascript code that processes the template:
   const input = new JsEvalContext(componentsData);
   const output = $('component-template').cloneNode(true);
-  $('component-placeholder').innerHTML = '';
+  $('component-placeholder').innerHTML = trustedTypes.emptyHTML;
   $('component-placeholder').appendChild(output);
   jstProcess(input, output);
   output.removeAttribute('hidden');

chrome/browser/resources/conflicts/about_conflicts.html

@@ -208,7 +208,7 @@ html[dir=rtl] .clearing {
             jsselect="moduleList" class="module">
             <td valign="top" class="datacell">
               <span dir="ltr"
-                    jsvalues=".innerHTML:description"
+                    jsvalues=".textContent:description"
                     class="clearing nowrap"></span>
             </td>
             <td valign="top" class="datacell">

components/about_ui/resources/about_credits.js

@@ -18,7 +18,8 @@ document.addEventListener('DOMContentLoaded', function() {
       },
     });
 
-    // TODO remove an empty string argument once supported
+    // TODO(Jun.Kokatsu@microsoft.com): remove an empty string argument
+    // once supported.
     // https://github.com/w3c/webappsec-trusted-types/issues/278
     keyboardUtils.src = staticURLPolicy.createScriptURL('');
     document.body.appendChild(keyboardUtils);

components/flags_ui/resources/flags.html

@@ -89,7 +89,7 @@
                     jsvalues="title: is_default ? '' : '$i18n{experiment-enabled}';
                         id:internal_name + '_name'"></h3>
                 <p>
-                  <span jsvalues=".innerHTML:description"></span> –
+                  <span jsvalues=".textContent:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
@@ -136,7 +136,7 @@
                     jsvalues="title: is_default ? '' : '$i18n{experiment-enabled}';
                         id:internal_name + '_name'"></h3>
                 <p>
-                  <span jsvalues=".innerHTML:description"></span> –
+                  <span jsvalues=".textContent:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
@@ -193,7 +193,7 @@
                 <h3 class="experiment-name"
                     jscontent="name"></h3>
                 <p>
-                  <span jsvalues=".innerHTML:description"></span>
+                  <span jsvalues=".textContent:description"></span>
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <a class="permalink"

components/flags_ui/resources/flags.js

@@ -184,9 +184,9 @@ function restartBrowser() {
  * @param {string} text The text that should be announced.
 */
 function announceStatus(text) {
-  $('screen-reader-status-message').innerHTML = '';
+  $('screen-reader-status-message').textContent = '';
   setTimeout(function() {
-    $('screen-reader-status-message').innerHTML = text;
+    $('screen-reader-status-message').textContent = text;
   }, 100);
 }
 

content/browser/resources/gpu/info_view.js

@@ -537,7 +537,7 @@ cr.define('gpu', function() {
         throw new Error('Node ' + outputElementId + ' not found');
       }
 
-      peg.innerHTML = '';
+      peg.innerHTML = trustedTypes.emptyHTML;
       peg.appendChild(template);
     }
   };