Add lit components localization

Localization is performed via the @lit/localize package, which has been
integrated into the repo. A I18nLitElement class which extends
LitElement has been included, which automatically sets up the
localization.

This CL also introduces localization to the flattenThreads feature.

Fixed: twpowertools:157
Change-Id: If01540b9c8d70876a648aa002a1e0a5bede8f383
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
index a5bf48d..5dc7d59 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/ReplyButton.js
@@ -1,12 +1,14 @@
 import '@material/web/button/outlined-button.js';
 
-import {css, html, LitElement} from 'lit';
+import {msg} from '@lit/localize';
+import {css, html} from 'lit';
 import {waitFor} from 'poll-until-promise';
 
+import {I18nLitElement} from '../../../../common/litI18nUtils.js';
 import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
 import {getExtraInfoNodes} from '../flattenThreads.js';
 
-export default class TwptFlattenThreadReplyButton extends LitElement {
+export default class TwptFlattenThreadReplyButton extends I18nLitElement {
   static properties = {
     extraInfo: {type: Object},
   };
@@ -29,7 +31,9 @@
   render() {
     return html`
       <md-outlined-button
-          label="Reply"
+          label="${msg('Reply', {
+            desc: 'Button which is used to open the reply box.',
+          })}"
           @click=${this.openReplyEditor}>
       </md-outlined-button>
     `;
diff --git a/src/contentScripts/communityConsole/flattenThreads/components/index.js b/src/contentScripts/communityConsole/flattenThreads/components/index.js
index bf532fb..39e8310 100644
--- a/src/contentScripts/communityConsole/flattenThreads/components/index.js
+++ b/src/contentScripts/communityConsole/flattenThreads/components/index.js
@@ -5,14 +5,16 @@
 // Other components imported so they are also injected:
 import './ReplyButton.js';
 
+import {msg} from '@lit/localize';
 import * as DOMPurify from 'dompurify';
-import {css, html, LitElement} from 'lit';
+import {css, html} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 
+import {I18nLitElement} from '../../../../common/litI18nUtils.js';
 import {SHARED_MD3_STYLES} from '../../../../common/styles/md3.js';
 
-export default class TwptFlattenThreadQuote extends LitElement {
+export default class TwptFlattenThreadQuote extends I18nLitElement {
   static properties = {
     prevMessage: {type: Object},
     _expanded: {type: Boolean},
@@ -113,6 +115,12 @@
       'quote-container': true,
       'quote-container--expanded': this._expanded,
     });
+    const lessMsg = msg('Less', {
+      desc: 'Button to collapse the quote message (used in the flatten threads feature).',
+    });
+    const moreMsg = msg('More', {
+      desc: 'Button to expand the quote message (used in the flatten threads feature).',
+    });
     return html`
       <div class=${containerClasses}>
         <div class="payload-container">
@@ -126,7 +134,7 @@
         <div class="buttons-row">
           <md-tonal-button
               icon="${this._expanded ? 'expand_less' : 'expand_more'}"
-              label="${this._expanded ? 'Less' : 'More'}"
+              label="${this._expanded ? lessMsg : moreMsg}"
               @click=${this.toggleExpanded}>
           </md-tonal-button>
         </div>