Move a styling in chrome://signin-internals to JS

This change moves a style added for expired token in C++ code to
JS code, in order to be compatible with Trusted Types.

Bug: 1125965
Change-Id: I69c9d75364cf2ece4ed5009d981ebdf063f88fb7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2401811
Commit-Queue: Jun Kokatsu <Jun.Kokatsu@microsoft.com>
Reviewed-by: David Roger <droger@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805952}

components/signin/core/browser/about_signin_internals.cc

@@ -542,13 +542,16 @@ AboutSigninInternals::TokenInfo::ToValue() const {
         expiration_time_string = "Expiration time not available";
       }
       std::string status_str;
+      std::string expire_string = "Expire";
       if (token_expired)
-        status_str = "<p style=\"color: #ffffff; background-color: #ff0000\">";
-      base::StringAppendF(&status_str, "Received token at %s. Expire at %s",
+        expire_string = "Expired";
+      base::StringAppendF(&status_str, "Received token at %s. %s at %s",
                           base::TimeToISO8601(receive_time).c_str(),
+                          expire_string.c_str(),
                           expiration_time_string.c_str());
-      if (token_expired)
-        base::StringAppendF(&status_str, "</p>");
+      // JS code looks for `Expired at` string in order to mark
+      // specific status row red color. Changing `Exired at` status
+      // requires a change in JS code too.
       token_info->SetString("status", status_str);
     } else {
       token_info->SetString(

components/signin/core/browser/resources/signin_internals.js

@@ -174,6 +174,12 @@ function refreshSigninInfo(signinInfo) {
   jstProcess(new JsEvalContext(signinInfo), $('token-info'));
   jstProcess(new JsEvalContext(signinInfo), $('account-info'));
   jstProcess(new JsEvalContext(signinInfo), $('refresh-token-events'));
+  document.querySelectorAll('td[jsvalues=".textContent: status"]')
+      .forEach(td => {
+        if (td.textContent.includes('Expired at')) {
+          td.style = 'color: #ffffff; background-color: #ff0000';
+        }
+      });
 }
 
 // Replace the cookie information with the fetched values.