Merge commit '32f4360de9a5d2654a338ecf590d8f5f5cae2fec'

service2.js

@@ -26,6 +26,7 @@ class BesService {
     this.hostElement = hostElement
     this.results = [] // Results of grammar-checking, one per each block/paragraph of text
     this.createCorrectionPanel()
+    this.firstCall = true
 
     // Disable browser built-in spell-checker to prevent collision with our grammar markup.
     this.originalSpellcheck = this.hostElement.spellcheck
@@ -777,7 +778,16 @@ class BesDOMService extends BesTreeService {
    */
   onInput() {
     // Now that the text is done changing, we can correctly calculate markup position.
-    this.repositionAllMarkup()
+    // This is a way to resolve lagginess in repositioning markup with many mistakes.
+    if (this.firstCall) {
+      this.repositionAllMarkup()
+      this.firstCall = false
+    }
+    clearTimeout(this.debounceTimer)
+    this.debounceTimer = setTimeout(() => {
+      this.repositionAllMarkup()
+      this.firstCall = true
+    }, 300)
 
     // Defer grammar-checking to reduce stress on grammar-checking server.
     this.timer = setTimeout(() => {
@@ -1369,6 +1379,7 @@ class BesPopup extends HTMLElement {
           display: block;
         }
         .popup-text {
+          font-size: 0.93rem;
           max-width: 160px;
           color: black;
           text-align: center;
@@ -1376,9 +1387,10 @@ class BesPopup extends HTMLElement {
           z-index: 1;
         }
         .bes-popup-container {
+          font-family: Arial, sans-serif;
           visibility: hidden;
           min-width: 200px;
-          max-width: 300px;
+          max-width: 350px;
           background-color: rgb(241, 243, 249);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
           border-radius: 5px;
@@ -1414,6 +1426,9 @@ class BesPopup extends HTMLElement {
         .bes-replacement-btn:hover{
           background-color: #1976f0;
         }
+        .bes-replacement-div{
+          margin-top: 4px;
+        }
         :host(.show) .bes-popup-container {
           visibility: visible;
           animation: fadeIn 1s;
@@ -1511,7 +1526,7 @@ class BesPopup extends HTMLElement {
    */
   changeMessage(text) {
     this.clearReplacements()
-    this.shadowRoot.querySelector('.popup-text').textContent = text
+    this.shadowRoot.querySelector('.popup-text').innerText = text
   }
 
   /**