add header for messages table (#17475)

Author: alanrenmsft

localization/xliff/enu/constants/localizedConstants.enu.xlf

@@ -437,6 +437,12 @@
         <trans-unit id="messagePaneLabel">
             <source xml:lang="en">Messages</source>
         </trans-unit>
+        <trans-unit id="messagesTableTimeStampColumn">
+            <source xml:lang="en">Timestamp</source>
+        </trans-unit>
+        <trans-unit id="messagesTableMessageColumn">
+            <source xml:lang="en">Message</source>
+        </trans-unit>
         <trans-unit id="lineSelectorFormatted">
             <source xml:lang="en">Line {0}</source>
         </trans-unit>

src/views/htmlcontent/src/css/styles.css

@@ -83,6 +83,10 @@ table {
   color: var(--color-content);
 }
 
+#messageTable th {
+  text-align: left;
+}
+
 #messageTable tbody tr:last-child > td {
   padding-bottom: 1em;
 }

src/views/htmlcontent/src/js/components/app.component.ts

@@ -105,6 +105,10 @@ const template = `
                 <col span="1" class="wide">
             </colgroup>
             <tbody>
+                <tr>
+                    <th>{{Constants.messagesTableTimeStampColumn}}</th>
+                    <th>{{Constants.messagesTableMessageColumn}}</th>
+                </tr>
                 <template ngFor let-message [ngForOf]="messages">
                     <tr class='messageRow'>
                         <td><span *ngIf="!Utils.isNumber(message.batchId)">[{{message.time}}]</span></td>