Grammalecte  Check-in [3f5e5e035c]

Overview
Comment:[fx] code cleaning + keyboard shortcuts + main panel update
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | webext2
Files: files | file ages | folders
SHA3-256: 3f5e5e035c9f3b44e7a0a7dd81e8ef2969e112b851e42d11f69d50cb7ec00359
User & Date: olr on 2017-08-26 10:15:46
Original Comment: [fx] code cleaning + keyboards shortcuts + main panel update
Other Links: branch diff | manifest | tags
Context
2017-08-26
10:33
[fx] remove log check-in: 47f63e5dc0 user: olr tags: fx, webext2
10:15
[fx] code cleaning + keyboard shortcuts + main panel update check-in: 3f5e5e035c user: olr tags: fx, webext2
06:43
[fx] useless code check-in: ed9c7b39c4 user: olr tags: fx, webext2
Changes

Modified gc_lang/fr/webext/background.js from [5671ec1d6b] to [e31347c2da].

92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
...
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205

206
207
208
209
210
211

212
213
214
215
216











217



218
219

220
221
222
223
224
225
226
227
228
































229
230



231
232
233

234
235
236








    }
    //sendResponse({response: "response from background script"});
}

browser.runtime.onMessage.addListener(handleMessage);


function handleConnexion (p) {
    var xPort = p;
    let iPortId = xPort.sender.tab.id; // identifier for the port: each port can be found at dConnx[iPortId]
    console.log("tab_id: " + iPortId);
    dConnx.set(iPortId, xPort);
    xPort.onMessage.addListener(function (oRequest) {
        console.log("[background] message via connexion:");
        console.log(oRequest);
        switch (oRequest.sCommand) {
................................................................................
browser.contextMenus.create({
    id: "whatever",
    type: "separator",
    contexts: ["selection"]
});

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

browser.contextMenus.create({
    id: "conjugueur_tab",
    title: "Conjugueur [onglet]",
    contexts: ["all"]
});

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

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


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
    console.log(xInfo);
    console.log(xTab);
    console.log("Item " + xInfo.menuItemId + " clicked in tab " + xTab.id);
    console.log("editable: " + xInfo.editable + " · selected: " + xInfo.selectionText);
    // confusing: no way to get the node where we click?!
    switch (xInfo.menuItemId) {
        case "parseAndSpellcheck": {
            let xPort = dConnx.get(xTab.id);
            xPort.postMessage({sActionDone: "openGCPanel", result: null, dInfo: null, bEnd: false, bError: false});
            xGCEWorker.postMessage({
                sCommand: "parseAndSpellcheck",
                dParam: {sText: xInfo.selectionText, sCountry: "FR", bDebug: false, bContext: false},
                dInfo: {iReturnPort: xTab.id}
            });
            break;
        }
        case "getListOfTokens": {
            let xPort = dConnx.get(xTab.id);
            xPort.postMessage({sActionDone: "openLxgPanel", result: null, dInfo: null, bEnd: false, bError: false});
            xGCEWorker.postMessage({
                sCommand: "getListOfTokens",
                dParam: {sText: xInfo.selectionText},
                dInfo: {iReturnPort: xTab.id}
            });
            break;
        }
        case "conjugueur_panel":
            let xConjWindow = browser.windows.create({
                url: browser.extension.getURL("panel/conjugueur.html"),
                type: "detached_panel",
                width: 710,
                height: 980
            });
            xConjWindow.then(onCreated, onError);

            break;
        case "conjugueur_tab":
            let xConjTab = browser.tabs.create({
                url: browser.extension.getURL("panel/conjugueur.html")
            });
            xConjTab.then(onCreated, onError);

            break;
    }    
});

















/*
    TESTS ONLY

*/
async function newwin () {
    // test for popup window-like, which doesn’t close when losing the focus
    console.log("Async on");
    const getActive = browser.tabs.query({ currentWindow: true, active: true, });
    const xWindowInfo = await browser.windows.getLastFocused();
    const width = 710, height = 980; // the maximum size for panels is somewhere around 700x800. Firefox needs some additional pixels: 14x42 for FF54 on Win 10 with dpi 1.25
    const left = Math.round(xWindowInfo.left + xWindowInfo.width - width - 25);
    const top = Math.round(xWindowInfo.top + 74); // the actual frame height of the main window varies, but 74px should place the pop-up at the bottom if the button
































    const xWin = await browser.windows.create({
        type: 'panel', url: browser.extension.getURL("panel/conjugueur.html"), top: top, left: left, width: width, height: height,



    });
    browser.windows.update(xWin.id, { top:top, left:left, }); // firefox currently ignores top and left in .create(), so move it here
    console.log("Async done");

}

//newwin();















|
<







 







|










<
<
<
<
<
<
<
<




|
|
<
<


|
<
<
<
|
<
<
<

<
|
<
<
<
<
|
<
<

<
|
<
<
<
<
<
<
<
>


<
<
<
<
>





>
>
>
>
>
>
>
>
>
>
>
|
>
>
>

<
>

<
<
<
<
<
<
<
<
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
>
>
>

<
<
>


<
>
>
>
>
>
>
>
>
92
93
94
95
96
97
98
99

100
101
102
103
104
105
106
...
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158








159
160
161
162
163
164


165
166
167



168



169

170




171


172

173







174
175
176




177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

199
200








201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238


239
240
241

242
243
244
245
246
247
248
249
    }
    //sendResponse({response: "response from background script"});
}

browser.runtime.onMessage.addListener(handleMessage);


function handleConnexion (xPort) {

    let iPortId = xPort.sender.tab.id; // identifier for the port: each port can be found at dConnx[iPortId]
    console.log("tab_id: " + iPortId);
    dConnx.set(iPortId, xPort);
    xPort.onMessage.addListener(function (oRequest) {
        console.log("[background] message via connexion:");
        console.log(oRequest);
        switch (oRequest.sCommand) {
................................................................................
browser.contextMenus.create({
    id: "whatever",
    type: "separator",
    contexts: ["selection"]
});

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.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
    //console.log(xInfo);
    //console.log(xTab);


    // confusing: no way to get the node where we click?!
    switch (xInfo.menuItemId) {
        case "parseAndSpellcheck":



            parseAndSpellcheckSelectedText(xTab.id, xInfo.selectionText);



            break;

        case "getListOfTokens": 




            getListOfTokensFromSelectedText(xTab.id, xInfo.selectionText);


            break;

        case "conjugueur_window":







            openConjugueurWindow();
            break;
        case "conjugueur_tab":




            openConjugueurTab();
            break;
    }    
});


/*
    Keyboard shortcuts
*/
browser.commands.onCommand.addListener(function (sCommand) {
    switch (sCommand) {
        case "conjugueur_tab":
            openConjugueurTab();
            break;
        case "conjugueur_window":
            openConjugueurWindow();
            break;
    }
});


/*

    Actions
*/








function parseAndSpellcheckSelectedText (iTab, sText) {
    // send message to the tab
    let xTabPort = dConnx.get(iTab);
    xTabPort.postMessage({sActionDone: "openGCPanel", result: null, dInfo: null, bEnd: false, bError: false});
    // send command to the worker
    xGCEWorker.postMessage({
        sCommand: "parseAndSpellcheck",
        dParam: {sText: sText, sCountry: "FR", bDebug: false, bContext: false},
        dInfo: {iReturnPort: iTab}
    });
}

function getListOfTokensFromSelectedText (iTab, sText) {
    // send message to the tab
    let xTabPort = dConnx.get(iTab);
    xTabPort.postMessage({sActionDone: "openLxgPanel", result: null, dInfo: null, bEnd: false, bError: false});
    // send command to the worker
    xGCEWorker.postMessage({
        sCommand: "getListOfTokens",
        dParam: {sText: sText},
        dInfo: {iReturnPort: iTab}
    });
}

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

function openConjugueurWindow () {
    let xConjWindow = browser.windows.create({
        url: browser.extension.getURL("panel/conjugueur.html"),
        type: "detached_panel",
        width: 710,
        height: 980
    });


    xConjWindow.then(onCreated, onError);
}



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

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

Modified gc_lang/fr/webext/manifest.json from [0fb7cb35d1] to [d8a35b958c].

49
50
51
52
53
54
55














56
57
58
59
60
61
62
        "content_scripts/tf_content.js",
        "content_scripts/gc_content.js",
        "content_scripts/lxg_content.js",
        "content_scripts/content_modifier.js"
      ]
    }
  ],














  "web_accessible_resources": [
    "grammalecte/_dictionaries/French.json",
    "grammalecte/fr/conj_data.json",
    "grammalecte/fr/mfsp_data.json",
    "grammalecte/fr/phonet_data.json",
    "grammalecte/fr/tests_data.json",
    "img/logo-16.png"







>
>
>
>
>
>
>
>
>
>
>
>
>
>







49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
        "content_scripts/tf_content.js",
        "content_scripts/gc_content.js",
        "content_scripts/lxg_content.js",
        "content_scripts/content_modifier.js"
      ]
    }
  ],
  "commands": {
    "conjugueur_tab": {
      "suggested_key": {
        "default": "Ctrl+Shift+F6"
      },
      "description": "Ouvre le conjugueur dans un onglet"
    },
    "conjugueur_window": {
      "suggested_key": {
        "default": "Ctrl+Shift+F7"
      },
      "description": "Ouvre le conjugueur dans une fenêtre"
    }
  },
  "web_accessible_resources": [
    "grammalecte/_dictionaries/French.json",
    "grammalecte/fr/conj_data.json",
    "grammalecte/fr/mfsp_data.json",
    "grammalecte/fr/phonet_data.json",
    "grammalecte/fr/tests_data.json",
    "img/logo-16.png"

Modified gc_lang/fr/webext/panel/main.css from [4f0d4490cc] to [5188cbbc0c].

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
...
130
131
132
133
134
135
136



137
138
139
140
141
142
143
144
}


/* Main classes */

html {
    box-sizing: border-box;
    width: 530px;
    height: 500px;
    font-family: "Trebuchet MS", "Liberation Sans", sans-serif;
}
body {
    width: 530px;
    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.
................................................................................
    margin: 10px 0 5px 0;
}

#home_page {
    display: block;
    padding: 20px;
}




#gc_options_page {
    display: none;
    padding: 20px;
}
#sc_options_page {
    display: none;
    padding: 20px;







|




|







 







>
>
>
|







64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
...
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
}


/* Main classes */

html {
    box-sizing: border-box;
    width: 400px;
    height: 500px;
    font-family: "Trebuchet MS", "Liberation Sans", sans-serif;
}
body {
    width: 400px;
    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.
................................................................................
    margin: 10px 0 5px 0;
}

#home_page {
    display: block;
    padding: 20px;
}
#help_page {
    display: none;
    padding: 20px;
}
#gc_options_page {
    display: none;
    padding: 20px;
}
#sc_options_page {
    display: none;
    padding: 20px;

Modified gc_lang/fr/webext/panel/main.html from [efd16eea4c] to [e187ec365b].

12
13
14
15
16
17
18

19
20
21
22
23
24
25
26
27
28

































29
30








31
32
33
34




35
36
37
38



















39
40
41
42
43

44
45
46
47
48
49
50
..
51
52
53
54
55
56
57

      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <li class="select" data-page="home_page"><i class="fa fa-home icon"></i> 1.</li>

            <li class="select" data-page="gc_options_page"><i class="fa fa-coffee icon"></i> OP1</li>
            <li class="select" data-page="sc_options_page"><i class="fa fa-keyboard-o icon"></i> OP2</li>
            <li class="select" data-page="test_page"><i class="fa fa-keyboard-o icon"></i> TST</li>
          </ul>
        </nav>
      </header> <!-- #left -->

      <div id="page">

        <section id="home_page" class="page">

































          <h1>GRAMMALECTE</h1>
          <div><a href="https://www.dicollecte.org/test.html" target="_blank">TEST</a></div>








        </section>

        <section id="gc_options_page" class="page">
          <h1>OPTIONS GRAMMATICALES</h1>




        </section>

        <section id="sc_options_page" class="page">
          <h1>OPTIONS ORTHOGRAPHIQUES</h1>



















        </section>

        <section id="test_page" class="page">
          <div id="test_cmd">
            <h1>TESTS</h1>

            <textarea id="text_to_test" rows="10"></textarea>
            <div id="fulltests" class="button blue">Tests complets</div> <div id="text_to_test" class="button green fright">Analyser</div>
          </div>
          <pre id="tests_result"></pre>
        </section>

      </div> <!-- #page -->
................................................................................

    </div> <!-- #main -->

    <script src="main.js"></script>
  </body>

</html>








>










>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
<
>
>
>
>
>
>
>
>




>
>
>
>




>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>





>







 







>
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
...
116
117
118
119
120
121
122
123
      <header id="menu">
        <nav>
          <header id="logo">
            <img src="../img/logo-32.png">
          </header>
          <ul>
            <li class="select" data-page="home_page"><i class="fa fa-home icon"></i> 1.</li>
            <li class="select" data-page="help_page"><i class="fa fa-coffee icon"></i> Help</li>
            <li class="select" data-page="gc_options_page"><i class="fa fa-coffee icon"></i> OP1</li>
            <li class="select" data-page="sc_options_page"><i class="fa fa-keyboard-o icon"></i> OP2</li>
            <li class="select" data-page="test_page"><i class="fa fa-keyboard-o icon"></i> TST</li>
          </ul>
        </nav>
      </header> <!-- #left -->

      <div id="page">

        <section id="home_page" class="page">
          <p class="center"><img src="../img/logo120_text.png" alt="Grammalecte"></p>
          <p class="underline center">
            <b>Version ${version}</b>
          </p>
          <p class="underline center">
            <b>GPL 3 · <a id="website" class="simplelink" href="#" onclick="return false;">Site web</a></b>
          </p>
          <p id="links" class="center">
            <a id="spelling" class="bluebutton" href="#" onclick="return false;">Options</a> ·
            <a id="conjugueur" class="redbutton" href="#" onclick="return false;">Conjugueur</a>
          </p>
          
          <footer id="thanks">
              <p class="center" data-l10n-id="thanks1">Grammalecte remercie</p>
              <p class="center">
                  <a id="mainsponsor" href="#" onclick="return false;">
                      <img src="../img/LaMouette.png" alt="La Mouette" style="border: 1px solid #C0C0C0" />
                  </a>
              </p>
              <p class="center">
                  <a id="mainsponsor2" href="#" onclick="return false;">
                      <img src="../img/Algoo_logo.png" alt="Algoo" style="border: 1px solid #C0C0C0" />
                  </a>
              </p>
              <p class="center">
                  <a id="othersponsors" class="link" href="https://www.dicollecte.org/#thanks" onclick="return false;">
                      <b>et tous ceux qui l’ont soutenu.</b>
                  </a>
              </p>
          </footer>
        </section>

        <section id="help_page" class="page">
          <h1>AIDE</h1>

          <div id="help_section">
            <p data-l10n-id="useContextMenu"></p>
            <p class="right"><img src="img/contextmenu.png" title="menu contextuel sur zone de texte" /></p>
            <p><b data-l10n-id="shortcuts"></b></p>
            <p><span class="key" data-l10n-id="keyTF"></span> &#10097; <span class="goto" data-l10n-id="keyLabelTF"></span></p>
            <p><span class="key" data-l10n-id="keyGC"></span> &#10097; <span class="goto" data-l10n-id="keyLabelGC"></span></p>
            <p><span class="key" data-l10n-id="keyCJ"></span> &#10097; <span class="goto" data-l10n-id="keyLabelCJ"></span></p>
          </div>
        </section>

        <section id="gc_options_page" class="page">
          <h1>OPTIONS GRAMMATICALES</h1>
          <div id="grammar_options">
            ${optionsHTML}
          </div>
          <p class="center" style="margin: 10px 0;"><a id="default_options" href="#" onclick="return false;">Options par défaut</a></p>
        </section>

        <section id="sc_options_page" class="page">
          <h1>OPTIONS ORTHOGRAPHIQUES</h1>
          <div id="spelling_options">
            <p id="dictionaries_info" data-l10n-id="dictionaries_info"></p>
            <div class="dict_section" id="fr-FR-modern_box">
                <p><input type="checkbox" id="fr-FR-modern" /> <label for="fr-FR-modern">“Moderne”</label></p>
                <p class="dict_description">Ce dictionnaire propose l’orthographe telle qu’elle est écrite aujourd’hui le plus couramment. C’est le dictionnaire recommandé si le français n’est pas votre langue maternelle ou si vous ne désirez qu’une seule graphie correcte par mot.</p>
            </div>
            <div class="dict_section" id="fr-FR-classic_box">
                <p><input type="checkbox" id="fr-FR-classic" /> <label for="fr-FR-classic">“Classique” (recommandé)</label></p>
                <p class="dict_description">Il s’agit du dictionnaire “Moderne”, avec des graphies classiques en sus, certaines encore communément utilisées, d’autres désuètes. C’est le dictionnaire recommandé si le français est votre langue maternelle.</p>
            </div>
            <div class="dict_section" id="fr-FR-reform_box">
                <p><input type="checkbox" id="fr-FR-reform" /> <label for="fr-FR-reform">“Réforme 1990”</label></p>
                <p class="dict_description">Avec ce dictionnaire, seule l’orthographe réformée est reconnue. Attendu que bon nombre de graphies réformées sont considérées comme erronées par beaucoup, ce dictionnaire est déconseillé. Les graphies passées dans l’usage sont déjà incluses dans le dictionnaire “Moderne”.</p>
            </div>
            <div class="dict_section" id="fr-FR-classic-reform_box">
                <p><input type="checkbox" id="fr-FR-classic-reform" /> <label for="fr-FR-classic-reform">“Toutes variantes”</label></p>
                <p class="dict_description">Ce dictionnaire contient les variantes graphiques, classiques, réformées, ainsi que d’autres plus rares encore. Ce dictionnaire est déconseillé à ceux qui ne connaissent pas très bien la langue française.</p>
            </div>
          </div>
        </section>

        <section id="test_page" class="page">
          <div id="test_cmd">
            <h1>TESTS</h1>
            <div><a href="https://www.dicollecte.org/test.html" target="_blank">Page for tests</a></div>
            <textarea id="text_to_test" rows="10"></textarea>
            <div id="fulltests" class="button blue">Tests complets</div> <div id="text_to_test" class="button green fright">Analyser</div>
          </div>
          <pre id="tests_result"></pre>
        </section>

      </div> <!-- #page -->
................................................................................

    </div> <!-- #main -->

    <script src="main.js"></script>
  </body>

</html>