Add enhanced announcements notification dot feature

This change adds a new option which consists of the injection of custom
CSS code to enhance the announcements notification dot shown in the
hamburger icon in the Community Console.

Change-Id: I6963017d25ba99f82ccabfde8eae45fa3280c4ec

docs/features.es.md

@@ -126,6 +126,17 @@ te permite ordenar las listas de hilos en sentido ascendente o descendente.
 
 ![GIF que muestra cómo cambiar entre el sentido ascendente/descendente](resources/smei_sort_direction.gif)
 
+### Indicador de anuncios nuevos más prominente
+> **Option name:** _Muestra el punto que notifica que hay anuncios sin leer de
+manera más prominente en la Consola de la Comunidad._.
+
+Cuando esta opción está activada, el banner "Alpha" que aparece en la esquina
+superior izquierda de la Consola de la Comunidad se oculta, y el punto de
+notificación que aparece en el menú de hamburguesa cuando hay un nuevo anuncio
+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)
+
 ### 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

@@ -119,6 +119,17 @@ you sort thread lists in ascending or descending order.
 
 ![GIF showing how to switch between ascending/descending order](resources/smei_sort_direction.gif)
 
+### More prominent announcements dot
+> **Option name:** _Show the announcements notification dot more prominently in
+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
+don't miss it.
+
+![GIF showing the improved notification dot](resources/announcement_dot.gif)
+
 ### 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

@@ -91,6 +91,10 @@
     "message": "Activa l'experiment <code class=\"help\" title=\"Aquest experiment et permet ordenar la llista de fils de la Consola de la Comunitat en ordre ascendent o descendent.\">SMEI_SORT_DIRECTION</code>.",
     "description": "Feature checkbox in the options page"
   },
+  "options_enhancedannouncementsdot": {
+    "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_profileindicator_header": {
     "message": "Punt indicador",
     "description": "Heading for the profile indicator feature options"

src/_locales/en/messages.json

@@ -95,6 +95,10 @@
     "message": "Enable the <code class=\"help\" title=\"This experiment lets you sort the Community Console thread list in ascending or descending order.\">SMEI_SORT_DIRECTION</code> experiment.",
     "description": "Feature checkbox in the options page"
   },
+  "options_enhancedannouncementsdot": {
+    "message": "Show the announcements notification dot more prominently in the Community Console.",
+    "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

@@ -91,6 +91,10 @@
     "message": "Activa el experimento <code class=\"help\" title=\"Este experimento te permite ordenar la lista de hilos de la Consola de la Comunidad en orden ascendente o descendente.\">SMEI_SORT_DIRECTION</code>.",
     "description": "Feature checkbox in the options page"
   },
+  "options_enhancedannouncementsdot": {
+    "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_profileindicator_header": {
     "message": "Punto indicador",
     "description": "Heading for the profile indicator feature options"

src/common/common.js

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

src/content_scripts/console_inject.js

@@ -397,6 +397,11 @@ chrome.storage.sync.get(null, function(items) {
         'material-drawer .main-header{background: var(--TWPT-drawer-background, #fff)!important; position: sticky; top: 0; z-index: 1;}');
   }
 
+  if (options.enhancedannouncementsdot) {
+    injectStylesheet(
+        chrome.runtime.getURL('injections/enhanced_announcements_dot.css'));
+  }
+
   if (options.ccforcehidedrawer) {
     var drawer = document.querySelector('material-drawer');
     if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {

src/injections/enhanced_announcements_dot.css

@@ -0,0 +1,21 @@
+@keyframes TWPTAnnouncementDot {
+  from {
+    background-color: #d93025;
+    bottom: 8px;
+  }
+
+  to {
+    background-color: #e2b3b0;
+    bottom: 0px;
+  }
+}
+
+header .left-control .material-drawer-button.has-updates::after {
+  height: 10px;
+  width: 10px;
+  animation: .5s infinite alternate ease-in TWPTAnnouncementDot;
+}
+
+header .sash {
+  display: none;
+}

src/options/options.html

@@ -33,6 +33,7 @@ <h4 data-i18n="enhancements"></h4>
       <div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>
       <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>
       <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

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