Flatten threads: change additional info element detection method

This is done in preparation for the next CL.

Bug: twpowertools:156
Change-Id: I15a77355550463995b57046f8d6fc34da3a275d7
diff --git a/src/xhrInterceptor/responseModifiers/flattenThread.js b/src/xhrInterceptor/responseModifiers/flattenThread.js
index 53828eb..b515191 100644
--- a/src/xhrInterceptor/responseModifiers/flattenThread.js
+++ b/src/xhrInterceptor/responseModifiers/flattenThread.js
@@ -1,4 +1,4 @@
-import {kAdditionalInfoPrefix} from '../../contentScripts/communityConsole/flattenThreads/flattenThreads.js';
+import {kAdditionalInfoClass} from '../../contentScripts/communityConsole/flattenThreads/flattenThreads.js';
 import GapModel from '../../models/Gap.js';
 import MessageModel from '../../models/Message.js';
 
@@ -35,10 +35,11 @@
       prevReplyId = m.getId();
       prevReplyParentId = info.parentId;
 
-      const span = document.createElement('span');
-      span.textContent = kAdditionalInfoPrefix + JSON.stringify(info);
-      span.setAttribute('style', 'display: none');
-      m.newPayload = m.getPayload() + span.outerHTML;
+      const extraInfoEl = document.createElement('code');
+      extraInfoEl.textContent = JSON.stringify(info);
+      extraInfoEl.setAttribute('style', 'display: none');
+      extraInfoEl.classList.add(kAdditionalInfoClass);
+      m.newPayload = m.getPayload() + extraInfoEl.outerHTML;
     });
     mogs.forEach(m => m.setPayload(m.newPayload));