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?$/,