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/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>