Index: gc_lang/fr/webext/content_scripts/content_modifier.js ================================================================== --- gc_lang/fr/webext/content_scripts/content_modifier.js +++ gc_lang/fr/webext/content_scripts/content_modifier.js @@ -57,19 +57,21 @@ let xTFButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Formater"}); xTFButton.onclick = function() { createTFPanel(xTextArea); }; let xLxgButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Analyser"}); xLxgButton.onclick = function() { createLxgPanel(); + oLxgPanel.startWaitIcon(); xPort.postMessage({ sCommand: "getListOfTokens", dParam: {sText: xTextArea.value}, dInfo: {sTextAreaId: xTextArea.id} }); }; let xGCButton = createNode("div", {className: "grammalecte_wrapper_button", textContent: "Corriger"}); xGCButton.onclick = function() { createGCPanel(); + oGCPanel.startWaitIcon(); xPort.postMessage({ sCommand: "parseAndSpellcheck", dParam: {sText: xTextArea.value, sCountry: "FR", bDebug: false, bContext: false}, dInfo: {sTextAreaId: xTextArea.id} }); @@ -160,27 +162,35 @@ */ let xPort = browser.runtime.connect({name: "content-script port"}); xPort.onMessage.addListener(function (oMessage) { console.log("[Content script] received…"); - let {sActionDone, result, dInfo, bError} = oMessage; + let {sActionDone, result, dInfo, bEnd, bError} = oMessage; switch (sActionDone) { case "getCurrentTabId": console.log("[Content script] tab id: " + result); nTadId = result; break; case "parseAndSpellcheck": console.log("[content script] received: parseAndSpellcheck"); - oGCPanelContent.addParagraphResult(result); + if (!bEnd) { + oGCPanelContent.addParagraphResult(result); + } else { + oGCPanel.stopWaitIcon(); + } break; case "parseAndSpellcheck1": console.log("[content script] received: parseAndSpellcheck1"); oGCPanelContent.refreshParagraph(dInfo.sParagraphId, result); break; case "getListOfTokens": console.log("[content script] received: getListOfTokens"); - oLxgPanelContent.addListOfTokens(result); + if (!bEnd) { + oLxgPanelContent.addListOfTokens(result); + } else { + oLxgPanel.stopWaitIcon(); + } break; default: console.log("[Content script] Unknown command: " + sActionDone); } }); Index: gc_lang/fr/webext/content_scripts/content_panels.css ================================================================== --- gc_lang/fr/webext/content_scripts/content_panels.css +++ gc_lang/fr/webext/content_scripts/content_panels.css @@ -109,29 +109,30 @@ CSS Spinner Double bounce http://tobiasahlin.com/spinkit/ */ .grammalecte_spinner { - width: 30px; - height: 30px; + visibility: hidden; + width: 40px; + height: 40px; position: absolute; top: 2px; - right: 120px; + right: 150px; } .grammalecte_spinner .bounce1, .grammalecte_spinner .bounce2 { width: 100%; height: 100%; border-radius: 50%; - background-color: hsl(180, 50%, 75%); + background-color: hsl(0, 50%, 75%); opacity: 0.6; position: absolute; top: 0; left: 0; animation: grammalecte-sk-bounce 2.0s infinite ease-in-out; } -.bounce2 { +.grammalecte_spinner .bounce2 { animation-delay: -1.0s; } @keyframes grammalecte-sk-bounce { 0%, 100% { Index: gc_lang/fr/webext/content_scripts/gc_content.css ================================================================== --- gc_lang/fr/webext/content_scripts/gc_content.css +++ gc_lang/fr/webext/content_scripts/gc_content.css @@ -4,15 +4,15 @@ #grammalecte_gc_panel_content { padding: 5px; } .grammalecte_paragraph_block { - margin: 0 0 10px 0; + margin-bottom: 5px; } .grammalecte_paragraph { - background-color: hsla(0, 0%, 90%, 1); + background-color: hsl(0, 0%, 96%); padding: 10px; border-radius: 2px; font-size: 14px; font-family : "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace; color: hsl(0, 0%, 0%); @@ -55,39 +55,21 @@ } .grammalecte_paragraph u.error:hover { cursor: pointer; } - -.grammalecte_paragraph_actions { - margin: 0 0 5px 10px; -} -.grammalecte_paragraph_actions .close_button { - background-color: hsl(0, 0%, 50%); - text-align: center; - float: right; - margin-left: 2px; - padding: 1px 4px 3px 4px; - cursor: pointer; - font-size: 14px; - color: hsl(0, 0%, 96%); - border-radius: 2px; - background-color: hsl(0, 30%, 50%); - color: hsl(0, 0%, 96%); -} - /* Action buttons */ -.grammalecte_actions { +.grammalecte_paragraph_actions { float: right; margin: 0 0 5px 10px; } -.grammalecte_actions .button { +.grammalecte_paragraph_actions .button { display: inline-block; background-color: hsl(0, 0%, 50%); text-align: center; margin-left: 2px; padding: 1px 4px 3px 4px; @@ -94,40 +76,40 @@ cursor: pointer; font-size: 14px; color: hsl(0, 0%, 96%); border-radius: 2px; } -.grammalecte_actions .button:hover { +.grammalecte_paragraph_actions .button:hover { background-color: hsl(0, 0%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_actions .green { +.grammalecte_paragraph_actions .green { background-color: hsl(120, 30%, 50%); color: hsl(0, 0%, 96%); } -.grammalecte_actions .green:hover { +.grammalecte_paragraph_actions .green:hover { background-color: hsl(120, 50%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_actions .red { +.grammalecte_paragraph_actions .red { background-color: hsl(0, 30%, 50%); color: hsl(0, 0%, 96%); } -.grammalecte_actions .red:hover { +.grammalecte_paragraph_actions .red:hover { background-color: hsl(0, 50%, 40%); color: hsl(0, 0%, 100%); } -.grammalecte_actions .orange { +.grammalecte_paragraph_actions .orange { background-color: hsl(30, 50%, 50%); color: hsl(30, 0%, 96%); } -.grammalecte_actions .orange:hover { +.grammalecte_paragraph_actions .orange:hover { background-color: hsl(30, 70%, 40%); color: hsl(30, 0%, 100%); } -.grammalecte_actions .bold { +.grammalecte_paragraph_actions .bold { font-weight: bold; } @@ -226,65 +208,10 @@ #grammalecte_tooltip_sugg_block a.sugg:hover { background-color: hsla(180, 70%, 45%, 1); color: hsla(0, 0%, 100%, 1); } - -/* - Action buttons -*/ - -.grammalecte_paragraph_actions { - margin: 0 0 5px 10px; -} - -.grammalecte_paragraph_actions .button { - background-color: hsl(0, 0%, 50%); - text-align: center; - float: right; - margin-left: 2px; - padding: 1px 4px 3px 4px; - /*width: 18px; - height: 18px;*/ - cursor: pointer; - font-size: 14px; - color: hsl(0, 0%, 96%); - border-radius: 2px; -} -.grammalecte_paragraph_actions .button:hover { - background-color: hsl(0, 0%, 40%); - color: hsl(0, 0%, 100%); -} - -.grammalecte_paragraph_actions .green { - background-color: hsl(120, 30%, 50%); - color: hsl(0, 0%, 96%); -} -.grammalecte_paragraph_actions .green:hover { - background-color: hsl(120, 50%, 40%); - color: hsl(0, 0%, 100%); -} -.grammalecte_paragraph_actions .red { - background-color: hsl(0, 30%, 50%); - color: hsl(0, 0%, 96%); -} -.grammalecte_paragraph_actions .red:hover { - background-color: hsl(0, 50%, 40%); - color: hsl(0, 0%, 100%); -} -.grammalecte_paragraph_actions .orange { - background-color: hsl(30, 50%, 50%); - color: hsl(30, 0%, 96%); -} -.grammalecte_paragraph_actions .orange:hover { - background-color: hsl(30, 70%, 40%); - color: hsl(30, 0%, 100%); -} -.grammalecte_paragraph_actions .bold { - font-weight: bold; -} - /* ERRORS */ Index: gc_lang/fr/webext/content_scripts/gc_content.js ================================================================== --- gc_lang/fr/webext/content_scripts/gc_content.js +++ gc_lang/fr/webext/content_scripts/gc_content.js @@ -72,11 +72,11 @@ addParagraphResult: function (oResult) { try { if (oResult) { let xNodeDiv = createNode("div", {className: "grammalecte_paragraph_block"}); // actions - let xActionsBar = createNode("div", {className: "grammalecte_actions"}); + let xActionsBar = createNode("div", {className: "grammalecte_paragraph_actions"}); xActionsBar.appendChild(createNode("div", {id: "grammalecte_check" + oResult.sParaNum, className: "button green", textContent: "Réanalyser"})); xActionsBar.appendChild(createNode("div", {id: "grammalecte_hide" + oResult.sParaNum, className: "button red bold", textContent: "×"})); // paragraph let xParagraph = createNode("p", {id: "grammalecte_paragraph"+oResult.sParaNum, lang: "fr", contentEditable: "true"}); xParagraph.setAttribute("spellcheck", "false"); // doesn’t seem possible to use “spellcheck” as a common attribute. Index: gc_lang/fr/webext/content_scripts/panel_creator.js ================================================================== --- gc_lang/fr/webext/content_scripts/panel_creator.js +++ gc_lang/fr/webext/content_scripts/panel_creator.js @@ -13,45 +13,36 @@ this.sContentId = sId+"_content"; this.nWidth = nWidth; this.nHeight = nHeight; this.bMovable = bMovable; this.xContentNode = createNode("div", {className: "grammalecte_panel_content"}); + this.xWaitIcon = this._createWaitIcon(); this.xPanelNode = this._createPanel(sTitle); this.center(); } _createPanel (sTitle) { try { let xPanel = createNode("div", {id: this.sId, className: "grammalecte_panel"}); let xBar = createNode("div", {className: "grammalecte_panel_bar"}); - xBar.appendChild(this._createWaitIcon()); xBar.appendChild(this._createButtons()); let xTitle = createNode("div", {className: "grammalecte_panel_title"}); xTitle.appendChild(createLogo()); xTitle.appendChild(createNode("div", {className: "grammalecte_panel_label", textContent: sTitle})); xBar.appendChild(xTitle); xPanel.appendChild(xBar); - //xPanel.appendChild(createNode("div", {className: "grammalecte_empty_space_under_title_bar"})); xPanel.appendChild(this.xContentNode); return xPanel; } catch (e) { showError(e); } } - _createWaitIcon () { - let xWaitIcon = createNode("div", {id: "grammalecte_wait_icon", className: "grammalecte_spinner"}); - xWaitIcon.appendChild(createNode("div", {id: "bounce1"})); - xWaitIcon.appendChild(createNode("div", {id: "bounce2"})); - return xWaitIcon; - } - _createButtons () { let xButtonLine = createNode("div", {className: "grammalecte_panel_commands"}); - - + xButtonLine.appendChild(this.xWaitIcon); if (this.bMovable) { xButtonLine.appendChild(this._createMoveButton("stickToTop", "¯", "Coller en haut")); xButtonLine.appendChild(this._createMoveButton("stickToLeft", "«", "Coller à gauche")); xButtonLine.appendChild(this._createMoveButton("center", "•", "Centrer")); xButtonLine.appendChild(this._createMoveButton("stickToRight", "»", "Coller à droite")); @@ -58,10 +49,17 @@ xButtonLine.appendChild(this._createMoveButton("stickToBottom", "_", "Coller en bas")); } xButtonLine.appendChild(this._createCloseButton()); return xButtonLine; } + + _createWaitIcon () { + let xWaitIcon = createNode("div", {className: "grammalecte_spinner"}); + xWaitIcon.appendChild(createNode("div", {className: "bounce1"})); + xWaitIcon.appendChild(createNode("div", {className: "bounce2"})); + return xWaitIcon; + } _createMoveButton (sAction, sLabel, sTitle) { let xButton = createNode("div", {className: "grammalecte_move_button", textContent: sLabel, title: sTitle}); xButton.onclick = function () { this[sAction](); }.bind(this); return xButton; @@ -122,15 +120,15 @@ // for debugging console.log(this.xPanelNode.innerHTML); } startWaitIcon () { - document.getElementById("grammalecte_waiticon").hidden = false; + this.xWaitIcon.style.visibility = "visible"; } stopWaitIcon () { - document.getElementById("grammalecte_waiticon").hidden = true; + this.xWaitIcon.style.visibility = "hidden"; } } /*