Make proxy & nativeMessaging permissions optional

.travis.yml

@@ -5,3 +5,6 @@ node_js:
 notifications:
     irc:
         - "ircs://irc.mozilla.org:6697/#testpilot-containers-bots"
+
+install:
+    - npm install --legacy-peer-deps

bin/build-addon.sh

@@ -11,7 +11,7 @@ git submodule init || die
 git submodule update --remote --depth 1 src/_locales || die
 
 print Y "Installing dependencies..."
-npm install || die
+npm install --legacy-peer-deps || die
 
 print Y "Running tests..."
 npm test

package.json

@@ -9,12 +9,12 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "addons-linter": "^1.3.2",
+    "addons-linter": "^3.23.0",
     "ajv": "^6.6.3",
     "chai": "^4.2.0",
-    "eslint": "^6.6.0",
-    "eslint-plugin-no-unsanitized": "^2.0.0",
-    "eslint-plugin-promise": "^3.4.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-no-unsanitized": "^4.0.0",
+    "eslint-plugin-promise": "^5.2.0",
     "htmllint-cli": "0.0.7",
     "json": ">=10.0.0",
     "mocha": "^6.2.2",

src/css/options.css

@@ -1,29 +1,122 @@
 body {
+  --grey10: #e7e7e7;
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background: #fff;
-  color: #202023;
+  color: rgb(74, 74, 79);
+  font-size: 13px;
+  overflow: hidden;
 }
 
-h3 {
+h3:first-of-type {
   margin-block-start: 2.5rem;
 }
 
-h3:first-of-type {
-  margin-block-start: 1rem;
+label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
 }
 
-p,
-label {
-  color: rgb(74, 74, 79);
+label > span {
+  padding-inline-end: 4px;
+}
+
+.settings-group {
+  margin-block-end: 16px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 1rem;
+}
+
+.settings-group p {
+  margin-inline-start: 24px;
+  margin-block: 4px 8px;
+}
+
+input[type="checkbox"] {
+  margin-inline: 0 8px;
+  margin-block: 1px auto;
+  inline-size: 16px;
+  block-size: 16px;
+}
+
+button {
+  margin-inline: 0 auto;
+}
+
+.keyboard-shortcut {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  max-inline-size: 70%;
+  align-items: center;
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.moz-vpn-proxy-permissions {
+  margin-block: 0 2rem;
+  padding-block-end: 1rem;
+  border-block-end: 1px solid var(--grey10);
+  display: flex;
+  flex-direction: column;
+}
+
+h3.moz-vpn-proxy-permissions-title {
+  margin-block-start: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.warning-icon {
+  display: flex;
+  align-items: center;
+}
+
+.warning-icon.show-warning::before {
+  background-image: url("/img/warning.svg");
+  background-size: 24px;
+  background-repeat: no-repeat;
+  background-position: center;
+  content: "";
+  display: block;
+  block-size: 24px;
+  inline-size: 24px;
+  margin-inline-end: 0.5rem;
+}
+
+.moz-vpn-proxy-permissions-title::before,
+.moz-vpn-proxy-permissions-title::after {
+  background-color: var(--grey10);
+  content: "";
+  height: 1px;
+  flex: 1 1 0%;
+}
+
+h3.moz-vpn-proxy-permissions-title::before {
+  margin-inline-end: 2rem;
+  margin-inline-start: -50%;
+}
+
+h3.moz-vpn-proxy-permissions-title::after {
+  margin-inline-start: 2rem;
+  margin-inline-end: -50%;
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    background: #202023;
+    background: #23212a;
     color: #fff;
   }
 
-  p,
-  label {
+  p {
     color: rgb(177, 177, 179);
   }
 }