Add flattenthreads experiment

This experiment allows users to flatten the replies in threads, so they
are shown linearly in a chronological way instead of nested.

When the option is enabled, a switch is added to the thread page which
lets the user switch between flattening replies and not flattening them.

Some UI is still missing (see the design document[1]).

[1]: https://docs.google.com/document/d/1P-HanTHxaOFF_FHh0uSv0GIhG1dxWTJTGoT6VPjjvY0/edit

Bug: twpowertools:153
Change-Id: I43f94442cadc12b752700f0e8d974522be621d3e
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index e5d9af3..1edb466 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -9,10 +9,13 @@
 import {applyDragAndDropFixIfEnabled} from './dragAndDropFix.js';
 // #!endif
 import InfiniteScroll from './infiniteScroll.js';
+import {kRepliesSectionSelector} from './threadToolbar/constants.js';
+import ThreadToolbar from './threadToolbar/threadToolbar.js';
 import {unifiedProfilesFix} from './unifiedProfiles.js';
 import Workflows from './workflows/workflows.js';
 
-var mutationObserver, options, avatars, infiniteScroll, workflows;
+var mutationObserver, options, avatars, infiniteScroll, workflows,
+    threadToolbar;
 
 const watchedNodesSelectors = [
   // App container (used to set up the intersection observer and inject the dark
@@ -70,6 +73,9 @@
 
   // Thread page main content
   'ec-thread > .page > .material-content > div[role="list"]',
+
+  // Thread page reply section (for the thread page toolbar)
+  kRepliesSectionSelector,
 ];
 
 function handleCandidateNode(node) {
@@ -198,10 +204,16 @@
       window.TWPTExtraInfo.injectPerForumStatsIfEnabled(node);
     }
 
+    // Inject old thread page design warning if applicable
     if (node.matches(
             'ec-thread > .page > .material-content > div[role="list"]')) {
       window.TWPTThreadPageDesignWarning.injectWarningIfApplicable(node);
     }
+
+    // Inject thread toolbar
+    if (threadToolbar.shouldInject(node)) {
+      threadToolbar.injectIfApplicable(node);
+    }
   }
 }
 
@@ -238,6 +250,7 @@
   avatars = new AvatarsHandler();
   infiniteScroll = new InfiniteScroll();
   workflows = new Workflows();
+  threadToolbar = new ThreadToolbar();
 
   // autoRefresh, extraInfo, threadPageDesignWarning and workflowsImport are
   // initialized in start.js
@@ -298,6 +311,8 @@
   // Extra info
   injectStylesheet(chrome.runtime.getURL('css/extrainfo.css'));
   injectStylesheet(chrome.runtime.getURL('css/extrainfo_perforumstats.css'));
-  // Workflows
-  injectScript(chrome.runtime.getURL('workflowComponentsInject.bundle.js'));
+  // Workflows, Thread toolbar
+  injectScript(chrome.runtime.getURL('litComponentsInject.bundle.js'));
+  // Thread toolbar
+  injectStylesheet(chrome.runtime.getURL('css/thread_toolbar.css'));
 });