Switch to web extension framework

Update all the source code to have a working web extension, compatible
with Firefox 48+? (tested on version 57).

Background script has been completely rewritten, even though much of the
logics remain the same. Content script remains closer to its previous
version. Option handling must now be done by the extension (no more by
the SDK): add an option page. The popup for language selection did not
change much.

Since we changed a lot of things, this commit (or rather, the previous
one) also makes some cleanup in the files tracked by Git. Furthermore,
README.md and icons have been updated.

Of course, this new version of the add-on is no more compatible with the
jpm tool, or with the add-on SDK APIs.

Change version number to 2+. Since the new reference for version numbers
allows for more dot-separated values, the add-on will follow the
following scheme: A.B.X.Y, where
- A is the major version, bumped to 2,
- B is the minor version, incremented for each modification to the
  add-on internal code,
- X is the major version of embedded highlight.js,
- Y is the minor version of embedded highlight.js.
highlight.js also has a third (build) number, that will not appear in
the add-on version number.

Differences in behavior:
- The icon of the button no longer changes aspect when the button is
  clicked.
- Some options disappeared, as I suspect nobody used them: namely, the
  option for preventing background coloring, as well as the option for
  using alternate icon set (now handled directly in the manifest) have
  both been removed.

Known issue: the add-on keeps one global state to remember if the tab
has already been colored or not. Of course, in the case when several
tabs are to be highlighted, this is a problem. This is not so big an
issue, since in this case:
- If the tab should be colored but the state is not correct, the first
  click to the add-on button is without effect. Second click works as
  expected and opens the language selection popup.
- If the tab should be reset (to no-color) but the state is not correct,
  the language selection pops up (instead of not showing), and a click
  will un-highlight tab contents, whatever language was selected. Next
  click will have status in order, and will act as expected.
As a workaround, maybe the background script could probe the tab to see
if content script has been injected already. But I haven't been
successful with this so far, background script seems to hang if it
fails to connect to a content script. The issue will probably stay there
for a while, until I find something better.

Author: Qeole

README.md

@@ -1,74 +1,80 @@
- ![Add-on icon](misc/spot64.png) Enlight
-========================================
+ ![Add-on icon](icons/spot64.png) Enlight
+=========================================
 
-Firefox add-on providing syntax highlighting for raw code, based on the
-highlight.js project.
+Enlight is a Firefox add-on providing syntax highlighting for raw source code
+files, based on the highlight.js project.
 
-Syntax highlighting relies on highlight.js project (see [project
-homepage][hljs]. Currently packaged with the add-on is the version
+Syntax highlighting relies on the highlight.js library (see [project
+homepage][hljs]). Currently packaged with the add-on is the version
 9.12.0 of highlight.js, which provides
 78    color themes <!-- darkula is an alias, doesn't count --> and syntax for
 175   languages.
 
 ## Install
 
-\>>> [Get it from Mozilla add-ons platform][amo]. <<<
+▶▶▶ [Get it from Mozilla add-ons platform][amo]! ◀◀◀
 
 As a general rule, it is no longer possible to manually install the version
 provided here with the vanilla Firefox release. See [Mozilla policy on add-ons
-signature][signing] for details. On some specific Firefox versions where add-on
+signature][policy] for details. On some specific Firefox versions where add-on
 signing has been disabled (_Developer Edition_ or _Nightly_ with the option
 manually deactivated, or on special stable releases), it may be possible to use
-a version of the add-on coming from this repository.
+a version of the add-on coming from this repository ([see also Mozilla's
+wiki][signing]).
 
-If you run one of those specific versions: just open the
-`enlight_highlightjs@jetpack-<version>.xpi` file (`File->Open`) in Firefox.
-Confirm you want to install, and you're done.
+If you run one of those specific versions and want to run or build the add-on,
+use the [web-ext tool][webext-start]. To test it with a temporary Firefox
+profile, use:
 
-To build the add-on, one needs the `jpm` tool ([documentation][jpm]). If you
-wish to build from sources, the `xpi` add-on file itself can easily be
-generated with a `jpm xpi` command from the Mozilla add-on SDK (see
-[documentation on MDN][sdk]).
+    web-ext run
 
-Building with `cfx` is no longer supported. I intend to work on a version based
-on WebExtensions, … when I can find some spare time!
+Or to compile an add-on `.xpi` file, use instead:
+
+    web-ext build
+
+See the [documentation for web-ext tool][webext-ref] if you need more
+information about the available commands and options.
+
+Building with `cfx` or `jpm` (used for older versions) is no longer supported.
 
 ## Usage
 
 ### Basics
 
-On install, a new button with a ~~spotlight~~ light bulb
-![buttonOff](data/lightbulb_off-32.png) (yes, it's supposed to be a
-~~spotlight~~ light bulb − but the magnificent spotlight remains the add-on
-icon in the add-on manager tab for now) should appear in Firefox toolbar.
+On install, a new button with a light bulb
+![button](icons/lightbulb-dark-19x32.png) should appear in Firefox toolbar.
 
 To highlight raw source code in the active tab, click on this button and select
 the language syntax you want to use (or “Autodetect” for automatic detection).
-If you want to undo highlighting, just click again on the button
-![buttonOn](data/lightbulb_on-32.png) (reloading the page also works).
+If you want to undo highlighting, just click again on the button. Reloading the
+page also works.
 
 ### Options
 
 You can also customize some options through Firefox add-on manager tab:
+
 * Color theme selection (_default: Solarized Dark_): change the CSS theme in
   use for syntax highlight.
 * Automatic highlighting (_default: off_): check it to automatically trigger
   syntax highlighting for all plain text files.
-* Alternate icon set (_default: off_): use white icons; useful if you use a
-  dark theme for Firefox, such as the default theme for Developer Edition
-* Adapt background body color (_default: on_): remove white border due to
-  body background color. There is no reason to deactivate this, unless you try
-  to highlight non-plain text pages and get strange background modification.
 * Add line numbers (_default: off_): add line numbers on the left of file
   content. Line numbers are created with CSS and are not part of the file
   contents.
 
-When line numbering is enabled, it is possible to jump to line passed through
-URL (_default: on_): scroll to e.g. line 27 and select it if a suffix such as
+When line numbering is enabled, it is possible to jump to the line passed
+through URL: e.g. scroll to line 27 and select it if a suffix such as
 `#Line27` or `#line27` or `#L27` or `#l27` is appended to the URL **before**
 the script loads (this does not relies on HTML anchors and cannot be triggered
-by simple URL modification; reload the script for current page if you added the
-suffix afterward).
+by simple URL modification; reload syntax highlighting for current page if you
+added the suffix afterward).
+
+### New languages, color schemes
+
+Enlight relies on highlight.js library for coloring the code. It does not
+modify this library, nor does it add support for additional languages or color
+schemes. Therefore, fixes for language syntax and auto-detection accuracy,
+suggestions or contributions to new languages and styles should be addressed to
+the [highlight.js project community][hljs].
 
 ## License
 
@@ -82,15 +88,16 @@ for details).
 ## Miscellaneous
 
 Other than on the [hilight.js homesite][hljs], you can find a list of supported
-languages in [data/languages-all.json][languages], and of available color schemes in
-[package.json][package].
+languages in [data/languages-all.json][languages], and of available color
+schemes in [package.json][package].
 
 [hljs]: https://highlightjs.org
-[signing]: https://blog.mozilla.org/addons/2015/02/10/extension-signing-safer-experience
+[policy]: https://blog.mozilla.org/addons/2015/02/10/extension-signing-safer-experience
+[signing]: https://wiki.mozilla.org/Add-ons/Extension_Signing
 [amo]: https://addons.mozilla.org/firefox/addon/enlight
-[sdk]: https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_started
+[webext-start]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext
+[webext-ref]: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/web-ext_command_reference
 [mpl]: https://github.com/Qeole/Enlight/blob/master/LICENSE
 [bsd]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE
 [languages]: https://github.com/Qeole/Enlight/blob/master/data/languages-all.json
 [package]: https://github.com/Qeole/Enlight/blob/master/package.json
-[jpm]: https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/jpm

_locales/en/messages.json

@@ -1,31 +1,6 @@
-# Vim: set spelllang=en:
-
-# Metadata
-# Currently in master branch of add-on SDK, but not in current stable v1.17
-addon_description = Syntax highlight for raw source code.
-
-# Preferences
-style_title             = Color theme
-style_description       = Select the color theme you want to use for syntax highlighting.
-autohl_title            = Auto-highlight source code files
-autohl_description      = Automatically apply highlighting to pages detected as source code (technically, detection occurs when HTML body contains a single child of name <pre></pre>).
-invert_title            = Alternate icon set
-invert_description      = Use white (instead of dark gray) icons for the button, for a better contrast on dark themes.
-bgColor_title           = Adapt body background color
-bgColor_description     = Make HTML body background color the same as background color for the code block. Should remove white border around highlighted code. Disable if you use the add-on on web pages other than plain text source code files.
-lineNumbers_title       = Add line numbering
-lineNumbers_description = Display line numbers on the left of highlighted content. When this option is enabled, one can also scroll to e.g. line 27 and select it if a suffix such as “#Line27” or “#line27” or “#L27” or “#l27” is appended to the URL BEFORE the script loads (this does not relies on HTML anchors and cannot be triggered by simple URL modification; reload the script for current page if you added the suffix afterward).
-
-# Button
-button_label      = Highlight raw source code
-
-# Language selection panel
-autodetect        = Auto-detect
-no_language       = None
-
-# Logs
-log_highlight     = Let's (try to) highlight code for language “%s” with style “%s”.
-log_undo          = Oh, well, let's get back to initial content.
-log_toggleoff     = Received toggle off request from content script for reason “%s”.
-log_toff_r1       = nothing to work on in this document
-log_toff_r2       = document is unloaded
+{
+    "description": {
+        "message": "Syntax highlighting for raw source code files.",
+        "description": "Description of the extension."
+    }
+}

_locales/fr/messages.json

@@ -1,31 +1,6 @@
-# Vim: set spelllang=fr:
-
-# Métadata
-# Currently in master branch of add-on SDK, but not in current stable v1.17
-addon_description = Coloration syntaxique sur code source brut.
-
-# Préférences
-style_title             = Thème
-style_description       = Sélectionnez le jeu de couleurs à utiliser pour la coloration syntaxique.
-autohl_title            = Coloration automatique du code source
-autohl_description      = Lance automatiquement la coloration syntaxique à l'ouverture des pages détectées comme étant des fichiers sources (du point de vue technique, cette détection survient lorsque l'élément HTML body contient un unique nœud, de type <pre></pre>).
-invert_title            = Icônes alternatives
-invert_description      = Utiliser des icônes blanches (plutôt que gris foncé) pour le bouton, pour un meilleur contraste sur un thème foncé.
-bgColor_title           = Adapter la couleur d'arrière-plan de l'élément body
-bgColor_description     = Étend la couleur d'arrière plan du bloc de code coloré à l'élément body du document HTML. Cela permet en principe de retirer la bordure blanche qui apparaît autour du bloc coloré. Désactivez cette option si vous utilisez cette extension pour des pages web autres que contenant seulement du code source au format texte.
-lineNumbers_title       = Numéroter les lignes
-lineNumbers_description = Affiche le numéro de chaque ligne à gauche du contenu coloré. Lorsque cette option est activée, il est possible de sauter à la ligne fournie, par exemple 27, et de la mettre en surbrillance si l'URL comporte un suffixe de la forme « #Line27 » ou « #line27 » ou « #L27 » ou « #l27 ». Ce suffixe doit être ajouté AVANT le chargement du script (la fonctionnalité ne repose pas sur les ancres HTML et ne peut pas détecter une simple modification de l'URL. Si le suffixe est ajouté après le chargement du script pour la page en cours, il suffit de recharger ce dernier).
-
-# Bouton
-button_label      = Coloration syntaxique de code
-
-# Panneau de sélection du langage
-autodetect        = Détection auto
-no_language       = Aucun
-
-# Logs
-log_highlight     = Essayons la coloration syntaxique pour le langage « %s » avec le thème « %s ».
-log_undo          = Retour au contenu initial du document.
-log_toggleoff     = Le script de contenu signale l'absence de coloration pour la raison « %s ».
-log_toff_r1       = aucun bloc sur lequel travailler dans ce document
-log_toff_r2       = le document est déchargé du navigateur
+{
+    "description": {
+        "message": "Coloration syntaxique pour code source brut.",
+        "description": "Description of the extension."
+    }
+}