Grammalecte  Changes On Branch 92e25df2da16f8e8

    xGCEWorker.postMessage({
        sCommand: "setDictionaryOnOff",
        dParam: { sDictionary: sDictionary, bActivate: bActivate },
        dInfo: {}
    });
}

function initSCOptions (dSavedOptions) {
    if (!dSavedOptions.hasOwnProperty("sc_options")) {
function initSCOptions (oData) {
    if (!oData.hasOwnProperty("sc_options")) {
        browser.storage.local.set({"sc_options": {
            extended: true,
            community: true,
            personal: true
        }});
        setDictionaryOnOff("extended", true);
        setDictionaryOnOff("community", true);
        setDictionaryOnOff("personal", true);
    } else {
        let dOptions = dSavedOptions.sc_options;
        setDictionaryOnOff("extended", dOptions["extended"]);
        setDictionaryOnOff("community", dOptions["community"]);
        setDictionaryOnOff("personal", dOptions["personal"]);
        setDictionaryOnOff("community", oData.sc_options["community"]);
        setDictionaryOnOff("personal", oData.sc_options["personal"]);
    }
}

function setDictionary (sDictionary, oDictionary) {
    xGCEWorker.postMessage({
        sCommand: "setDictionary",
        dParam: { sDictionary: sDictionary, oDict: oDictionary },
        dInfo: {}
    });
}

function setSpellingDictionary (dSavedDictionary) {
    if (dSavedDictionary.hasOwnProperty("oExtendedDictionary")) {
        setDictionary("extended", dSavedDictionary["oExtendedDictionary"]);
function setSpellingDictionaries (oData) {
    if (oData.hasOwnProperty("oPersonalDictionary")) {
        // deprecated
        console.log("personal dictionary migration");
        browser.storage.local.set({ "dictionaries": { "__personal__": oData["oPersonalDictionary"] } });
        setDictionary("personal", oData["oPersonalDictionary"]);
        browser.storage.local.remove("oPersonalDictionary");
    }
    if (dSavedDictionary.hasOwnProperty("oCommunityDictionary")) {
        setDictionary("community", dSavedDictionary["oCommunityDictionary"]);
    }
    if (dSavedDictionary.hasOwnProperty("oPersonalDictionary")) {
        setDictionary("personal", dSavedDictionary["oPersonalDictionary"]);
    if (oData.hasOwnProperty("dictionaries")) {
        if (oData.dictionaries.hasOwnProperty("__personal__")) {
            setDictionary("personal", oData.dictionaries["__personal__"]);
        }
        if (oData.dictionaries.hasOwnProperty("__community__")) {
            setDictionary("personal", oData.dictionaries["__community__"]);
        }
    }
}

function init () {
    if (bChrome) {
        browser.storage.local.get("gc_options", initGrammarChecker);
        browser.storage.local.get("ui_options", initUIOptions);
        browser.storage.local.get("oExtendedDictionary", setSpellingDictionary);
        browser.storage.local.get("dictionaries", setSpellingDictionaries);
        browser.storage.local.get("oCommunityDictionary", setSpellingDictionary);
        browser.storage.local.get("oPersonalDictionary", setSpellingDictionary);
        browser.storage.local.get("oPersonalDictionary", setSpellingDictionaries); // deprecated
        browser.storage.local.get("sc_options", initSCOptions);
        return;
    }
    browser.storage.local.get("gc_options").then(initGrammarChecker, showError);
    browser.storage.local.get("ui_options").then(initUIOptions, showError);
    browser.storage.local.get("oExtendedDictionary").then(setSpellingDictionary, showError);
    browser.storage.local.get("dictionaries").then(setSpellingDictionaries, showError);
    browser.storage.local.get("oCommunityDictionary").then(setSpellingDictionary, showError);
    browser.storage.local.get("oPersonalDictionary").then(setSpellingDictionary, showError);
    browser.storage.local.get("oPersonalDictionary").then(setSpellingDictionaries, showError); // deprecated
    browser.storage.local.get("sc_options").then(initSCOptions, showError);
}

init();


browser.runtime.onInstalled.addListener(function (oDetails) {

        case "setDictionary":
        case "setDictionaryOnOff":
            xGCEWorker.postMessage(oRequest);
            break;
        case "openURL":
            browser.tabs.create({url: dParam.sURL});
            break;
        case "openConjugueurTab":
            openConjugueurTab();
            break;
        case "openLexiconEditor":
            openLexiconEditor(dParam["dictionary"]);
            break;
        case "openDictionaries":
            openDictionaries();
            break;
        default:
            console.log("[background] Unknown command: " + sCommand);
            console.log(oRequest);
    }
    //sendResponse({response: "response from background script"});
}

browser.runtime.onMessage.addListener(handleMessage);


function handleConnexion (xPort) {
    // Messages from tabs
    let iPortId = xPort.sender.tab.id; // identifier for the port: each port can be found at dConnx[iPortId]
    dConnx.set(iPortId, xPort);
    xPort.onMessage.addListener(function (oRequest) {
        let {sCommand, dParam, dInfo} = oRequest;
        switch (sCommand) {
            case "parse":
            case "parseAndSpellcheck":

browser.contextMenus.create({ id: "rightClickLxgEditableNode",  title: "Lexicographe (zone de texte)",              contexts: ["editable"] });
browser.contextMenus.create({ id: "rightClickGCEditableNode",   title: "Correction grammaticale (zone de texte)",   contexts: ["editable"] });
browser.contextMenus.create({ id: "separator_editable",         type: "separator",                                  contexts: ["editable"] });
// Page
browser.contextMenus.create({ id: "rightClickLxgPage",          title: "Lexicographe (page)",                       contexts: ["all"] }); // on all parts, due to unwanted selection
browser.contextMenus.create({ id: "rightClickGCPage",           title: "Correction grammaticale (page)",            contexts: ["all"] });
browser.contextMenus.create({ id: "separator_page",             type: "separator",                                  contexts: ["all"] });
// Conjugueur
// Tools
browser.contextMenus.create({ id: "conjugueur_window",          title: "Conjugueur [fenêtre]",                      contexts: ["all"] });
browser.contextMenus.create({ id: "conjugueur_tab",             title: "Conjugueur [onglet]",                       contexts: ["all"] });
browser.contextMenus.create({ id: "dictionaries",               title: "Dictionnaires",                             contexts: ["all"] });
browser.contextMenus.create({ id: "lexicon_editor",             title: "Éditeur lexical",                           contexts: ["all"] });
// Rescan page
browser.contextMenus.create({ id: "separator_rescan",           type: "separator",                                  contexts: ["editable"] });
browser.contextMenus.create({ id: "rescanPage",                 title: "Rechercher à nouveau les zones de texte",   contexts: ["editable"] });


browser.contextMenus.onClicked.addListener(function (xInfo, xTab) {
    // xInfo = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus/OnClickData

        // conjugueur
        case "conjugueur_window":
            openConjugueurWindow();
            break;
        case "conjugueur_tab":
            openConjugueurTab();
            break;
        case "lexicon_editor":
            openLexiconEditor();
            break;
        case "dictionaries":
            openDictionaries();
            break;
        // rescan page
        case "rescanPage":
            let xPort = dConnx.get(xTab.id);
            xPort.postMessage({sActionDone: "rescanPage"});
            break;
        default:
            console.log("[Background] Unknown menu id: " + xInfo.menuItemId);

    switch (sCommand) {
        case "conjugueur_tab":
            openConjugueurTab();
            break;
        case "conjugueur_window":
            openConjugueurWindow();
            break;
        case "lex_editor":
            openLexEditor();
        case "lexicon_editor":
            openLexiconEditor();
            break;
        case "dictionaries":
            openDictionaries();
            break;
    }
});


/*
    Tabs
*/
let nTabLexiconEditor = null;
let nTabDictionaries = null;

browser.tabs.onRemoved.addListener(function (nTabId, xRemoveInfo) {
    if (nTabId === nTabLexiconEditor) {
        nTabLexiconEditor = null;
    }
    else if (nTabId === nTabDictionaries) {
        nTabDictionaries = null;
    }
});


/*
    Actions
*/

function storeGCOptions (dOptions) {
    if (dOptions instanceof Map) {
        dOptions = helpers.mapToObject(dOptions);
    }
    browser.storage.local.set({"gc_options": dOptions});
}

function sendCommandToTab (sCommand, iTab) {
    let xTabPort = dConnx.get(iTab);
    xTabPort.postMessage({sActionDone: sCommand, result: null, dInfo: null, bEnd: false, bError: false});
}

function openLexEditor () {
    if (bChrome) {
        browser.tabs.create({
            url: browser.extension.getURL("panel/lex_editor.html")
function openLexiconEditor (sName="__personal__") {
    if (nTabLexiconEditor === null) {
        if (bChrome) {
            browser.tabs.create({
                url: browser.extension.getURL("panel/lex_editor.html")
            }, onLexiconEditorOpened);
            return;
        }
        let xLexEditor = browser.tabs.create({
            url: browser.extension.getURL("panel/lex_editor.html")
        });
        xLexEditor.then(onLexiconEditorOpened, onError);
    }
}

function onLexiconEditorOpened (xTab) {
    //console.log(xTab);
    nTabLexiconEditor = xTab.id;
}

function openDictionaries () {
    if (nTabDictionaries === null) {
        if (bChrome) {
            browser.tabs.create({
                url: browser.extension.getURL("panel/dictionaries.html")
            }, onDictionariesOpened);
        return;
    }
    let xLexEditor = browser.tabs.create({
        url: browser.extension.getURL("panel/lex_editor.html")
    });
    xLexEditor.then(onCreated, onError);
            return;
        }
        let xLexEditor = browser.tabs.create({
            url: browser.extension.getURL("panel/dictionaries.html")
        });
        xLexEditor.then(onDictionariesOpened, onError);
    }
}

function onDictionariesOpened (xTab) {
    //console.log(xTab);
    nTabDictionaries = xTab.id;
}

function openConjugueurTab () {
    if (bChrome) {
        browser.tabs.create({
            url: browser.extension.getURL("panel/conjugueur.html")
        });

function onCreated (xWindowInfo) {
    //console.log(`Created window: ${xWindowInfo.id}`);
}

function onError (error) {
    console.log(`Error: ${error}`);
    console.log(error);
}

        return;
    }
    //console.log("setDictionary", sDictionary);
    switch (sDictionary) {
        case "main":
            oSpellChecker.setMainDictionary(oDict);
            break;
        case "extended":
            oSpellChecker.setExtendedDictionary(oDict);
            break;
        case "community":
            oSpellChecker.setCommunityDictionary(oDict);
            break;
        case "personal":
            oSpellChecker.setPersonalDictionary(oDict);
            break;
        default:
            console.log("[worker] setDictionary: Unknown dictionary <"+sDictionary+">");
    }
    postMessage(createResponse("setDictionary", true, dInfo, true));
}

function setDictionaryOnOff (sDictionary, bActivate, dInfo) {
    if (!oSpellChecker) {
        postMessage(createResponse("setDictionary", "# Error. SpellChecker not loaded.", dInfo, true));
        return;
    }
    //console.log("setDictionaryOnOff", sDictionary, bActivate);
    switch (sDictionary) {
        case "extended":
            if (bActivate) {
                oSpellChecker.activateExtendedDictionary();
            } else {
                oSpellChecker.deactivateExtendedDictionary();
            }
            break;
        case "community":
            if (bActivate) {
                oSpellChecker.activateCommunityDictionary();
            } else {
                oSpellChecker.deactivateCommunityDictionary();
            }
            break;

      ],
      "run_at": "document_idle"
    }
  ],

  "commands": {
    "conjugueur_tab": {
      "suggested_key": {
      "suggested_key": { "default": "Ctrl+Shift+6" },
        "default": "Ctrl+Shift+6"
      },
      "description": "Ouvre le conjugueur dans un onglet"
    },
    "conjugueur_window": {
      "suggested_key": {
      "suggested_key": { "default": "Ctrl+Shift+7" },
        "default": "Ctrl+Shift+7"
      },
      "description": "Ouvre le conjugueur dans une fenêtre"
    },
    "lex_editor": {
      "suggested_key": {
    "lexicon_editor": {
      "suggested_key": { "default": "Ctrl+Shift+8" },
        "default": "Ctrl+Shift+8"
      },
      "description": "Ouvre l’éditeur lexical"
      "description": "Ouvre l’éditeur lexical"
    },
    "dictionaries": {
      "suggested_key": { "default": "Ctrl+Shift+9" },
      "description": "Ouvre le gestionnaire de dictionnaires communautaires"
    }
  },

  "web_accessible_resources": [
    "content_scripts/panel.css",
    "content_scripts/panel_tf.css",
    "content_scripts/panel_gc.css",

/*
   CSS Document
   White
   Design par Olivier R.
*/

* { margin: 0; padding: 0; }
img { border: none; }


/* Generic classes */

.fleft { float: left; }
.fright { float: right; }
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.justify { text-align: justify; }
.hidden { display: none; }
.clearer { clear: both; font-size: 0; height: 0; }

body {
    background: hsl(0, 0%, 100%) url(../img/lines.png);
    font: normal 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    color: #505050;
}

.inbox {
    width: 800px;
    margin: 20px auto 10px auto;
    padding: 10px 30px 30px 30px;
    background: hsl(0, 0%, 100%);
    border: 2px solid hsl(210, 0%, 90%);
    border-radius: 20px;
}

h1 {
    margin: 5px 0 5px 0;
    color: hsl(210, 50%, 50%);
    font: bold 30px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    text-align: center;
}
h2 {
    margin: 5px 0 2px 0;
    color: hsl(0, 50%, 50%);
    font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
h3 {
    margin: 3px 0 2px 0;
    color: hsl(210, 50%, 50%);
    font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}


/*
    Main buttons
*/


.columns {
    display: flex;
}


ul {
    margin-left: 30px;
}

input[type=text].large {
    display: inline-block;
    width: 250px;
    padding: 5px 10px;
    border: 2px solid hsl(0, 0%, 80%);
    border-radius: 3px;
    height: 24px;
    background: transparent;
    font: normal 20px Tahoma, "Ubuntu Condensed";
    color: hsl(0, 0%, 20%);
}

input[type=text].medium {
    display: inline-block;
    width: 175px;
    padding: 2px 5px;
    border: 2px solid hsl(0, 0%, 80%);
    border-radius: 3px;
    height: 20px;
    background: transparent;
    font: normal 18px Tahoma, "Ubuntu Condensed";
    color: hsl(0, 0%, 20%);
}

input[placeholder] {
    color: hsl(0, 0%, 50%);
}



/*
    Table
*/
#wait_progress {
    width: 100%;
    height: 4px;
}

table {
    border: 1px solid hsl(210, 10%, 50%);
    width: 100%;
}
th {
    padding: 5px 10px;
    border-left: 1px solid hsl(210, 10%, 90%);
    text-align: left;
}
td {
    padding: 0 10px;
    vertical-align: top;
}
.delete_entry {
    cursor: pointer;
    font-weight: bold;
    color: hsl(0, 100%, 50%);
}
.select_entry {
    cursor: pointer;
    background-color: hsl(120, 50%, 30%);
    color: hsl(120, 50%, 100%);
    border-radius: 3px;
    text-align: center;
}

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dictionaries.css" />
    <title>Grammalecte · Dictionnaires communautaires</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  </head>

  <body>

    <div class="inbox">

      <h1>Dictionnaires communautaires</h1>

        <h2>Dictionnaires sélectionnés</h2>
        <p id="dictionaries_list">[Aucun]<p>

        <h2>Dictionnaires disponibles sur le serveur de Grammalecte</h2>
        <progress id="wait_progress" value="0"></progress>
        <table id="dictionaries_table">
        </table>

    </div>


    <script src="../grammalecte/graphspell/helpers.js"></script>
    <script src="../grammalecte/graphspell/char_player.js"></script>
    <script src="../grammalecte/graphspell/str_transform.js"></script>
    <script src="../grammalecte/graphspell/ibdawg.js"></script>
    <script src="../grammalecte/graphspell/spellchecker.js"></script>
    <script src="dictionaries.js"></script>
  </body>

</html>

// JavaScript

"use strict";


// Chrome don’t follow the W3C specification:
// https://browserext.github.io/browserext/
let bChrome = false;
if (typeof(browser) !== "object") {
    var browser = chrome;
    bChrome = true;
}


/*
    Common functions
*/

function showError (e) {
    console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message);
}

function createNode  (sType, oAttr, oDataset=null) {
    try {
        let xNode = document.createElement(sType);
        Object.assign(xNode, oAttr);
        if (oDataset) {
            Object.assign(xNode.dataset, oDataset);
        }
        return xNode;
    }
    catch (e) {
        showError(e);
    }
}



class Table {

    constructor (sNodeId, lColumn, sProgressBarId, sResultId="", bDeleteButtons=true, bActionButtons) {
        this.sNodeId = sNodeId;
        this.xTable = document.getElementById(sNodeId);
        this.nColumn = lColumn.length;
        this.lColumn = lColumn;
        this.xProgressBar = document.getElementById(sProgressBarId);
        this.xNumEntry = document.getElementById(sResultId);
        this.iEntryIndex = 0;
        this.lEntry = [];
        this.nEntry = 0;
        this.bDeleteButtons = bDeleteButtons;
        this.bActionButtons = bActionButtons;
        this._createHeader();
        this.listen();
    }

    _createHeader () {
        let xRowNode = createNode("tr");
        if (this.bDeleteButtons) {
            xRowNode.appendChild(createNode("th", { textContent: "·", width: "12px" }));
        }
        for (let sColumn of this.lColumn) {
            xRowNode.appendChild(createNode("th", { textContent: sColumn }));
        }
        this.xTable.appendChild(xRowNode);
    }

    clear () {
        while (this.xTable.firstChild) {
            this.xTable.removeChild(this.xTable.firstChild);
        }
        this.lEntry = [];
        this.nEntry = 0;
        this.iEntryIndex = 0;
        this._createHeader();
        this.showEntryNumber();
    }

    fill (lFlex) {
        this.clear();
        if (lFlex.length > 0) {
            this.xProgressBar.max = lFlex.length;
            this.xProgressBar.value = 1;
            for (let lData of lFlex) {
                this._addRow(lData);
                this.xProgressBar.value += 1;
            }
            this.xProgressBar.value = this.xProgressBar.max;
        }
        this.lEntry = lFlex;
        this.nEntry = lFlex.length;
        this.showEntryNumber();
    }

    addEntries (lFlex) {
        this.lEntry.push(...lFlex);
        for (let lData of lFlex) {
            this._addRow(lData);
        }
        this.nEntry += lFlex.length;
        this.showEntryNumber();
    }

    showEntryNumber () {
        if (this.xNumEntry) {
            this.xNumEntry.textContent = this.nEntry;
        }
    }

    _addRow (lData) {
        let xRowNode = createNode("tr", { id: this.sNodeId + "_row_" + this.iEntryIndex });
        if (this.bDeleteButtons) {
            xRowNode.appendChild(createNode("td", { textContent: "×", className: "delete_entry", title: "Effacer cette entrée" }, { id_entry: this.iEntryIndex }));
        }
        for (let data of lData) {
            xRowNode.appendChild(createNode("td", { textContent: data }));
        }
        if (this.bActionButtons) {
            xRowNode.appendChild(createNode("td", { textContent: "+", className: "select_entry", title: "Sélectionner/Désélectionner cette entrée" }, { id_entry: this.iEntryIndex }));
        }
        this.xTable.appendChild(xRowNode);
        this.iEntryIndex += 1;
    }

    listen () {
        if (this.bDeleteButtons || this.bActionButtons) {
            this.xTable.addEventListener("click", (xEvent) => { this.onTableClick(xEvent); }, false);
        }
    }

    onTableClick (xEvent) {
        try {
            let xElem = xEvent.target;
            if (xElem.className) {
                switch (xElem.className) {
                    case "delete_entry": this.deleteRow(xElem.dataset.id_entry); break;
                    case "select_entry": this.selectEntry(xElem.dataset.id_entry); break;
                }
            }
        }
        catch (e) {
            showError(e);
        }
    }

    deleteRow (iEntry) {
        this.lEntry[parseInt(iEntry)] = null;
        if (document.getElementById(this.sNodeId + "_row_" + iEntry)) {
            document.getElementById(this.sNodeId + "_row_" + iEntry).style.display = "none";
        }
        this.nEntry -= 1;
        this.showEntryNumber();
        if (this.sNodeId == "lexicon_table") {
            showElement("save_button", "inline-block");
        }
    }

    selectEntry (iEntry) {
        let sRowId = this.sNodeId + "_row_" + iEntry;
        document.getElementById(sRowId).style.backgroundColor = "hsl(120, 50%, 90%)";
    }

    getEntries () {
        return this.lEntry.filter((e) => e !== null);
    }
}


const oDicTable = new Table("dictionaries_table", ["Nom", "Créé par", "Entrées", "Description"], "wait_progress", "", false, true);

oDicTable.fill([
    ["Ambre", "Inconnu", "240", "Univers des Princes d’Ambre (de Roger Zelazny)"],
    ["Malaz", "Inconnu", "2340", "Univers du Livre des Martyrs (de Steven Erikson)"],
    ["Pudlard", "Inconnu", "1440", "Univers d’Harry Potter de XXXX"],
    ["Dune", "Inconnu", "2359", "Univers de Dune (de Frank Herbert)"],
    ["StarWars", "Inconnu", "4359", "Univers de Star Wars (de George Lucas)"]
]);

    font: bold 20px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
h3 {
    margin: 3px 0 2px 0;
    color: hsl(210, 50%, 50%);
    font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}

#dic_selector {
    color: hsl(210, 50%, 50%);
    font: bold 16px "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}

details {
    font-size: 11px;
    font-variant: small-caps;
    color: hsl(210, 50%, 50%);
    cursor: pointer;
}
details > * {
    font-size: 12px;
    font-variant: normal;
    color: hsl(210, 0%, 0%);
    cursor: auto;
}
details.inline {
    padding: 3px;
    width: 260px;
}



/*
    Main buttons
*/
#buttons {
    padding: 10px 0;
    justify-content: center;
}
.main_button {
    margin: 0 5px;
    width: 100px;
    min-width: 100px;
    padding: 10px 20px;
    background-color: hsl(210, 10%, 95%);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}
#lexicon_button {

    background-color: hsl(150, 60%, 40%);
    color: hsl(150, 60%, 90%);
    box-shadow: 0 0 2px hsl(150, 60%, 50%);
}


#lexicon_page {
    

}


/*
    Search page
*/
#search_page {

    width: 500px;
}


/*
    Dictionary
*/
#save_button, #export_button, #import_button {
#save_button {
    display: none;
    float: right;
    padding: 2px 10px;
    margin-left: 5px;
    padding: 1px 5px;
    background-color: hsl(150, 50%, 50%);
    color: hsl(150, 0%, 100%);
    border-radius: 3px;
    cursor: pointer;
}
#export_button, #import_button {
    display: block;
    margin-left: 5px;
    float: right;
    padding: 2px 10px;
    background-color: hsl(210, 50%, 50%);
    color: hsl(210, 0%, 100%);
    border-radius: 3px;
    cursor: pointer;
}

#wait_progress {
    width: 100%;
    height: 4px;
}


/*

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="lex_editor.css" />
    <title>Grammalecte · Éditeur lexical</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  </head>
  

  <body>

    <div class="inbox">

      <h1>Éditeur lexical</h1>

      <div class="big_block">
        <div class="dic_container">
          <div><h3>Dictionnaire personnel</h3></div>
          <div>Enregistré le : <span id="dic_save_date">—</span></div>
          <div><h3>Dictionnaire</h3></div>
          <div>
            <select id="dic_selector">
              <option value="__personal__">personnel</option>
              <option value="__community__">communautaire</option>
            </select>
          </div>
          <div>[<span id="dic_save_date">—</span>]</div>
          <div><span id="dic_num_entries">0</span> entrées</div>
          <!--<div id="import_button" class="fright">Importer</div>-->
          <div class="fright">
          <div>
            <input type="file" id="import_input" accept=".json" style="display: none;">
            <label id="import_button" for="import_input">Importer</label>
          </div>
          <div id="export_button" class="fright">Exporter</div>
          <div id="export_button">Exporter</div>
        </div>
        <div class="dic_container">

        </div>
        <progress id="wait_progress" value="0"></progress>
      </div>

      <div id="buttons" class="container">
        <div id="lexicon_button" class="main_button">Lexique</div>
        <div id="lexicon_button" class="main_button">
          Lexique · <span id="num_entries">0</span> entrées <span id="save_button">Enregistrer</span>
        </div>
        <div id="add_button" class="main_button">Ajout</div>
        <div id="search_button" class="main_button">Recherche</div>
        <div id="info_button" class="main_button">Informations</div>
      </div>

      <div id="add_page">
        <div class="columns">

                      <details class="inline">
                        <div class="container">
                          <div class="examples_true">Je suis venu.<br/>Je suis parti.</div>
                          <div class="examples_false">J’ai venu.<br/>J’ai parti.</div>
                        </div>
                      </details>
                    </div>
                      

                    <div class="space_container">
                      <div>
                        <input type="checkbox" id="up_v_aa" value="a" /><label for="up_v_aa"> avoir</label>
                      </div>
                      <details class="inline">
                        <div class="container">
                          <div class="examples_true">J’ai mangé.<br/>J’ai prié.</div>

                  <p><input type="text" id="flexion" name="flexion" class="large" maxlength="20" value="" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" placeholder="flexion" /></p>
                  <h3>Étiquettes</h3>
                  <p><input type="text" id="tags" name="tags" class="large" maxlength="20" value="" pattern="^:[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ:._-]+$" placeholder="étiquettes" /></p>
                </div>
              </div>
            </div>
          </div> <!-- #new_word_generator -->
          

          <div id="generated_words">
            <h2>Mots générés</h2>
            <table id="generated_words_table">
              

            </table>
            <div id="buttonline">
              <div id="add_to_lexicon">Ajouter au lexique</div>
            </div>
          </div> <!-- #generated_words -->
        </div> <!-- .columns -->
      </div> <!-- #add_page -->


      <div id="lexicon_page">
        <h2>Votre lexique</h2>
        <div class="big_block">
          <div id="save_button" class="fright">
            Enregistrer
          </div>
          <p>Nombre d’entrées : <span id="num_entries">0</span>.</p>
        </div>

        <table id="lexicon_table">
              

        </table>
      </div> <!-- #lexicon_page -->


      <div id="search_page">
        <div class="columns">
          <div style="margin-right: 20px;">

            <p style="margin-top: 50px;">La recherche par expressions régulières peut générer un nombre gigantesque de résultats. Seules les 2000 premières occurrences trouvées seront affichées. La recherche peut être longue, parce tout le graphe de mots, qui contient 500 000 flexions, sera parcouru si besoin.</p>
          </div>

          <div>
            <h2>Résultats</h2>
            <table id="search_table">
                  

            </table>
          </div>
        </div>
      </div> <!-- #search_page -->


      <div id="info_page">

            <h3>Étiquettes rares</h3>
            <p>Il est déconseillé d’utiliser la catégorie ‹Autre› pour générer autre chose que des noms, des adjectifs, des noms propres, des verbes et des adverbes. Il n’y a aucune garantie que les étiquettes pour les autres catégories, notamment les mots grammaticaux, ne changeront pas.</p>
          </div>

          <div>
            <table id="tags_table">
              

            </table>
          </div>
        </div>
      </div> <!-- #info_page -->

    </div>


    <script src="../grammalecte/graphspell/helpers.js"></script>
    <script src="../grammalecte/graphspell/char_player.js"></script>
    <script src="../grammalecte/graphspell/str_transform.js"></script>
    <script src="../grammalecte/graphspell/dawg.js"></script>
    <script src="../grammalecte/graphspell/ibdawg.js"></script>
    <script src="../grammalecte/graphspell/spellchecker.js"></script>
    <script src="../grammalecte/fr/conj.js"></script>
    <script src="../grammalecte/fr/conj_generator.js"></script>
    <script src="../grammalecte/fr/lexicographe.js"></script>
    <script src="lex_editor.js"></script>
  </body>
  

</html>

        return xNode;
    }
    catch (e) {
        showError(e);
    }
}

function showElement (sElemId) {
function showElement (sElemId, sDisplay="block") {
    if (document.getElementById(sElemId)) {
        document.getElementById(sElemId).style.display = "block";
        document.getElementById(sElemId).style.display = sDisplay;
    } else {
        console.log("HTML node named <" + sElemId + "> not found.")
    }
}

function hideElement (sElemId) {
    if (document.getElementById(sElemId)) {

        this.xTable.appendChild(xRowNode);
    }

    clear () {
        while (this.xTable.firstChild) {
            this.xTable.removeChild(this.xTable.firstChild);
        }
        this.lEntry = [];
        this.nEntry = 0;
        this.iEntryIndex = 0;
        this._createHeader();
        this.showEntryNumber();
    }

    fill (lFlex) {
        this.clear();
        if (lFlex.length > 0) {
            this.xProgressBar.max = lFlex.length;
            this.xProgressBar.value = 1;

        this.lEntry[parseInt(iEntry)] = null;
        if (document.getElementById(this.sNodeId + "_row_" + iEntry)) {
            document.getElementById(this.sNodeId + "_row_" + iEntry).style.display = "none";
        }
        this.nEntry -= 1;
        this.showEntryNumber();
        if (this.sNodeId == "lexicon_table") {
            showElement("save_button");
            showElement("save_button", "inline-block");
        }
    }

    getEntries () {
        return this.lEntry.filter((e) => e !== null);
    }
}

        try {
            oLexiconTable.addEntries(this.createFlexLemmaTagArray());
            oGenWordsTable.clear();
            document.getElementById("lemma").value = "";
            document.getElementById("lemma").focus();
            this.hideAllSections();
            hideElement("editor");
            showElement("save_button");
            showElement("save_button", "inline-block");
            this.clear();
            this.cMainTag = "";
        }
        catch (e) {
            showError(e);
        }
    }
}


const oDictHandler = {
const oBinaryDict = {
    
    oIBDAWG: null,
    oDictionaries: null,

    load: function () {
    loadDictionaries: function () {
        if (bChrome) {
            browser.storage.local.get("oPersonalDictionary", this._load.bind(this));
            browser.storage.local.get("dictionaries", this._loadDictionaries.bind(this));
            return;
        }
        let xPromise = browser.storage.local.get("oPersonalDictionary");
        xPromise.then(this._load.bind(this), showError);
        let xPromise = browser.storage.local.get("dictionaries");
        xPromise.then(this._loadDictionaries.bind(this), showError);
    },

    _loadDictionaries: function (oResult) {
        if (!oResult.hasOwnProperty("dictionaries")) {
            return;
        }
        this.oDictionaries = oResult.dictionaries;
        oBinaryDict.load("__personal__");
    },

    getDictionary: function (sName) {
        if (this.oDictionaries  &&  this.oDictionaries.hasOwnProperty(sName)) {
            //console.log(this.oDictionaries[sName]);
            return this.oDictionaries[sName];
        }
        return null;
    },

    saveDictionary: function (sName, oJSON) {
        this.oDictionaries[sName] = oJSON;
        if (sName == "__personal__") {
            browser.runtime.sendMessage({ sCommand: "setDictionary", dParam: {sDictionary: "personal", oDict: oJSON}, dInfo: {} });

    _load: function (oResult) {
        if (!oResult.hasOwnProperty("oPersonalDictionary")) {
            hideElement("export_button");
            return;
        }
        let oJSON = oResult.oPersonalDictionary;
        }
        else if (sName == "__community__") {
            browser.runtime.sendMessage({ sCommand: "setDictionary", dParam: {sDictionary: "community", oDict: oJSON}, dInfo: {} });
        }
        else {
            // TODO: merge sub-dictionaries
        }
        this.storeDictionaries();
    },

    storeDictionaries: function () {
        browser.storage.local.set({ "dictionaries": this.oDictionaries });
    }
}

const oBinaryDict = {

    oIBDAWG: null,
    sName: null,

    load: function (sName) {
        console.log("lexicon editor, load: " + sName);
        this.sName = sName;
        let oJSON = oDictHandler.getDictionary(sName);
        if (oJSON) {
            this.__load(oJSON);
            this.parseDict(oJSON);
        } else {
            oLexiconTable.clear();
            this.setDictData(0, "[néant]");
            hideElement("save_button");
        }
    },

    __load: function (oJSON) {
    parseDict: function (oJSON) {
        try {
            this.oIBDAWG = new IBDAWG(oJSON);
        }
        catch (e) {
            console.error(e);
            this.setDictData(0, "#Erreur. Voir la console.");
            return;
        }
        let lEntry = [];
        for (let aRes of this.oIBDAWG.select()) {
            lEntry.push(aRes);
        }        
        }
        oLexiconTable.fill(lEntry);
        this.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);
    },

        hideElement("save_button");
    save: function (oJSON) {
        browser.storage.local.set({ "oPersonalDictionary": oJSON });
        browser.runtime.sendMessage({ sCommand: "setDictionary", dParam: {sDictionary: "personal", oDict: oJSON}, dInfo: {} });
    },

    import: function () {
        let xInput = document.getElementById("import_input"); 
        let xInput = document.getElementById("import_input");
        let xFile = xInput.files[0];
        let xURL = URL.createObjectURL(xFile);
        let sJSON = helpers.loadFile(xURL);
        if (sJSON) {
            try {
                let oJSON = JSON.parse(sJSON);
                this.__load(oJSON);
                this.save(oJSON);
                this.parseDict(oJSON);
                oDictHandler.saveDictionary(this.sName, oJSON);
            }
            catch (e) {
                console.error(e);
                this.setDictData(0, "#Erreur. Voir la console.");
                return;
            }
        } else {
            this.setDictData(0, "[néant]");
            this.save(null);
            oDictHandler.saveDictionary(this.sName, null);
        }
    },

    setDictData: function (nEntries, sDate) {
        document.getElementById("dic_num_entries").textContent = nEntries;
        document.getElementById("dic_save_date").textContent = sDate;
        if (nEntries == 0) {
            hideElement("export_button");
        } else {
            showElement("export_button");
        }
    },

    listen: function () {
        document.getElementById("dic_selector").addEventListener("change", () => {this.load(document.getElementById("dic_selector").value)}, false);
        document.getElementById("save_button").addEventListener("click", () => { this.build(); }, false);
        document.getElementById("export_button").addEventListener("click", () => { this.export(); }, false);
        document.getElementById("import_input").addEventListener("change", () => { this.import(); }, false);
    },

    build: function () {
        let xProgressNode = document.getElementById("wait_progress");
        let lEntry = oLexiconTable.getEntries();
        if (lEntry.length > 0) {
            let oDAWG = new DAWG(lEntry, "S", "fr", "Français", "Dictionnaire personnel", xProgressNode);
            let oDAWG = new DAWG(lEntry, "S", "fr", "Français", this.sName, xProgressNode);
            let oJSON = oDAWG.createBinaryJSON(1);
            this.save(oJSON);
            oDictHandler.saveDictionary(this.sName, oJSON);
            this.oIBDAWG = new IBDAWG(oJSON);
            this.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);
        } else {
            oDictHandler.saveDictionary(this.sName, null);
            this.setDictData(0, "[néant]");
            this.save(null);
        }
        hideElement("save_button");
    },

    export: function () {
        let xBlob = new Blob([ JSON.stringify(this.oIBDAWG.getJSON()) ], {type: 'application/json'}); 
        let xBlob = new Blob([ JSON.stringify(this.oIBDAWG.getJSON()) ], {type: 'application/json'});
        let sURL = URL.createObjectURL(xBlob);
        browser.downloads.download({ filename: "fr.personal.json", url: sURL, saveAs: true });
        browser.downloads.download({ filename: "fr."+this.sName+".json", url: sURL, saveAs: true });
    }
}


const oSearch = {

    oSpellChecker: null,

const oLexiconTable = new Table("lexicon_table", ["Flexions", "Lemmes", "Étiquettes"], "wait_progress", "num_entries");
const oSearchTable = new Table("search_table", ["Flexions", "Lemmes", "Étiquettes"], "wait_progress", "search_num_entries", false);
const oTagsTable = new Table("tags_table", ["Étiquette", "Signification"], "wait_progress", "", false);


oTagsInfo.load();
oSearch.load();
oBinaryDict.load();
oDictHandler.loadDictionaries();
oBinaryDict.listen();
oGenerator.listen();
oTabulations.listen();
oSearch.listen();

    height: 500px;
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
}
body {
    width: 450px;
    height: 500px;
}
/* 
/*
    Maximal height of a panel in WebExtention seems to be 500px.
    When going over this limit, a scrollbar appears which destructs the
    horizontal balance of elements.
    --> vertical scrolling is done with overflow in #page.
        #page must have the same height than body.
*/

    padding: 5px 10px;
    border-radius: 3px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}


.option_section {
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: hsl(210, 20%, 96%);
}
.option_section label {
    font-size: 16px;
    line-height: 20px;
    color: hsl(210, 20%, 50%);
    font-weight: bold;
}
.option_description {
    padding: 0 0 0 20px;
    color: hsl(0, 0%, 0%);
    font-size: 12px;
}


/*
    Spell checking options
*/
#sc_options_page {
    display: none;
    padding: 20px;
}
.dictionaries_info {
    margin: 10px 0;
    padding: 10px;
    border-radius: 3px;
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 10%, 96%);
}
#sc_options_page h2 {
    margin-top: 20px;
    font: normal 22px 'Yanone Kaffeesatz', "Oswald", "Liberation Sans Narrow", sans-serif;
    color: hsl(210, 50%, 50%);
}
.button_row {
    display: flex;
    flex-direction: row-reverse;
    padding: 5px 0 0 0;

}
/*
    Options
*/
.option_section {
    padding: 10px;
.dic_button {
    margin-left: 10px;
    padding: 2px 10px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: hsl(210, 20%, 96%);
    background-color: hsl(210, 50%, 50%);
}
.option_section label {
    font-size: 16px;
    line-height: 20px;
    color: hsl(210, 20%, 50%);
    color: hsl(210, 10%, 96%);
    font-weight: bold;
}
.option_description {
    padding: 0 0 0 20px;
    color: hsl(0, 0%, 0%);
    font-size: 12px;
    cursor: pointer;
    font-size: 14px;
    font-variant-caps: small-caps;
    border-radius: 3px;
}


/*
  Test page
*/
#test_page {

    animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
    animation-delay: -1.0s;
}

@keyframes sk-bounce {
    0%, 100% { 
    0%, 100% {
        transform: scale(0.0);
    } 50% { 
    } 50% {
        transform: scale(1.0);
    }
}

          <h2>Raccourcis clavier</h2>
          <p class="shortcut">CTRL+MAJ+6</p>
          <p class="shortcut_label">Conjugueur (dans un onglet)</p>
          <p class="shortcut">CTRL+MAJ+7</p>
          <p class="shortcut_label">Conjugueur (dans une fenêtre)</p>
          <p class="shortcut">CTRL+MAJ+8</p>
          <p class="shortcut_label">Éditeur lexical</p>
          <p class="shortcut">CTRL+MAJ+9</p>
          <p class="shortcut_label">Dictionnaires communautaires</p>
        </section> <!-- #ui_options_page -->

        <section id="gc_options_page" class="page">
          <h1>OPTIONS GRAMMATICALES</h1>
          <div id="grammar_options">
            ${webextOptionsHTML}
          </div>
          <div id="default_options_button" class="button blue center">Options par défaut</div>
        </section> <!-- #gc_options_page -->

        <section id="sc_options_page" class="page">
          <h1>OPTIONS ORTHOGRAPHIQUES</h1>
          <div id="hunspell_options">
            <h2>DICTIONNAIRES DE GRAMMALECTE</h2>
            <p class="dictionaries_info">Ces dictionnaires ne sont utilisés que lors de l’analyse grammaticale.</p>
            <div class="option_section" id="main_dic_box">
                <p><input type="checkbox" id="main_dic" data-dictionary="personal" checked disabled="disabled" /> <label for="main_dic">Dictionnaire principal</label></p>
                <p class="option_description">Environ 83 000 entrées, 500 000 flexions.<br/>Ni éditable, ni désactivable.</p>
                <p><input type="checkbox" id="main_dic" data-dictionary="main" checked disabled="disabled" /> <label for="main_dic">Dictionnaire principal</label></p>
                <p class="option_description">Environ 83 000 entrées, 500 000 flexions.<br/>Ni éditable, ni désactivable.<br/>Ce dictionnaire est créé à partir du dictionnaire orthographique pour Firefox et LibreOffice, conçu sur le <a id="link_grammalecte" class="link" data-url="http://grammalecte.net/home.php?prj=fr">site de Grammalecte</a>.</p>
            </div>
            <div class="option_section" id="extended_dic_box" style="opacity: .33;">
                <p><input type="checkbox" id="extended_dic" data-dictionary="personal" disabled="disabled" /> <label for="extended_dic">Dictionnaire étendu</label></p>
                <p class="option_description">Fonctionnalité à venir.</p>
            </div>
            <div class="option_section" id="community_dic_box">
                <p><input type="checkbox" id="community_dic" data-dictionary="community" /> <label for="community_dic">Dictionnaire communautaire</label></p>
                <p class="option_description">Ce dictionnaire est créé et édité via l’éditeur lexical et est sauvegardé sur un serveur en ligne accessible à tous les membres.</p>
                <div class="button_row">
                  <div class="dic_button" id="dic_community_button">Éditer</div>
                  <div class="dic_button" id="dictionaries_button">Dictionnaires en ligne</div>
                </div>
            <div class="option_section" id="community_dic_box" style="opacity: .33;">
                <p><input type="checkbox" id="community_dic" data-dictionary="personal" disabled="disabled" /> <label for="community_dic">Dictionnaire communautaire</label></p>
                <p class="option_description">Fonctionnalité à venir.</p>
            </div>
            <div class="option_section" id="personal_dic_box">
                <p><input type="checkbox" id="personal_dic" data-dictionary="personal" /> <label for="personal_dic">Dictionnaire personnel</label></p>
                <p class="option_description">Ce dictionnaire est créé et édité via l’éditeur lexical.</p>
                <p class="option_description">Ce dictionnaire est créé et édité via l’éditeur lexical et n’est pas partagé.</p>
                <div class="button_row">
                  <div class="dic_button" id="dic_personal_button">Éditer</div>
                </div>
            </div>
          </div>

          <div id="hunspell_options" style="display: none; opacity: .25">
            <h2>DICTIONNAIRES HUNSPELL</h2>
            <p class="dictionaries_info">Les dictionnaires Hunspell ne sont utilisées que pour la correction orthographique proposée par Firefox (soulignement rouge).<br/><br/>Section inactive.<br/>Le système d’extension <i>WebExtension</i> ne propose pas encore d’interface de programmation pour le correcteur orthographique.</p>
            <div class="option_section" id="fr-FR-modern_box">

            else if (xElem.id.startsWith("ui_option_")) {
                storeUIOptions();
            }
            else if (xElem.id.startsWith("link_")) {
                browser.tabs.create({url: xElem.dataset.url});
            }
            else if (xElem.id == "conj_button") {
                browser.runtime.sendMessage({
                openConjugueurTab();
                    sCommand: "openConjugueurTab",
                    dParam: {},
                    dInfo: {}
                });
            }
            else if (xElem.id == "dictionaries_button") {
                browser.runtime.sendMessage({
                    sCommand: "openDictionaries",
                    dParam: { "dictionary": "__community__"},
                    dInfo: {}
                });
            }
            else if (xElem.id == "dic_community_button") {
                browser.runtime.sendMessage({
                    sCommand: "openLexiconEditor",
                    dParam: { "dictionary": "__community__"},
                    dInfo: {}
                });
            }
            else if (xElem.id == "dic_personal_button") {
                browser.runtime.sendMessage({
                    sCommand: "openLexiconEditor",
                    dParam: { "dictionary": "__personal__"},
                    dInfo: {}
                });
            }
        } else if (xElem.className.startsWith("select")) {
            showPage(xElem.dataset.page);
        }/* else if (xElem.tagName === "A") {
            openURL(xElem.getAttribute("href"));
        }*/
    },
    false
);


/* 
/*
    Message sender
    and response handling
*/
function handleResponse (oResponse) {
    console.log(`[Panel] received:`);
    console.log(oResponse);
}

function handleError (error) {
    console.log(`[Panel] Error:`);
    console.log(error);
}

function sendMessageAndWaitResponse (oData) {
    let xPromise = browser.runtime.sendMessage(oData);
    xPromise.then(handleResponse, handleError);  
    xPromise.then(handleResponse, handleError);
}


/*
    Messages received
*/
function handleMessage (oMessage, xSender, sendResponse) {

}


function showTestResult (sText) {
    document.getElementById("tests_result").textContent = sText;
}

function openConjugueurTab () {
    if (bChrome) {
        browser.tabs.create({
            url: browser.extension.getURL("panel/conjugueur.html")
        });
        return;
    }
    let xConjTab = browser.tabs.create({
        url: browser.extension.getURL("panel/conjugueur.html")
    });
    xConjTab.then(onCreated, onError);
}

function openConjugueurTab () {
    if (bChrome) {
        browser.tabs.create({
            url: browser.extension.getURL("panel/conjugueur.html")
        });
        return;
    }
    let xConjTab = browser.tabs.create({
        url: browser.extension.getURL("panel/conjugueur.html")
    });
    xConjTab.then(onCreated, onError);
}


/*
    UI options
*/
function displayUIOptionsLoadedFromStorage () {
    if (bChrome) {
        browser.storage.local.get("ui_options", displayUIOptions);

function displaySCOptions (dOptions) {
    if (!dOptions.hasOwnProperty("sc_options")) {
        console.log("no sc options found");
        return;
    }
    dOptions = dOptions.sc_options;
    //document.getElementById("extended_dic").checked = dOptions.extended_dic;
    //document.getElementById("community_dic").checked = dOptions.community_dic;
    //document.getElementById("extended_dic").checked = dOptions.extended;
    document.getElementById("community_dic").checked = dOptions.community;
    document.getElementById("personal_dic").checked = dOptions.personal;
}

function storeSCOptions () {
    browser.storage.local.set({"sc_options": {
        extended: false,
        community: false,
        community: document.getElementById("community_dic").checked,
        personal: document.getElementById("personal_dic").checked
    }});
}


/*
    GC options