Refactor options page using Lit
The Javascript code for the options page was messy and decreased the
maintainability of the entire extension. This change refactors the
existing code to use Lit, and thus separates the code into several files
which define different elements of the options page. Thus, the code is
more modular now.
Aside from the refactoring, this CL also changes the way languages are
reordered. Now, instead of dragging them in the list, they are reordered
by clicking the arrow buttons next to them. This has been changed
because the Sortable library is not compatible with Lit.
Bug: translateselectedtext:11
Change-Id: I07364628c0737cf732afc7dd53846e42b082201d
diff --git a/package-lock.json b/package-lock.json
index f104cf1..57af218 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"json5": "^2.2.1",
+ "lit": "^2.2.5",
"path": "^0.12.7",
"sortablejs": "^1.15.0",
"webpack": "^5.72.1",
@@ -28,6 +29,11 @@
"node": ">=10.0.0"
}
},
+ "node_modules/@lit/reactive-element": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
+ "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -107,6 +113,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.35.tgz",
"integrity": "sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg=="
},
+ "node_modules/@types/trusted-types": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+ },
"node_modules/@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -1118,6 +1129,33 @@
"node": ">=0.10.0"
}
},
+ "node_modules/lit": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.5.tgz",
+ "integrity": "sha512-Ln463c0xJZfzVxBcHddNvFQQ8Z22NK7KgNmrzwFF1iESHUud412RRExzepj18wpTbusgwoTnOYuoTpo9uyNBaQ==",
+ "dependencies": {
+ "@lit/reactive-element": "^1.3.0",
+ "lit-element": "^3.2.0",
+ "lit-html": "^2.2.0"
+ }
+ },
+ "node_modules/lit-element": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
+ "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+ "dependencies": {
+ "@lit/reactive-element": "^1.3.0",
+ "lit-html": "^2.2.0"
+ }
+ },
+ "node_modules/lit-html": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.5.tgz",
+ "integrity": "sha512-e56Y9V+RNA+SGYsWP2DGb/wad5Ccd3xUZYjmcmbeZcnc0wP4zFQRXeXn7W3bbfBekmHDK2dOnuYNYkg0bQjh/w==",
+ "dependencies": {
+ "@types/trusted-types": "^2.0.2"
+ }
+ },
"node_modules/loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -1988,6 +2026,11 @@
"resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
"integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
},
+ "@lit/reactive-element": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.3.2.tgz",
+ "integrity": "sha512-A2e18XzPMrIh35nhIdE4uoqRzoIpEU5vZYuQN4S3Ee1zkGdYC27DP12pewbw/RLgPHzaE4kx/YqxMzebOpm0dA=="
+ },
"@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2058,6 +2101,11 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.35.tgz",
"integrity": "sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg=="
},
+ "@types/trusted-types": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
+ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+ },
"@webassemblyjs/ast": {
"version": "1.11.1",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -2821,6 +2869,33 @@
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
},
+ "lit": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/lit/-/lit-2.2.5.tgz",
+ "integrity": "sha512-Ln463c0xJZfzVxBcHddNvFQQ8Z22NK7KgNmrzwFF1iESHUud412RRExzepj18wpTbusgwoTnOYuoTpo9uyNBaQ==",
+ "requires": {
+ "@lit/reactive-element": "^1.3.0",
+ "lit-element": "^3.2.0",
+ "lit-html": "^2.2.0"
+ }
+ },
+ "lit-element": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.2.0.tgz",
+ "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==",
+ "requires": {
+ "@lit/reactive-element": "^1.3.0",
+ "lit-html": "^2.2.0"
+ }
+ },
+ "lit-html": {
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.2.5.tgz",
+ "integrity": "sha512-e56Y9V+RNA+SGYsWP2DGb/wad5Ccd3xUZYjmcmbeZcnc0wP4zFQRXeXn7W3bbfBekmHDK2dOnuYNYkg0bQjh/w==",
+ "requires": {
+ "@types/trusted-types": "^2.0.2"
+ }
+ },
"loader-runner": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
diff --git a/package.json b/package.json
index 943c76c..bf1b2c1 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"json5": "^2.2.1",
+ "lit": "^2.2.5",
"path": "^0.12.7",
"sortablejs": "^1.15.0",
"webpack": "^5.72.1",
diff --git a/src/common/i18n.js b/src/common/i18n.js
new file mode 100644
index 0000000..053ea9b
--- /dev/null
+++ b/src/common/i18n.js
@@ -0,0 +1,5 @@
+// Helper function which serves as a shorter alias to the chrome.i18n.getMessage
+// method, specially useful inside lit templates.
+export function msg(...args) {
+ return chrome.i18n.getMessage(...args);
+}
diff --git a/src/options/elements/credits-dialog/credits-dialog.js b/src/options/elements/credits-dialog/credits-dialog.js
new file mode 100644
index 0000000..abec000
--- /dev/null
+++ b/src/options/elements/credits-dialog/credits-dialog.js
@@ -0,0 +1,146 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
+
+import {msg} from '../../../common/i18n.js';
+import credits from '../../credits.json5';
+import i18nCredits from '../../i18n-credits.json5';
+import {DIALOG_STYLES} from '../../shared/dialog-styles.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+export class CreditsDialog extends LitElement {
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ DIALOG_STYLES,
+ css`
+ dialog {
+ max-height: 430px;
+ width: 400px;
+ }
+
+ dialog[open] {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .content_area h4 {
+ margin-bottom: 0;
+ }
+
+ .entry {
+ position: relative;
+ }
+
+ .entry a.homepage {
+ position: absolute;
+ inset-inline-end: 16px;
+ font-size: 14px;
+ }
+
+ p,
+ span {
+ font-size: 14px;
+ }
+
+ p.author {
+ margin-top: 7px;
+ }
+
+ #translators .name {
+ font-weight: bold;
+ }
+
+ .createdby {
+ font-style: italic;
+ }
+ `,
+ ];
+ }
+
+ constructor() {
+ super();
+ this.addEventListener('show-credits-dialog', this.showDialog);
+ }
+
+ render() {
+ let translators = map(i18nCredits, contributor => {
+ let languagesArray =
+ contributor?.languages?.map?.(lang => lang?.name ?? 'undefined');
+ let languages =
+ languagesArray.length > 0 ? ': ' + languagesArray.join(', ') : '';
+ return html`
+ <li>
+ <span class="name">${contributor?.name}</span>${languages}
+ </li>
+ `;
+ });
+
+ let homepageMsg = msg('options_credits_homepage');
+ let creditsByMsg = msg('options_credits_by');
+
+ let otherCredits = map(credits, c => {
+ let url = c.url ? html`
+ <a href=${c?.url} target="_blank" class="homepage">
+ ${homepageMsg}
+ </a>` :
+ undefined;
+ let license = c.license ? ' - ' + c.license : '';
+ let author = c.author ? html`
+ <p class="author">
+ ${creditsByMsg} ${c.author}${license}
+ </p>
+ ` :
+ undefined;
+
+ return html`
+ <div class="entry">
+ ${url}
+ <h4>${c?.name}</h4>
+ ${author}
+ </div>
+ `;
+ });
+
+ return html`
+ <dialog>
+ <div class="scrollable">
+ <h3>${msg('options_credits')}</h3>
+ <div class="entry createdby">
+ <div>${unsafeHTML(msg('options_credits_createdby'))}</div>
+ </div>
+ <div class="entry">
+ <a href="https://gtranslate.avm99963.com/" class="homepage" target="_blank">
+ ${msg('options_credits_homepage')}
+ </a>
+ <h4>${msg('options_credits_translations')}</h4>
+ <div>${msg('options_credits_translations_paragraph')}</div>
+ <ul id="translators">
+ ${translators}
+ </ul>
+ </div>
+ <div class="content_area">
+ ${otherCredits}
+ </div>
+ </div>
+ <div class="action_buttons">
+ <button id="credits_ok" @click="${this.closeDialog}">
+ ${msg('options_ok')}
+ </button>
+ </div>
+ </dialog>
+ `;
+ }
+
+ showDialog() {
+ let dialog = this.renderRoot.querySelector('dialog');
+ dialog.showModal();
+ dialog.querySelector('.scrollable').scrollTo(0, 0);
+ dialog.querySelector('#credits_ok').focus();
+ }
+
+ closeDialog() {
+ this.renderRoot.querySelector('dialog').close();
+ }
+}
+customElements.define('credits-dialog', CreditsDialog);
diff --git a/src/options/elements/options-editor/add-language-dialog.js b/src/options/elements/options-editor/add-language-dialog.js
new file mode 100644
index 0000000..7b85618
--- /dev/null
+++ b/src/options/elements/options-editor/add-language-dialog.js
@@ -0,0 +1,112 @@
+import {css, html, LitElement} from 'lit';
+
+import {isoLangs} from '../../../common/consts.js';
+import {msg} from '../../../common/i18n.js';
+import {DIALOG_STYLES} from '../../shared/dialog-styles.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+const ALL_LANGUAGES =
+ Object.entries(isoLangs)
+ .map(entry => {
+ let lang = entry[1];
+ lang.code = entry[0];
+ return lang;
+ })
+ .sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
+
+export class AddLanguageDialog extends LitElement {
+ static properties = {
+ languages: {type: Object},
+ };
+
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ DIALOG_STYLES,
+ css`
+ dialog {
+ max-height: 430px;
+ width: 430px;
+ }
+
+ #language_label {
+ font-size: 12px;
+ }
+
+ select {
+ width: 100%;
+ }
+
+ .action_buttons {
+ border-top: none;
+ padding-top: 0;
+ }
+ `,
+ ];
+ }
+
+ constructor() {
+ super();
+ this.addEventListener('show-add-language-dialog', this.showDialog);
+ }
+
+ render() {
+ let languageCodes = Object.values(this.languages ?? {});
+ let languages = ALL_LANGUAGES
+ .filter(lang => {
+ return !languageCodes.includes(lang.code);
+ })
+ .map(lang => {
+ return html`
+ <option value=${lang.code}>
+ ${lang?.name} (${lang?.nativeName})
+ </option>
+ `;
+ });
+
+ return html`
+ <dialog>
+ <div class="scrollable">
+ <h3>${msg('options_addlanguage')}</h3>
+ <div class="content_area">
+ <label id="language_label" for="select_language">
+ ${msg('options_language_label')}
+ </label>
+ <select id="select_language">${languages}</select>
+ </div>
+ </div>
+ <div class="action_buttons">
+ <button @click=${this.closeDialog}>
+ ${msg('options_cancel')}
+ </button>
+ <button @click=${this.addLanguage}>
+ ${msg('options_addlanguage_addbutton')}
+ </button>
+ </div>
+ </dialog>
+ `;
+ }
+
+ showDialog() {
+ let dialog = this.renderRoot.querySelector('dialog');
+ dialog.showModal();
+ }
+
+ closeDialog() {
+ this.renderRoot.querySelector('dialog').close();
+ }
+
+ addLanguage() {
+ let languageCodes = Object.values(this.languages ?? {});
+ let select = this.renderRoot.querySelector('#select_language');
+
+ let newLang = select.value;
+ languageCodes.push(newLang);
+ let translateinto = Object.assign({}, languageCodes);
+ chrome.storage.sync.set({translateinto}, () => {
+ select.selectedIndex = 0;
+ this.closeDialog();
+ });
+ }
+}
+customElements.define('add-language-dialog', AddLanguageDialog);
diff --git a/src/options/elements/options-editor/languages-editor.js b/src/options/elements/options-editor/languages-editor.js
new file mode 100644
index 0000000..7845a65
--- /dev/null
+++ b/src/options/elements/options-editor/languages-editor.js
@@ -0,0 +1,188 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+
+import {isoLangs} from '../../../common/consts.js';
+import {msg} from '../../../common/i18n.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+import AddLanguageDialog from './add-language-dialog.js';
+
+export class LanguagesEditor extends LitElement {
+ static properties = {
+ languages: {type: Object},
+ };
+
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ #languages_container {
+ width: 300px;
+ height: 250px;
+ border: 1px solid #ccc;
+ background-color: #E3F2FD;
+ overflow: auto;
+ }
+
+ #languages {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ #languages li {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 15px;
+ border-bottom: 1px dashed #ddd;
+ background-color: #EEF7FD;
+ -webkit-user-select: none;
+ }
+
+ #languages li .label {
+ flex-grow: 1;
+ }
+
+ #languages li .delete {
+ font-size: 18px;
+ color: red;
+ padding-left: 2px;
+ margin-left: 2px;
+ }
+
+ #languages li .movebtn {
+ font-size: 16px;
+ color: blue;
+ padding: 0 2px;
+ margin: 0 2px;
+ }
+
+ #languages li :is(.delete, .movebtn) {
+ cursor: pointer;
+ text-align: center;
+ }
+
+ #languages li .movebtn--disabled {
+ color: gray;
+ cursor: not-allowed;
+ }
+
+ #languages_footer {
+ width: 300px;
+ height: 35px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-top: 0;
+ }
+
+ #languages_add {
+ margin-inline-start: 4px;
+ margin-top: 4px;
+ }
+ `,
+ ];
+ }
+
+ constructor() {
+ super();
+ this.addEventListener('show-credits-dialog', this.showDialog);
+ this.sortable = undefined;
+ }
+
+ render() {
+ let languageCodes = Object.values(this.languages ?? {});
+ let languageList = map(languageCodes, (lang, i) => {
+ let moveBtns = [];
+ if (i != 0) {
+ moveBtns.push(html`
+ <button
+ class="notbtn movebtn"
+ @click=${() => this.swapLanguages(i, i - 1)}>
+ ↑
+ </button>
+ `);
+ } else {
+ moveBtns.push(html`
+ <button class="notbtn movebtn movebtn--disabled">
+ ↑
+ </button>
+ `);
+ }
+ if (i != languageCodes.length - 1) {
+ moveBtns.push(html`
+ <button
+ class="notbtn movebtn"
+ @click=${() => this.swapLanguages(i, i + 1)}>
+ ↓
+ </button>
+ `);
+ } else {
+ moveBtns.push(html`
+ <button class="notbtn movebtn movebtn--disabled">
+ ↓
+ </button>
+ `);
+ }
+
+ return html`
+ <li data-id=${lang}>
+ <span class="label">
+ ${isoLangs?.[lang]?.['name']} (${isoLangs?.[lang]?.nativeName})
+ </span>
+ ${moveBtns}
+ <button
+ class="notbtn delete"
+ @click=${() => this.deleteLanguage(lang)}>
+ ×
+ </button>
+ </li>
+ `;
+ });
+
+ return html`
+ <div id="languages_container">
+ <ul id="languages">${languageList}</ul>
+ </div>
+ <div id="languages_footer">
+ <button @click=${this.showAddLanguageDialog} id="languages_add">
+ ${msg('options_addlanguage_addbutton')}
+ </button>
+ </div>
+
+ <add-language-dialog .languages=${this.languages}></add-language-dialog>
+ `;
+ }
+
+ showAddLanguageDialog() {
+ const e = new CustomEvent(
+ 'show-add-language-dialog', {bubbles: true, composed: true});
+ this.renderRoot.querySelector('add-language-dialog').dispatchEvent(e);
+ }
+
+ save(languageCodes) {
+ let translateinto = Object.assign({}, languageCodes);
+ chrome.storage.sync.set({translateinto});
+ }
+
+ deleteLanguage(deleteLang) {
+ let languageCodes =
+ Object.values(this.languages ?? {}).filter(lang => lang != deleteLang);
+ this.save(languageCodes);
+ }
+
+ swapLanguages(i, j) {
+ let languageCodes = Object.values(this.languages ?? {});
+ if (i >= languageCodes.length || j >= languageCodes.length || i < 0 ||
+ j < 0) {
+ console.error(
+ 'Can\'t swap languages because the indexes are out of the range.');
+ return;
+ }
+ let tmp = languageCodes[j];
+ languageCodes[j] = languageCodes[i];
+ languageCodes[i] = tmp;
+ this.save(languageCodes);
+ }
+}
+customElements.define('languages-editor', LanguagesEditor);
diff --git a/src/options/elements/options-editor/options-editor.js b/src/options/elements/options-editor/options-editor.js
new file mode 100644
index 0000000..9e32dfa
--- /dev/null
+++ b/src/options/elements/options-editor/options-editor.js
@@ -0,0 +1,88 @@
+import {css, html, LitElement} from 'lit';
+import {map} from 'lit/directives/map.js';
+
+import {msg} from '../../../common/i18n.js';
+import {SHARED_STYLES} from '../../shared/shared-styles.js';
+
+import LanguagesEditor from './languages-editor.js';
+
+const TAB_OPTIONS = [
+ // Open in new tab for each translation
+ {
+ value: '',
+ labelMsg: 'options_tabsoption_1',
+ deprecatedValues: [],
+ },
+ // Open in a unique tab
+ {
+ value: 'yep',
+ labelMsg: 'options_tabsoption_2',
+ deprecatedValues: [],
+ },
+ // Open in a popup
+ {
+ value: 'popup',
+ labelMsg: 'options_tabsoption_3',
+ deprecatedValues: ['panel'],
+ },
+];
+
+export class OptionsEditor extends LitElement {
+ static properties = {
+ storageData: {type: Object},
+ };
+
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ #otheroptions p {
+ margin-top: 0;
+ margin-bottom: 8px;
+ }
+ `,
+ ];
+ }
+
+ constructor() {
+ super();
+ this.addEventListener('show-credits-dialog', this.showDialog);
+ }
+
+ render() {
+ let currentTabOption = this.storageData?.uniquetab;
+
+ let otherOptions = map(TAB_OPTIONS, (option, i) => {
+ let checked = option.value == currentTabOption ||
+ option.deprecatedValues.includes(currentTabOption);
+ return html`
+ <p>
+ <input type="radio" name="uniquetab" id="uniquetab_${i}"
+ value="${option?.value}" ?checked="${checked}"
+ @change="${() => this.changeTabOption(option.value)}">
+ <label for="uniquetab_${i}">${msg(option.labelMsg)}</label></p>
+ `;
+ });
+
+ return html`
+ <languages-editor .languages="${this.storageData?.translateinto}">
+ </languages-editor>
+
+ <h2 id="otheroptionsheader">${msg('options_otheroptionsheader')}</h2>
+
+ <div id="otheroptions">
+ ${otherOptions}
+ </div>
+ `;
+ }
+
+ changeTabOption(value) {
+ chrome.storage.sync.set({uniquetab: value}, function() {
+ var background = chrome.extension.getBackgroundPage();
+
+ background.translator_tab = false;
+ background.translator_window = false;
+ });
+ }
+}
+customElements.define('options-editor', OptionsEditor);
diff --git a/src/options/options.js b/src/options/options.js
index c89f1bd..cba1dd2 100644
--- a/src/options/options.js
+++ b/src/options/options.js
@@ -1,271 +1,92 @@
-import Sortable from 'sortablejs/modular/sortable.core.esm.js';
+import {css, html, LitElement} from 'lit';
-import {isoLangs} from '../common/consts.js';
+import {msg} from '../common/i18n.js';
-import credits from './credits.json5';
-import i18nCredits from './i18n-credits.json5';
+import CreditsDialog from './elements/credits-dialog/credits-dialog.js';
+import OptionsEditor from './elements/options-editor/options-editor.js';
-let sortable;
+import {SHARED_STYLES} from './shared/shared-styles.js';
-function $(selector) {
- return document.querySelector(selector);
-}
-
-function $all(selector) {
- return document.querySelectorAll(selector);
-}
-
-function isEmpty(obj) {
- return Object.keys(obj).length === 0;
-}
-
-function i18n() {
- $all('[data-i18n]').forEach(el => {
- el.innerHTML =
- chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n'));
- });
-}
-
-function printListModal() {
- $('#select_language').textContent = '';
- var heysortable = sortable.toArray();
- var languages = [];
- for (var langCode of Object.keys(isoLangs)) {
- var l = isoLangs[langCode];
- l['code'] = langCode;
- languages.push(l);
+export class OptionsPage extends LitElement {
+ static properties = {
+ _storageData: {type: Object, state: true},
}
- languages.sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
- languages.forEach(language => {
- if (!inArray(language['code'], heysortable)) {
- var el = document.createElement('option');
- el.setAttribute('value', language['code']);
- el.textContent = language['name'] + ' (' + language['nativeName'] + ')';
- $('#select_language').appendChild(el);
- }
- });
-}
-
-function init() {
- i18n();
- chrome.storage.sync.get(null, items => {
- // If no settings are set
- if (isEmpty(items)) {
- items = {
- translateinto: {},
- uniquetab: 'popup',
- };
- chrome.storage.sync.set(items);
- }
-
- // Check the checkbox of the window opening
- if (items.uniquetab === 'yep') $('#uniquetab').checked = true;
- if (items.uniquetab === '') $('#varioustabs').checked = true;
- if (items.uniquetab === 'panel' || items.uniquetab === 'popup')
- $('#popup').checked = true;
-
- // Add event listeners for certain buttons and links
- $('#save').addEventListener('click', _ => {
- saveOptions(true);
+ constructor() {
+ super();
+ this._storageData = undefined;
+ this.updateStorageData();
+ chrome.storage.onChanged.addListener((changes, areaName) => {
+ if (areaName == 'sync') this.updateStorageData();
});
-
- // Save automatically
- $all('input[type="radio"]').forEach(radio => {
- radio.addEventListener('change', _ => {
- saveOptions();
- });
- });
-
- // Print selected language list
- var languages = items.translateinto;
-
- if (languages) {
- for (var language_id of Object.keys(languages)) {
- var language = languages[language_id];
- var el = document.createElement('li');
- el.setAttribute('data-language', language);
- el.setAttribute('data-id', language);
- el.innerHTML = isoLangs[language]['name'] + ' (' +
- isoLangs[language]['nativeName'] + ')' +
- '<span data-language=\'' + language +
- '\' class=\'delete\'>x</span>';
- $('#languages').appendChild(el);
- $('#languages li[data-language=' + language + '] .delete')
- .addEventListener('click', function() {
- $('#languages')
- .removeChild($(
- 'li[data-language=' + this.getAttribute('data-language') +
- ']'));
- printListModal();
- // Save automatically
- saveOptions();
- });
- }
- }
-
- // Initiate Sortable
- sortable = new Sortable($('#languages'), {animation: 150});
-
- // Handling The Dialog
- $('#languages_add').addEventListener('click', _ => {
- $('dialog#languages_add_dialog').showModal();
- $('#select_language').focus();
- });
-
- $('#languages_add_cancel').addEventListener('click', _ => {
- $('dialog#languages_add_dialog').close();
- });
-
- $('#languages_add_ok').addEventListener('click', _ => {
- var el = document.createElement('li');
- var language = $('#select_language').value;
- if (inArray(language, sortable.toArray())) {
- return;
- }
- el.setAttribute('data-language', language);
- el.setAttribute('data-id', language);
- el.innerHTML = isoLangs[language]['name'] + ' (' +
- isoLangs[language]['nativeName'] + ')' +
- '<span data-language=\'' + language + '\' class=\'delete\'>x</span>';
- $('#languages').appendChild(el);
- var selection = $('#select_language option[value=' + language + ']');
- selection.parentNode.removeChild(selection);
- $('#languages li[data-id=' + language + '] .delete')
- .addEventListener('click', function() {
- $('#languages')
- .removeChild(
- $('li[data-language=' + this.getAttribute('data-language') +
- ']'));
- printListModal();
- // Save automatically
- saveOptions();
- });
- $('dialog').close();
-
- // Save automatically
- saveOptions();
- });
-
- // About credits...
- var content = $('dialog#credits_dialog .content_area');
- credits.forEach(item => {
- var div = document.createElement('div');
- div.classList.add('entry');
- if (item.url) {
- var a = document.createElement('a');
- a.classList.add('homepage');
- a.href = item.url;
- a.target = '_blank';
- a.textContent = chrome.i18n.getMessage('options_credits_homepage');
- div.append(a);
- }
-
- var h4 = document.createElement('h4');
- h4.textContent = item.name;
- div.append(h4);
-
- if (item.author) {
- var p = document.createElement('p');
- p.classList.add('author');
- p.textContent = chrome.i18n.getMessage('options_credits_by') + ' ' +
- item.author + (item.license ? ' - ' + item.license : '');
- div.append(p);
- }
- content.append(div);
- });
-
- var cList = document.getElementById('translators');
- i18nCredits.forEach(contributor => {
- var li = document.createElement('li');
- var languages = [];
- if (contributor.languages) {
- contributor.languages.forEach(lang => {
- languages.push(lang.name || 'undefined');
- });
- }
-
- var name = document.createElement('span');
- name.classList.add('name');
- name.textContent = contributor.name || 'undefined';
- li.append(name);
-
- if (languages.length > 0) {
- var languages = document.createTextNode(': ' + languages.join(', '));
- li.append(languages);
- }
-
- cList.append(li);
- });
-
- window.onhashchange = function() {
- if (location.hash == '#credits') {
- var credits = document.getElementById('credits_dialog');
- credits.showModal();
- credits.querySelector('.scrollable').scrollTo(0, 0);
- $('#credits_ok').focus();
- }
- };
-
- if (location.hash == '#credits') {
- $('dialog#credits_dialog').showModal();
- $('#credits_ok').focus();
- }
-
- $('#credits_ok').addEventListener('click', _ => {
- $('dialog#credits_dialog').close();
- });
- $('dialog#credits_dialog').addEventListener('close', _ => {
- history.pushState(
- '', document.title,
- window.location.pathname + window.location.search);
- });
-
- // Print language list in the modal dialog
- printListModal();
- });
-}
-
-function saveOptions(close = false) {
- var languages = document.getElementById('languages');
- var options = {
- uniquetab: '',
- translateinto: {},
- };
-
- options.uniquetab = radioSelected('uniquetab');
-
- var selected_languages = sortable.toArray();
-
- var i = 0;
- for (var language_id in selected_languages) {
- var language = selected_languages[language_id];
- options.translateinto[i] = language;
- i++;
}
- chrome.storage.sync.set(options, function() {
- var background = chrome.extension.getBackgroundPage();
+ static get styles() {
+ return [
+ SHARED_STYLES,
+ css`
+ :host {
+ display: block;
+ padding: 10px;
+ margin: 14px 17px;
+ font-family: "Roboto", "Arial", sans-serif!important;
+ }
- background.translator_tab = false;
- background.translator_window = false;
- if (close) window.close();
- });
-}
+ #credits_container {
+ position: absolute;
+ top: 0px;
+ inset-inline-end: 50px;
+ background: rgb(195, 235, 204);
+ border: solid 1px rgb(139, 139, 139);
+ border-top: 0;
+ border-radius: 0px 0px 5px 5px;
+ }
-function radioSelected(a) {
- var elements = document.getElementsByName(a);
-
- for (var i = 0; i < elements.length; i++)
- if (elements[i].checked) return elements[i].value;
-}
-
-function inArray(needle, haystack) {
- var length = haystack.length;
- for (var i = 0; i < length; i++) {
- if (haystack[i] == needle) return true;
+ #credits_container button#credits {
+ color: green!important;
+ margin: 0 5px;
+ padding: 1px 3px;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ `,
+ ];
}
- return false;
-}
-window.addEventListener('load', init);
+ render() {
+ return html`
+ <div id="credits_container">
+ <button
+ @click="${this.showCredits}" id="credits"
+ class="notbtn" tabindex="0" role="button">
+ ${msg('options_credits')}
+ </button>
+ </div>
+ <h1 id="welcome">${msg('options_welcome')}</h1>
+ <p id="introduction">${msg('options_introduction')}</p>
+ <options-editor .storageData=${this._storageData}></options-editor>
+ <credits-dialog></credits-dialog>
+ `;
+ }
+
+ updateStorageData() {
+ chrome.storage.sync.get(null, items => {
+ // If no settings are set
+ if (Object.keys(items).length === 0) {
+ items = {
+ translateinto: {},
+ uniquetab: 'popup',
+ };
+ chrome.storage.sync.set(items);
+ }
+ this._storageData = items;
+ });
+ }
+
+ showCredits() {
+ const e =
+ new CustomEvent('show-credits-dialog', {bubbles: true, composed: true});
+ this.renderRoot.querySelector('credits-dialog').dispatchEvent(e);
+ }
+}
+customElements.define('options-page', OptionsPage);
diff --git a/src/options/shared/dialog-styles.js b/src/options/shared/dialog-styles.js
new file mode 100644
index 0000000..8d50f1a
--- /dev/null
+++ b/src/options/shared/dialog-styles.js
@@ -0,0 +1,35 @@
+import {css} from 'lit';
+
+export const DIALOG_STYLES = css`
+ dialog {
+ padding: 0;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ }
+
+
+ dialog h3 {
+ margin-bottom: 10px;
+ }
+
+ dialog::backdrop {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ }
+
+ .scrollable {
+ padding: 1em;
+ overflow-y: auto;
+ }
+
+ .action_buttons {
+ border-top: 1px solid #ccc;
+ padding: 1em;
+ text-align: end;
+ }
+`;
diff --git a/src/options/shared/shared-styles.js b/src/options/shared/shared-styles.js
new file mode 100644
index 0000000..40794ec
--- /dev/null
+++ b/src/options/shared/shared-styles.js
@@ -0,0 +1,344 @@
+import {css} from 'lit';
+
+export const SHARED_STYLES = css`
+ button:not(.notbtn),
+ input,
+ select,
+ option {
+ font-size: 13px !important;
+ }
+
+ button.notbtn {
+ appearance: none;
+ background: none;
+ border: none;
+ border-radius: 0;
+ font: inherit;
+ padding: 0;
+ }
+
+ h1, h2, h3 {
+ user-select: none;
+ font-weight: normal;
+ line-height: 1;
+ }
+
+ h1 {
+ text-align: center;
+ font-size: 30px;
+ }
+
+ h2 {
+ font-size: 20px;
+ margin-bottom: 12px;
+ }
+
+ /* Copy of Chrome stylesheet (widgets.css), adapted by not applying styles
+ * for buttons with the class |nobtn|.
+ **/
+
+ /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in https://chromium.googlesource.com/chromium/src/+/master/LICENSE */
+
+ /* This file defines styles for form controls. The order of rule blocks is
+ * important as there are some rules with equal specificity that rely on order
+ * as a tiebreaker. These are marked with OVERRIDE. */
+
+ /* Default state **************************************************************/
+
+ :-webkit-any(button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button),
+ select,
+ input[type='checkbox'],
+ input[type='radio'] {
+ -webkit-appearance: none;
+ -webkit-user-select: none;
+ background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+ border: 1px solid rgba(0, 0, 0, 0.25);
+ border-radius: 2px;
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+ inset 0 1px 2px rgba(255, 255, 255, 0.75);
+ color: #444;
+ font: inherit;
+ margin: 0 1px 0 0;
+ outline: none;
+ text-shadow: 0 1px 0 rgb(240, 240, 240);
+ }
+
+ :-webkit-any(button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button),
+ select {
+ min-height: 2em;
+ min-width: 4em;
+
+ }
+
+ :-webkit-any(button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button) {
+ -webkit-padding-end: 10px;
+ -webkit-padding-start: 10px;
+ }
+
+ select {
+ -webkit-appearance: none;
+ -webkit-padding-end: 20px;
+ -webkit-padding-start: 6px;
+ /* OVERRIDE */
+ background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
+ -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+ background-position: right center;
+ background-repeat: no-repeat;
+ }
+
+ html[dir='rtl'] select {
+ background-position: center left;
+ }
+
+ input[type='checkbox'] {
+
+ bottom: 2px;
+ height: 13px;
+ position: relative;
+ vertical-align: middle;
+ width: 13px;
+ }
+
+ input[type='radio'] {
+ /* OVERRIDE */
+ border-radius: 100%;
+ bottom: 1px;
+ height: 15px;
+ position: relative;
+ vertical-align: middle;
+ width: 15px;
+ }
+
+ /* TODO(estade): add more types here? */
+ input[type='number'],
+ input[type='password'],
+ input[type='search'],
+ input[type='text'],
+ input[type='url'],
+ input:not([type]),
+ textarea {
+ border: 1px solid #bfbfbf;
+ border-radius: 2px;
+ box-sizing: border-box;
+ color: #444;
+ font: inherit;
+ margin: 0;
+ /* Use min-height to accommodate addditional padding for touch as needed. */
+ min-height: 2em;
+ padding: 3px;
+ outline: none;
+ /* For better alignment between adjacent buttons and inputs. */
+ padding-bottom: 4px;
+ }
+
+ input[type='search'] {
+ -webkit-appearance: textfield;
+ /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
+ * of the default text in relatively spacious languages (i.e. German). */
+ min-width: 160px;
+ }
+
+ /* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
+ * TODO(dbeam): are there more types that would benefit from this? */
+ input[type='search']::-webkit-textfield-decoration-container {
+ direction: inherit;
+ }
+
+ /* Checked ********************************************************************/
+
+ input[type='checkbox']:checked::before {
+ -webkit-user-select: none;
+ background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAaElEQVR4Xl3PIQoCQQCF4Y8JW42D1bDZ4iVEjDbxFpstYhC7eIVBZHkXFGw734sv/TqDQQ8Xb1udja/I8igeIm7Aygj2IpoKTGZnVRNxAHYi4iPiDlA9xX+aNQDFySziqDN6uSp6y7ofEMwZ05uUZRkAAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAvElEQVR4XrXPMUrDYBzG4UeRZnAQnFxq3XT3AsVABm8QPIHQIeAJuoqb2s1BcHAIin4HVLqEvx9NQgb5rc/wvn4mNBUbqlKDcezCp6Qexxx7lbapx/CBe6mrHsYrKXQ7hKtIre1nOD/W9eiQiK80inis680JEc+1kien+TEfzom4sJG2aZXxmG9LIqaRerohx6V2J72zl2NY2OTUgxm7MEU25sURfZg4590Zw5iFZ8mXS0ZwN+eaPjyh/8O/H7bzPJ5NOo0AAAAASUVORK5CYII=') 2x);
+ background-size: 100% 100%;
+ content: '';
+ display: block;
+ height: 100%;
+ width: 100%;
+ }
+
+ input[type='radio']:checked::before {
+ background-color: #666;
+ border-radius: 100%;
+ bottom: 3px;
+ content: '';
+ display: block;
+ left: 3px;
+ position: absolute;
+ right: 3px;
+ top: 3px;
+ }
+
+ /* Hover **********************************************************************/
+
+ :enabled:hover:-webkit-any(
+ select,
+ input[type='checkbox'],
+ input[type='radio'],
+ :-webkit-any(
+ button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button)) {
+ background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+ border-color: rgba(0, 0, 0, 0.3);
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+ inset 0 1px 2px rgba(255, 255, 255, 0.95);
+ color: black;
+ }
+
+ :enabled:hover:-webkit-any(select) {
+ /* OVERRIDE */
+ background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
+ -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+ }
+
+ /* Active *********************************************************************/
+
+ :enabled:active:-webkit-any(
+ select,
+ input[type='checkbox'],
+ input[type='radio'],
+ :-webkit-any(
+ button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button)) {
+ background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+ box-shadow: none;
+ text-shadow: none;
+ }
+
+ :enabled:active:-webkit-any(select) {
+ /* OVERRIDE */
+ background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
+ -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+ }
+
+ /* Disabled *******************************************************************/
+
+ :disabled:-webkit-any(
+ button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button),
+ select:disabled {
+ background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+ border-color: rgba(80, 80, 80, 0.2);
+ box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
+ inset 0 1px 2px rgba(255, 255, 255, 0.75);
+ color: #aaa;
+ }
+
+ select:disabled {
+ /* OVERRIDE */
+ background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASklEQVQY02P4z0AMRGZGMaShwCisyhITG/4jw8RErMr+KyxYiFC0YOF/BeyWIikEKWLA4Ta4QogiPMpACt82QRThVQYUYYWz4BAAGr6Ii6kEPacAAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAQCAQAAADQF8WVAAAARElEQVR4Xu3MsQ0AIAwEsYx+m4fySsgLOuTe1Re9z4De4DzbdVDnmZ0ENcrsZJVkdoIKMzurMLOzSjNhlWfCapBlfpZbeMFeGdxKIEQAAAAASUVORK5CYII=') 2x),
+ -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+ }
+
+ input:disabled:-webkit-any([type='checkbox'],
+ [type='radio']) {
+ opacity: .75;
+ }
+
+ input:disabled:-webkit-any([type='password'],
+ [type='search'],
+ [type='text'],
+ [type='url'],
+ :not([type])) {
+ color: #999;
+ }
+
+ /* Focus **********************************************************************/
+
+ :enabled:focus:-webkit-any(
+ select,
+ input[type='checkbox'],
+ input[type='number'],
+ input[type='password'],
+ input[type='radio'],
+ input[type='search'],
+ input[type='text'],
+ input[type='url'],
+ input:not([type]),
+ :-webkit-any(
+ button:not(.notbtn),
+ input[type='button'],
+ input[type='submit']):not(.custom-appearance):not(.link-button)) {
+ /* OVERRIDE */
+ -webkit-transition: border-color 200ms;
+ /* We use border color because it follows the border radius (unlike outline).
+ * This is particularly noticeable on mac. */
+ border-color: rgb(77, 144, 254);
+ outline: none;
+ }
+
+ /* Link buttons ***************************************************************/
+
+ .link-button {
+ -webkit-box-shadow: none;
+ background: transparent none;
+ border: none;
+ color: rgb(17, 85, 204);
+ cursor: pointer;
+ /* Input elements have -webkit-small-control which can override the body font.
+ * Resolve this by using 'inherit'. */
+ font: inherit;
+ margin: 0;
+ padding: 0;
+ }
+
+ .link-button:hover {
+ text-decoration: underline;
+ }
+
+ .link-button:active {
+ color: rgb(5, 37, 119);
+ text-decoration: underline;
+ }
+
+ .link-button[disabled] {
+ color: #999;
+ cursor: default;
+ text-decoration: none;
+ }
+
+ /* Checkbox/radio helpers ******************************************************
+ *
+ * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
+ * these classes with the markup structure:
+ *
+ * <div class="checkbox">
+ * <label>
+ * <input type="checkbox"></input>
+ * <span>
+ * </label>
+ * </div>
+ */
+
+ :-webkit-any(.checkbox, .radio) label {
+ /* Don't expand horizontally: <http://crbug.com/112091>. */
+ display: -webkit-inline-box;
+ padding-bottom: 7px;
+ padding-top: 7px;
+ }
+
+ :-webkit-any(.checkbox, .radio) label input ~ span {
+ -webkit-margin-start: 0.6em;
+ -webkit-user-select: none;
+ /* Make sure long spans wrap at the same horizontal position they start. */
+ display: block;
+ }
+
+ :-webkit-any(.checkbox, .radio) label:hover {
+ color: black;
+ }
+
+ label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
+ color: #999;
+ }
+`;
diff --git a/src/static/css/options.css b/src/static/css/options.css
deleted file mode 100644
index 1a81c76..0000000
--- a/src/static/css/options.css
+++ /dev/null
@@ -1,205 +0,0 @@
-/*@import url("widgets.css");*/
-
-html {
- direction: __MSG_@@bidi_dir__;
-}
-
-body {
- padding: 10px;
- font-family: "Roboto", "Arial", sans-serif !important;
- background-color: #BBDEFB;
- background-repeat: repeat;
- background-position: left top;
- font-size: 90%;
- cursor: default;
- min-width: 400px;
-}
-
-h1 {
- text-align: center;
- font-size: 30px;
-}
-
-h2 {
- font-size: 20px;
-}
-
-#languages_container {
- width: 300px;
- height: 250px;
- border: 1px solid #ccc;
- background-color: #E3F2FD;
- overflow: auto;
-}
-
-#languages {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-#languages li {
- padding: 15px;
- border-bottom: 1px dashed #ddd;
- background-color: #EEF7FD;
- cursor: move;
- -webkit-user-select: none;
-}
-
-#languages li.sortable-ghost {
- background-color: #E3F2FD;
-}
-
-#languages li .delete {
- font-size: 14px;
- float: __MSG_@@bidi_end_edge__;
- cursor: pointer;
- color: red;
-}
-
-#languages_footer {
- width: 300px;
- height: 35px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-top: 0;
-}
-
-button,
-input,
-select,
-option {
- font-size: 13px !important;
-}
-
-#languages_add {
- margin-__MSG_@@bidi_start_edge__: 4px;
- margin-top: 4px;
-}
-
-#save {
- display: block;
- margin: 18px auto;
-}
-
-/* Dialog */
-dialog#languages_add_dialog {
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -216px;
- margin-top: -91px;
- height: 150px;
- width: 400px;
- border: 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-}
-
-dialog h3 {
- margin-bottom: 10px;
-}
-
-dialog #language_label {
- font-size: 12px;
-}
-
-dialog select {
- width: 100%;
-}
-
-dialog#languages_add_dialog .action_buttons {
- margin-top: 10px;
- float: __MSG_@@bidi_end_edge__;
-}
-
-dialog::backdrop {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* Credits */
-#credits_container {
- position: absolute;
- top: 0px;
- __MSG_@@bidi_end_edge__: 50px;
- background: rgb(195, 235, 204);
- border: solid 1px rgb(139, 139, 139);
- border-top: 0;
- border-radius: 0px 0px 5px 5px;
-}
-
-#credits_container a {
- color: green !important;
- margin: 0 5px;
-}
-
-dialog#credits_dialog {
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -216px;
- margin-top: -231px;
- padding: 0;
- height: 430px;
- width: 400px;
- border: 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-}
-
-dialog#credits_dialog[open] {
- display: flex;
- flex-direction: column;
-}
-
-dialog#credits_dialog .scrollable {
- padding: 1em;
- overflow-y: auto;
-}
-
-dialog#credits_dialog .content_area h4 {
- margin-bottom: 0px;
-}
-
-dialog#credits_dialog .entry {
- position: relative;
-}
-
-dialog#credits_dialog .entry a.homepage {
- position: absolute;
- __MSG_@@bidi_end_edge__: 16px;
- font-size: 14px;
-}
-
-dialog#credits_dialog p,
-dialog#credits_dialog span {
- font-size: 14px;
-}
-
-dialog#credits_dialog p.author {
- margin-top: 7px;
-}
-
-dialog#credits_dialog #translators .name {
- font-weight: bold;
-}
-
-dialog#credits_dialog .action_buttons {
- border-top: 1px solid #ccc;
- padding: 1em;
- text-align: __MSG_@@bidi_end_edge__;
-}
-
-dialog#credits_dialog .createdby {
- font-style: italic;
-}
-
-#otheroptions p {
- margin-top: 0;
- margin-bottom: 0;
-}
diff --git a/src/static/css/widgets.css b/src/static/css/widgets.css
deleted file mode 100644
index c988a27..0000000
--- a/src/static/css/widgets.css
+++ /dev/null
@@ -1,304 +0,0 @@
-/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in https://chromium.googlesource.com/chromium/src/+/master/LICENSE */
-
-/* This file defines styles for form controls. The order of rule blocks is
- * important as there are some rules with equal specificity that rely on order
- * as a tiebreaker. These are marked with OVERRIDE. */
-
-/* Default state **************************************************************/
-
-:-webkit-any(button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button),
-select,
-input[type='checkbox'],
-input[type='radio'] {
- -webkit-appearance: none;
- -webkit-user-select: none;
- background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
- border: 1px solid rgba(0, 0, 0, 0.25);
- border-radius: 2px;
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
- inset 0 1px 2px rgba(255, 255, 255, 0.75);
- color: #444;
- font: inherit;
- margin: 0 1px 0 0;
- outline: none;
- text-shadow: 0 1px 0 rgb(240, 240, 240);
-}
-
-:-webkit-any(button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button),
-select {
- min-height: 2em;
- min-width: 4em;
-
-}
-
-:-webkit-any(button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button) {
- -webkit-padding-end: 10px;
- -webkit-padding-start: 10px;
-}
-
-select {
- -webkit-appearance: none;
- -webkit-padding-end: 20px;
- -webkit-padding-start: 6px;
- /* OVERRIDE */
- background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
- -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
- background-position: right center;
- background-repeat: no-repeat;
-}
-
-html[dir='rtl'] select {
- background-position: center left;
-}
-
-input[type='checkbox'] {
-
-bottom: 2px;
- height: 13px;
- position: relative;
- vertical-align: middle;
- width: 13px;
-}
-
-input[type='radio'] {
- /* OVERRIDE */
- border-radius: 100%;
- bottom: 1px;
- height: 15px;
- position: relative;
- vertical-align: middle;
- width: 15px;
-}
-
-/* TODO(estade): add more types here? */
-input[type='number'],
-input[type='password'],
-input[type='search'],
-input[type='text'],
-input[type='url'],
-input:not([type]),
-textarea {
- border: 1px solid #bfbfbf;
- border-radius: 2px;
- box-sizing: border-box;
- color: #444;
- font: inherit;
- margin: 0;
- /* Use min-height to accommodate addditional padding for touch as needed. */
- min-height: 2em;
- padding: 3px;
- outline: none;
-/* For better alignment between adjacent buttons and inputs. */
- padding-bottom: 4px;
-}
-
-input[type='search'] {
- -webkit-appearance: textfield;
- /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
- * of the default text in relatively spacious languages (i.e. German). */
- min-width: 160px;
-}
-
-/* Remove when https://bugs.webkit.org/show_bug.cgi?id=51499 is fixed.
- * TODO(dbeam): are there more types that would benefit from this? */
-input[type='search']::-webkit-textfield-decoration-container {
- direction: inherit;
-}
-
-/* Checked ********************************************************************/
-
-input[type='checkbox']:checked::before {
- -webkit-user-select: none;
- background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAaElEQVR4Xl3PIQoCQQCF4Y8JW42D1bDZ4iVEjDbxFpstYhC7eIVBZHkXFGw734sv/TqDQQ8Xb1udja/I8igeIm7Aygj2IpoKTGZnVRNxAHYi4iPiDlA9xX+aNQDFySziqDN6uSp6y7ofEMwZ05uUZRkAAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAQAAABuvaSwAAAAvElEQVR4XrXPMUrDYBzG4UeRZnAQnFxq3XT3AsVABm8QPIHQIeAJuoqb2s1BcHAIin4HVLqEvx9NQgb5rc/wvn4mNBUbqlKDcezCp6Qexxx7lbapx/CBe6mrHsYrKXQ7hKtIre1nOD/W9eiQiK80inis680JEc+1kien+TEfzom4sJG2aZXxmG9LIqaRerohx6V2J72zl2NY2OTUgxm7MEU25sURfZg4590Zw5iFZ8mXS0ZwN+eaPjyh/8O/H7bzPJ5NOo0AAAAASUVORK5CYII=') 2x);
- background-size: 100% 100%;
- content: '';
- display: block;
- height: 100%;
- width: 100%;
-}
-
-input[type='radio']:checked::before {
- background-color: #666;
- border-radius: 100%;
- bottom: 3px;
- content: '';
- display: block;
- left: 3px;
- position: absolute;
- right: 3px;
- top: 3px;
-}
-
-/* Hover **********************************************************************/
-
-:enabled:hover:-webkit-any(
- select,
- input[type='checkbox'],
- input[type='radio'],
- :-webkit-any(
- button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button)) {
- background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
- border-color: rgba(0, 0, 0, 0.3);
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
- inset 0 1px 2px rgba(255, 255, 255, 0.95);
- color: black;
-}
-
-:enabled:hover:-webkit-any(select) {
- /* OVERRIDE */
- background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
- -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
-}
-
-/* Active *********************************************************************/
-
-:enabled:active:-webkit-any(
- select,
- input[type='checkbox'],
- input[type='radio'],
- :-webkit-any(
- button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button)) {
- background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
- box-shadow: none;
- text-shadow: none;
-}
-
-:enabled:active:-webkit-any(select) {
- /* OVERRIDE */
- background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAQCAQAAAA/1a6rAAAAQUlEQVR4Xu3MsQnAMBAEMI1+myf9gw0+3ASCenmu+mQn2yGn3S4Mp906DEW3CEPfzTD03QxD380w3OmIUHe9v+u9QwAt93yns5cAAAAASUVORK5CYII=') 2x),
- -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
-}
-
-/* Disabled *******************************************************************/
-
-:disabled:-webkit-any(
- button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button),
-select:disabled {
- background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
- border-color: rgba(80, 80, 80, 0.2);
- box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
- inset 0 1px 2px rgba(255, 255, 255, 0.75);
- color: #aaa;
-}
-
-select:disabled {
- /* OVERRIDE */
- background-image: -webkit-image-set(url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAASklEQVQY02P4z0AMRGZGMaShwCisyhITG/4jw8RErMr+KyxYiFC0YOF/BeyWIikEKWLA4Ta4QogiPMpACt82QRThVQYUYYWz4BAAGr6Ii6kEPacAAAAASUVORK5CYII=') 1x, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAQCAQAAADQF8WVAAAARElEQVR4Xu3MsQ0AIAwEsYx+m4fySsgLOuTe1Re9z4De4DzbdVDnmZ0ENcrsZJVkdoIKMzurMLOzSjNhlWfCapBlfpZbeMFeGdxKIEQAAAAASUVORK5CYII=') 2x),
- -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
-}
-
-input:disabled:-webkit-any([type='checkbox'],
- [type='radio']) {
- opacity: .75;
-}
-
-input:disabled:-webkit-any([type='password'],
- [type='search'],
- [type='text'],
- [type='url'],
- :not([type])) {
- color: #999;
-}
-
-/* Focus **********************************************************************/
-
-:enabled:focus:-webkit-any(
- select,
- input[type='checkbox'],
- input[type='number'],
- input[type='password'],
- input[type='radio'],
- input[type='search'],
- input[type='text'],
- input[type='url'],
- input:not([type]),
- :-webkit-any(
- button,
- input[type='button'],
- input[type='submit']):not(.custom-appearance):not(.link-button)) {
- /* OVERRIDE */
- -webkit-transition: border-color 200ms;
- /* We use border color because it follows the border radius (unlike outline).
- * This is particularly noticeable on mac. */
- border-color: rgb(77, 144, 254);
- outline: none;
-}
-
-/* Link buttons ***************************************************************/
-
-.link-button {
- -webkit-box-shadow: none;
- background: transparent none;
- border: none;
- color: rgb(17, 85, 204);
- cursor: pointer;
- /* Input elements have -webkit-small-control which can override the body font.
- * Resolve this by using 'inherit'. */
- font: inherit;
- margin: 0;
- padding: 0;
-}
-
-.link-button:hover {
- text-decoration: underline;
-}
-
-.link-button:active {
- color: rgb(5, 37, 119);
- text-decoration: underline;
-}
-
-.link-button[disabled] {
- color: #999;
- cursor: default;
- text-decoration: none;
-}
-
-/* Checkbox/radio helpers ******************************************************
- *
- * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
- * these classes with the markup structure:
- *
- * <div class="checkbox">
- * <label>
- * <input type="checkbox"></input>
- * <span>
- * </label>
- * </div>
- */
-
-:-webkit-any(.checkbox, .radio) label {
- /* Don't expand horizontally: <http://crbug.com/112091>. */
- display: -webkit-inline-box;
- padding-bottom: 7px;
- padding-top: 7px;
-}
-
-:-webkit-any(.checkbox, .radio) label input ~ span {
- -webkit-margin-start: 0.6em;
- -webkit-user-select: none;
- /* Make sure long spans wrap at the same horizontal position they start. */
- display: block;
-}
-
-:-webkit-any(.checkbox, .radio) label:hover {
- color: black;
-}
-
-label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
- color: #999;
-}
\ No newline at end of file
diff --git a/src/static/options.html b/src/static/options.html
index fa82672..acb2157 100644
--- a/src/static/options.html
+++ b/src/static/options.html
@@ -1,72 +1,21 @@
<!DOCTYPE html>
<html>
-
-<head>
- <meta charset="UTF-8">
- <title>Options</title>
- <link rel="stylesheet" type="text/css" href="css/options.css">
- <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
-</head>
-
-<body>
- <div id="credits_container">
- <a href="#credits" id="credits" data-i18n="credits"></a>
- </div>
-
- <h1 id="welcome" data-i18n="welcome"></h1>
-
- <p id="introduction" data-i18n="introduction"></p>
-
- <div id="languages_container">
- <ul id="languages"></ul>
- </div>
- <div id="languages_footer">
- <button id="languages_add" data-i18n="addlanguage_addbutton"></button>
- </div>
-
- <h2 id="otheroptionsheader" data-i18n="otheroptionsheader"></h2>
-
- <div id="otheroptions">
- <p><input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs" data-i18n="tabsoption_1"></label></p>
- <p><input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab" data-i18n="tabsoption_2"></label></p>
- <p><input type="radio" name="uniquetab" id="popup" value="popup"> <label id="popup_label" for="popup" data-i18n="tabsoption_3"></label></p>
- </div>
-
- <button id="save" data-i18n="savebutton"></button>
-
- <dialog id="languages_add_dialog">
- <h3 data-i18n="addlanguage"></h3>
- <div class="content_area">
- <label id="language_label" for="select_language" data-i18n="language_label"></label>
- <select id="select_language"></select>
- </div>
- <div class="action_buttons">
- <button id="languages_add_cancel" data-i18n="cancel"></button>
- <button id="languages_add_ok" data-i18n="addlanguage_addbutton"></button>
- </div>
- </dialog>
- <dialog id="credits_dialog">
- <div class="scrollable">
- <h3 data-i18n="credits"></h3>
- <div class="entry createdby">
- <div data-i18n="credits_createdby"></div>
- </div>
- <div class="entry">
- <a href="https://gtranslate.avm99963.com/" class="homepage" target="_blank" data-i18n="credits_homepage"></a>
- <h4 data-i18n="credits_translations"></h4>
- <div data-i18n="credits_translations_paragraph"></div>
- <ul id="translators"></ul>
- </div>
- <div class="content_area">
- </div>
- </div>
- <div class="action_buttons">
- <button id="credits_ok" data-i18n="ok"></button>
- </div>
- </dialog>
-
- <script src="options.bundle.js"></script>
- <script src="js/sortable.js"></script>
-</body>
-
+ <head>
+ <meta charset="UTF-8">
+ <title>Options</title>
+ <style>
+ body {
+ margin: 0;
+ padding: 0;
+ width: 470px;
+ font-size: 90%;
+ background-color: #BBDEFB;
+ }
+ </style>
+ <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
+ </head>
+ <body>
+ <options-page></options-page>
+ <script src="options.bundle.js"></script>
+ </body>
</html>
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index bfba192..aa781cb 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -30,5 +30,6 @@
"chrome_style": true
},
"browser_action": {},
- "default_locale": "en"
+ "default_locale": "en",
+ "minimum_chrome_version": "86.0.4198.0"
}