Update popup

1. Shrink font size in the popup window.
2. Add a prompt to let users refresh the page for the change to take effect.
3. Add Chinese translation of “inject automatically” for all languages.

_locales/en/messages.json

@@ -12,6 +12,9 @@
         "message": "Inject Jyutping"
     },
     "popupCheckboxText": {
-        "message": "Inject automatically"
+        "message": "Inject automatically（<ruby class=\"inject-jyutping\">自<rp>(</rp><rt lang=\"yue-Latn\">zi6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">動<rp>(</rp><rt lang=\"yue-Latn\">dung6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">注<rp>(</rp><rt lang=\"yue-Latn\">zyu3</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">入<rp>(</rp><rt lang=\"yue-Latn\">jap6</rt><rp>)</rp></ruby>）"
+    },
+    "refreshPromptText": {
+        "message": "Please refresh the page for the change to take effect."
     }
 }

_locales/ja/messages.json

@@ -12,6 +12,9 @@
         "message": "粵拼を注入"
     },
     "popupCheckboxText": {
-        "message": "オート注入"
+        "message": "オート注入（<ruby class=\"inject-jyutping\">自<rp>(</rp><rt lang=\"yue-Latn\">zi6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">動<rp>(</rp><rt lang=\"yue-Latn\">dung6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">注<rp>(</rp><rt lang=\"yue-Latn\">zyu3</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">入<rp>(</rp><rt lang=\"yue-Latn\">jap6</rt><rp>)</rp></ruby>）"
+    },
+    "refreshPromptText": {
+        "message": "変更を有効にするには、ページを再読み込みしてください。"
     }
 }

_locales/zh_CN/messages.json

@@ -12,6 +12,9 @@
         "message": "注入粤拼"
     },
     "popupCheckboxText": {
-        "message": "自动注入"
+        "message": "<ruby class=\"inject-jyutping\">自<rp>(</rp><rt lang=\"yue-Latn\">zi6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">动<rp>(</rp><rt lang=\"yue-Latn\">dung6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">注<rp>(</rp><rt lang=\"yue-Latn\">zyu3</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">入<rp>(</rp><rt lang=\"yue-Latn\">jap6</rt><rp>)</rp></ruby>"
+    },
+    "refreshPromptText": {
+        "message": "请刷新页面使更改生效。"
     }
 }

_locales/zh_HK/messages.json

@@ -12,6 +12,9 @@
         "message": "注入粵拼"
     },
     "popupCheckboxText": {
-        "message": "自動注入"
+        "message": "<ruby class=\"inject-jyutping\">自<rp>(</rp><rt lang=\"yue-Latn\">zi6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">動<rp>(</rp><rt lang=\"yue-Latn\">dung6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">注<rp>(</rp><rt lang=\"yue-Latn\">zyu3</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">入<rp>(</rp><rt lang=\"yue-Latn\">jap6</rt><rp>)</rp></ruby>"
+    },
+    "refreshPromptText": {
+        "message": "請刷新頁面使更改生效。"
     }
 }

_locales/zh_TW/messages.json

@@ -12,6 +12,9 @@
         "message": "注入粵拼"
     },
     "popupCheckboxText": {
-        "message": "自動注入"
+        "message": "<ruby class=\"inject-jyutping\">自<rp>(</rp><rt lang=\"yue-Latn\">zi6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">動<rp>(</rp><rt lang=\"yue-Latn\">dung6</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">注<rp>(</rp><rt lang=\"yue-Latn\">zyu3</rt><rp>)</rp></ruby><ruby class=\"inject-jyutping\">入<rp>(</rp><rt lang=\"yue-Latn\">jap6</rt><rp>)</rp></ruby>"
+    },
+    "refreshPromptText": {
+        "message": "請刷新頁面使更改生效。"
     }
 }

manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "__MSG_extensionName__",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "description": "__MSG_extensionDescription__",
     "icons": {
         "48": "icons/48.png",

package.sh

@@ -1,2 +1,3 @@
 #!/bin/sh
+rm -rf inject-jyutping.zip
 zip -r inject-jyutping.zip _locales background_scripts content_scripts icons lib popup manifest.json

popup/index.css

@@ -2,8 +2,17 @@
     vertical-align: middle;
 }
 
-.large {
-    font-size: 120%;
+ruby.inject-jyutping > rt {
+    font-size: 0.74em;
+    font-variant: initial;
+    margin-left: 0.1em;
+    margin-right: 0.1em;
+    text-transform: initial;
+}
+
+#refreshPromptText {
+    color: red;
+    font-size: smaller;
 }
 
 /* Create a "toggle switch" (on/off button) with CSS.
@@ -14,8 +23,8 @@
 .switch {
     position: relative;
     display: inline-block;
-    width: 60px;
-    height: 34px;
+    width: 49px;
+    height: 28px;
 }
 
 /* Hide default HTML checkbox */
@@ -39,8 +48,8 @@
 .slider:before {
     position: absolute;
     content: "";
-    height: 26px;
-    width: 26px;
+    height: 20px;
+    width: 20px;
     left: 4px;
     bottom: 4px;
     background-color: white;
@@ -55,14 +64,14 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
 }
 
 /* Rounded sliders */
 .slider.round {
-    border-radius: 34px;
+    border-radius: 28px;
 }
 
 .slider.round:before {

popup/index.html

@@ -8,11 +8,12 @@
 </head>
 <body>
   <p>
-    <b id="checkboxText" class="middle large"></b>&nbsp;
+    <b id="checkboxText" class="middle"></b>&nbsp;
     <label class="middle switch">
       <input id="extensionEnabled" type="checkbox">
       <span class="slider round"></span>
     </label>
   </p>
+  <p id="refreshPromptText"></p>
 </body>
 </html>

popup/index.js

@@ -1,11 +1,12 @@
 /* Initialize state */
 (async () => {
     document.documentElement.lang = browser.i18n.getMessage('langCode');
-    document.getElementById('checkboxText').innerText = browser.i18n.getMessage('popupCheckboxText');
+    document.getElementById('checkboxText').innerHTML = browser.i18n.getMessage('popupCheckboxText');
     document.getElementById('extensionEnabled').checked = ((await browser.storage.local.get('enabled'))['enabled'] !== false) ? true : false;
 })();
 
 /* Handle state change */
 document.getElementById('extensionEnabled').addEventListener('click', () => {
     browser.storage.local.set({enabled: document.getElementById('extensionEnabled').checked});
+    document.getElementById('refreshPromptText').innerHTML = browser.i18n.getMessage('refreshPromptText');
 });