Add features.md doc and link to it in the options page

The features.md doc describes all the features that the extension
provides. This change also adds a link to this doc in the options page
so it can be accessed quickly.

Fixes: #23
Change-Id: Iad1d54ba216d6dd4e7820fe2a2ed8644f86ed945

docs/features.es.md

@@ -0,0 +1,141 @@
+# Funciones
+La extensión Herramientas Avanzadas para TW ofrece las siguientes
+funciones/opciones:
+
+## Scroll infinito
+### Listas de hilos
+> **Opción:** _Activa el scroll infinito en las listas de hilos_.
+
+Activa el scroll infinito en las listas de hilos en TW. Esta función ya se ha
+añadido a la Consola de la Comunidad por parte de Google.
+
+### Dentro de hilos
+> **Opciones:** _Carga automáticamente mensajes en grupos pequeños cuando hagas
+scroll por un hilo_, _Carga automáticamente todos los mensajes a la vez cuando
+hagas scroll por un hilo_.
+
+Activa el scroll infinito dentro de hilos, ambos en TW y la Consola de la
+Comunidad. Ambas funciones son excluyentes, y dependiendo de cuál elijas, la
+función se comportará de manera diferente:
+
+- **Cargar mensajes en grupos pequeños**: cuando te desplaces hasta el fondo de
+la página, se cargarán algunos mensajes más. Si te desplazas hasta el fondo de
+nuevo, se cargarán más mensajes, etc.
+- **Cargar todos los mensajes a la vez**: cuando te desplazes hasta el fondo de
+la página, todos los mensajes restantes se cargarán a la vez.
+
+## Mejoras adicionales
+### Barra de herramientas de la Consola de la Comunidad
+> **Opción:** _Mantén visible la barra de herramientas de la lista de hilos en
+la Consola de la Comunidad_.
+
+Fija la barra de herramientas de las listas de hilos en la Consola de la
+Comunidad para que no desaparezca cuando te desplaces hacia abajo de la página.
+
+![GIF que muestra la función](resources/fix_toolbar.gif)
+
+### Redirección a la Consola de la Comunidad
+> **Opción:** _Redirige todos los hilos abiertos en TW a la Consola de la
+Comunidad_.
+
+Esta función es útil si quieres que los hilos que abras desde los enlaces de los
+correos de notificación se abran directamaente en la Consola de la Comunidad.
+
+### Historial del perfil
+> **Opción:** _Muestra un enlace "historial de publicaciones" en los perfiles de
+usuario_.
+
+En TW y la Consola de la Comunidad, muestra 2 enlaces en los perfiles de
+usuario, que enlazan a una lista de hilos que el usuario ha creado/respodido en
+el foro actual, y en todos los foros.
+
+![Imagen que muestra los enlaces](resources/previous_posts.jpg)
+
+### Borradores de mensaje
+> **Opción:** _Activa la flag enableLoadingDraftMessages de la Consola de la
+Comunidad. (experimental)_.
+
+Activa una _flag_ de la Consola de la Comunidad tal que cuando se abre el
+diálogo de responder en la Consola de la Comunidad, si un borrador se había
+guardado con anterioridad en los servidores de Google, se carga en el editor.
+
+Los borradores se guardan regularmente en los servidores de Google **aunque la
+_flag_ no esté activada**, así que esta _flag_ puede ayudarte a recuperar tu
+trabajo si tu navegador se ha cerrado inesperadamente, por ejemplo.
+
+### Contraste entre hilos leídos/no leídos
+> **Opción:** _Incrementa el contraste entre los hilos leídos y no leídos en la
+Consola de la Comunidad._
+
+En las listas de hilos en la Consola de la Comunidad, los fondos para los hilos
+leídos y no leídos son muy similares. Esta opción aumenta su contraste.
+
+### Desplegables pegajosos en la barra lateral
+> **Opción:** _Hacer que los encabezados de la barra lateral de la Consola de la
+Comunidad se queden pegados arriba_
+
+![GIF que muestra la función](resources/sticky_headers.gif)
+
+### Modo oscuro
+> **Opción:** _Activa el tema oscuro en la Consola de la Comunidad_.
+
+Esta opción te permite cargar el tema oscuro personalizado para la Consola de la
+Comunidad. En la página de opciones hay un selector que te permite escoger cómo
+quieres que se active el tema oscuro:
+
+- **Botón en la Consola de la Comunidad**: un botón aparece arriba del todo de
+la Consola de la Comunidad, que te permite cambiar entre el tema claro y el
+oscuro.
+- **Configuración del modo oscuro del SO**: cuando actives la opción del modo
+oscuro en tu SO (no disponible en todos los Sistemas Operativos), el tema oscuro
+se activará en la Consola de la Comunidad. Ten en cuenta que después de cambiar
+la opción del SO, debes recargar la Consola de la Comunidad para cargar el tema
+correspondiente.
+
+### Esconde la barra lateral de la consola
+> **Opción:** _Esconde siempre la barra lateral izquierda en la Consola de la
+Comunidad._
+
+Cuando se abra la Consola de la Comunidad, la barra lateral que muestra los
+foros, filtros, etc. estará oculta/cerrada por defecto. Útil si tu pantalla es
+pequeña.
+
+### Arrastra marcadores al editor de texto (solo en Chrome)
+> **Opción:** _Permite arrastrar marcadores al editor de texto de la Consola de
+la Comunidad_
+
+En Chrome, cuando se arrastran marcadores o enlaces de la Omnibox al editor de
+texto enriquecido de la Consola de la Comunidad, el título del marcador/enlace
+se remplaza por la URL. Esta opción lo revierte para que el texto se preserve.
+
+![Demo de la función](resources/drag_and_drop_fix.gif)
+
+### Bloquear en masa
+> **Opción:** _Añade la opción para bloquear varios hilos en la lista de hilos
+de la Consola de la Comunidad_.
+
+![GIF que muestra cómo funciona la función](resources/batch_lock.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
+durante los últimos {n} meses al lado de su nombre de usuario_.
+
+Esta sección incluye opciones que son útiles para determinar si un usuario es
+nuevo o si ha publicado en los foros antes. Se puede encontrar una descripción
+completa de qué hace cada opción en
+[docs/op\_indicator.es.md](op_indicator.es.md).
+
+Estas son las posibles combinaciones de ambas opciones:
+
+- 1a opción activada, 2a opción desactivada.
+
+![Imagen que muestra un punto coloreado al lado del nombre de usuario](resources/op_indicator_1.gif)
+
+- 1a opción desactivada, 2a opción activada.
+
+![Imagen que muestra un número monocromo](resources/op_indicator_2.gif)
+
+- Ambas opciones activadas.
+
+![Imagen que muestra un número coloreado](resources/op_indicator_3.gif)

docs/features.md

@@ -0,0 +1,135 @@
+[En español](features.es.md)
+
+# Features
+The TW Power Tools extension offers the following features/options:
+
+## Infinite scroll
+### Thread lists
+> **Option name:** _Enable infinite scrolling in thread lists_.
+
+Enables infinite scroll in thread lists in TW. This feature has already been
+added to the Community Console by Google.
+
+### Inside threads
+> **Option names:** _Automatically load batches of messages inside threads when
+scrolling down_, _Automatically load all messages at once inside threads when
+scrolling down_.
+
+Enables infinite scroll inside threads, both in TW and the Community Console.
+Both options are mutually exclusive, and depending on which one you choose, the
+feature will behave differently:
+
+- **Load batches of messages**: when scrolling to the bottom, some more messages
+will be loaded. If you scroll to the bottom again, more messages will be loaded,
+and so on.
+- **Load all messages at once**: when scrolling to the bottom, all the remaining
+messages will be loaded at once.
+
+## Additional enhancements
+### Community Console toolbar
+> **Option name:** _Fix the toolbar in thread lists in the Community Console_.
+
+Fixes the toolbar of thread lists in the Community Console so it doesn't
+disappear when scrolling down.
+
+![GIF showing the feature](resources/fix_toolbar.gif)
+
+### Redirect to the Community Console
+> **Option name:** _Redirect all threads opened in TW to the Community Console_.
+
+This feature is useful if you want the threads you open from the email
+notification link directly in the Community Console.
+
+### Profile history
+> **Option name:** _Show a "previous posts" link in user profiles_.
+
+Both in TW and the Community Console, show 2 links in user profiles, which link
+to the list of threads that the user has created/replied to in the current
+forum, and in all the forums.
+
+![Image showing the links](resources/previous_posts.jpg)
+
+### Draft messages
+> **Option name:** _Activate the `enableLoadingDraftMessages` Community Console
+flag_.
+
+Enables a Community Console flag which, when opening the reply dialog in a
+thread in the Community Console, if a draft message was saved in the Google
+servers, it is loaded in the editor.
+
+Draft messages are saved regularly into Google Servers **even if the flag is not
+enabled**, so this flag can help you recover your work from a crash, for
+example.
+
+### Contrast between read/unread threads
+> **Option name:** _Increase contrast between read and unread threads in the
+Community Console_.
+
+In thread lists in the Community Console, the backgrounds for read and unread
+threads are very similar. This option increases this contrast.
+
+### Sticky drawer headers
+> **Option name_** _Make the headers in the Community Console sidebar stick at
+the top_.
+
+![GIF showing the feature](resources/sticky_headers.gif)
+
+### Dark mode
+> **Option name:** _Enable the dark theme in the Community Console_.
+
+This setting lets you load a custom-built dark theme for the Community Console.
+In the options page there is a selector which lets you choose how the dark theme
+gets enabled:
+
+- **Switch in the Community Console**: a button appears at the top of the
+Community Console, which lets you switch between the light and dark themes.
+- **OS dark mode settings**: when you enable the OS wide dark mode setting (not
+available in all Operating Systems), the dark theme is enabled in the Community
+Console. Note that after you change the OS setting, you should reload the
+Community Console in order to load the corresponding theme.
+
+### Hide the Community Console drawer
+> **Option name:** _Always hide the drawer (left column) in the Community
+Console_.
+
+When opening the Community Console, the sidebar which shows the forums, filters,
+etc. will be hidden/closed by default. Useful if your screen is small.
+
+### Drag and drop bookmarks to the text editor (Chrome-only)
+> **Option name:** _Allow to drag and drop bookmarks to the Community Console
+text editor_.
+
+In Chrome, when drag and dropping bookmarks or Omnibox links to the Community
+Console rich text editor, the bookmark/link title gets replaced by the URL.
+This option reverses this so the text gets preserved.
+
+![Demo of the feature](resources/drag_and_drop_fix.gif)
+
+### Batch lock
+> **Option name:** _Add the option to lock multiple threads from the Community
+Console thread list_.
+
+![GIF showing how the feature works](resources/batch_lock.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`
+months next to their username_.
+
+This section includes options which are useful to determine whether an OP is a
+newcomer or has posted in the forums before. A full description of what each
+option does can be found at [docs/op\_indicator.md](op_indicator.md).
+
+These are the possible combinations of both options:
+
+- 1st option enabled, 2nd option disabled.
+
+![Picture showing a colored dot next to the username](resources/op_indicator_1.gif)
+
+- 1st option disabled, 2nd option enabled.
+
+![Picture showing a monochrome badge](resources/op_indicator_2.gif)
+
+- Both options enabled.
+
+![Picture showing a colored badge](resources/op_indicator_3.gif)

docs/resources/compress_gif.bash

@@ -0,0 +1,6 @@
+#!/bin/bash
+# Helper tool used to compress generated GIFs
+gifsicle -O3 --lossy=100 --colors 128 $1 -o $2
+
+# webp isn't yet allowed to be used in gitiles
+#gif2webp -mixed -min_size -loop_compatibility $2

docs/resources/compress_image.bash

@@ -0,0 +1,3 @@
+#!/bin/bash
+# Helper tool used to compress screenshots from PNG to JPEG
+convert -quality 85 $1 $2

src/options.css

@@ -1,3 +1,14 @@
+body {
+  padding-top: 16px;
+}
+
+.features-link {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+}
+
 .option {
   margin: 4px 0;
   line-height: 1.8em;

src/options.html

@@ -7,6 +7,15 @@
     <link rel="stylesheet" href="options.css">
   </head>
   <body>
+    <a href="https://gerrit.avm99963.com/plugins/gitiles/infinitegforums/+/master/docs/features.md" target="_blank" class="features-link">
+      <!--
+        Material Design Icon - action/help_outline
+         - LICENSE: Apache License Version 2.0
+         - Source: https://github.com/google/material-design-icons/
+         - Author: Google LLC
+      -->
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1.61-9.96c-2.06-.3-3.88.97-4.43 2.79-.18.58.26 1.17.87 1.17h.2c.41 0 .74-.29.88-.67.32-.89 1.27-1.5 2.3-1.28.95.2 1.65 1.13 1.57 2.1-.1 1.34-1.62 1.63-2.45 2.88 0 .01-.01.01-.01.02-.01.02-.02.03-.03.05-.09.15-.18.32-.25.5-.01.03-.03.05-.04.08-.01.02-.01.04-.02.07-.12.34-.2.75-.2 1.25h2c0-.42.11-.77.28-1.07.02-.03.03-.06.05-.09.08-.14.18-.27.28-.39.01-.01.02-.03.03-.04.1-.12.21-.23.33-.34.96-.91 2.26-1.65 1.99-3.56-.24-1.74-1.61-3.21-3.35-3.47z"/></svg>
+    </a>
     <form>
       <div class="option"><input type="checkbox" id="list"> <label for="list" data-i18n="list"></label></div>
       <div class="option"><input type="checkbox" id="thread"> <label for="thread" data-i18n="thread"></label></div>