New option page

simple-translate/Settings.js

@@ -81,6 +81,9 @@ function settingsObj() {};
             })
         })
     }
+    settingsObj.prototype.labelSet = function () {
+        labelSet();
+    }
 
     //let Settings = new settingsObj();
     let Settings = {};
@@ -89,41 +92,43 @@ function settingsObj() {};
     //spanやoptionのid，buttonのclassに"Label"が含まれるときi18nから値を取得して書き換え
     //When "label" is included in span and option id, button class Retrieve the value from i18n and rewrite it
     function labelSet() {
+        textLabelSet("p");
+        textLabelSet("span");
+        textLabelSet("option");
+        textLabelSet("input");
 
-        //span idにLableが含まれていたら
+        function textLabelSet(tagName) {
-        let spans = document.getElementsByTagName("span");
+            const items = document.getElementsByTagName(tagName);
-        for (let i in spans) {
+            for (let i of items) {
-            if (spans[i].id == undefined || spans[i].id.indexOf("Label") == -1) continue;
+                let label;
-            let label = browser.i18n.getMessage(spans[i].id);
+                if (i.id != undefined && i.id.includes("Label")) {
-            if (label == "") continue;
+                    label = browser.i18n.getMessage(i.id);
-            spans[i].innerHTML = label;
+                } else if (i.className != undefined && i.className.includes("Label")) {
+                    const labelList = i.className.split(' ').filter((element, index, array) => {
+                        return element.includes("Label");
+                    });
+                    label = browser.i18n.getMessage(labelList[0]);
+                } else {
+                    continue;
                 }
 
-        //button, submit, text classにLabelが含まれていたら
+                if (!label == "") {
-        let inputs = document.getElementsByTagName("input");
+                    if (tagName == "input") {
-        for (let i in inputs) {
+                        switch (i.type) {
-            if (inputs[i].id == undefined || inputs[i].className.indexOf("Label") == -1) continue;
-            let label=browser.i18n.getMessage(inputs[i].className);
-            if(label=="")continue;
-            
-            switch (inputs[i].type) {
                             case "button":
                             case "submit":
-                    inputs[i].value = label;
+                                i.value = label;
                                 break;
                             case "text":
-                    inputs[i].placeholder=label;
+                                i.placeholder = label;
+                                break;
+                        }
+                    } else {
+                        i.innerHTML = label;
                     }
                 }
 
-        //options idにLabelが含まれていたら
+            }
-        let options=document.getElementsByTagName("option");
-        for(let i in options){
-            if (options[i].id == undefined || options[i].id.indexOf("Label") == -1) continue;
-            let label=browser.i18n.getMessage(options[i].id);
-            if(label=="")continue;
-            
-            options[i].innerHTML=label;
         }
     }
 
@@ -251,7 +256,14 @@ function settingsObj() {};
     }
 
     //ストレージが変更されたらget
-    browser.storage.onChanged.addListener(getSettings);
+    browser.storage.onChanged.addListener(changedSettings);
+
+    function changedSettings(changes, area) {
+        if (Object.keys(changes).includes("Settings")) {
+            Settings = changes.Settings.newValue;
+        }
+    }
+
     function getSettings() {
         return new Promise(function (resolve, reject) {
             browser.storage.local.get("Settings", function (value) {

simple-translate/_locales/en/messages.json

@@ -17,21 +17,116 @@
     "langList": {
         "message": "<option value=\"is\">Icelandic</option><option value=\"ga\">Irish</option><option value=\"az\">Azerbaijani</option><option value=\"af\">Afrikaans</option><option value=\"am\">Amharic</option><option value=\"ar\">Arabic</option><option value=\"sq\">Albanian</option><option value=\"hy\">Armenian</option><option value=\"it\">Italian</option><option value=\"yi\">Yiddish</option><option value=\"ig\">Igbo</option><option value=\"id\">Indonesian</option><option value=\"cy\">Welsh</option><option value=\"uk\">Ukrainian</option><option value=\"uz\">Uzbek</option><option value=\"ur\">Urdu</option><option value=\"et\">Estonian</option><option value=\"eo\">Esperanto</option><option value=\"nl\">Dutch</option><option value=\"kk\">Kazakh</option><option value=\"ca\">Catalan</option><option value=\"gl\">Galician</option><option value=\"kn\">Kannada</option><option value=\"el\">Greek</option><option value=\"ky\">Kirghiz</option><option value=\"gu\">Gujarati</option><option value=\"km\">Khmer</option><option value=\"ku\">Kurdish</option><option value=\"hr\">Croatian</option><option value=\"xh\">Xosa</option><option value=\"co\">Corsican</option><option value=\"sm\">Samoan</option><option value=\"jv\">Javanese</option><option value=\"ka\">Georgian</option><option value=\"sn\">Shona</option><option value=\"sd\">Sindhi</option><option value=\"si\">Sinhala</option><option value=\"sv\">Swedish</option><option value=\"zu\">Zulu</option><option value=\"gd\">Scottish Gaelic</option><option value=\"es\">Spanish</option><option value=\"sk\">Slovak</option><option value=\"sl\">Slovenian</option><option value=\"sw\">Swahili</option><option value=\"su\">Sundanese</option><option value=\"ceb\">Cebuano</option><option value=\"sr\">Serbian</option><option value=\"sx\">Sotho</option><option value=\"so\">Somali</option><option value=\"th\">Thai</option><option value=\"tl\">Tagalog</option><option value=\"tg\">Tajiki</option><option value=\"ta\">Tamil</option><option value=\"cs\">Czech</option><option value=\"ny\">Chewa</option><option value=\"te\">Telugu</option><option value=\"da\">Danish</option><option value=\"de\">German</option><option value=\"tr\">Turkish</option><option value=\"ne\">Nepali</option><option value=\"no\">Norwegian</option><option value=\"ht\">Haitian</option><option value=\"ha\">Hausa</option><option value=\"ps\">Pushto</option><option value=\"eu\">Basque</option><option value=\"haw\">Hawaiian</option><option value=\"hu\">Hungarian</option><option value=\"pa\">Punjabi</option><option value=\"hi\">Hindi</option><option value=\"fi\">Finnish</option><option value=\"fr\">French</option><option value=\"fy\">Frisian</option><option value=\"bg\">Bulgarian</option><option value=\"vi\">Vietnamese</option><option value=\"he\">Hebrew</option><option value=\"be\">Belarusian</option><option value=\"fa\">Persian</option><option value=\"bn\">Bengali</option><option value=\"pl\">Polish</option><option value=\"bs\">Bosnian</option><option value=\"pt\">Portuguese</option><option value=\"mi\">Maori</option><option value=\"mk\">Macedonian</option><option value=\"mr\">Marathi</option><option value=\"mg\">Malagasy</option><option value=\"ml\">Malayalam</option><option value=\"mt\">Maltese</option><option value=\"ms\">Malay</option><option value=\"my\">Myanmar</option><option value=\"mn\">Mongolian</option><option value=\"hmn\">Monk</option><option value=\"yo\">Yoruba</option><option value=\"lo\">Laotian</option><option value=\"la\">Latin</option><option value=\"lv\">Latvian</option><option value=\"lt\">Lithuanian</option><option value=\"ro\">Romanian</option><option value=\"lb\">Luxembourgish</option><option value=\"ru\">Russian</option><option value=\"en\">English</option><option value=\"ko\">Korean</option><option value=\"zh-CN\">Chinese (PRC)</option><option value=\"zh-TW\">Chinese (Taiwan)</option><option value=\"ja\">Japanese</option>"
     },
+    "settingsLabel": {
+        "message": "Settings"
+    },
+    "generalLabel": {
+        "message": "General"
+    },
+    "targetLangCaptionLabel": {
+        "message": "Select the default target language."
+    },
+    "webPageLabel": {
+        "message": "Web page"
+    },
     "ifShowButtonLabel": {
-        "message": "Pop up a button when selecting text"
+        "message": "Display the button when text is selected"
+    },
+    "ifShowButtonCaptionLabel": {
+        "message": "Display the translation button when text is selected on the web page."
     },
     "ifCheckLangLabel": {
-        "message": "Do not display the button if the selected text is the same as the target language"
+        "message": "Do not display the button if translation is not required"
+    },
+    "ifCheckLangCaptionLabel": {
+        "message": "Detects the language of the selected text, and if it is the same as the target language, the button is not displayed."
     },
     "ifShowMenuLabel": {
-        "message": "Display context menu"
+        "message": "Display the context menu"
+    },
+    "ifShowMenuCaptionLabel": {
+        "message": "Add items to the context menu displayed when right clicking on the web page."
+    },
+
+    "toolbarLabel": {
+        "message": "Toolbar popup"
     },
     "ifChangeSecondLangLabel": {
-        "message": "Switch to the second language if the input text of the tool bar translation panel is the same as the target language"
+        "message": "Automatically switch to the second language"
+    },
+    "ifChangeSecondLangCaptionLabel": {
+        "message": "Detects the language of the input text, and if it is the same as the default target language, translate it into the second language."
     },
     "secondTargetLangLabel": {
         "message": "Second language"
     },
+    "secondTargetLangCaptionLabel": {
+        "message": "Select the second target language."
+    },
+
+    "styleLabel": {
+        "message": "Style"
+    },
+    "buttonStyleLabel": {
+        "message": "Translation button"
+    },
+    "buttonStyleCaptionLabel": {
+        "message": "Specify the style of the translation button displayed on the web page."
+    },
+    "buttonSizeLabel": {
+        "message": "Size"
+    },
+    "buttonPositionLabel": {
+        "message": "Display position"
+    },
+    "rightUpLabel": {
+        "message": "Top right"
+    },
+    "rightDownLabel": {
+        "message": "Bottom right"
+    },
+    "leftUpLabel": {
+        "message": "Top left"
+    },
+    "leftDownLabel": {
+        "message": "Bottom left"
+    },
+    "panelStyleLabel": {
+        "message": "Translation panel"
+    },
+    "panelStyleCaptionLabel": {
+        "message": "Specify the style of the translation panel displayed on the web page."
+    },
+    "widthLabel": {
+        "message": "Width"
+    },
+    "heightLabel": {
+        "message": "Height"
+    },
+    "fontSizeLabel": {
+        "message": "Font size"
+    },
+
+    "informationLabel": {
+        "message": "Information"
+    },
+    "licenseLabel": {
+        "message": "License"
+    },
+    "donationLabel": {
+        "message": "Please make a donation"
+    },
+    "donationCaptionLabel": {
+        "message": "Thank you for using Simple Translate.<br>Your support will be a big encouragement, as I continue to develop the add-on.<br>If you like Simple Translate, I would be pleased if you could consider donating."
+    },
+    "addonPageLabel": {
+        "message": "Add-on pege"
+    },
+    "addonUrl": {
+        "message": "https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/simple-translate\/?src=optionpage"
+    },
+
+
     "translatePageMenu": {
         "message": "Translate this page"
     },
@@ -40,26 +135,5 @@
     },
     "translateLinkMenu": {
         "message": "Translate selected link"
-    },
-    "panelSizeLabel":{
-        "message": "Size of translation panel"
-    },
-    "buttonSizeLabel":{
-        "message": "Size of button"
-    },
-    "buttonPositionLabel":{
-        "message": "Display position of button"
-    },
-    "rightUpLabel":{
-        "message": "Upper right"
-    },
-    "rightDownLabel":{
-        "message": "Bottom right"
-    },
-    "fontSizeLabel":{
-        "message": "Font size"
-    },
-    "saveLabel":{
-        "message": "Save"
     }
 }

simple-translate/_locales/ja/messages.json

@@ -17,21 +17,117 @@
     "langList": {
         "message": "<option value=\"en\">英語</option><option value=\"ko\">韓国語</option><option value=\"zh-CN\">中国語(簡体)</option><option value=\"zh-TW\">中国語(繁体)</option><option value=\"ja\">日本語</option><option value=\"is\">アイスランド語</option><option value=\"ga\">アイルランド語</option><option value=\"az\">アゼルバイジャン語</option><option value=\"af\">アフリカーンス語</option><option value=\"am\">アムハラ語</option><option value=\"ar\">アラビア語</option><option value=\"sq\">アルバニア語</option><option value=\"hy\">アルメニア語</option><option value=\"it\">イタリア語</option><option value=\"yi\">イディッシュ語</option><option value=\"ig\">イボ語</option><option value=\"id\">インドネシア語</option><option value=\"cy\">ウェールズ語</option><option value=\"uk\">ウクライナ語</option><option value=\"uz\">ウズベク語</option><option value=\"ur\">ウルドゥ語</option><option value=\"et\">エストニア語</option><option value=\"eo\">エスペラント語</option><option value=\"nl\">オランダ語</option><option value=\"kk\">カザフ語</option><option value=\"ca\">カタルーニャ語</option><option value=\"gl\">ガリシア語</option><option value=\"kn\">カンナダ語</option><option value=\"el\">ギリシャ語</option><option value=\"ky\">キルギス語</option><option value=\"gu\">グジャラト語</option><option value=\"km\">クメール語</option><option value=\"ku\">クルド語</option><option value=\"hr\">クロアチア語</option><option value=\"xh\">コーサ語</option><option value=\"co\">コルシカ語</option><option value=\"sm\">サモア語</option><option value=\"jw\">ジャワ語</option><option value=\"ka\">ジョージア(グルジア)語</option><option value=\"sn\">ショナ語</option><option value=\"sd\">シンド語</option><option value=\"si\">シンハラ語</option><option value=\"sv\">スウェーデン語</option><option value=\"zu\">ズールー語</option><option value=\"gd\">スコットランド ゲール語</option><option value=\"es\">スペイン語</option><option value=\"sk\">スロバキア語</option><option value=\"sl\">スロベニア語</option><option value=\"sw\">スワヒリ語</option><option value=\"su\">スンダ語</option><option value=\"ceb\">セブアノ語</option><option value=\"sr\">セルビア語</option><option value=\"st\">ソト語</option><option value=\"so\">ソマリ語</option><option value=\"th\">タイ語</option><option value=\"tl\">タガログ語</option><option value=\"tg\">タジク語</option><option value=\"ta\">タミル語</option><option value=\"cs\">チェコ語</option><option value=\"ny\">チェワ語</option><option value=\"te\">テルグ語</option><option value=\"da\">デンマーク語</option><option value=\"de\">ドイツ語</option><option value=\"tr\">トルコ語</option><option value=\"ne\">ネパール語</option><option value=\"no\">ノルウェー語</option><option value=\"ht\">ハイチ語</option><option value=\"ha\">ハウサ語</option><option value=\"ps\">パシュト語</option><option value=\"eu\">バスク語</option><option value=\"haw\">ハワイ語</option><option value=\"hu\">ハンガリー語</option><option value=\"pa\">パンジャブ語</option><option value=\"hi\">ヒンディー語</option><option value=\"fi\">フィンランド語</option><option value=\"fr\">フランス語</option><option value=\"fy\">フリジア語</option><option value=\"bg\">ブルガリア語</option><option value=\"vi\">ベトナム語</option><option value=\"iw\">ヘブライ語</option><option value=\"be\">ベラルーシ語</option><option value=\"fa\">ペルシャ語</option><option value=\"bn\">ベンガル語</option><option value=\"pl\">ポーランド語</option><option value=\"bs\">ボスニア語</option><option value=\"pt\">ポルトガル語</option><option value=\"mi\">マオリ語</option><option value=\"mk\">マケドニア語</option><option value=\"mr\">マラーティー語</option><option value=\"mg\">マラガシ語</option><option value=\"ml\">マラヤーラム語</option><option value=\"mt\">マルタ語</option><option value=\"ms\">マレー語</option><option value=\"my\">ミャンマー語</option><option value=\"mn\">モンゴル語</option><option value=\"hmn\">モン語</option><option value=\"yo\">ヨルバ語</option><option value=\"lo\">ラオ語</option><option value=\"la\">ラテン語</option><option value=\"lv\">ラトビア語</option><option value=\"lt\">リトアニア語</option><option value=\"ro\">ルーマニア語</option><option value=\"lb\">ルクセンブルク語</option><option value=\"ru\">ロシア語</option>"
     },
+
+    "settingsLabel": {
+        "message": "設定"
+    },
+    "generalLabel": {
+        "message": "全般"
+    },
+    "targetLangCaptionLabel": {
+        "message": "デフォルトの翻訳先の言語を選択します。"
+    },
+    "webPageLabel": {
+        "message": "webページ"
+    },
     "ifShowButtonLabel": {
         "message": "テキスト選択時にボタンを表示する"
     },
+    "ifShowButtonCaptionLabel": {
+        "message": "webページ上のテキストを選択した時に翻訳ボタンを表示します。"
+    },
     "ifCheckLangLabel": {
-        "message": "選択したテキストが翻訳先言語と同じ場合はボタンを表示しない"
+        "message": "翻訳の必要がなければボタンを表示しない"
+    },
+    "ifCheckLangCaptionLabel": {
+        "message": "選択したテキストの言語を検出し，翻訳先言語と同じ場合はボタンを表示しません。"
     },
     "ifShowMenuLabel": {
         "message": "コンテキストメニューを表示する"
     },
+    "ifShowMenuCaptionLabel": {
+        "message": "ページ上で右クリックした時に表示されるコンテキストメニューに項目を追加します。"
+    },
+
+    "toolbarLabel": {
+        "message": "ツールバーポップアップ"
+    },
     "ifChangeSecondLangLabel": {
-        "message": "ツールバー翻訳パネルの入力テキストが翻訳先言語と同じ場合は第二言語に切り替える"
+        "message": "自動的に第二言語に切り替える"
+    },
+    "ifChangeSecondLangCaptionLabel": {
+        "message": "入力されたテキストの言語を検出し，デフォルトの翻訳先言語と同じ場合には第二言語に翻訳します。"
     },
     "secondTargetLangLabel": {
         "message": "第二言語"
     },
+    "secondTargetLangCaptionLabel": {
+        "message": "第二言語を指定します。"
+    },
+
+    "styleLabel": {
+        "message": "スタイル"
+    },
+    "buttonStyleLabel": {
+        "message": "翻訳ボタン"
+    },
+    "buttonStyleCaptionLabel": {
+        "message": "webページ上で表示される翻訳ボタンのスタイルを指定します。"
+    },
+    "buttonSizeLabel": {
+        "message": "サイズ"
+    },
+    "buttonPositionLabel": {
+        "message": "表示位置"
+    },
+    "rightUpLabel": {
+        "message": "右上"
+    },
+    "rightDownLabel": {
+        "message": "右下"
+    },
+    "leftUpLabel": {
+        "message": "左上"
+    },
+    "leftDownLabel": {
+        "message": "左下"
+    },
+    "panelStyleLabel": {
+        "message": "翻訳パネル"
+    },
+    "panelStyleCaptionLabel": {
+        "message": "webページ上で表示される翻訳パネルのスタイルを指定します。"
+    },
+    "widthLabel": {
+        "message": "幅"
+    },
+    "heightLabel": {
+        "message": "高さ"
+    },
+    "fontSizeLabel": {
+        "message": "フォントサイズ"
+    },
+
+    "informationLabel": {
+        "message": "情報"
+    },
+    "licenseLabel": {
+        "message": "ライセンス"
+    },
+    "donationLabel": {
+        "message": "ご寄付のお願い"
+    },
+    "donationCaptionLabel": {
+        "message": "Simple Translateをご利用いただきありがとうございます。<br>アドオンの開発を続けていく上で，皆様のご支援が大きな励みになります。<br>もしあなたがSimple Translateを気に入ってくれたなら，ご寄付をご検討いただけると幸いです。"
+    },
+    "addonPageLabel": {
+        "message": "アドオンページ"
+    },
+    "addonUrl": {
+        "message": "https:\/\/addons.mozilla.org\/ja\/firefox\/addon\/simple-translate\/?src=optionpage"
+    },
+
+
     "translatePageMenu": {
         "message": "ページ全体を翻訳"
     },
@@ -40,26 +136,5 @@
     },
     "translateLinkMenu": {
         "message": "選択したリンクを翻訳"
-    },
-    "panelSizeLabel":{
-        "message": "翻訳パネルのサイズ"
-    },
-    "buttonSizeLabel":{
-        "message": "ボタンのサイズ"
-    },
-    "buttonPositionLabel":{
-        "message": "ボタンの表示位置"
-    },
-    "rightUpLabel":{
-        "message": "右上"
-    },
-    "rightDownLabel":{
-        "message": "右下"
-    },
-    "fontSizeLabel":{
-        "message": "フォントサイズ"
-    },
-    "saveLabel":{
-        "message": "保存"
     }
 }

simple-translate/manifest.json

@@ -15,7 +15,8 @@
     "permissions": ["<all_urls>", "storage", "contextMenus", "clipboardRead"],
 
     "options_ui": {
-        "page": "options/options.html"
+        "page": "options/options.html",
+        "open_in_tab": true
     },
 
     "icons": {

simple-translate/options/options.css

@@ -1,26 +1,340 @@
+:root {
+    --main-text: #0c0c0d;
+    --sub-text: #737373;
+    --line: #ededf0;
+    --button: #d7d7db;
+    --highlight: #5595ff;
+    --main-bg: #ffffff;
+}
+
+body {
+    font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif;
+    font-size: 15px;
+    font-weight: 400;
+    color: var(--main-text);
+    background-color: var(--main-bg);
+    line-height: 1.5;
+    display: flex;
+    flex-direction: row;
+
+}
+
+p {
+    margin: 0px;
+}
+
+ul {
+    padding: 0px;
+}
+
+li {
+    list-style-type: none;
+}
+
 hr {
     width: 100%;
-background-color: #d7d7db;
+    background-color: var(--line);
     height: 1px;
     border: none;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
-input[type="number"] {
+
+
+/*----sidebar----*/
+
+#sidebar {
+    font-size: 17px;
+    font-weight: 400;
+    text-align: right;
+    flex-shrink: 0;
+    -moz-user-select: none;
+}
+
+.titleContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.logo {
+    height: 64px;
+    width: 64px;
+}
+
+.logotitle {
+    text-align: left;
+    font-size: 14px;
+    font-weight: 300;
+    color: var(--sub-text);
+    /*margin: auto;*/
+}
+
+.sidebarItem:hover {
+    text-decoration-line: underline;
+}
+
+#sidebar > ul {
+    padding-left: 40px;
+}
+
+#sidebar > ul > li {
+    padding: 10px 15px;
+}
+
+#sidebar .selected {
+    color: var(--highlight);
+}
+
+
+/*----contents----*/
+
+#contents {
+    padding-top: 20px;
+    padding-left: 20px;
+    padding-bottom: 50px;
+    width: 650px;
+
+}
+
+.contentTitle {
+    font-size: 33px;
+    font-weight: 200;
+    color: var(--sub-text);
+    line-height: 2;
+}
+
+.caption {
+    font-size: 13px;
+    font-weight: 400;
+    color: var(--sub-text);
+}
+
+#contents ul {
+    margin: 0px;
+}
+
+.childElements {
+    padding-left: 20px;
+    margin-bottom: 30px;
+    border-left: solid 10px var(--line);
+}
+
+.categoryContainer {}
+
+.categoryElements {
+    padding-left: 20px;
+    margin-bottom: 30px;
+}
+
+.categoryTitle {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--sub-text);
+}
+
+.optionContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px 0px 10px 0px;
+}
+
+.buttonsContainer {
+    justify-content: flex-start;
+}
+
+.optionText {
+    flex: 1;
+}
+
+.optionForm {
+    flex-basis: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+#importClear {
+    position: relative;
+    left: 10px;
+}
+
+.favicon {
+    width: 18px;
+    height: 18px;
+    padding: 1px;
+    display: block;
+    float: left;
+}
+
+
+/*----forms----*/
+
+input {
+    font-family: inherit;
+    font-size: 14px;
+}
+
+input[type="number"],
+input[type="text"] {
     -moz-appearance: textfield;
     width: 50px;
-}
-#save{
-    width: auto;
     height: 30px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 1px solid var(--button);
+    border-radius: 2px;
+}
 
-    margin-left: ;
+input[type="number"]:hover,
-    margin-right: auto;
+input[type="text"]:hover,
+input[type="number"]:focus,
+input[type="text"]:focus {
+    border-color: var(--highlight);
+}
 
+input[type="text"] {
+    width: 200px;
+}
 
-    color: #111;
+.button {
-    border: 1px solid #bbb;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-width: 100px;
+    text-align: center;
+    padding: 5px;
+    height: 30px;
+    font-size: 13px;
+    color: var(--main-text);
+    border: 1px solid var(--button);
     border-radius: 2px;
     background-color: #fbfbfb;
+    cursor: pointer;
+
+    white-space: nowrap;
 }
-#save:hover{
+
+.includeSpan {
+    padding: 0px;
+    height: 28px;
+}
+
+.button:hover {
     background: #f5f5f5;
+    border-color: var(--highlight);
+}
+
+::-moz-selection {
+    background: var(--line);
+}
+
+a:link {
+    color: var(--sub-text);
+    text-decoration-line: none;
+}
+
+
+a:visited {
+    color: var(--sub-text);
+}
+
+.pageLink {
+    color: var(--highlight);
+    display: inline-block;
+    margin-right: 10px;
+}
+
+.pageLink:hover {
+    color: var(--highlight);
+    text-decoration-line: underline;
+}
+
+
+input[type="checkbox"] {
+    display: none;
+}
+
+.checkbox {
+    padding-left: 20px;
+    position: relative;
+    /*margin-right: 20px;*/
+    cursor: pointer;
+}
+
+.checkbox::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: -2px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--button);
+    border-radius: 2px;
+}
+
+.checkbox:hover::before {
+    border-color: var(--highlight);
+}
+
+input[type="checkbox"]:checked + .checkbox {
+    color: var(--highlight);
+}
+
+input[type="checkbox"]:checked + .checkbox::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+    left: 4px;
+    width: 6px;
+    height: 14px;
+    transform: rotate(40deg);
+    border-bottom: 3px solid var(--highlight);
+    border-right: 3px solid var(--highlight);
+}
+
+select {
+    -moz-appearance: none;
+    text-overflow: ellipsis;
+    border: var(--button) solid 1px;
+    border-radius: 2px;
+    padding: 3px 5px;
+    padding-right: 20px;
+    width: 100%;
+}
+
+select:hover {
+    border: var(--highlight) solid 1px;
+}
+
+.selectWrap {
+    position: relative;
+}
+
+.selectWrap:before {
+    pointer-events: none;
+    content: "";
+    z-index: 1;
+    position: absolute;
+    top: 40%;
+    right: 7px;
+    width: 5px;
+    height: 5px;
+
+    transform: rotate(45deg);
+    border-bottom: 2px solid var(--sub-text);
+    border-right: 2px solid var(--sub-text);
+}
+
+.selectWrap:hover::before {
+    border-bottom: 2px solid var(--highlight);
+    border-right: 2px solid var(--highlight);
+}
+
+option {
+    font-family: inherit;
+    font-size: 14px;
 }

simple-translate/options/options.html

@@ -4,75 +4,304 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="options.css">
+    <title>Simple Translate</title>
+    <link rel="icon" type="image/png" href="../icons/16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="../icons/32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="../icons/128.png" sizes="128x128">
 </head>
 
 <body>
-    <p>
+    <div id=sidebar>
-        <label><span id=targetLangLabel>翻訳先の言語:</span>
+        <ul>
-        <select id="targetLang"></select></label>
+            <li>
-    </p>
+                <div class=titleContainer>
-    <p>
+                    <img src="../icons/64.png" class=logo>
-        <label><input type="checkbox" id="ifShowButton" checked=true>
+                    <span class=logotitle>Simple Translate</span>
-            <span id=ifShowButtonLabel>テキスト選択時にボタンを表示する</span></label>
+                </div>
-    </p>
+            </li>
-    <p>
+            <li>
-        <label><input type="checkbox" id=ifCheckLang checked=true>
+                <a href="#settings">
-            <span id=ifCheckLangLabel>選択したテキストが翻訳先言語と同じ時はボタンを表示しない</span></label>
+                        <span class="settingsLabel selected sidebarItem">設定</span>
-    </p>
+                    </a>
-    <p>
+            </li>
-        <label><input type="checkbox" id=ifShowMenu checked=true>
+            <li>
-            <span id=ifShowMenuLabel>コンテキストメニューを表示する</span></label>
+                <a href="#information">
-    </p>
+                        <span class="informationLabel sidebarItem">情報</span>
+                    </a>
+            </li>
+        </ul>
+    </div>
+    <div id=contents>
+        <div id=settings style="display:none">
+            <p class="contentTitle settingsLabel">設定</p>
+            <hr>
+            <ul>
+                <li class=categoryContainer>
+                    <div class=categoryTitle>
+                        <p class=generalLabel>全般</p>
+                    </div>
+                    <ul class=categoryElements>
+                        <li class=optionContainer>
+                            <div class=optionText>
+                                <p class=targetLangLabel>翻訳先の言語</p>
+                                <p class="caption targetLangCaptionLabel">デフォルトの翻訳先の言語を選択します。</p>
+                            </div>
+                            <div class=optionForm>
+                                <div class=selectWrap>
+                                    <select id=targetLang class=saveByChange>
+                                        <option>日本語</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
 
                 <hr>
-    <p>
-        <label><input type="checkbox" id=ifChangeSecondLang>
-            <span id=ifChangeSecondLangLabel>ツールバー翻訳パネルの入力テキストが翻訳先言語と同じ場合は第2言語に切り替える</span></label>
-    </p>
 
-    <p>
+                <li class=categoryContainer>
-        <label><span id=secondTargetLangLabel>第2言語:</span>
+                    <div class=categoryTitle>
-            <select id="secondTargetLang"></select></label>
+                        <p class=webPageLabel>webページ</p>
-    </p>
+                    </div>
-    
+                    <ul class=categoryElements>
-    <hr>
+                        <li class=optionContainer>
-    <p>
+                            <div class=optionText>
-    <span id=panelSizeLabel>翻訳パネルのサイズ</span>
+                                <p class=ifShowButtonLabel>テキスト選択時にボタンを表示する</p>
-    <label><span>W</span>
+                                <p class="caption ifShowButtonCaptionLabel">webページ上のテキストを選択した時に翻訳ボタンを表示します。</p>
-        <input id=width type=number value=300 min=1 placeholder=300>
+                            </div>
-    </label>
+                            <div class=optionForm>
-    <label><span>H</span>
-        <input id=height type=number value=200 min=1 placeholder=200>
-    </label>
-    </p>
-    
-    <p>
-    <label><span id=buttonSizeLabel>ボタンのサイズ</span>
-        <input id=buttonSize type=number value=22 min=1 placeholder=22>
-    </label>
-    </p>
-    
-    <p>
-    <span id=buttonPositionLabel>ボタンの表示位置</span>
                                 <label>
-        <input type=radio name=buttonPosition value=rightUp><span id=rightUpLabel>右上</span>
+                                <input type=checkbox id=ifShowButton class=saveByChange checked>
+                                <span class=checkbox></span>
                                 </label>
+                            </div>
+                        </li>
+                        <ul class=childElements>
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=ifCheckLangLabel>翻訳の必要がなければボタンを表示しない</p>
+                                    <p class="caption ifCheckLangCaptionLabel">選択したテキストの言語を判定し，翻訳先言語と同じ場合はボタンを表示しません。</p>
+                                </div>
+                                <div class=optionForm>
                                     <label>
-        <input type=radio name=buttonPosition value=rightDown checked><span id=rightDownLabel>右下</span>
+                                    <input type=checkbox id=ifCheckLang class=saveByChange checked>
+                                    <span class=checkbox></span>
                                     </label>
-    </p>
+                                </div>
+                            </li>
+                        </ul>
 
-    <p>
+                        <br>
-    <label><span id=fontSizeLabel>フォントサイズ</span>
+
-        <input id=fontSize type=number value=13 min=1 placeholder=13>
+                        <li class=optionContainer>
+                            <div class=optionText>
+                                <p class=ifShowMenuLabel>コンテキストメニューを表示する</p>
+                                <p class="caption ifShowMenuCaptionLabel">ページ上で右クリックした時に表示されるメニューに項目を追加します。</p>
+                            </div>
+                            <div class=optionForm>
+                                <label>
+                                    <input type=checkbox id=ifShowMenu class=saveByChange checked>
+                                    <span class=checkbox></span>
                                 </label>
-    </p>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
 
                 <hr>
-    <input type=button id=save value=save class=saveLabel>
+
+                <li class=categoryContainer>
+                    <div class=categoryTitle>
+                        <p class=toolbarLabel>ツールバーポップアップ</p>
+                    </div>
+                    <ul class=categoryElements>
+                        <li class=optionContainer>
+                            <div class=optionText>
+                                <p class=ifChangeSecondLangLabel>自動的に第2言語に切り替える</p>
+                                <p class="caption ifChangeSecondLangCaptionLabel">入力されたテキストの言語を判定し，デフォルトの翻訳先言語と同じ場合には第2言語に翻訳します。</p>
+                            </div>
+                            <div class=optionForm>
+                                <label>
+                                    <input type=checkbox id=ifChangeSecondLang class=saveByChange>
+                                    <span class=checkbox></span>
+                                </label>
+                            </div>
+                        </li>
+                        <ul class=childElements>
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=secondTargetLangLabel>第2言語</p>
+                                    <p class="caption secondTargetLangCaptionLabel">第2言語を指定します。</p>
+                                </div>
+                                <div class=optionForm>
+                                    <div class=selectWrap>
+                                        <select id=secondTargetLang class=saveByChange>
+                                        <option>日本語</option>
+                                    </select>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </ul>
+                </li>
+
+                <hr>
+
+                <li class=categoryContainer>
+                    <div class=categoryTitle>
+                        <p class=styleLabel>スタイル</p>
+                    </div>
+                    <ul class=categoryElements>
+                        <li class=optionContainer>
+                            <div class=optionText>
+                                <p class=buttonStyleLabel>翻訳ボタン</p>
+                                <p class="caption buttonStyleCaptionLabel">webページ上で表示される翻訳ボタンのスタイルを指定します。</p>
+                            </div>
+                        </li>
+                        <ul class=childElements>
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=buttonSizeLabel>サイズ</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                    <input id=buttonSize class=saveByChange type=number value=22 min=1 placeholder=22>
+                                </label>
+                                </div>
+                            </li>
+
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=buttonPositionLabel>表示位置</p>
+                                </div>
+                                <div class=optionForm>
+                                    <div class=selectWrap>
+                                        <select id=buttonPosition class=saveByChange>
+                                        <option class=rightUpLabel value=rightUp>右上</option>
+                                        <option class=rightDownLabel value=rightDown selected>右下</option>
+                                        <option class=leftUpLabel value=leftUp>左上</option>
+                                        <option class=leftDownLabel value=leftDown>左下</option>
+                                    </select>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+
+                        <br>
+
+                        <li class=optionContainer>
+                            <div class=optionText>
+                                <p class=panelStyleLabel>翻訳パネル</p>
+                                <p class="caption panelStyleCaptionLabel">webページ上で表示される翻訳パネルのスタイルを指定します。</p>
+                            </div>
+                        </li>
+
+                        <ul class=childElements>
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=widthLabel>幅</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input id=width class=saveByChange type=number value=300 min=1 placeholder=300>
+                                    </label>
+                                </div>
+                            </li>
+
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=heightLabel>高さ</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input id=height class=saveByChange type=number value=200 min=1 placeholder=200>
+                                    </label>
+                                </div>
+                            </li>
+
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=fontSizeLabel>フォントサイズ</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input id=fontSize class=saveByChange type=number value=13 min=1 placeholder=13>
+                                    </label>
+                                </div>
+                            </li>
+                        </ul>
+                    </ul>
+                </li>
+
+            </ul>
+        </div>
+
+        <div id=information style="display:none">
+            <p class="contentTitle informationLabel">情報</p>
+            <hr>
+            <ul>
+                <li>
+                    <div class=optionContainer>
+                        <div class=optionText>
+                            <p>Simple Translate</p>
+                            <p class="caption"><a class=pageLink href="https://github.com/sienori/simple-translate/releases" target="_blank">
+                                Version. 1.5.0</a></p>
+                        </div>
+                    </div>
+                </li>
+                <li>
+                    <div class=optionContainer>
+                        <div class=optionText>
+                            <p class=licenseLabel>ライセンス</p>
+                            <p class="caption">Mozilla Public License, Version. 2.0</p>
+                        </div>
+                    </div>
+                </li>
+
+                <hr>
+
+                <li>
+                    <div class=optionContainer>
+                        <div class="optionText">
+                            <p class=donationLabel>ご寄付のお願い</p>
+                            <p class="caption donationCaptionLabel">Simple Translateをご利用いただきありがとうございます。<br>アドオンの開発を続けていく上で，皆様のご支援が大きな励みになります。<br>もしあなたがSimple Translateを気に入ってくれたなら，ご寄付をご検討いただけると幸いです。
+                            </p>
+                        </div>
+                    </div>
+                </li>
+
+                <li>
+                    <div class=optionContainer>
+                        <div class=optionText>
+                            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&no_shipping=1&business=sienori.firefox@gmail.com&item_name=SimpleTranslate - Donation" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" alt="Donate"></a>
+                        </div>
+                    </div>
+                </li>
+
+                <hr>
+
+                <li>
+                    <div class=optionContainer>
+                        <div class="optionText">
+                            <a class="pageLink addonUrl" href="https://addons.mozilla.org/firefox/addon/simple-translate/" target="_blank">
+                                    <span class="addonPageLabel pageLink">アドオンページ</span>
+                                </a>
+                            <a class=pageLink href="https://github.com/sienori/simple-translate" target="_blank">
+                                    <span class=pageLink>github</span>
+                                </a>
+                        </div>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+    </div>
 
     <script type="text/javascript" src="../Settings.js"></script>
     <script type="text/javascript" src="options.js"></script>
+    <script type="text/javascript" src="tm.hash-observer.js"></script>
+    <script type="text/javascript" src="ui.js"></script>
+
 </body>
 
 </html>

simple-translate/options/options.js

@@ -1,8 +1,7 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+const S = new settingsObj()
-let S = new settingsObj()
 let targetLang = document.getElementById("targetLang");
 let secondTargetLang = document.getElementById("secondTargetLang");
 
@@ -10,8 +9,12 @@ targetLang.innerHTML=browser.i18n.getMessage("langList");
 secondTargetLang.innerHTML = browser.i18n.getMessage("langList");
 
 S.initOptionsPage().then(function () {
-    document.getElementById("save").addEventListener('click', function(){
+    const saveByChangeItems = document.getElementsByClassName("saveByChange");
-        S.saveOptionsPage();
+    for (let item of saveByChangeItems) {
-    });
+        item.addEventListener("change", save)
+    }
 })
 
+function save() {
+    S.saveOptionsPage();
+}

simple-translate/options/tm.hash-observer.js

@@ -0,0 +1,71 @@
+/**
+* phi
+*/
+
+var tm = tm || {};
+
+(function(){
+
+tm.HashObserver = {};
+tm.HashObserver.timerID = null;
+tm.HashObserver.FPS     = 100;
+
+tm.HashObserver.enable = function()
+{
+var prevHash = window.location.hash;
+tm.HashObserver.timerID = setInterval(function(){
+if (prevHash != window.location.hash) {
+var e = document.createEvent("HTMLEvents");
+e.initEvent("changehash", true, false);
+e.hash      = window.location.hash;
+e.prevHash  = prevHash;
+document.dispatchEvent(e);
+}
+prevHash = window.location.hash;
+}, tm.HashObserver.FPS);
+};
+
+tm.HashObserver.disable = function()
+{
+clearInterval(tm.HashObserver.timerID);
+};
+
+})();
+
+
+(function(){
+
+tm.FormObserver = {};
+
+tm.FormObserver.observe = function(elm, fps)
+{
+fps = fps || 100;
+
+var prevValue   = elm.value;
+var timerID     = null;
+
+var observeForm = function() {
+if (elm.value != prevValue) {
+var e = document.createEvent("HTMLEvents");
+e.initEvent("change", true, false);
+elm.dispatchEvent(e);
+}
+prevValue = elm.value;
+};
+
+elm.addEventListener("focus", function() { timerID = setInterval(observeForm, fps); });
+elm.addEventListener("blur", function() { clearInterval(timerID); });
+};
+
+tm.FormObserver.observeAll = function(className)
+{
+className = className || "tm-form-observer";
+var targetList = document.getElementsByClassName(className);
+
+for (var i=0,len=targetList.length; i<len; ++i) {
+this.observe(targetList[i]);
+}
+}
+
+})();
+

simple-translate/options/ui.js

@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+let e = {};
+e.hash = location.href;
+
+if (e.hash.indexOf('#') != -1) {
+    e.hash = '#' + e.hash.split('#')[1];
+} else {
+    e.hash = "#settings";
+}
+readHash(e);
+
+// hash の監視を開始
+tm.HashObserver.enable();
+document.addEventListener("changehash", readHash, false);
+
+function readHash(e) {
+    hash = e.hash.split('&')[0];
+
+    let selected = document.getElementsByClassName("selected");
+    selected[0].classList.remove("selected");
+
+    document.getElementById("settings").style.display = "none";
+    document.getElementById("information").style.display = "none";
+
+    switch (hash) {
+        case "#settings":
+            document.getElementById("settings").style.display = "block";
+            document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
+            break;
+        case "#information":
+            document.getElementById("information").style.display = "block";
+            document.getElementsByClassName("informationLabel")[0].classList.add("selected");
+            break;
+        default:
+            document.getElementById("settings").style.display = "block";
+            document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
+            break;
+    }
+}
+
+document.getElementsByClassName("addonUrl")[0].href = browser.i18n.getMessage("addonUrl");