Skip to content

Commit

Permalink
Switch to web extension framework
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Qeole committed Nov 2, 2017
1 parent 36c54d5 commit 99821c9
Show file tree
Hide file tree
Showing 16 changed files with 725 additions and 762 deletions.
83 changes: 45 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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
37 changes: 6 additions & 31 deletions _locales/en/messages.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
37 changes: 6 additions & 31 deletions _locales/fr/messages.json
Original file line number Diff line number Diff line change
@@ -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."
}
}
Binary file added icons/lightbulb-dark-19x32.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
76 changes: 76 additions & 0 deletions icons/lightbulb-dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 99821c9

Please sign in to comment.