Replace language editor buttons with paper-button
The font family for the options page has also been changed so the glyphs
used in the buttons appear better in Mac (and hopefully in other OSs
too).
Also, the node_modules is now excluded from the source-map-loader rule
in order to reduce the extension tarball size.
Bug: translateselectedtext:12
Change-Id: I399987a87c8d2de147d46ce1cf89f36b9e2e4a9d
diff --git a/package-lock.json b/package-lock.json
index 0397cf0..4aaae85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"license": "MIT",
"dependencies": {
+ "@polymer/paper-button": "^3.0.1",
"chrome-types": "^0.1.113",
"clean-terminal-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^4.0.0",
@@ -114,6 +115,120 @@
"node": ">= 8"
}
},
+ "node_modules/@polymer/font-roboto": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz",
+ "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA=="
+ },
+ "node_modules/@polymer/iron-a11y-keys-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz",
+ "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==",
+ "dependencies": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-behaviors": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz",
+ "integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==",
+ "dependencies": {
+ "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-checked-element-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.1.tgz",
+ "integrity": "sha512-aDr0cbCNVq49q+pOqa6CZutFh+wWpwPMLpEth9swx+GkAj+gCURhuQkaUYhIo5f2egDbEioR1aeHMnPlU9dQZA==",
+ "dependencies": {
+ "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
+ "@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-flex-layout": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
+ "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==",
+ "dependencies": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-form-element-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz",
+ "integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==",
+ "dependencies": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-meta": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz",
+ "integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==",
+ "dependencies": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/iron-validatable-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz",
+ "integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==",
+ "dependencies": {
+ "@polymer/iron-meta": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/paper-behaviors": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz",
+ "integrity": "sha512-6knhj69fPJejv8qR0kCSUY+Q0XjaUf0OSnkjRjmTJPAwSrRYtgqE+l6P1FfA+py1X/cUjgne9EF5rMZAKJIg1g==",
+ "dependencies": {
+ "@polymer/iron-behaviors": "^3.0.0-pre.26",
+ "@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
+ "@polymer/paper-ripple": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/paper-button": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-button/-/paper-button-3.0.1.tgz",
+ "integrity": "sha512-JRNBc+Oj9EWnmyLr7FcCr8T1KAnEHPh6mosln9BUdkM+qYaYsudSICh3cjTIbnj6AuF5OJidoLkM1dlyj0j6Zg==",
+ "dependencies": {
+ "@polymer/iron-flex-layout": "^3.0.0-pre.26",
+ "@polymer/paper-behaviors": "^3.0.0-pre.27",
+ "@polymer/paper-styles": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/paper-ripple": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.2.tgz",
+ "integrity": "sha512-DnLNvYIMsiayeICroYxx6Q6Hg1cUU8HN2sbutXazlemAlGqdq80qz3TIaVdbpbt/pvjcFGX2HtntMlPstCge8Q==",
+ "dependencies": {
+ "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/paper-styles": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",
+ "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==",
+ "dependencies": {
+ "@polymer/font-roboto": "^3.0.1",
+ "@polymer/iron-flex-layout": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "node_modules/@polymer/polymer": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.5.0.tgz",
+ "integrity": "sha512-0OyN+LQ68tudbWYm7BeU4WELiqXvRn1HIpSnW0u7iFTdxJakJGLehh7PFgKL1noe9a0HHSKznQIfz+hMxzgBtA==",
+ "dependencies": {
+ "@webcomponents/shadycss": "^1.9.1"
+ }
+ },
"node_modules/@types/eslint": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.2.tgz",
@@ -519,6 +634,11 @@
"@xtuc/long": "4.2.2"
}
},
+ "node_modules/@webcomponents/shadycss": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.11.0.tgz",
+ "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA=="
+ },
"node_modules/@webpack-cli/configtest": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
@@ -3062,6 +3182,120 @@
"fastq": "^1.6.0"
}
},
+ "@polymer/font-roboto": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.2.tgz",
+ "integrity": "sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA=="
+ },
+ "@polymer/iron-a11y-keys-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.1.tgz",
+ "integrity": "sha512-lnrjKq3ysbBPT/74l0Fj0U9H9C35Tpw2C/tpJ8a+5g8Y3YJs1WSZYnEl1yOkw6sEyaxOq/1DkzH0+60gGu5/PQ==",
+ "requires": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-behaviors": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.1.tgz",
+ "integrity": "sha512-IMEwcv1lhf1HSQxuyWOUIL0lOBwmeaoSTpgCJeP9IBYnuB1SPQngmfRuHKgK6/m9LQ9F9miC7p3HeQQUdKAE0w==",
+ "requires": {
+ "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-checked-element-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.1.tgz",
+ "integrity": "sha512-aDr0cbCNVq49q+pOqa6CZutFh+wWpwPMLpEth9swx+GkAj+gCURhuQkaUYhIo5f2egDbEioR1aeHMnPlU9dQZA==",
+ "requires": {
+ "@polymer/iron-form-element-behavior": "^3.0.0-pre.26",
+ "@polymer/iron-validatable-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-flex-layout": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.1.tgz",
+ "integrity": "sha512-7gB869czArF+HZcPTVSgvA7tXYFze9EKckvM95NB7SqYF+NnsQyhoXgKnpFwGyo95lUjUW9TFDLUwDXnCYFtkw==",
+ "requires": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-form-element-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.1.tgz",
+ "integrity": "sha512-G/e2KXyL5AY7mMjmomHkGpgS0uAf4ovNpKhkuUTRnMuMJuf589bKqE85KN4ovE1Tzhv2hJoh/igyD6ekHiYU1A==",
+ "requires": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-meta": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.1.tgz",
+ "integrity": "sha512-pWguPugiLYmWFV9UWxLWzZ6gm4wBwQdDy4VULKwdHCqR7OP7u98h+XDdGZsSlDPv6qoryV/e3tGHlTIT0mbzJA==",
+ "requires": {
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/iron-validatable-behavior": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.1.tgz",
+ "integrity": "sha512-wwpYh6wOa4fNI+jH5EYKC7TVPYQ2OfgQqocWat7GsNWcsblKYhLYbwsvEY5nO0n2xKqNfZzDLrUom5INJN7msQ==",
+ "requires": {
+ "@polymer/iron-meta": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/paper-behaviors": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.1.tgz",
+ "integrity": "sha512-6knhj69fPJejv8qR0kCSUY+Q0XjaUf0OSnkjRjmTJPAwSrRYtgqE+l6P1FfA+py1X/cUjgne9EF5rMZAKJIg1g==",
+ "requires": {
+ "@polymer/iron-behaviors": "^3.0.0-pre.26",
+ "@polymer/iron-checked-element-behavior": "^3.0.0-pre.26",
+ "@polymer/paper-ripple": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/paper-button": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-button/-/paper-button-3.0.1.tgz",
+ "integrity": "sha512-JRNBc+Oj9EWnmyLr7FcCr8T1KAnEHPh6mosln9BUdkM+qYaYsudSICh3cjTIbnj6AuF5OJidoLkM1dlyj0j6Zg==",
+ "requires": {
+ "@polymer/iron-flex-layout": "^3.0.0-pre.26",
+ "@polymer/paper-behaviors": "^3.0.0-pre.27",
+ "@polymer/paper-styles": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/paper-ripple": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.2.tgz",
+ "integrity": "sha512-DnLNvYIMsiayeICroYxx6Q6Hg1cUU8HN2sbutXazlemAlGqdq80qz3TIaVdbpbt/pvjcFGX2HtntMlPstCge8Q==",
+ "requires": {
+ "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/paper-styles": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.1.tgz",
+ "integrity": "sha512-y6hmObLqlCx602TQiSBKHqjwkE7xmDiFkoxdYGaNjtv4xcysOTdVJsDR/R9UHwIaxJ7gHlthMSykir1nv78++g==",
+ "requires": {
+ "@polymer/font-roboto": "^3.0.1",
+ "@polymer/iron-flex-layout": "^3.0.0-pre.26",
+ "@polymer/polymer": "^3.0.0"
+ }
+ },
+ "@polymer/polymer": {
+ "version": "3.5.0",
+ "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.5.0.tgz",
+ "integrity": "sha512-0OyN+LQ68tudbWYm7BeU4WELiqXvRn1HIpSnW0u7iFTdxJakJGLehh7PFgKL1noe9a0HHSKznQIfz+hMxzgBtA==",
+ "requires": {
+ "@webcomponents/shadycss": "^1.9.1"
+ }
+ },
"@types/eslint": {
"version": "8.4.2",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.2.tgz",
@@ -3368,6 +3602,11 @@
"@xtuc/long": "4.2.2"
}
},
+ "@webcomponents/shadycss": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.11.0.tgz",
+ "integrity": "sha512-L5O/+UPum8erOleNjKq6k58GVl3fNsEQdSOyh0EUhNmi7tHUyRuCJy1uqJiWydWcLARE5IPsMoPYMZmUGrz1JA=="
+ },
"@webpack-cli/configtest": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.1.tgz",
diff --git a/package.json b/package.json
index 4ce1444..74a3012 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"license": "MIT",
"private": true,
"dependencies": {
+ "@polymer/paper-button": "^3.0.1",
"chrome-types": "^0.1.113",
"clean-terminal-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^4.0.0",
diff --git a/src/options/credits.json5 b/src/options/credits.json5
index 56220e2..ac911a6 100644
--- a/src/options/credits.json5
+++ b/src/options/credits.json5
@@ -17,6 +17,12 @@
"license": "MIT License"
},
{
+ "name": "@polymer/paper-button",
+ "url": "https://github.com/PolymerElements/paper-button",
+ "author": "The Polymer Project Authors",
+ "license": "BSD-style License"
+ },
+ {
"name": "chrome-types",
"url": "https://github.com/GoogleChrome/chrome-types",
"author": "Google LLC",
diff --git a/src/options/elements/options-editor/languages-editor.ts b/src/options/elements/options-editor/languages-editor.ts
index 64c3f84..c48a3b6 100644
--- a/src/options/elements/options-editor/languages-editor.ts
+++ b/src/options/elements/options-editor/languages-editor.ts
@@ -1,3 +1,4 @@
+import '@polymer/paper-button/paper-button.js';
import './add-language-dialog';
import {css, html, LitElement} from 'lit';
@@ -48,25 +49,28 @@
#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;
+ font-size: 15px;
+ }
+
+ #languages li .movebtn:not([disabled]) {
+ color: #1f649d;
}
#languages li :is(.delete, .movebtn) {
- cursor: pointer;
- text-align: center;
+ font-family: inherit!important;
+ min-width: 28px;
+ width: 28px;
+ min-height: 28px;
+ height: 28px;
+ padding: 4px;
+ margin: 0;
}
- #languages li .movebtn--disabled {
- color: gray;
- cursor: not-allowed;
+ #languages li paper-button:is(:hover, :focus) {
+ background: rgba(0, 0, 0, 0.06);
}
#languages_footer {
@@ -91,32 +95,32 @@
const moveBtns = [];
if (i != 0) {
moveBtns.push(html`
- <button
- class="notbtn movebtn"
+ <paper-button
+ class="movebtn"
@click=${() => this.swapLanguages(i, i - 1)}>
↑
- </button>
+ </paper-button>
`);
} else {
moveBtns.push(html`
- <button class="notbtn movebtn movebtn--disabled">
+ <paper-button class="movebtn" disabled>
↑
- </button>
+ </paper-button>
`);
}
if (i != languageCodes.length - 1) {
moveBtns.push(html`
- <button
- class="notbtn movebtn"
+ <paper-button
+ class="movebtn"
@click=${() => this.swapLanguages(i, i + 1)}>
↓
- </button>
+ </paper-button>
`);
} else {
moveBtns.push(html`
- <button class="notbtn movebtn movebtn--disabled">
+ <paper-button class="movebtn" disabled>
↓
- </button>
+ </paper-button>
`);
}
@@ -126,11 +130,11 @@
${isoLangs?.[lang]?.['name']} (${isoLangs?.[lang]?.nativeName})
</span>
${moveBtns}
- <button
- class="notbtn delete"
+ <paper-button
+ class="delete"
@click=${() => this.deleteLanguage(lang)}>
×
- </button>
+ </paper-button>
</li>
`;
});
diff --git a/src/options/options.ts b/src/options/options.ts
index ab51979..6c3004a 100644
--- a/src/options/options.ts
+++ b/src/options/options.ts
@@ -49,7 +49,9 @@
display: block;
padding: 10px;
margin: 14px 17px;
- font-family: "Roboto", "Arial", sans-serif!important;
+ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+ Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+ 'Segoe UI Emoji', 'Segoe UI Symbol'!important;
}
#credits_container {
diff --git a/webpack.config.js b/webpack.config.js
index f5d0010..c66738d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -83,6 +83,9 @@
{loader: 'source-map-loader'},
preprocessorLoader,
],
+ exclude: [
+ path.resolve(__dirname, 'node_modules'),
+ ],
},
{
test: /\.tsx?$/,