Reimagine the badge

Trac 27385

proxy/webext/embed.js

@@ -1,36 +1,9 @@
-/* global chrome */
+/* global chrome, Popup */
 
 const port = chrome.runtime.connect({
   name: "popup"
 });
 
-class Popup {
-  constructor() {
-    this.div = document.getElementById('active');
-    this.ps = this.div.querySelectorAll('p');
-    this.img = this.div.querySelector('img');
-  }
-  setImgSrc(src) {
-    this.img.src = `icons/status-${src}.png`;
-  }
-  setStatusText(txt) {
-    this.ps[0].innerText = txt;
-  }
-  setStatusDesc(desc, color) {
-    this.ps[1].innerText = desc;
-    this.ps[1].style.color = color || 'black';
-  }
-  hideButton() {
-    document.querySelector('.button').style.display = 'none';
-  }
-  setChecked(checked) {
-    document.getElementById('enabled').checked = checked;
-  }
-  setToggleText(txt) {
-    document.getElementById('toggle').innerText = txt;
-  }
-}
-
 port.onMessage.addListener((m) => {
   const { active, enabled, total, missingFeature } = m;
   const popup = new Popup();

proxy/webext/icons/arrowhead-right-12.svg

@@ -1,4 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="context-fill" d="M9 6a1 1 0 0 0-.293-.707l-3-3a1 1 0 0 0-1.414 1.414L6.586 6 4.293 8.293a1 1 0 0 0 1.414 1.414l3-3A1 1 0 0 0 9 6z"/></svg>

proxy/webext/manifest.json

@@ -1,18 +1,18 @@
 {
-	"manifest_version": 2,
-	"name": "Snowflake",
-	"version": "0.0.8",
-	"description": "Snowflake is a WebRTC pluggable transport for Tor.",
-	"background": {
-		"scripts": ["snowflake.js"],
-		"persistent": true
-	},
-	"browser_action": {
-		"default_icon": {
-			"32": "icons/status-on.png"
-		},
-		"default_title": "Snowflake",
-		"default_popup": "popup.html"
-	},
-	"permissions": ["storage"]
+  "manifest_version": 2,
+  "name": "Snowflake",
+  "version": "0.0.8",
+  "description": "Snowflake is a WebRTC pluggable transport for Tor.",
+  "background": {
+    "scripts": ["snowflake.js"],
+    "persistent": true
+  },
+  "browser_action": {
+    "default_icon": {
+      "32": "icons/status-on.png"
+    },
+    "default_title": "Snowflake",
+    "default_popup": "embed.html"
+  },
+  "permissions": ["storage"]
 }

proxy/webext/popup.css

@@ -1,108 +0,0 @@
-body {
-  margin: 10px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  width: 300px;
-  font-size:12px;
-}
-
-#active {
-  margin: 20px 0;
-  text-align: center;
-}
-
-.b {
-  border-top: 1px solid gainsboro;
-  padding: 10px;
-  position: relative;
-}
-
-.b a {
-  color: black;
-  display: inline-block;
-  text-decoration: none;
-}
-
-.learn:before {
-  content : " ";
-  display: block;
-  position: absolute;
-  top: 12px;
-  background-image: url(../icons/arrowhead-right-12.svg);
-  width: 12px;
-  height: 12px;
-  opacity : 0.6;
-  z-index: 9999;
-  right: 0px;
-  margin-right: 10px;
-
-}
-
-/* Snowflake Status */
-
-.transfering {
-  -webkit-animation:spin 8s linear infinite;
-  -moz-animation:spin 8s linear infinite;
-  animation:spin 8s linear infinite;
-
-  fill: BlueViolet;
-}
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-
-
-/* Toggle */
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 30px;
-  height: 17px;
-  float: right;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border-radius: 17px;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 13px;
-  width: 13px;
-  left: 2px;
-  bottom: 2px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: BlueViolet;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px BlueViolet;
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(13px);
-  -ms-transform: translateX(13px);
-  transform: translateX(13px);
-}

proxy/webext/popup.html

@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="popup.css" />
-    <script src="popup.js"></script>
-  </head>
-  <body>
-    <div id="active">
-      <img src="icons/status-on.png" />
-        <p></p>
-        <p></p>
-    </div>
-    <div class="b button">
-      <label id="toggle" for="enabled">Turn On</label>
-      <label class="switch">
-        <input id="enabled" type="checkbox" checked/>
-        <span class="slider round"></span>
-      </label>
-    </div>
-    <div class="b learn">
-      <a target="_blank" href="https://snowflake.torproject.org/">Learn more</a>
-    </div>
-  </body>
-</html>