Grammalecte  Check-in [94fe285315]

Overview
Comment:[fx] we can inject CSS in content-scripts -> drop inline style
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | fx | webext2
Files: files | file ages | folders
SHA3-256: 94fe28531548350636e026da53be0a90c1dcd5e4d349cc87e0cd7b4a26d2fca3
User & Date: olr on 2017-08-12 14:53:52
Other Links: branch diff | manifest | tags
Context
2017-08-12
14:55
[fx] forgot to add the CSS file with the previous commit check-in: 9e033cb647 user: olr tags: fx, webext2
14:53
[fx] we can inject CSS in content-scripts -> drop inline style check-in: 94fe285315 user: olr tags: fx, webext2
12:04
[fx] panels ui improvement + image inline check-in: a974df14bb user: olr tags: fx, webext2
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Modified gc_lang/fr/webext/content_scripts/modify_page.js from [4865d913a8] to [7d090ec36f].

︙︙
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

        xWrapper.style = "padding: 5px; color: hsl(210, 10%, 90%); background-color: hsl(210, 50%, 50%); border-radius: 3px;";
        xWrapper.id = nWrapper + 1;
        nWrapper += 1;
        xParentElement.insertBefore(xWrapper, xTextArea);
        xWrapper.appendChild(xTextArea); // move textarea in wrapper
        let xToolbar = createWrapperToolbar(xTextArea);
        xWrapper.appendChild(xToolbar);
        //loadImage("GrammalecteTitle", "img/logo-16.png");
    }
    catch (e) {
        showError(e);
    }
}

let sButtonStyle = "display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; cursor: pointer;";

function createWrapperToolbar (xTextArea) {
    try {
        let xToolbar = document.createElement("div");
        xToolbar.style = "display: flex; justify-content: flex-end; margin-top: 5px; padding: 5px 10px;";
        /*let xLogo = document.createElement("img");
        xLogo.src = browser.extension.getURL("img/logo-16.png");
        xTitle.appendChild(xLogo);*/

        let xImagePlace = document.createElement("span");
        xImagePlace.className = "GrammalecteTitle";
        xToolbar.appendChild(xImagePlace);

        xToolbar.appendChild(document.createTextNode("Grammalecte"));
        let xConjButton = document.createElement("div");
        xConjButton.textContent = "Conjuguer";
        xConjButton.style = sButtonStyle;
        xConjButton.onclick = function() {
            createConjPanel();
        };








<













|


<
<
<
<








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

        xWrapper.style = "padding: 5px; color: hsl(210, 10%, 90%); background-color: hsl(210, 50%, 50%); border-radius: 3px;";
        xWrapper.id = nWrapper + 1;
        nWrapper += 1;
        xParentElement.insertBefore(xWrapper, xTextArea);
        xWrapper.appendChild(xTextArea); // move textarea in wrapper
        let xToolbar = createWrapperToolbar(xTextArea);
        xWrapper.appendChild(xToolbar);

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

let sButtonStyle = "display: inline-block; padding: 0 5px; margin-left: 5px; background-color: hsl(210, 50%, 60%); border-radius: 2px; cursor: pointer;";

function createWrapperToolbar (xTextArea) {
    try {
        let xToolbar = document.createElement("div");
        xToolbar.style = "display: flex; justify-content: flex-end; margin-top: 5px; padding: 5px 10px;";
        /*let xLogo = document.createElement("img");
        xLogo.src = browser.extension.getURL("img/logo-16.png"); // can’t work, due to content-script policy: https://bugzilla.mozilla.org/show_bug.cgi?id=1267027
        xTitle.appendChild(xLogo);*/





        xToolbar.appendChild(document.createTextNode("Grammalecte"));
        let xConjButton = document.createElement("div");
        xConjButton.textContent = "Conjuguer";
        xConjButton.style = sButtonStyle;
        xConjButton.onclick = function() {
            createConjPanel();
        };
︙︙
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150


function createConjPanel () {
    console.log("Conjugueur");
    if (xConjPanel !== null) {
        xConjPanel.style.display = "block";
    } else {
        // create the panel
        xConjPanel = createPanelFrame("conj_panel", "Conjugueur", 500, 900);
        document.body.appendChild(xConjPanel);
    }
}

function createTFPanel (xTextArea) {
    console.log("Formateur de texte");
    if (xTFPanel !== null) {
        xTFPanel.style.display = "block";
    } else {
        // create the panel
        xTFPanel = createPanelFrame("tf_panel", "Formateur de texte", 800, 500);
        document.body.appendChild(xTFPanel);
        document.getElementById("tf_panel_content").appendChild(createTextFormatter(xTextArea));
    }
}

function createLxgPanel (xTextArea) {
    console.log("Lexicographe");
    if (xLxgPanel !== null) {
        xLxgPanel.style.display = "block";
    } else {
        // create the panel
        xLxgPanel = createPanelFrame("lxg_panel", "Lexicographe", 400, 800);
        document.body.appendChild(xLxgPanel);
    }
}

function createGCPanel (oErrors) {
    console.log("Correction grammaticale");
    if (xGCPanel !== null) {
        xGCPanel.style.display = "block";
    } else {
        // create the panel
        xGCPanel = createPanelFrame("gc_panel", "Correcteur", 400, 800);
        document.body.appendChild(xGCPanel);
        document.getElementById("gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors)));
    }
}


/*








|










|











|










|








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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145


function createConjPanel () {
    console.log("Conjugueur");
    if (xConjPanel !== null) {
        xConjPanel.style.display = "block";
    } else {
        // create the panel
        xConjPanel = createPanelFrame("conj_panel", "Conjugueur");
        document.body.appendChild(xConjPanel);
    }
}

function createTFPanel (xTextArea) {
    console.log("Formateur de texte");
    if (xTFPanel !== null) {
        xTFPanel.style.display = "block";
    } else {
        // create the panel
        xTFPanel = createPanelFrame("tf_panel", "Formateur de texte");
        document.body.appendChild(xTFPanel);
        document.getElementById("tf_panel_content").appendChild(createTextFormatter(xTextArea));
    }
}

function createLxgPanel (xTextArea) {
    console.log("Lexicographe");
    if (xLxgPanel !== null) {
        xLxgPanel.style.display = "block";
    } else {
        // create the panel
        xLxgPanel = createPanelFrame("lxg_panel", "Lexicographe");
        document.body.appendChild(xLxgPanel);
    }
}

function createGCPanel (oErrors) {
    console.log("Correction grammaticale");
    if (xGCPanel !== null) {
        xGCPanel.style.display = "block";
    } else {
        // create the panel
        xGCPanel = createPanelFrame("gc_panel", "Correcteur");
        document.body.appendChild(xGCPanel);
        document.getElementById("gc_panel_content").appendChild(document.createTextNode(JSON.stringify(oErrors)));
    }
}


/*
︙︙

Modified gc_lang/fr/webext/content_scripts/panel_creator.js from [16b43963ab] to [dcb12b523e]. 

1
2
3
4
5
6
7
8
9
10
11
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

// JavaScript
// Panel creator

"use strict";


function createPanelFrame (sId, sTitle, nWidth, nHeight) {
    try {
        let xPanel = document.createElement("div");
        xPanel.style = "position: fixed; left: 50%; top: 50%; z-index: 100; border-radius: 10px;"
                     + "color: hsl(210, 10%, 4%); background-color: hsl(210, 20%, 90%); border: 10px solid hsla(210, 20%, 70%, .5);"
                     + 'font-family: "Trebuchet MS", "Liberation Sans", sans-serif;'
                     + getPanelSize(nWidth, nHeight);
        let xBar = document.createElement("div");
        xBar.style = "position: fixed; width: "+nWidth+"px ; background-color: hsl(210, 0%, 100%); border-bottom: 1px solid hsl(210, 10%, 50%); font-size: 20px;";
        xBar.appendChild(createCloseButton(xPanel));
        let xTitle = createDiv(sId+"_title", "", "", "padding: 10px 20px;");
        xTitle.appendChild(createLogo());
        xTitle.appendChild(createDiv(sId+"_label", "Grammalecte · " + sTitle, "", "display: inline-block; padding: 0 10px;"));
        xBar.appendChild(xTitle);
        xPanel.appendChild(xBar);
        xPanel.appendChild(createDiv(sId+"_empty_space", "", "", "height: 50px;")); // empty space to fill behind the title bar
        xPanel.appendChild(createDiv(sId+"_content", "", "", "overflow: auto;"));
        return xPanel;
    }
    catch (e) {
        showError(e);
    }
}

function getPanelSize (nWidth, nHeight) {
    let s = "width: "+ nWidth.toString() + "px; height: " + nHeight.toString() + "px;";
    s += "margin-top: -" + (nHeight/2).toString() + "px; margin-left: -" + (nWidth/2).toString() + "px;";
    return s;
}

function createCloseButton (xParentNode) {
    let xButton = document.createElement("div");
    xButton.style = "float: right; padding: 2px 10px; color: hsl(210, 0%, 100%); text-align: center;"
                  + "font-size: 22px; font-weight: bold; background-color: hsl(0, 80%, 50%); border-radius: 0 0 0 3px; cursor: pointer;";
    xButton.textContent = "×";
    xButton.onclick = function () {
        xParentNode.style.display = "none";
    }
    return xButton;
}


/*
    Common functions
*/
function createDiv (sId, sContent, sClass="", sStyle="") {

    let xDiv = document.createElement("div");
    xDiv.id = sId;
    xDiv.className = sClass;
    xDiv.style = sStyle;
    xDiv.textContent = sContent;
    return xDiv;




}

function createCheckbox (sId, bDefault, sClass="")  {
    let xInput = document.createElement("input");
    xInput.type = "checkbox";
    xInput.id = sId;
    xInput.className = sClass;







|

|
<
<
<
<
|
<

|

|


|
|







<
<
<
<
<
<


|
<











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








1
2
3
4
5
6
7
8
9




10

11
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

// JavaScript
// Panel creator

"use strict";


function createPanelFrame (sId, sTitle) {
    try {
        let xPanel = createNode("div", {id: sId, className: "grammalecte_panel"});




        let xBar = createNode("div", {className: "grammalecte_title_bar"});

        xBar.appendChild(createCloseButton(xPanel));
        let xTitle = createNode("div", {className: "grammalecte_title"});
        xTitle.appendChild(createLogo());
        xTitle.appendChild(createNode("div", {className: "grammalecte_label", textContent: "Grammalecte · " + sTitle}));
        xBar.appendChild(xTitle);
        xPanel.appendChild(xBar);
        //xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"}));
        xPanel.appendChild(createNode("div", {id: sId+"_content", className: "grammalecte_panel_content"}));
        return xPanel;
    }
    catch (e) {
        showError(e);
    }
}







function createCloseButton (xParentNode) {
    let xButton = document.createElement("div");
    xButton.className = "grammalecte_close_button";

    xButton.textContent = "×";
    xButton.onclick = function () {
        xParentNode.style.display = "none";
    }
    return xButton;
}


/*
    Common functions
*/
function createNode (sType, oAttr) {
    try {
        let xNode = document.createElement(sType);

        Object.assign(xNode, oAttr);


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

function createCheckbox (sId, bDefault, sClass="")  {
    let xInput = document.createElement("input");
    xInput.type = "checkbox";
    xInput.id = sId;
    xInput.className = sClass;
︙︙

Modified gc_lang/fr/webext/content_scripts/text_formatter.js from [ad8781cf55] to [44d0e018ce]. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// JavaScript
// Text formatter

"use strict";

function createTextFormatter (xTextArea) {
    let xTFNode = document.createElement("div");
    try {
        // Options
        let xOptions = createDiv("tf_options", "");
        let xSSP = createFieldset("group_ssp", true, "Espaces surnuméraires");
        xSSP.appendChild(createOptionInputAndLabel("o_start_of_paragraph", true, "En début de paragraphe"));
        xSSP.appendChild(createOptionInputAndLabel("o_end_of_paragraph", true, "En fin de paragraphe"));
        xSSP.appendChild(createOptionInputAndLabel("o_between_words", true, "Entre les mots"));
        xSSP.appendChild(createOptionInputAndLabel("o_before_punctuation", true, "Avant les points (.), les virgules (,)"));
        xSSP.appendChild(createOptionInputAndLabel("o_within_parenthesis", true, "À l’intérieur des parenthèses"));
        xSSP.appendChild(createOptionInputAndLabel("o_within_square_brackets", true, "À l’intérieur des crochets"));










|








1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// JavaScript
// Text formatter

"use strict";

function createTextFormatter (xTextArea) {
    let xTFNode = document.createElement("div");
    try {
        // Options
        let xOptions = createNode("div", {id: "tf_options"});
        let xSSP = createFieldset("group_ssp", true, "Espaces surnuméraires");
        xSSP.appendChild(createOptionInputAndLabel("o_start_of_paragraph", true, "En début de paragraphe"));
        xSSP.appendChild(createOptionInputAndLabel("o_end_of_paragraph", true, "En fin de paragraphe"));
        xSSP.appendChild(createOptionInputAndLabel("o_between_words", true, "Entre les mots"));
        xSSP.appendChild(createOptionInputAndLabel("o_before_punctuation", true, "Avant les points (.), les virgules (,)"));
        xSSP.appendChild(createOptionInputAndLabel("o_within_parenthesis", true, "À l’intérieur des parenthèses"));
        xSSP.appendChild(createOptionInputAndLabel("o_within_square_brackets", true, "À l’intérieur des crochets"));
︙︙
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

        xOptions.appendChild(xSpace);
        xOptions.appendChild(xNBSP);
        xOptions.appendChild(xDelete);
        xOptions.appendChild(xTypo);
        xOptions.appendChild(xMisc);
        xOptions.appendChild(xStruct);
        // Actions
        let xActions = createDiv("tf_actions", "");
        let xPgBarBox = createDiv("tf_progressbarbox", "");
        xPgBarBox.innerHTML = '<progress id="progressbar" style="width: 400px;"></progress> <span id="time_res"></span>';
        xActions.appendChild(createDiv("tf_reset", "Par défaut", "button blue"));
        xActions.appendChild(xPgBarBox);
        xActions.appendChild(createDiv("tf_apply", "Appliquer", "button green"));
        xActions.appendChild(createDiv("infomsg", "blabla"));
        // create result
        xTFNode.appendChild(xOptions);
        xTFNode.appendChild(xActions);
    }
    catch (e) {
        //console.error(e);
        showError(e);
    }
    return xTFNode;
}

function createFieldset (sId, bDefault, sLabel) {
    let xFieldset = document.createElement("fieldset");
    xFieldset.id = sId;
    xFieldset.className = "groupblock";
    let xLegend = document.createElement("legend");
    let xInput = createCheckbox("o_"+sId, bDefault, "option");
    let xLabel = createLabel(xInput.id, sLabel);
    // create result
    xLegend.appendChild(xInput);
    xLegend.appendChild(xLabel);
    xFieldset.appendChild(xLegend);
    return xFieldset;
}

function createOptionInputAndLabel (sId, bDefault, sLabel) {
    let xOption = document.createElement("div");
    xOption.className = "blockopt underline";
    let xInput = createCheckbox(sId, bDefault, "option");
    let xLabel = createLabel(sId, sLabel, "opt_lbl largew");
    let xResult = createDiv("res_"+sId, "", "result fright");
    // create result
    xOption.appendChild(xResult);
    xOption.appendChild(xInput);
    xOption.appendChild(xLabel);
    return xOption;
}









|
|
<
|
|
|
|












|
<
<











<
|


|








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

        xOptions.appendChild(xSpace);
        xOptions.appendChild(xNBSP);
        xOptions.appendChild(xDelete);
        xOptions.appendChild(xTypo);
        xOptions.appendChild(xMisc);
        xOptions.appendChild(xStruct);
        // Actions
        let xActions = createNode("div", {id: "tf_actions"});
        xActions.appendChild(createNode("div", {id: "tf_reset", textContent: "Par défaut", className: "button blue"}));

        xActions.appendChild(createNode("progress", {id: "progressbar", style: "width: 25px"}));
        xActions.appendChild(createNode("span", {id: "time_res"}));
        xActions.appendChild(createNode("div", {id: "tf_apply", textContent: "Appliquer", className: "button green"}));
        xActions.appendChild(createNode("div", {id: "infomsg", textContent: "blabla"}));
        // create result
        xTFNode.appendChild(xOptions);
        xTFNode.appendChild(xActions);
    }
    catch (e) {
        //console.error(e);
        showError(e);
    }
    return xTFNode;
}

function createFieldset (sId, bDefault, sLabel) {
    let xFieldset = createNode("fieldset", {id: sId, className: "groupblock"});


    let xLegend = document.createElement("legend");
    let xInput = createCheckbox("o_"+sId, bDefault, "option");
    let xLabel = createLabel(xInput.id, sLabel);
    // create result
    xLegend.appendChild(xInput);
    xLegend.appendChild(xLabel);
    xFieldset.appendChild(xLegend);
    return xFieldset;
}

function createOptionInputAndLabel (sId, bDefault, sLabel) {

    let xOption = createNode("div", {className: "blockopt underline"});
    let xInput = createCheckbox(sId, bDefault, "option");
    let xLabel = createLabel(sId, sLabel, "opt_lbl largew");
    let xResult = createNode("div", {id: "res_"+sId, className: "result fright"});
    // create result
    xOption.appendChild(xResult);
    xOption.appendChild(xInput);
    xOption.appendChild(xLabel);
    return xOption;
}
︙︙

Modified gc_lang/fr/webext/manifest.json from [27e3a301e7] to [da43ad992b].

︙︙
32
33
34
35
36
37
38
39

40
41
42
43
44
45
46

  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],

      "js": [
        "content_scripts/panel_creator.js",
        "content_scripts/text_formatter.js",
        "content_scripts/modify_page.js"
      ]
    }
  ],








|
>








32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["content_scripts/content_panels.css"],
      "js": [
        "content_scripts/panel_creator.js",
        "content_scripts/text_formatter.js",
        "content_scripts/modify_page.js"
      ]
    }
  ],
︙︙

Fossil 2.20 [210e89a059] 2022-11-16 18:46:32
This page was generated in about 0.008s