Add option to reposition the expand thread button (CC)

This option repositions the expand thread button all the way to the left
of the thread element in thread lists (Community Console). Originally,
this button is shown in the right.

Requested at pekb/thread/67965396?msgid=91547227.

Change-Id: I10cd62998f6165ec58705fd912089119a7e0a108

docs/features.es.md

@@ -137,6 +137,12 @@ se hace más grande y animado para que lo veas mejor.
 
 ![GIF que muestra el punto de notificación mejorado](resources/announcement_dot.gif)
 
+### Reposiciona el botón para expandir hilos
+> **Option name:** _Pon el botón "expandir hilo" a la izquierda del todo en las
+listas de hilos de la Consola de la Comunidad._.
+
+![Imagen que muestra la función](resources/reposition_expand_thread.jpg)
+
 ### Punto indicador
 > **Opciones:** _Muestra si el autor del hilo ha participado en otros hilos_,
 _Muestra el número de preguntas y respuestas escritas por el autor del hilo

docs/features.md

@@ -125,11 +125,17 @@ the Community Console_.
 
 When this option is enabled, the "Alpha" banner in the upper-left corner of the
 Community Console is removed, and the notification dot which appears in the
-hamburguer menu when there's a new announcement is enlarged and animated so you
+hamburger menu when there's a new announcement is enlarged and animated so you
 don't miss it.
 
 ![GIF showing the improved notification dot](resources/announcement_dot.gif)
 
+### Reposition the expand thread button
+> **Option name:** _Place the "expand thread" button all the way to the left in
+the Community Console thread lists_.
+
+![Picture showing the feature](resources/reposition_expand_thread.jpg)
+
 ### Indicator dot
 > **Option names:** _Show whether the OP has participated in other threads_,
 _Show the number of questions and replies written by the OP within the last `n`

src/_locales/ca/messages.json

@@ -95,6 +95,10 @@
     "message": "Mostra el punt que notifica que hi ha anuncis sense llegir d'una manera més prominent a la Consola de la Comunitat.",
     "description": "Feature checkbox in the options page"
   },
+  "options_repositionexpandthread": {
+    "message": "Posa el botó \"expandir fil\" a l'esquerra del tot en les llistes de fils de la Consola de la Comunitat.",
+    "description": "Feature checkbox in the options page"
+  },
   "options_profileindicator_header": {
     "message": "Punt indicador",
     "description": "Heading for the profile indicator feature options"

src/_locales/en/messages.json

@@ -99,6 +99,10 @@
     "message": "Show the announcements notification dot more prominently in the Community Console.",
     "description": "Feature checkbox in the options page"
   },
+  "options_repositionexpandthread": {
+    "message": "Place the \"expand thread\" button all the way to the left in the Community Console thread lists.",
+    "description": "Feature checkbox in the options page"
+  },
   "options_profileindicator_header": {
     "message": "Indicator dot",
     "description": "Heading for the profile indicator feature options"

src/_locales/es/messages.json

@@ -95,6 +95,10 @@
     "message": "Muestra el punto que notifica que hay anuncios sin leer de manera más prominente en la Consola de la Comunidad.",
     "description": "Feature checkbox in the options page"
   },
+  "options_repositionexpandthread": {
+    "message": "Pon el botón \"expandir hilo\" a la izquierda del todo en las listas de hilos de la Consola de la Comunidad.",
+    "description": "Feature checkbox in the options page"
+  },
   "options_profileindicator_header": {
     "message": "Punto indicador",
     "description": "Heading for the profile indicator feature options"

src/common/common.js

@@ -22,6 +22,7 @@ const defaultOptions = {
   'batchlock': false,
   'smei_sortdirection': false,
   'enhancedannouncementsdot': false,
+  'repositionexpandthread': false,
 };
 
 const specialOptions = [

src/content_scripts/console_inject.js

@@ -402,6 +402,11 @@ chrome.storage.sync.get(null, function(items) {
         chrome.runtime.getURL('injections/enhanced_announcements_dot.css'));
   }
 
+  if (options.repositionexpandthread) {
+    injectStylesheet(
+        chrome.runtime.getURL('injections/reposition_expand_thread.css'));
+  }
+
   if (options.ccforcehidedrawer) {
     var drawer = document.querySelector('material-drawer');
     if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {

src/injections/reposition_expand_thread.css

@@ -0,0 +1,20 @@
+ec-thread-summary .panel .main-header {
+  flex-direction: row-reverse;
+}
+
+ec-thread-summary .panel .main-header .expand-container {
+  padding: 0 0 0 8px;
+}
+
+ec-thread-summary .panel .main-header .header {
+  padding-left: 0px!important;
+  padding-right: 16px!important;
+}
+
+ec-thread-list ec-bulk-actions .selection {
+  padding-left: 29px;
+}
+
+ec-thread-summary .panel .main .content-wrapper > .content > .content {
+  padding: 0 8px 0 121px;
+}

src/options/options.html

@@ -34,6 +34,7 @@ <h4 data-i18n="enhancements"></h4>
       <div class="option"><input type="checkbox" id="batchlock"> <label for="batchlock" data-i18n="batchlock"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
       <div class="option"><input type="checkbox" id="smei_sortdirection"> <label for="smei_sortdirection" data-i18n="smei_sortdirection"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
       <div class="option"><input type="checkbox" id="enhancedannouncementsdot"> <label for="enhancedannouncementsdot" data-i18n="enhancedannouncementsdot"></label></div>
+      <div class="option"><input type="checkbox" id="repositionexpandthread"> <label for="repositionexpandthread" data-i18n="repositionexpandthread"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
       <h4 data-i18n="profileindicator_header"></h4>
       <div class="option"><input type="checkbox" id="profileindicator"> <label for="profileindicator" data-i18n="profileindicator"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>
       <div class="option"><input type="checkbox" id="profileindicatoralt"> <label for="profileindicatoralt" data-i18n="profileindicatoralt"></label> <span class="experimental-label" data-i18n="experimental_label"></span></div>

templates/manifest.gjson

@@ -71,7 +71,8 @@
         "injections/profileindicator_inject.css",
         "injections/ccdarktheme.css",
         "injections/batchlock_inject.js",
-        "injections/enhanced_announcements_dot.css"
+        "injections/enhanced_announcements_dot.css",
+        "injections/reposition_expand_thread.css"
 #if defined(CHROMIUM_MV3)
       ],
       "matches": [