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 Side-by-Side 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

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);
        //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");
        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);*/

        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();
        };
︙
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

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", 500, 900);
        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", 800, 500);
        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", 400, 800);
        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", 400, 800);
        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

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, nWidth, nHeight) {
function createPanelFrame (sId, sTitle) {
    try {
        let xPanel = document.createElement("div");
        let xPanel = createNode("div", {id: sId, className: "grammalecte_panel"});
        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");
        let xBar = createNode("div", {className: "grammalecte_title_bar"});
        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;");
        let xTitle = createNode("div", {className: "grammalecte_title"});
        xTitle.appendChild(createLogo());
        xTitle.appendChild(createDiv(sId+"_label", "Grammalecte · " + sTitle, "", "display: inline-block; padding: 0 10px;"));
        xTitle.appendChild(createNode("div", {className: "grammalecte_label", textContent: "Grammalecte · " + sTitle}));
        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;"));
        //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 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;"
    xButton.className = "grammalecte_close_button";
                  + "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");
function createNode (sType, oAttr) {
    try {
        let xNode = document.createElement(sType);
    xDiv.id = sId;
    xDiv.className = sClass;
        Object.assign(xNode, oAttr);
    xDiv.style = sStyle;
    xDiv.textContent = sContent;
    return xDiv;
        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

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

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 = createDiv("tf_actions", "");
        let xPgBarBox = createDiv("tf_progressbarbox", "");
        let xActions = createNode("div", {id: "tf_actions"});
        xActions.appendChild(createNode("div", {id: "tf_reset", textContent: "Par défaut", className: "button blue"}));
        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"));
        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 = document.createElement("fieldset");
    let xFieldset = createNode("fieldset", {id: sId, className: "groupblock"});
    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 xOption = createNode("div", {className: "blockopt underline"});
    let xInput = createCheckbox(sId, bDefault, "option");
    let xLabel = createLabel(sId, sLabel, "opt_lbl largew");
    let xResult = createDiv("res_"+sId, "", "result fright");
    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

32
33
34
35
36
37
38

39
40
41
42
43
44
45
46
47








-
+
+








  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "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