Grammalecte  Changes On Branch e7fc1e12a3b94e22

        dDistTemp.clear();
        return aSugg;
    }

    _suggest (sRemain, nMaxDel=0, nDeep=0, iAddr=0, sNewWord="", bAvoidLoop=false) {
        // returns a set of suggestions
        // recursive function

        let aSugg = new Set();
        if (sRemain == "") {
            if (this._convBytesToInteger(this.byDic.slice(iAddr, iAddr+this.nBytesArc)) & this._finalNodeMask) {

                aSugg.add(sNewWord);
            }
            for (let sTail of this._getTails(iAddr)) {
                aSugg.add(sNewWord+sTail);
            }
            return aSugg;
        }

        return aTails;
    }

    _suggestWithCrushedUselessChars (sWord, nDeep=0, iAddr=0, sNewWord="", bAvoidLoop=false) {
        let aSugg = new Set();
        if (sWord.length == 0) {
            if (this._convBytesToInteger(this.byDic.slice(iAddr, iAddr+this.nBytesArc)) & this._finalNodeMask) {

                aSugg.add(sNewWord);
            }
            return aSugg;
        }
        let cCurrent = sWord.slice(0, 1);
        for (let [cChar, jAddr] of this._getSimilarArcsAndCrushedChars(cCurrent, iAddr)) {

            aSugg.gl_update(this._suggestWithCrushedUselessChars(sWord.slice(1), nDeep+1, jAddr, sNewWord+cChar));
        }
        return aSugg;
    }

    * _getSimilarArcsAndCrushedChars (cChar, iAddr) {
        // generator: yield similar char of <cChar> and address of the following node

browser.runtime.onConnect.addListener(handleConnexion);


/*
    Context Menu
*/

// Selected text
browser.contextMenus.create({
    id: "rightClickLxgSelectedText",
    title: "Lexicographe (sélection)",
    contexts: ["selection"]
});

browser.contextMenus.create({
    id: "rightClickGCSelectedText",
    title: "Correction grammaticale (sélection)",
    contexts: ["selection"]
});

browser.contextMenus.create({
    id: "separator_selection",
    type: "separator",
    contexts: ["selection"]
});

// Editable content
browser.contextMenus.create({
    id: "rightClickTFEditableNode",
    title: "Formateur de texte (zone de texte)",
    contexts: ["editable"]
});

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: ["page"]
});

browser.contextMenus.create({
    id: "rightClickGCPage",
    title: "Correction grammaticale (page)",
    contexts: ["page"]
});

browser.contextMenus.create({
    id: "separator_page",
    type: "separator",
    contexts: ["page"]
});

// Conjugueur
browser.contextMenus.create({
    id: "conjugueur_window",
    title: "Conjugueur [fenêtre]",
    contexts: ["all"]
});

browser.contextMenus.create({
    id: "conjugueur_tab",
    title: "Conjugueur [onglet]",
    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
    // xTab = https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/Tab
    // confusing: no way to get the node where we click?!
    switch (xInfo.menuItemId) {
        // editable node
        // page
        case "rightClickTFEditableNode":
        case "rightClickLxgEditableNode":
        case "rightClickGCEditableNode":
        case "rightClickLxgPage":
        case "rightClickGCPage":
            sendCommandToTab(xInfo.menuItemId, xTab.id);
            break;
        // selected text
        case "rightClickGCSelectedText":
            sendCommandToTab("rightClickGCSelectedText", xTab.id);
            xGCEWorker.postMessage({
                sCommand: "parseAndSpellcheck",
                dParam: {sText: xInfo.selectionText, sCountry: "FR", bDebug: false, bContext: false},
                dInfo: {iReturnPort: xTab.id}
            });
            break;
        case "rightClickLxgSelectedText":
            sendCommandToTab("rightClickLxgSelectedText", xTab.id);
            xGCEWorker.postMessage({
                sCommand: "getListOfTokens",
                dParam: {sText: xInfo.selectionText},
                dInfo: {iReturnPort: xTab.id}
            });
            break;
        // conjugueur
        case "conjugueur_window":
            openConjugueurWindow();
            break;
        case "conjugueur_tab":
            openConjugueurTab();
            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);
            console.log(xInfo);

    if (bChrome) {
        // JS crap again. Chrome can’t store Map object.
        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 openConjugueurTab () {
    if (bChrome) {
        browser.tabs.create({
            url: browser.extension.getURL("panel/conjugueur.html")
        });

    let img = document.createElement('img');
    img.src = (URL || webkitURL).createObjectURL(blobTxt); // webkitURL is obsolete: https://bugs.webkit.org/show_bug.cgi?id=167518
    Array.filter(document.getElementsByClassName(sContainerClass), function (oElem) {
        oElem.appendChild(img);
    });
}
*/


const oGrammalecte = {

    nMenu: 0,
    lMenu: [],

    oTFPanel: null,
    oLxgPanel: null,
    oGCPanel: null,

    oMessageBox: null,

    xRightClickedNode: null,

    listenRightClick: function () {
        // Node where a right click is done
        // Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1325814
        document.addEventListener('contextmenu', function (xEvent) {
            this.xRightClickedNode = xEvent.target;
        }.bind(this), true);
    },

    clearRightClickedNode: function () {
        this.xRightClickedNode = null;
    },

    createMenus: function () {
        let lNode = document.getElementsByTagName("textarea");
        for (let xNode of lNode) {
            if (xNode.style.display !== "none" && xNode.style.visibility !== "hidden") {
                this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
                this.nMenu += 1;
            }
        }
    },

    createMenus2 () {
        let lNode = document.querySelectorAll("[contenteditable]");
        for (let xNode of lNode) {
            this.lMenu.push(new GrammalecteMenu(this.nMenu, xNode));
            this.nMenu += 1;
        }
    },

    rescanPage: function () {
        if (this.oTFPanel !== null) { this.oTFPanel.hide(); }
        if (this.oLxgPanel !== null) { this.oLxgPanel.hide(); }
        if (this.oGCPanel !== null) { this.oGCPanel.hide(); }
        for (let oMenu of this.lMenu) {
            oMenu.deleteNodes();
        }
        this.lMenu.length = 0; // to clear an array
        this.listenRightClick();
        this.createMenus();
        this.createMenus2();
    },

    createTFPanel: function () {
        if (this.oTFPanel === null) {
            this.oTFPanel = new GrammalecteTextFormatter("grammalecte_tf_panel", "Formateur de texte", 760, 600, false);
            //this.oTFPanel.logInnerHTML();
            this.oTFPanel.insertIntoPage();

    createGCPanel: function () {
        if (this.oGCPanel === null) {
            this.oGCPanel = new GrammalecteGrammarChecker("grammalecte_gc_panel", "Grammalecte", 500, 700);
            this.oGCPanel.insertIntoPage();
        }
    },

    createMessageBox: function () {
        if (this.oMessageBox === null) {
            this.oMessageBox = new GrammalecteMessageBox("grammalecte_message_box", "Grammalecte", 400, 300);
            this.oMessageBox.insertIntoPage();
        }
    },

    startGCPanel: function (xNode=null) {
        oGrammalecte.createGCPanel();
        oGrammalecte.oGCPanel.clear();
        oGrammalecte.oGCPanel.show();
        oGrammalecte.oGCPanel.start(xNode);
        oGrammalecte.oGCPanel.startWaitIcon();
    },

    startLxgPanel: function () {
        oGrammalecte.createLxgPanel();
        oGrammalecte.oLxgPanel.clear();
        oGrammalecte.oLxgPanel.show();
        oGrammalecte.oLxgPanel.startWaitIcon();
    },

    startFTPanel: function (xNode=null) {
        oGrammalecte.createTFPanel();
        oGrammalecte.oTFPanel.start(xNode);
        oGrammalecte.oTFPanel.show();
    },

    showMessage: function (sMessage) {
        oGrammalecte.createMessageBox();
        oGrammalecte.oMessageBox.setMessage(sMessage);
        oGrammalecte.oMessageBox.show();
    },

    getPageText: function () {
        let sPageText = document.body.innerText;
        let nPos = sPageText.indexOf("__grammalecte_panel__");
        if (nPos >= 0) {
            sPageText = sPageText.slice(0, nPos);
        }
        return sPageText;
    },

    createNode: function (sType, oAttr, oDataset=null) {
        try {
            let xNode = document.createElement(sType);
            Object.assign(xNode, oAttr);
            if (oDataset) {
                Object.assign(xNode.dataset, oDataset);

/*
    Connexion to the background
*/
let xGrammalectePort = browser.runtime.connect({name: "content-script port"});

xGrammalectePort.onMessage.addListener(function (oMessage) {
    let {sActionDone, result, dInfo, bEnd, bError} = oMessage;
    let sText = "";
    switch (sActionDone) {
        case "parseAndSpellcheck":
            if (!bEnd) {
                oGrammalecte.oGCPanel.addParagraphResult(result);
            } else {
                oGrammalecte.oGCPanel.stopWaitIcon();
            }

            } else {
                oGrammalecte.oLxgPanel.stopWaitIcon();
            }
            break;
        case "getSpellSuggestions":
            oGrammalecte.oGCPanel.oTooltip.setSpellSuggestionsFor(result.sWord, result.aSugg, dInfo.sErrorId);
            break;
        /*
            Commands received from the context menu
            (Context menu are initialized in background)
        */
        // Grammar checker commands
        case "rightClickGCEditableNode":
            if (oGrammalecte.xRightClickedNode !== null) {
                oGrammalecte.startGCPanel(oGrammalecte.xRightClickedNode);
                sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.innerText;
                xGrammalectePort.postMessage({
                    sCommand: "parseAndSpellcheck",
                    dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false},
                    dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id}
                });
            } else {
                oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié. Sélectionnez le texte à corriger et relancez le correcteur via le menu contextuel.");
            }
            break;
        case "rightClickGCPage":
            oGrammalecte.startGCPanel();
            xGrammalectePort.postMessage({
                sCommand: "parseAndSpellcheck",
                dParam: {sText: oGrammalecte.getPageText(), sCountry: "FR", bDebug: false, bContext: false},
                dInfo: {}
            });
            break;
        case "rightClickGCSelectedText":
            oGrammalecte.startGCPanel();
            // selected text is sent to the GC worker in the background script.
            break;
        // Lexicographer commands
        case "rightClickLxgEditableNode":
            if (oGrammalecte.xRightClickedNode !== null) {
                oGrammalecte.startLxgPanel();
                sText = (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") ? oGrammalecte.xRightClickedNode.value : oGrammalecte.xRightClickedNode.textContent;
                xGrammalectePort.postMessage({
                    sCommand: "getListOfTokens",
                    dParam: {sText: sText},
                    dInfo: {sTextAreaId: oGrammalecte.xRightClickedNode.id}
                });
            } else {
                oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié. Sélectionnez le texte à analyser et relancez le lexicographe via le menu contextuel.");
            }
            break;
        case "rightClickLxgPage":
            oGrammalecte.startLxgPanel();
            xGrammalectePort.postMessage({
                sCommand: "getListOfTokens",
                dParam: {sText: oGrammalecte.getPageText()},
                dInfo: {}
            });
            break;
        case "rightClickLxgSelectedText":
            oGrammalecte.startLxgPanel();
            // selected text is sent to the GC worker in the background script.
            break;
        // Text formatter command
        case "rightClickTFEditableNode":
            if (oGrammalecte.xRightClickedNode !== null) {
                if (oGrammalecte.xRightClickedNode.tagName == "TEXTAREA") {
                    oGrammalecte.startFTPanel(oGrammalecte.xRightClickedNode);
                } else {
                    oGrammalecte.showMessage("Cette zone de texte n’est pas réellement un champ de formulaire, mais un node HTML éditable. Le formateur de texte n’est pas disponible pour ce type de champ de saisie.");
                }
            } else {
                oGrammalecte.showMessage("Erreur. Le node sur lequel vous avez cliqué n’a pas pu être identifié.");
            }
            break;
        // rescan page command
        case "rescanPage":
            oGrammalecte.rescanPage();
            break;
        default:
            console.log("[Content script] Unknown command: " + sActionDone);
    }
});


/*
    Start
*/
oGrammalecte.listenRightClick();
oGrammalecte.createMenus();
oGrammalecte.createMenus2();

    border-top: 4px solid hsla(210, 100%, 40%, .7);
    border-bottom: 4px solid hsla(210, 100%, 40%, .7);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 0 hsla(210, 50%, 50%, .5);
    z-index: 2147483640; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    animation: grammalecte-spin 2s ease 1;
}
.grammalecte_menu_main_button:hover {
    border: 4px solid hsla(210, 80%, 35%, .5);
    background-color: hsla(210, 80%, 55%, .5);
    animation: grammalecte-spin .5s linear infinite;
}

// JavaScript

"use strict";


class GrammalecteMenu {

    constructor (nMenu, xNode) {
        this.sMenuId = "grammalecte_menu" + nMenu;
        this.xButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_main_button", textContent: " "});
        this.xButton.onclick = () => { this.switchMenu(); };
        this.xMenu = this._createMenu(xNode);
        this._insertAfter(this.xButton, xNode);
        this._insertAfter(this.xMenu, xNode);
    }

    _insertAfter (xNewNode, xReferenceNode) {
        xReferenceNode.parentNode.insertBefore(xNewNode, xReferenceNode.nextSibling);
    }

    _createMenu (xNode) {
        try {
            let sText = (xNode.tagName == "TEXTAREA") ? xNode.value : xNode.textContent;
            let xMenu = oGrammalecte.createNode("div", {id: this.sMenuId, className: "grammalecte_menu"});
            xMenu.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_menu_header", textContent: "GRAMMALECTE"}));
            // Text formatter
            if (xNode.tagName == "TEXTAREA") {
                let xTFButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Formateur de texte"});
                xTFButton.onclick = () => {
                    this.switchMenu();
                    oGrammalecte.createTFPanel();
                    oGrammalecte.oTFPanel.start(xNode);
                    oGrammalecte.oTFPanel.show();
                };
                xMenu.appendChild(xTFButton);
            }
            // lexicographe
            let xLxgButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Lexicographe"});
            xLxgButton.onclick = () => {
                this.switchMenu();
                oGrammalecte.startLxgPanel();



                xGrammalectePort.postMessage({
                    sCommand: "getListOfTokens",
                    dParam: {sText: sText},
                    dInfo: {sTextAreaId: xNode.id}
                });
            };
            xMenu.appendChild(xLxgButton);
            // Grammar checker
            let xGCButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item", textContent: "Correction grammaticale"});
            xGCButton.onclick = () => {
                this.switchMenu();
                oGrammalecte.startGCPanel(xNode);



                xGrammalectePort.postMessage({
                    sCommand: "parseAndSpellcheck",
                    dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false},
                    dInfo: {sTextAreaId: xNode.id}
                });
            };
            xMenu.appendChild(xGCButton);
            // Conjugation tool
            let xConjButton = oGrammalecte.createNode("div", {className: "grammalecte_menu_item_block", textContent: "Conjugueur"});
            let xConjButtonTab = oGrammalecte.createNode("div", {className: "grammalecte_menu_button", textContent: "Onglet"});
            xConjButtonTab.onclick = () => {
                this.switchMenu();
                xGrammalectePort.postMessage({sCommand: "openConjugueurTab", dParam: null, dInfo: null});
            };
            let xConjButtonWin = oGrammalecte.createNode("div", {className: "grammalecte_menu_button", textContent: "Fenêtre"});
            xConjButtonWin.onclick = () => {
                this.switchMenu();
                xGrammalectePort.postMessage({sCommand: "openConjugueurWindow", dParam: null, dInfo: null});
            };
            xConjButton.appendChild(xConjButtonTab);
            xConjButton.appendChild(xConjButtonWin);





            xMenu.appendChild(xConjButton);
            //xMenu.appendChild(oGrammalecte.createNode("img", {scr: browser.extension.getURL("img/logo-16.png")}));
            // can’t work, due to content-script policy: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
            xMenu.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_menu_footer"}));
            return xMenu;
        }
        catch (e) {
            showError(e);
        }
    }

    deleteNodes () {
        this.xMenu.parentNode.removeChild(this.xMenu);
        this.xButton.parentNode.removeChild(this.xButton);
    }

    switchMenu () {
        let xMenu = document.getElementById(this.sMenuId);
        xMenu.style.display = (xMenu.style.display == "block") ? "none" : "block";
    }
}

/*
    CSS
    Message box for Grammalecte
*/

.grammalecte_message_box {
    padding: 0;
    margin: 0;
    position: fixed;
    box-sizing: content-box;
    z-index: 2147483641; /* maximum is 2147483647: https://stackoverflow.com/questions/491052/minimum-and-maximum-value-of-z-index */
    border: 2px solid hsl(210, 10%, 50%);
    border-radius: 10px 10px 10px 10px;
    background-color: hsl(210, 0%, 100%);
    color: hsl(0, 0%, 0%);
    font-family: "Trebuchet MS", "Fira Sans", "Liberation Sans", sans-serif;
    box-shadow: 0 0 2px 1px hsla(210, 50%, 50%, .5);
    line-height: normal;
    text-shadow: none;
    text-decoration: none;
}
.grammalecte_message_box img {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.grammalecte_message_box_bar {
    position: sticky;
    width: 100%;
    background-color: hsl(210, 0%, 90%);
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid hsl(210, 10%, 80%);
    color: hsl(210, 10%, 4%);
    font-size: 20px;
}
.grammalecte_message_box_title {
    padding: 10px 20px;
}
.grammalecte_message_box_label {
    display: inline-block;
    padding: 0 10px;
}
.grammalecte_message_box_invisible_marker {
    position: absolute;
    /*visibility: hidden;*/
    font-size: 6px;
    color: hsl(210, 0%, 90%); /* same color than panel_bar background */
}

.grammalecte_message_box_content {
    position: absolute;
    min-width: 100%;
    height: calc(100% - 55px); /* panel height - title_bar */
    overflow: auto;
}

.grammalecte_message_box_message {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 50%, 96%);
    font-size: 20px;
}

// JavaScript
// Panel creator

"use strict";


class GrammalecteMessageBox {

    constructor (sId, sTitle, nWidth, nHeight) {
        this.sId = sId;
        this.nWidth = nWidth;
        this.nHeight = nHeight;
        this.xMessageBoxBar = oGrammalecte.createNode("div", {className: "grammalecte_message_box_bar"});
        this.xMessageBoxContent = oGrammalecte.createNode("div", {className: "grammalecte_message_box_content"});
        this.xMessageBox = this._createPanel(sTitle);
        this.center();
    }

    _createPanel (sTitle) {
        try {
            let xMessageBox = oGrammalecte.createNode("div", {id: this.sId, className: "grammalecte_message_box"});
            this.xMessageBoxBar.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_invisible_marker", textContent: "__grammalecte_panel__"}));
            this.xMessageBoxBar.appendChild(this._createButtons());
            let xTitle = oGrammalecte.createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(this._createLogo());
            xTitle.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_message_box_label", textContent: sTitle}));
            this.xMessageBoxBar.appendChild(xTitle);
            xMessageBox.appendChild(this.xMessageBoxBar);
            xMessageBox.appendChild(this.xMessageBoxContent);
            return xMessageBox;
        }
        catch (e) {
            showError(e);
        }
    }

    _createLogo () {
        let xImg = document.createElement("img");
        xImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAC8UlEQVQ4jX3TbUgTcRwH8P89ddu5u9tt082aZmpFEU4tFz0QGTUwCi0heniR9MSUIKRaD0RvIlKigsooo+iNFa0XJYuwIjEK19OcDtPElsG0ktyp591t7u7+vUh7MPX3+vf5/n8/+P0BmKJIPUUVlh2rdVVeesWlzEybqg+bFOsoylnqPmNavGFfknV2Omu2Lvja3vxAURKJib3opHizu8riLK6gjRyuKgmoSoMRFENRUqfXTzvBGK62LC2uoFkOl4RhjQ8+qWt7dPNE3sbdp+2LXbsGe9qb4rIo/BfwFy6nWQ4ThWGNDzbcfu29dMDh2nHU7CypYNLmzTda0/L5cNuzmDQi/A4Y27k6eQxLI79wS/11D0AAMNvs6XT6ojVJjJEgTbMy2BT77xBMp09KcpaWV1uc41jQoi0NdUHfjeOO9WWn7AVF7s7n986SithPJGeupBh2PCSP/xxqxAp3eq6wuUV7Wc6MSZIEhA8vHjbfOe/OcW3zmAuKy+nUzAyD2bow8ODaEROFq8AyZ5WBYdEZXGqGxZ61HJV+9HYCJRbTNA0QBA40HWunaKN5dKg/DBKxeCIe09Th/m4MJwiMSZmLEzMQAABQRuNqgu8NYX3doTcMpvCkLbtQZ2AJkrPOZG1zlnY13T+Hy9EehY90h57eqcorcZ/lctZuMzAsOjLEqwNv66/6vZcPYRBC+C3cGaBxhSet2av1BpYgTTY7k5y2JPT41slIR6Axv8R9nnOs+4Pf+2r992uOxGVJwgAAAEINfgt3BGgsESWtWas1iGDyl+CT/u7WpvxNFRc4x7qtBoZFhSFejb7z1fq9NYfjsiT+cwcQavBruCOgU4SIGo18amuoq3Js3FNlynVtH385+s53ze+t8cRkURx3yMTTRBAEQVAUXbFlf3XystJKA2NExeFBdWASDAAA+MQACCEEmqbJ0b6PMC7JwhDU8YFHV5u9NZ64LErT/oW/63tPV6uJwmKoOND78u7Fg5NhAAD4CVbzY9cwrWQrAAAAAElFTkSuQmCC";
        return xImg;
    }

    _createButtons () {
        let xButtonLine = oGrammalecte.createNode("div", {className: "grammalecte_panel_commands"});
        xButtonLine.appendChild(this._createCloseButton());
        return xButtonLine;
    }

    _createCloseButton () {
        let xButton = oGrammalecte.createNode("div", {className: "grammalecte_close_button", textContent: "×", title: "Fermer la fenêtre"});
        xButton.onclick = function () { this.hide(); }.bind(this);  // better than writing “let that = this;” before the function?
        return xButton;
    }

    insertIntoPage () {
        document.body.appendChild(this.xMessageBox);
    }

    show () {
        this.xMessageBox.style.display = "block";
    }

    hide () {
        this.xMessageBox.style.display = "none";
    }

    setMessage (sMessage) {
    	this.xMessageBoxContent.textContent = sMessage;
    }

    center () {
        this.xMessageBox.style = `top: 50%; left: 50%; width: ${this.nWidth}px; height: ${this.nHeight}px; margin-top: -${this.nHeight/2}px; margin-left: -${this.nWidth/2}px;`;
    }
}

.grammalecte_panel_title {
    padding: 10px 20px;
}
.grammalecte_panel_label {
    display: inline-block;
    padding: 0 10px;
}
.grammalecte_panel_invisible_marker {
    position: absolute;
    /*visibility: hidden;*/
    font-size: 6px;
    color: hsl(210, 0%, 90%); /* same color than panel_bar background */
}

.grammalecte_panel_commands {
    float: right;
}
.grammalecte_copy_button {
    display: inline-block;
    padding: 2px 10px;

.grammalecte_panel_content {
    position: absolute;
    min-width: 100%;
    height: calc(100% - 55px); /* panel height - title_bar */
    overflow: auto;
}

.grammalecte_panel_message {
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: hsl(0, 50%, 40%);
    color: hsl(0, 50%, 96%);
    font-size: 20px;
}


/*
    Spinner
*/
.grammalecte_spinner {
    visibility: hidden;

        this.xPanel = this._createPanel(sTitle);
        this.center();
    }

    _createPanel (sTitle) {
        try {
            let xPanel = oGrammalecte.createNode("div", {id: this.sId, className: "grammalecte_panel"});
            this.xPanelBar.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_panel_invisible_marker", textContent: "__grammalecte_panel__"}));
            this.xPanelBar.appendChild(this._createButtons());
            let xTitle = oGrammalecte.createNode("div", {className: "grammalecte_panel_title"});
            xTitle.appendChild(this._createLogo());
            xTitle.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_panel_label", textContent: sTitle}));
            this.xPanelBar.appendChild(xTitle);
            xPanel.appendChild(this.xPanelBar);
            xPanel.appendChild(this.xPanelContent);

    show () {
        this.xPanel.style.display = "block";
    }

    hide () {
        this.xPanel.style.display = "none";
        oGrammalecte.clearRightClickedNode();
    }

    center () {
        let nHeight = (this.bFlexible) ? window.innerHeight-100 : this.nHeight;
        this.xPanel.style = `top: 50%; left: 50%; width: ${this.nWidth}px; height: ${nHeight}px; margin-top: -${nHeight/2}px; margin-left: -${this.nWidth/2}px;`;
    }

        this.xContentNode.appendChild(this.xParagraphList);
        this.xPanelContent.addEventListener("click", onGrammalecteGCPanelClick, false);
        this.oTooltip = new GrammalecteTooltip(this.xContentNode);
        this.xPanelContent.appendChild(this.xContentNode);
        this.oTAC = new GrammalecteTextAreaControl();
    }

    start (xNode=null) {
        this.oTooltip.hide();
        this.clear();
        if (xNode && xNode.tagName == "TEXTAREA") {
            this.oTAC.setTextArea(xNode);
        }
    }

    clear () {
        while (this.xParagraphList.firstChild) {
            this.xParagraphList.removeChild(this.xParagraphList.firstChild);
        }

    }

    addSummary () {
        // todo
    }

    addMessage (sMessage) {
        let xNode = oGrammalecte.createNode("div", {className: "grammalecte_panel_message", textContent: sMessage});
        this.xParagraphList.appendChild(xNode);
    }

    _copyToClipboard (sText)  {
        // recipe from https://github.com/mdn/webextensions-examples/blob/master/context-menu-copy-link-with-types/clipboard-helper.js
        function setClipboardData (xEvent) {
            document.removeEventListener("copy", setClipboardData, true);

        sText = sText.replace("\r\n", "\n").replace("\r", "\n");
        while ((iEnd = sText.indexOf("\n", iStart)) !== -1) {
            this._dParagraph.set(i, sText.slice(iStart, iEnd));
            i++;
            iStart = iEnd+1;
        }
        this._dParagraph.set(i, sText.slice(iStart));
        //console.log("Paragraphs number: " + (i+1));
    }

    write () {
        if (this._xTextArea !== null) {
            let sText = "";
            this._dParagraph.forEach(function (val, key) {
                sText += val + "\n";
            });
            this._xTextArea.value = sText.slice(0,-1);
        }
    }
}

    addSeparator (sText) {
        if (this._xContentNode.textContent !== "") {
            this._xContentNode.appendChild(oGrammalecte.createNode("div", {className: "grammalecte_lxg_separator", textContent: sText}));
        }
    }

    addMessage (sMessage) {
        let xNode = oGrammalecte.createNode("div", {className: "grammalecte_panel_message", textContent: sMessage});
        this._xContentNode.appendChild(xNode);
    }

    addListOfTokens (lTokens) {
        try {
            if (lTokens) {
                this._nCount += 1;
                let xNodeDiv = oGrammalecte.createNode("div", {className: "grammalecte_lxg_list_of_tokens"});

        xLine.appendChild(oGrammalecte.createNode("div", {id: "res_"+"o_ordinals_no_exponant", className: "grammalecte_tf_result", textContent: "·"}));
        return xLine;
    }
    
    /*
        Actions
    */
    start (xNode) {
        if (xNode !== null && xNode.tagName == "TEXTAREA") {
            this.xTextArea = xNode;
            if (bChrome) {
                browser.storage.local.get("tf_options", this.setOptions.bind(this));
            } else {
                let xPromise = browser.storage.local.get("tf_options");
                xPromise.then(this.setOptions.bind(this), this.reset.bind(this));
            }
        }
    }

    switchGroup (sOptName) {
        if (document.getElementById(sOptName).dataset.selected == "true") {
            document.getElementById(sOptName.slice(2)).style.opacity = 1;
        } else {

        "*://*.wiktionary.org/*"
      ],
      "css": [
        "content_scripts/panel.css",
        "content_scripts/panel_tf.css",
        "content_scripts/panel_gc.css",
        "content_scripts/panel_lxg.css",
        "content_scripts/message_box.css",
        "content_scripts/menu.css"
      ],
      "js": [
        "content_scripts/panel.js",
        "grammalecte/fr/textformatter.js",
        "content_scripts/panel_tf.js",
        "content_scripts/panel_gc.js",
        "content_scripts/panel_lxg.js",
        "content_scripts/message_box.js",
        "content_scripts/menu.js",
        "content_scripts/init.js"
      ],
      "run_at": "document_end"
    },
    {
      "matches": [

      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <li class="select" data-page="home_page"><i class="select fa fa-star icon" data-page="home_page"></i></li>
            <li class="select" data-page="help_page"><i class="select fa fa-cube icon" data-page="help_page"></i></li>
            <li class="select" data-page="gc_options_page"><i class="select fa fa-cog icon" data-page="gc_options_page"></i></li>
            <li class="select" data-page="sc_options_page"><i class="select fa fa-book icon" data-page="sc_options_page"></i></li>
            <li class="select" data-page="test_page"><i class="select fa fa-flask icon" data-page="test_page"></i></li>
          </ul>
        </nav>
      </header> <!-- #menu -->

      <div id="page">

            <p id="link_othersponsors" class="link center" data-url="http://grammalecte.net/?thanks">
              et tous ceux qui l’ont soutenu
            </p>
          </div>
        </section> <!-- #home_page -->

        <section id="help_page" class="page">
          <h1>INTERFACE</h1>
          <div id="help_section">
            <p>Grammalecte affiche un bouton d’accès au menu en bas à gauche des zones de texte usuelles pour accéder aux fonctionnalités existantes.</p>
            <p class="right"><img src="../img/menu_button1.png" title="bouton du menu" /></p>
            <p class="right"><img src="../img/menu_button2.png" title="menu" /></p>
            <p>Pour les autres zones de texte (HTML éditable), il faut sélectionner le texte et utiliser le menu contextuel.</p>
            <p class="right"><img src="../img/contextmenu.png" title="menu contextuel sur sélection" /></p>
            <h2>Raccourcis clavier</h2>