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/static/css/thread_toolbar.css b/src/static/css/thread_toolbar.css
new file mode 100644
index 0000000..cd1ac48
--- /dev/null
+++ b/src/static/css/thread_toolbar.css
@@ -0,0 +1,9 @@
+/* Small adjustement to reduce spacing, since it's excessive when adding the toolbar. */
+body.TWPT-threadtoolbar-shown ec-thread .scTailwindThreadThreadcontentreplies-section {
+  padding-top: 0.5rem;
+}
+
+/* Hide reply button when a thread is flattened, since it might not work correctly */
+body.TWPT-flattenthreads-enabled ec-thread sc-tailwind-thread-message-message-list:last-child .scTailwindThreadMessageMessagecardsub-content {
+  display: none;
+}
diff --git a/src/static/css/ui_spacing/shared.css b/src/static/css/ui_spacing/shared.css
index c5b7cdd..2ae4fd8 100644
--- a/src/static/css/ui_spacing/shared.css
+++ b/src/static/css/ui_spacing/shared.css
@@ -27,7 +27,14 @@
   margin-bottom: 0!important;
 }
 
-.scTailwindThreadMessageMessagelistmessage-card {
+/**
+ * When flattening threads, we hide the reply button (in fact the entire blue
+ * footer), so we will reduce the padding moderately.
+ */
+body.TWPT-flattenthreads-enabled .scTailwindThreadMessageMessagelistmessage-card {
+  padding-bottom: 1rem!important;
+}
+body:not(.TWPT-flattenthreads-enabled) .scTailwindThreadMessageMessagelistmessage-card {
   padding-bottom: 0.75rem!important;
 }