Index: gc_lang/fr/webext/panel/lex_editor.css
==================================================================
--- gc_lang/fr/webext/panel/lex_editor.css
+++ gc_lang/fr/webext/panel/lex_editor.css
@@ -25,11 +25,11 @@
     color: #505050;
 }
 
 
 .inbox {
-    width: 900px;
+    width: 800px;
     margin: 20px auto 10px auto;
     padding: 10px 30px 30px 30px;
     background: hsl(0, 0%, 100%);
     border: 2px solid #F0F0F0;
     border-radius: 20px;
@@ -65,10 +65,18 @@
     background-color: hsl(210, 10%, 95%);
     border-radius: 5px;
     cursor: pointer;
 }
 
+
+.big_block {
+    margin: 10px 0;
+    padding: 10px;
+    background-color: hsl(210, 20%, 96%);
+    border-radius: 5px;
+}
+
 
 #add_word_page {
     display: none;
 }
 
@@ -78,32 +86,25 @@
 
 #editor {
     display: none;
 }
 
-#categories {
-    display: flex;
-    padding: 10px 0;
-}
 
 #word_section2 {
     display: none;
 }
 
 .category {
     padding: 10px;
     border-radius: 3px;
+    border-left: 2px solid hsl(210, 10%, 90%);
     cursor: pointer;
 }
 .category:hover {
     background-color: hsl(0, 0%, 90%);
 }
 
-.separator {
-    border-left: 1px solid hsl(210, 0%, 90%);
-}
-
 .section {
     display: none;
     padding: 10px;
 }
 
@@ -125,10 +126,14 @@
 }
 .widelabel {
     display: inline-block;
     min-width: 80px;
 }
+
+.description {
+    font-size: 12px;
+}
 
 .examples_true {
     flex-grow: 1;
     margin: 2px;
     padding: 10px;
@@ -167,11 +172,11 @@
     color: hsl(0, 0%, 50%);
 }
 
 
 #generated_words {
-    padding: 10px;
+    
 }
 
 #results {
     padding: 10px;
     background-color: hsl(210, 10%, 90%);
@@ -185,11 +190,11 @@
 }
 
 #add_to_lexicon {
     display: inline-block;
     padding: 7px 10px;
-    font-size: 20px;
+    font-size: 18px;
     background-color: hsl(0, 30%, 30%);
     color: hsl(0, 30%, 60%);
     border-radius: 3px;
     text-transform: uppercase;
     text-align: center;
@@ -205,13 +210,10 @@
 
 #lexicon_page {
     
 }
 
-#no_elem_line {
-    display: none;
-}
 
 .button_block {
     margin: 5px 0px;
     background-color: hsl(210, 10%, 90%);
     border-radius: 5px;
@@ -234,17 +236,11 @@
 }
 #import_button {
     display: none;
 }
 
-#build_progress {
-    display: none;
-    width: 100%;
-}
-
-#display_progress {
-    display: none;
+#wait_progress {
     width: 100%;
 }
 
 th {
     padding: 5px 10px;

Index: gc_lang/fr/webext/panel/lex_editor.html
==================================================================
--- gc_lang/fr/webext/panel/lex_editor.html
+++ gc_lang/fr/webext/panel/lex_editor.html
@@ -14,34 +14,39 @@
 
       <div id="buttons" class="container">
         <div id="lexicon_button" class="main_button">Lexique</div>
         <div id="add_word_button" class="main_button">Ajout</div>
       </div>
+
+      <div class="big_block">
+        <h3>Dictionnaire</h3>
+        <div id="export_button" class="fright">
+          Exporter
+        </div>
+        <div id="import_button" class="fright">
+          Importer
+        </div>
+        <p>
+          Dictionnaire <span id="dic_name">personnel</span> : <span id="dic_num_entries">0</span> entrées.<br/>
+          Date d’enregistrement : <span id="dic_save_date">néant</span>.
+        </p>
+        <p><progress id="wait_progress" value="0" /></p>
+      </div>
+
+      
 
       <div id="add_word_page">
         <div class="columns">
           <div id="new_word_generator">
             <h2>Nouveau mot (lemme)</h2>
             <input type="text" id="lemma" name="lemma" maxlength="60" value="" placeholder="votre mot" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" autofocus />
 
             <div id="editor">
-
-              <div id="categories">
-                <div class="category" id="select_nom" data-tag="N">Nom, adjectif</div>
-                <div class="category" id="select_verbe" data-tag="V">Verbe</div>
-                <div class="category" id="select_adverbe" data-tag="W">Adverbe</div>
-                <div class="category separator" id="select_prenom" data-tag="M1">Prénom</div>
-                <div class="category" id="select_patronyme" data-tag="M2">Patronyme</div>
-                <div class="category" id="select_nom_propre" data-tag="MP">Nom propre</div>
-                <div class="category separator" id="select_autre" data-tag="X">Autre</div>
-              </div>
-
 
               <div id="sections">
-
+                <h3 class="category" id="select_nom" data-tag="N">Nom, adjectif</h3>
                 <div id="section_nom" class="section">
-                  <h2>Nom, adjectif</h2>
                   <p class="typeline">
                     <input type="radio" id="up_type_nom" name="POS" value=":N" /> <label class="widelabel" for="up_type_nom">Nom</label>
                     <input type="radio" id="up_type_adj" name="POS" value=":A" /> <label class="widelabel" for="up_type_adj">Adjectif</label>
                     <input type="radio" id="up_type_nomadj" name="POS" value=":N:A" /> <label class="widelabel" for="up_type_nomadj">Nom &amp; adjectif</label>
                   </p>
@@ -58,11 +63,11 @@
                       <p><input type="radio" id="up_nom_pluriel_x" name="pluriel" value="x" /><label for="up_nom_pluriel_x"> pluriel en ·x</label></p>
                       <p><input type="radio" id="up_nom_pluriel_i" name="pluriel" value="i" /><label for="up_nom_pluriel_i"> invariable</label></p>
                     </div>
                   </div>
 
-                  <h2>[optionnel] Autre forme (masculine, féminine, variante, etc.)</h2>
+                  <h3>[optionnel] Autre forme (masculine, féminine, variante, etc.)</h3>
                   <input type="text" id="lemma2" name="lemma2" maxlength="60" value="" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" placeholder="votre mot" />
                   <div id="word_section2">
                     <p class="typeline">
                       <input type="radio" id="up_type_nom2" name="POS2" value=":N" /> <label class="widelabel" for="up_type_nom2">Nom</label>
                       <input type="radio" id="up_type_adj2" name="POS2" value=":A" /> <label class="widelabel" for="up_type_adj2">Adjectif</label>
@@ -83,75 +88,75 @@
                       </div>
                     </div>
                   </div>
                 </div>
 
+                <h3 class="category" id="select_verbe" data-tag="V">Verbe</h3>
                 <div id="section_verbe" class="section">
-                  <h2>Verbe</h2>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_i" value="i" /><label for="up_v_i"> intransitif</label></h3>
-                    <div class="description">Cochez cette case si ce verbe peut s’utiliser sans complément d’objet.</div>
+                    <div class="description">Le verbe peut s’utiliser sans complément d’objet.</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">Je dors.<br/>Tu pars.<br/>Elle pense.<br/>Nous écrivons.<br/>Vous manifestez.<br/>Ils viennent.</div>
                         <div class="examples_false">J’appartiens à ce groupe…</div>
                       </div>
                     </details>
                   </div>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_t" value="t" /><label for="up_v_t"> transitif direct</label></h3>
-                    <div class="description">Cochez cette case si ce verbe peut s’utiliser avec un complément d’objet direct (COD).</div>
+                    <div class="description">Ce verbe peut s’utiliser avec un complément d’objet direct (COD).</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">Je mange <i>une pomme</i>.<br/>Tu donnes <i>une bonne impression</i>.<br/>Elle écrit <i>un livre</i>.<br/>Nous fabriquons <i>une œuvre</i>.</div>
                         <div class="examples_false">Je pars.<br/>J’appartiens à…</div>
                       </div>
                     </details>
                   </div>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_n" value="n" /><label for="up_v_n"> transitif indirect</label></h3>
-                    <div class="description">Cochez cette case, si ce verbe peut s’utiliser avec un complément d’objet indirect (COI). Attention à ne pas confondre avec un complément circonstanciel de temps, de lieu ou de manière.</div>
+                    <div class="description">Ce verbe peut s’utiliser avec un complément d’objet indirect (COI). Attention à ne pas confondre avec un complément circonstanciel de temps, de lieu ou de manière.</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">Je donne un cadeau <i>à sa femme</i>.<br/>Elle appartient <i>à ce groupe</i>.</div>
                         <div class="examples_false"></div>
                       </div>
                     </details>
                   </div>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_p" value="p" /><label for="up_v_p"> pronominal</label></h3>
-                    <div class="description">Cochez cette case si ce verbe peut s’utiliser pronominalement.</div>
+                    <div class="description">Ce verbe peut s’utiliser pronominalement.</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">Je me suis trompé.<br/>Tu t’es étonné toi-même.<br/>Elle s’est souvenu de ses études.<br/>Nous nous sommes égarés.<br/>Vous vous êtes retrouvées.<br/>Ils se sont rappelé leur enfance.</div>
                         <div class="examples_false">Je me suis venu.<br/>tu t’es arrivé.<br/>elle s’est marché.<br/>nous nous sommes courus.<br/>vous vous êtes acculés.<br/>Elles se sont capitulées.</div>
                       </div>
                     </details>
                   </div>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_m" value="m" /><label for="up_v_m"> impersonnel</label></h3>
-                    <div class="description">Cochez cette case si ce verbe ne peut s’utiliser à la première personne, mais uniquement à la troisième personne du singulier ou du pluriel.</div>
+                    <div class="description">Ce verbe ne peut s’utiliser à la première personne, mais uniquement à la troisième personne du singulier ou du pluriel.</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">Il pleut.</div>
                         <div class="examples_false">Je pleus.</div>
                       </div>
                     </details>
                   </div>
                   <div class="block">
                     <h3><input type="checkbox" id="up_v_ae" value="e" /><label for="up_v_ae"> passé composé avec l’auxiliaire “être”</label></h3>
-                    <div class="description">Cochez cette case si ce verbe s’emploie au passé composé avec l’auxilaire “être”.</div>
+                    <div class="description">Ce verbe s’emploie au passé composé avec l’auxiliaire “être”.</div>
                     <details>
                       <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="block">
                     <h3><input type="checkbox" id="up_v_aa" value="a" /><label for="up_v_aa"> passé composé avec l’auxiliaire “avoir”</label></h3>
-                    <div class="description">Cochez cette case si ce verbe s’emploie au passé composé avec l’auxilaire “avoir”.</div>
+                    <div class="description">Ce verbe s’emploie au passé composé avec l’auxiliaire “avoir”.</div>
                     <details>
                       <div class="container">
                         <div class="examples_true">J’ai mangé.<br/>J’ai prié.</div>
                         <div class="examples_false">Je suis mangé.<br/>Je suis prié.</div>
                       </div>
@@ -187,65 +192,53 @@
                       </ul>
                     </details>
                   </div>
                 </div>
 
+                <h3 class="category" id="select_adverbe" data-tag="W">Adverbe</h3>
                 <div id="section_adverbe" class="section">
-                  <h2>Adverbe</h2>
                   <p>Les adverbes sont invariables en genre et en nombre.</p>
                 </div>
 
+                <h3 class="category" id="select_prenom" data-tag="M1">Prénom</h3>
                 <div id="section_prenom" class="section">
-                  <h2>Prénom</h2>
                   <div class="container">
                     <div class="block">
                       <h3>Genre</h3>
                       <p><input type="radio" id="up_prenom_genre_e" name="genre_m1" value=":e" /><label for="up_prenom_genre_e"> épicène</label></p>
                       <p><input type="radio" id="up_prenom_genre_m" name="genre_m1" value=":m" /><label for="up_prenom_genre_m"> masculin</label></p>
                       <p><input type="radio" id="up_prenom_genre_f" name="genre_m1" value=":f" /><label for="up_prenom_genre_f"> féminin</label></p>
                     </div>
-                    <div class="block">
-                      <h3>Pluriel</h3>
-                      <p>Les prénoms sont invariables en nombre.</p>
-                    </div>
                   </div>
                 </div>
 
+                <h3 class="category" id="select_patronyme" data-tag="M2">Patronyme</h3>
                 <div id="section_patronyme" class="section">
-                  <h2>Patronyme</h2>
                   <div class="container">
                     <div class="block">
                       <h3>Genre</h3>
                       <p><input type="radio" id="up_patronyme_genre_e" name="genre_m2" value=":e" /><label for="up_patronyme_genre_e"> épicène</label></p>
                       <p><input type="radio" id="up_patronyme_genre_m" name="genre_m2" value=":m" /><label for="up_patronyme_genre_m"> masculin</label></p>
                       <p><input type="radio" id="up_patronyme_genre_f" name="genre_m2" value=":f" /><label for="up_patronyme_genre_f"> féminin</label></p>
                     </div>
-                    <div class="block">
-                      <h3>Pluriel</h3>
-                      <p>Les noms de famille sont invariables en nombre.</p>
-                    </div>
                   </div>
                 </div>
 
+                <h3 class="category" id="select_nom_propre" data-tag="MP">Nom propre</h3>
                 <div id="section_nom_propre" class="section">
-                  <h2>Nom propre</h2>
                   <div class="container">
                     <div class="block">
                       <h3>Genre</h3>
                       <p><input type="radio" id="up_nom_propre_genre_e" name="genre_mp" value=":e" /><label for="up_nom_propre_genre_e"> épicène</label></p>
                       <p><input type="radio" id="up_nom_propre_genre_m" name="genre_mp" value=":m" /><label for="up_nom_propre_genre_m"> masculin</label></p>
                       <p><input type="radio" id="up_nom_propre_genre_f" name="genre_mp" value=":f" /><label for="up_nom_propre_genre_f"> féminin</label></p>
                     </div>
-                    <div class="block">
-                      <h3>Pluriel</h3>
-                      <p>Les noms propres sont invariables en nombre.</p>
-                    </div>
                   </div>
                 </div>
 
+                <h3 class="category" id="select_autre" data-tag="X">Autre</h3>
                 <div id="section_autre" class="section">
-                  <h2>Autre</h2>
                   <p>Indiquez les étiquettes grammaticales que vous voulez appliquer au mot. À utiliser seulement si vous savez ce que vous faites.</p>
                   <h3>Flexion</h3>
                   <p><input type="text" id="flexion" name="flexion" maxlength="20" value="" pattern="^[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ._-]+$" placeholder="flexion" /></p>
                   <h3>Étiquettes</h3>
                   <p><input type="text" id="tags" name="tags" maxlength="20" value="" pattern="^:[a-zA-Zà-ö0-9À-Öø-ÿØ-ßĀ-ʯ:._-]+$" placeholder="étiquettes" /></p>
@@ -254,59 +247,33 @@
             </div>
           </div> <!-- #new_word_generator -->
           
           <div id="generated_words">
             <h2>Mots générés</h2>
-            <h3>Flexions, étiquettes</h3>
-            <pre id="results">
+            <table id="generated_words_table">
               
-            </pre>
-            
+            </table>
             <div id="buttonline">
-              <div id="add_to_lexicon">Ajouter au dictionnaire</div>
+              <div id="add_to_lexicon">Ajouter au lexique</div>
             </div>
           </div> <!-- #generated_words -->
         </div> <!-- .columns -->
       </div> <!-- #add_word_page -->
 
 
       <div id="lexicon_page">
-        
-        <div class="columns">
-          <div>
-            <h2>Votre lexique</h2>
-
-            <div class="button_block">
-              <div id="save_button" class="fright">
-                Enregistrer
-              </div>
-              <h3>Lexique</h3>
-              <p>Nombre d’entrées ajoutées : <span id="num_added_entries">0</span>.</p>
-              <p>Nombre d’entrées supprimées : <span id="num_deleted_entries">0</span>.</p>
-              <p>Nombre d’entrées : <span id="num_entries">0</span>.</p>
-              <p><progress id="build_progress" value="0"></p>
-              <div id="export_button" class="fright">
-                Exporter
-              </div>
-              <div id="import_button" class="fright">
-                Importer
-              </div>
-              <h3>Dictionnaire enregistré</h3>
-              <p>Dernière sauvegarde : <span id="save_date">néant</span>.</p>
-              <p>Nombre d’entrées : <span id="num_entries_saved">0</span>.</p>
-            </div>  
-          </div>
-
-          <div>
-            <p id="no_elem_line">Aucun élément.</p>
-            <p><progress id="display_progress" value="0"></p>
-            <table id="table">
-              
-            </table>
-          </div>
-        </div>
-
+        <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>
 
 

Index: gc_lang/fr/webext/panel/lex_editor.js
==================================================================
--- gc_lang/fr/webext/panel/lex_editor.js
+++ gc_lang/fr/webext/panel/lex_editor.js
@@ -8,10 +8,19 @@
 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) {
@@ -22,87 +31,191 @@
     catch (e) {
         showError(e);
     }
 }
 
-function showError (e) {
-    console.error(e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message);
-}
-
-
-document.getElementById("lexicon_button").addEventListener("click", () => { oWidgets.showPage("lexicon"); }, false);
-document.getElementById("add_word_button").addEventListener("click", () => { oWidgets.showPage("lemma"); }, false);
-
-document.getElementById("table").addEventListener("click", (xEvent) => { oWidgets.onTableClick(xEvent); }, false);
-document.getElementById("save_button").addEventListener("click", () => { oLexicon.save(); }, false);
-document.getElementById("export_button").addEventListener("click", () => { oBinaryDict.export(); }, false);
-
-document.getElementById("editor").addEventListener("click", (xEvent) => { oWidgets.onSelectionClick(xEvent); }, false);
-document.getElementById("lemma").addEventListener("keyup", () => { oWidgets.onWrite(); }, false);
-document.getElementById("lemma2").addEventListener("keyup", () => { oWidgets.onWrite2(); }, false);
-document.getElementById("verb_pattern").addEventListener("keyup", () => { oFlexGen.update(); }, false);
-document.getElementById("flexion").addEventListener("keyup", () => { oFlexGen.update(); }, false);
-document.getElementById("tags").addEventListener("keyup", () => { oFlexGen.update(); }, false);
-document.getElementById("add_to_lexicon").addEventListener("click", () => { oFlexGen.addToLexicon(); }, false);
-
-
-
-/*
-    ACTIONS
-*/
-
-const oWidgets = {
-
-    showPage: function (sPage) {
-        if (sPage == "lexicon") {
-            this.hideElement("add_word_page");
-            this.showElement("lexicon_page");
-            document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 80%, 90%)";
-            document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 10%, 95%)";
-        } else {
-            this.hideElement("lexicon_page");
-            this.showElement("add_word_page");
-            document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 10%, 95%)";
-            document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 80%, 90%)";
-            document.getElementById("lemma").focus();
-        }
-    },
-
-    showElement: function (sElemId) {
-        if (document.getElementById(sElemId)) {
-            document.getElementById(sElemId).style.display = "block";
-        } else {
-            console.log("HTML node named <" + sElemId + "> not found.")
-        }
-    },
-
-    hideElement: function (sElemId) {
-        if (document.getElementById(sElemId)) {
-            document.getElementById(sElemId).style.display = "none";
-        } else {
-            console.log("HTML node named <" + sElemId + "> not found.")
-        }
-    },
-
-    hideAllSections: function () {
-        for (let xElem of document.getElementById("sections").childNodes) {
-            if (xElem.id) {
-                xElem.style.display = "none";
-            }
+function showElement (sElemId) {
+    if (document.getElementById(sElemId)) {
+        document.getElementById(sElemId).style.display = "block";
+    } else {
+        console.log("HTML node named <" + sElemId + "> not found.")
+    }
+}
+
+function hideElement (sElemId) {
+    if (document.getElementById(sElemId)) {
+        document.getElementById(sElemId).style.display = "none";
+    } else {
+        console.log("HTML node named <" + sElemId + "> not found.")
+    }
+}
+
+function showPage (sPage) {
+    if (sPage == "lexicon") {
+        hideElement("add_word_page");
+        showElement("lexicon_page");
+        document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 80%, 90%)";
+        document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 10%, 95%)";
+    } else {
+        hideElement("lexicon_page");
+        showElement("add_word_page");
+        document.getElementById("lexicon_button").style.backgroundColor = "hsl(210, 10%, 95%)";
+        document.getElementById("add_word_button").style.backgroundColor = "hsl(210, 80%, 90%)";
+        document.getElementById("lemma").focus();
+    }
+}
+
+
+document.getElementById("lexicon_button").addEventListener("click", () => { showPage("lexicon"); }, false);
+document.getElementById("add_word_button").addEventListener("click", () => { showPage("lemma"); }, false);
+
+document.getElementById("save_button").addEventListener("click", () => { oBinaryDict.build(); }, false);
+
+
+
+class Table {
+
+    constructor (sNodeId, lColumn, sProgressBarId, sResultId="") {
+        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._createHeader();
+        this.listen();
+    }
+
+    _createHeader () {
+        let xRowNode = createNode("tr");
+        xRowNode.appendChild(createNode("th", { textContent: "·" }));
+        xRowNode.appendChild(createNode("th", { textContent: "#" }));
+        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.iEntryIndex = 0;
+        this._createHeader();
+    }
+
+    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.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 = "Entrées : " + this.nEntry;
+        }
+    }
+
+    _addRow (lData) {
+        let xRowNode = createNode("tr", { id: this.sNodeId + "_row_" + this.iEntryIndex });
+        xRowNode.appendChild(createNode("td", { textContent: "×", className: "delete_entry", title: "Effacer cette entrée" }, { id_entry: this.iEntryIndex }));
+        xRowNode.appendChild(createNode("td", { textContent: this.iEntryIndex }));
+        for (let data of lData) {
+            xRowNode.appendChild(createNode("td", { textContent: data }));
+        }
+        this.xTable.appendChild(xRowNode);
+        this.iEntryIndex += 1;
+    }
+
+    listen () {
+        this.xTable.addEventListener("click", (xEvent) => { this.onTableClick(xEvent); }, false);
+    }
+
+    onTableClick (xEvent) {
+        try {
+            let xElem = xEvent.target;
+            if (xElem.className) {
+                if (xElem.className == "delete_entry") {
+                    this.deleteRow(xElem.dataset.id_entry);
+                }
+            }
+        }
+        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();
+    }
+
+    getEntries () {
+        return this.lEntry.filter((e) => e !== null);
+    }
+}
+
+
+const oGenerator = {
+
+    cMainTag: "",
+
+    lFlexion: [],
+
+    listen: function () {
+        document.getElementById("editor").addEventListener("click", (xEvent) => { this.onSelectionClick(xEvent); }, false);
+        document.getElementById("lemma").addEventListener("keyup", () => { this.onWrite(); }, false);
+        document.getElementById("lemma2").addEventListener("keyup", () => { this.onWrite2(); }, false);
+        document.getElementById("verb_pattern").addEventListener("keyup", () => { this.update(); }, false);
+        document.getElementById("flexion").addEventListener("keyup", () => { this.update(); }, false);
+        document.getElementById("tags").addEventListener("keyup", () => { this.update(); }, false);
+        document.getElementById("add_to_lexicon").addEventListener("click", () => { this.addToLexicon(); }, false);
+    },
+
+    lSection: ["section_nom", "section_verbe", "section_adverbe", "section_prenom", "section_patronyme", "section_nom_propre", "section_autre"],
+
+    hideAllSections: function () {
+        for (let sSection of this.lSection) {
+            hideElement(sSection);
         }
     },
 
     showSection: function (sName) {
         this.clear();
         this.hideAllSections();
-        this.showElement(sName);
+        showElement(sName);
     },
 
     clear: function () {
         try {
             document.getElementById("lemma2").value = "";
-            this.hideElement("word_section2");
+            hideElement("word_section2");
             // nom, adjectif, noms propres
             for (let xElem of document.getElementsByName("POS")) {
                 xElem.checked = false;
             }
             for (let xElem of document.getElementsByName("POS2")) {
@@ -142,14 +255,14 @@
         try {
             let xElem = xEvent.target;
             if (xElem.id) {
                 if (xElem.id.startsWith("select_")) {
                     this.showSection("section_" + xElem.id.slice(7));
-                    oFlexGen.setMainTag(xElem.dataset.tag);
-                    oFlexGen.update();
+                    this.cMainTag = xElem.dataset.tag;
+                    this.update();
                 } else if (xElem.id.startsWith("up_")) {
-                    oFlexGen.update();
+                    this.update();
                 }
             }
         }
         catch (e) {
             showError(e);
@@ -156,148 +269,29 @@
         }
     },
 
     onWrite: function () {
         if (document.getElementById("lemma").value.trim() !== "") {
-            this.showElement("editor");
-            oFlexGen.update();
+            showElement("editor");
+            this.update();
         } else {
-            this.hideElement("editor");
+            hideElement("editor");
         }
     },
 
     onWrite2: function () {
         if (document.getElementById("lemma2").value.trim() !== "") {
-            this.showElement("word_section2");
-            oFlexGen.update();
-        } else {
-            this.hideElement("word_section2");
-        }
-    },
-
-    createLexiconHeader: function () {
-        let xRowNode = createNode("tr");
-        xRowNode.appendChild(createNode("th", { textContent: "·" }));
-        xRowNode.appendChild(createNode("th", { textContent: "#" }));
-        xRowNode.appendChild(createNode("th", { textContent: "Forme fléchie" }));
-        xRowNode.appendChild(createNode("th", { textContent: "Lemme" }));
-        xRowNode.appendChild(createNode("th", { textContent: "Étiquettes" }));
-        return xRowNode;
-    },
-
-    createLexiconRow: function (n, sFlexion, sLemma, sTags) {
-        let xRowNode = createNode("tr", { id: "row_" + n });
-        xRowNode.appendChild(createNode("td", { textContent: "×", className: "delete_entry", title: "Effacer cette entrée" }, { id_entry: n }));
-        xRowNode.appendChild(createNode("td", { textContent: n }));
-        xRowNode.appendChild(createNode("td", { textContent: sFlexion }));
-        xRowNode.appendChild(createNode("td", { textContent: sLemma }));
-        xRowNode.appendChild(createNode("td", { textContent: sTags }));
-        return xRowNode;
-    },
-
-    fillLexiconTable: function (lFlex) {
-        this.clearTable("table");
-        if (lFlex.length > 0) {
-            this.showElement("display_progress");
-            let xDisplayProgress = document.getElementById("display_progress");
-            let xTable = document.getElementById("table");
-            let n = 0;
-            xDisplayProgress.max = lFlex.length;
-            xDisplayProgress.value = 1;
-            this.hideElement("no_elem_line");
-            xTable.appendChild(this.createLexiconHeader());
-            for (let [sFlexion, sLemma, sTags] of lFlex) {
-                xTable.appendChild(this.createLexiconRow(n, sFlexion, sLemma, sTags));
-                n += 1;
-                xDisplayProgress.value += 1;
-            }
-            xDisplayProgress.value = xDisplayProgress.max;
-            this.hideElement("display_progress");
-        } else {
-            this.showElement("no_elem_line");
-        }
-        this.updateData();
-    },
-
-    clearTable: function (sNodeId) {
-        let xTable = document.getElementById(sNodeId);
-        while (xTable.firstChild) {
-            xTable.removeChild(xTable.firstChild);
-        }
-    },
-
-    onTableClick: function (xEvent) {
-        try {
-            let xElem = xEvent.target;
-            if (xElem.className) {
-                if (xElem.className == "delete_entry") {
-                    this.deleteEntry(xElem.dataset.id_entry);
-                }
-            }
-        }
-        catch (e) {
-            showError(e);
-        }
-    },
-
-    addEntriesToTable: function (iStart, lFlex) {
-        let xTable = document.getElementById("table");
-        if (lFlex.length > 0) {
-            if (document.getElementById("no_elem_line").style.display !== "none") {
-                this.hideElement("no_elem_line");
-                xTable.appendChild(this.createLexiconHeader());
-            }
-            for (let [sFlexion, sLemma, sTags] of lFlex) {
-                xTable.appendChild(this.createLexiconRow(iStart, sFlexion, sLemma, sTags));
-                iStart += 1;
-            }
-        }
-        this.updateData();
-    },
-
-    deleteEntry: function (iEntry) {
-        oLexicon.deleteEntry(iEntry);
-        this.hideElement("row_"+iEntry);
-        this.showElement("save_button");
-        this.updateData();
-    },
-
-    updateData: function () {
-        document.getElementById("num_added_entries").textContent = oLexicon.nAddedEntries;
-        document.getElementById("num_deleted_entries").textContent = oLexicon.nDeletedEntries;
-        document.getElementById("num_entries").textContent = oLexicon.nEntries;
-    },
-
-    setDictData: function (nEntries, sDate) {
-        document.getElementById("num_entries_saved").textContent = nEntries;
-        document.getElementById("save_date").textContent = sDate;
-    }
-}
-
-
-
-const oFlexGen = {
-
-    cMainTag: "",
-
-    lFlexion: [],
-
-    clear: function () {
-        this.lFlexion = [];
-    },
-
-    setMainTag: function (sValue) {
-        this.cMainTag = sValue;
-    },
-
-    addFlexion: function (sFlexion, sLemma, sTag) {
-        this.lFlexion.push( [sFlexion, sLemma, sTag] );
+            showElement("word_section2");
+            this.update();
+        } else {
+            hideElement("word_section2");
+        }
     },
 
     update: function () {
         try {
-            this.clear();
+            this.lFlexion = [];
             let sGenderTag = "";
             let sLemma = document.getElementById("lemma").value.trim();
             if (sLemma.length > 0) {
                 switch (this.cMainTag) {
                     case "N":
@@ -305,35 +299,35 @@
                             break;
                         }
                         let sTag = this.getRadioValue("POS") + this.getRadioValue("genre");
                         switch (this.getRadioValue("pluriel")) {
                             case "s":
-                                this.addFlexion(sLemma, sLemma, sTag+":s/*");
-                                this.addFlexion(sLemma+"s", sLemma, sTag+":p/*");
+                                this.lFlexion.push([sLemma, sTag+":s/*"]);
+                                this.lFlexion.push([sLemma+"s", sTag+":p/*"]);
                                 break;
                             case "x":
-                                this.addFlexion(sLemma, sLemma, sTag+":s/*");
-                                this.addFlexion(sLemma+"x", sLemma, sTag+":p/*");
+                                this.lFlexion.push([sLemma, sTag+":s/*"]);
+                                this.lFlexion.push([sLemma+"x", sTag+":p/*"]);
                                 break;
                             case "i":
-                                this.addFlexion(sLemma, sLemma, sTag+":i/*");
+                                this.lFlexion.push([sLemma, sTag+":i/*"]);
                                 break;
                         }
                         let sLemma2 = document.getElementById("lemma2").value.trim();
                         if (sLemma2.length > 0  &&  this.getRadioValue("POS2")  &&  this.getRadioValue("genre2")) {
                             let sTag2 = this.getRadioValue("POS2") + this.getRadioValue("genre2");
                             switch (this.getRadioValue("pluriel2")) {
                                 case "s":
-                                    this.addFlexion(sLemma2, sLemma, sTag2+":s/*");
-                                    this.addFlexion(sLemma2+"s", sLemma, sTag2+":p/*");
+                                    this.lFlexion.push([sLemma2, sTag2+":s/*"]);
+                                    this.lFlexion.push([sLemma2+"s", sTag2+":p/*"]);
                                     break;
                                 case "x":
-                                    this.addFlexion(sLemma2, sLemma, sTag2+":s/*");
-                                    this.addFlexion(sLemma2+"x", sLemma, sTag2+":p/*");
+                                    this.lFlexion.push([sLemma2, sTag2+":s/*"]);
+                                    this.lFlexion.push([sLemma2+"x", sTag2+":p/*"]);
                                     break;
                                 case "i":
-                                    this.addFlexion(sLemma2, sLemma, sTag2+":i/*");
+                                    this.lFlexion.push([sLemma2, sTag2+":i/*"]);
                                     break;
                             }
                         }
                         break;
                     case "V": {
@@ -354,36 +348,36 @@
                             let sVerbPattern = document.getElementById("verb_pattern").value.trim();
                             if (sVerbPattern.length == 0) {
                                 // utilisation du générateur de conjugaison
                                 let bVarPpas = document.getElementById("up_partpas").checked;
                                 for (let [sFlexion, sFlexTags] of conj_generator.conjugate(sLemma, sVerbTag, bVarPpas)) {
-                                    this.addFlexion(sFlexion, sLemma, sFlexTags);
+                                    this.lFlexion.push([sFlexion, sFlexTags]);
                                 }
                             } else {
                                 // copie du motif d’un autre verbe : utilisation du conjugueur
                                 if (conj.isVerb(sVerbPattern)) {
                                     let oVerb = new Verb(sLemma, sVerbPattern);
                                     for (let [sTag1, dFlex] of oVerb.dConj.entries()) {
                                         if (sTag1 !== ":Q") {
                                             for (let [sTag2, sConj] of dFlex.entries()) {
                                                 if (sTag2.startsWith(":") && sConj !== "") {
-                                                    this.addFlexion(sConj, sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + sTag1 + sTag2);
+                                                    this.lFlexion.push([sConj, ":V" + oVerb.cGroup + "_" + sVerbTag + sTag1 + sTag2]);
                                                 }
                                             }
                                         } else {
                                             // participes passés
                                             if (dFlex.get(":Q3") !== "") {
                                                 if (dFlex.get(":Q2") !== "") {
-                                                    this.addFlexion(dFlex.get(":Q1"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:s/*");
-                                                    this.addFlexion(dFlex.get(":Q2"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:p/*");
-                                                } else {
-                                                    this.addFlexion(dFlex.get(":Q1"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:i/*");
-                                                }
-                                                this.addFlexion(dFlex.get(":Q3"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:f:s/*");
-                                                this.addFlexion(dFlex.get(":Q4"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:f:p/*");
-                                            } else {
-                                                this.addFlexion(dFlex.get(":Q1"), sLemma, ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:e:i/*");
+                                                    this.lFlexion.push([dFlex.get(":Q1"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:s/*"]);
+                                                    this.lFlexion.push([dFlex.get(":Q2"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:p/*"]);
+                                                } else {
+                                                    this.lFlexion.push([dFlex.get(":Q1"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:m:i/*"]);
+                                                }
+                                                this.lFlexion.push([dFlex.get(":Q3"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:f:s/*"]);
+                                                this.lFlexion.push([dFlex.get(":Q4"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:A:f:p/*"]);
+                                            } else {
+                                                this.lFlexion.push([dFlex.get(":Q1"), ":V" + oVerb.cGroup + "_" + sVerbTag + ":Q:e:i/*"]);
                                             }
                                         }
                                     }
                                 }
                             }
@@ -390,42 +384,42 @@
                         }
                         break;
                     }
                     case "W":
                         sLemma = sLemma.toLowerCase();
-                        this.addFlexion(sLemma, sLemma, ":W/*");
+                        this.lFlexion.push([sLemma, ":W/*"]);
                         break;
                     case "M1":
                         sLemma = sLemma.slice(0,1).toUpperCase() + sLemma.slice(1);
                         sGenderTag = this.getRadioValue("genre_m1");
                         if (sGenderTag) {
-                            this.addFlexion(sLemma, sLemma, ":M1"+sGenderTag+":i/*");
+                            this.lFlexion.push([sLemma, ":M1"+sGenderTag+":i/*"]);
                         }
                         break;
                     case "M2":
                         sLemma = sLemma.slice(0,1).toUpperCase() + sLemma.slice(1);
                         sGenderTag = this.getRadioValue("genre_m2");
                         if (sGenderTag) {
-                            this.addFlexion(sLemma, sLemma, ":M2"+sGenderTag+":i/*");
+                            this.lFlexion.push([sLemma, ":M2"+sGenderTag+":i/*"]);
                         }
                         break;
                     case "MP":
                         sGenderTag = this.getRadioValue("genre_mp");
                         if (sGenderTag) {
-                            this.addFlexion(sLemma, sLemma, ":MP"+sGenderTag+":i/*");
+                            this.lFlexion.push([sLemma, ":MP"+sGenderTag+":i/*"]);
                         }
                         break;
                     case "X":
                         let sFlexion = document.getElementById("flexion").value.trim();
                         let sTags = document.getElementById("tags").value.trim();
                         if (sFlexion.length > 0 && sTags.startsWith(":")) {
-                            this.addFlexion(sFlexion, sLemma, sTags);
+                            this.lFlexion.push([sFlexion, sTags]);
                         }
                         break;
                 }
             }
-            this.show();
+            oGenWordsTable.fill(this.lFlexion);
         }
         catch (e) {
             showError(e);
         }
     },
@@ -435,87 +429,37 @@
             return document.querySelector('input[name="' + sName + '"]:checked').value;
         }
         return null;
     },
 
-    show: function () {
-        let sText = "";
-        for (let [sFlexion, sLemma, sTag] of this.lFlexion) {
-            sText += sFlexion + "\t" + sTag + "\n";
+    createFlexLemmaTagArray: function () {
+        let sLemma = document.getElementById("lemma").value.trim();
+        let lEntry = [];
+        for (let [sFlex, sTags] of this.lFlexion) {
+            lEntry.push([sFlex, sLemma, sTags]);
         }
-        document.getElementById("results").textContent = sText;
+        return lEntry;
     },
 
     addToLexicon: function () {
         try {
-            oLexicon.addFlexions(this.lFlexion);
+            oLexiconTable.addEntries(this.createFlexLemmaTagArray());
+            oGenWordsTable.clear();
             document.getElementById("lemma").value = "";
             document.getElementById("lemma").focus();
-            oWidgets.hideElement("editor");
-            oWidgets.clear();
-            oWidgets.showElement("save_button");
+            hideElement("editor");
+            oGenerator.clear();
+            showElement("save_button");
             this.clear();
             this.cMainTag = "";
         }
         catch (e) {
             showError(e);
         }
     }
 }
 
-
-
-const oLexicon = {
-
-    lFlexion: [],
-    nEntries: 0,
-    nDeletedEntries: 0,
-    nAddedEntries: 0,
-
-    set: function (lFlexion) {
-        this.lFlexion = lFlexion;
-        this.resetModif();
-        oWidgets.fillLexiconTable(this.lFlexion);
-        if (this.lFlexion.length > 0) {
-            oWidgets.showElement("export_button");
-        } else {
-            oWidgets.hideElement("export_button");
-        }
-    },
-
-    addFlexions: function (lNewFlex) {
-        let iStart = this.lFlexion.length;
-        for (let aFlex of lNewFlex) {
-            this.lFlexion.push(aFlex);
-        }
-        this.nAddedEntries += lNewFlex.length;
-        this.nEntries += lNewFlex.length;
-        oWidgets.addEntriesToTable(iStart, lNewFlex);
-    },
-
-    deleteEntry: function (iEntry) {
-        this.lFlexion[parseInt(iEntry)] = null;
-        this.nDeletedEntries++;
-        this.nEntries--;
-    },
-
-    resetModif: function () {
-        this.nEntries = this.lFlexion.length;
-        this.nAddedEntries = 0;
-        this.nDeletedEntries = 0;
-    },
-
-    save: function () {
-        oWidgets.hideElement("save_button");
-        this.lFlexion = this.lFlexion.filter((e) => e !== null);
-        oBinaryDict.build(this.lFlexion);
-        this.resetModif();
-        oWidgets.fillLexiconTable(this.lFlexion);
-        oWidgets.updateData();
-    }
-}
-
 
 const oBinaryDict = {
     
     oIBDAWG: null,
 
@@ -528,48 +472,61 @@
         xPromise.then(this._load.bind(this), showError);
     },
 
     _load: function (oResult) {
         if (!oResult.hasOwnProperty("oPersonalDictionary")) {
-            oWidgets.hideElement("export_button");
+            hideElement("export_button");
             return;
         }
         let oJSON = oResult.oPersonalDictionary;
         this.oIBDAWG = new IBDAWG(oJSON);
         let lEntry = [];
         for (let s of this.oIBDAWG.select()) {
             lEntry.push(s.split("\t"));
         }        
-        oLexicon.set(lEntry);
-        oWidgets.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);
-        oWidgets.showElement("export_button");
-    },
-
-    build: function (lEntry) {
-        oWidgets.showElement("build_progress");
-        let xProgressNode = document.getElementById("build_progress");
-        let oDAWG = new DAWG(lEntry, "S", "fr", "Français", "Dictionnaire personnel", xProgressNode);
-        let oJSON = oDAWG.createBinaryJSON(1);
-        this.save(oJSON);
-        this.oIBDAWG = new IBDAWG(oJSON);
-        oWidgets.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);
-        oWidgets.hideElement("build_progress");
-        oWidgets.showElement("export_button");
-        browser.runtime.sendMessage({ sCommand: "setDictionary", dParam: {sType: "personal", oDict: oJSON}, dInfo: {} });
-    },
-
-    save: function (oJSON) {
-        browser.storage.local.set({ "oPersonalDictionary": oJSON });
+        oLexiconTable.fill(lEntry);
+        this.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);
+        showElement("export_button");
+    },
+
+    setDictData: function (nEntries, sDate) {
+        document.getElementById("dic_num_entries").textContent = nEntries;
+        document.getElementById("dic_save_date").textContent = sDate;
+    },
+
+    listen () {
+        document.getElementById("export_button").addEventListener("click", () => { this.export(); }, false);
+        document.getElementById("import_button").addEventListener("click", () => { 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 oJSON = oDAWG.createBinaryJSON(1);
+            browser.storage.local.set({ "oPersonalDictionary": oJSON });
+            this.oIBDAWG = new IBDAWG(oJSON);
+            this.setDictData(this.oIBDAWG.nEntry, this.oIBDAWG.sDate);    
+            browser.runtime.sendMessage({ sCommand: "setDictionary", dParam: {sType: "personal", oDict: oJSON}, dInfo: {} });
+        }
+        showElement("export_button");
     },
 
     import: function () {
-        // TO DO
+        console.log("import");
     },
 
     export: function () {
         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 });
     }
 }
 
+
+const oLexiconTable = new Table("lexicon_table", ["Flexions", "Lemmes", "Étiquettes"], "wait_progress", "num_entries");
+const oGenWordsTable = new Table("generated_words_table", ["Flexions", "Étiquettes"], "wait_progress");
+
 oBinaryDict.load();
+oBinaryDict.listen();
+oGenerator.listen();