Initial commit starting at version 10.1.8.3rc4.

18 files changed, 2689 insertions, 0 deletions

diff --git a/src/ui/Prompts.js b/src/ui/Prompts.js
new file mode 100644
index 0000000..03ea9ee
--- /dev/null
+++ b/src/ui/Prompts.js
@@ -0,0 +1,101 @@
+var Prompts = (() => {
+
+
+  var promptData;
+  var backlog = [];
+  class WindowManager {
+    async open(data) {
+      promptData = data;
+      this.close();
+      this.currentWindow = await browser.windows.create({
+        url: browser.extension.getURL("ui/prompt.html"),
+        type: "panel",
+        allowScriptsToClose: true,
+      //  titlePreface: "NoScript ",
+        width: data.features.width,
+        height: data.features.height,
+      });
+    }
+    async close() {
+      if (this.currentWindow) {
+        try {
+          await browser.windows.remove(this.currentWindow.id);
+        } catch (e) {
+          debug(e);
+        }
+        this.currentWindow = null;
+      }
+    }
+
+    async focus() {
+      if (this.currentWindow) {
+        try {
+          await browser.windows.update(this.currentWindow.id,
+            {
+              focused: true,
+            }
+          );
+        } catch (e) {
+          error(e, "Focusing popup window");
+        }
+      }
+    }
+  }
+
+  var winMan = new WindowManager();
+  var Prompts = {
+    DEFAULTS: {
+      title: "",
+      message: "Proceed?",
+      options: [],
+      checks: [],
+      buttons: [_("Ok"), _("Cancel")],
+      multiple: "close", // or "queue", or "focus"
+      width: 400,
+      height: 300,
+    },
+    async prompt(features) {
+      features = Object.assign({}, this.DEFAULTS, features || {});
+      return new Promise((resolve, reject) => {
+        let data = {
+          features,
+          result: {
+            button: -1,
+            checks: [],
+            option: null,
+          },
+          done() {
+            this.done = () => {};
+            winMan.close();
+            resolve(this.result);
+            if (backlog.length) {
+              winMan.open(backlog.shift());
+            } else {
+              promptData = null;
+            }
+          }
+        };
+        if (promptData) {
+          backlog.push(data);
+          switch(promptData.features.multiple) {
+            case "focus":
+              winMan.focus();
+            case "queue":
+            break;
+            default:
+              promptData.done();
+          }
+        } else {
+          winMan.open(data);
+        }
+      });
+    },
+
+    get promptData() {
+      return promptData;
+    }
+  }
+
+  return Prompts;
+
+})();
diff --git a/src/ui/options.css b/src/ui/options.css
new file mode 100644
index 0000000..f7db24b
--- /dev/null
+++ b/src/ui/options.css
@@ -0,0 +1,187 @@
+
+/* @import url("chrome://browser/content/extension.css"); */
+body {
+  background: #eee url("/img/noscript-options.png") no-repeat fixed top right;
+  background-size: 8em;
+  padding: 0 2em 0 0;
+  margin: 0.5em 0.5em 0.5em 0.5em;
+}
+.mobile body {
+  background-size: 4em;
+  padding-right: 0;
+}
+
+
+#header {
+  display: flex;
+  flex-flow: column;
+  padding: 0;
+  margin: 0 6em 0 0;
+  text-align: right;
+}
+#header h1 {
+  color: #048;
+  text-shadow: 0.06em 0.06em 0.06em rgba(0,0,0,.5);
+  font-size: 2em;
+  padding: 0;
+  margin: 0;
+  text-align: right;
+}
+#version {
+  color: #048;
+  font-size: 0.75em;
+  padding: 0;
+  margin: 0 0 0.5em;
+  display: block;
+  text-align: right;
+}
+
+.buttons {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-end;
+  width: 100%;
+  text-align: right;
+}
+
+#sect-general {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  font-size: 1em;
+}
+
+#sect-general label, #sect-general button, #sect-general span {
+  white-space: nowrap;
+}
+
+.opt-group {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  border-bottom: 1px solid rgba(255, 255, 255, .5);
+  padding: .5em 0;
+}
+
+.opt-group:last-child {
+  border-bottom: none;
+  margin-bottom: .5em;
+}
+
+section form, section fieldset {
+  margin: .5em 0;
+}
+
+fieldset:disabled {
+  opacity: .5;
+}
+
+.opt-group > span {
+  margin: 0 .5em;
+}
+
+.sect-sites form {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.sect-sites form > label {
+  white-space: nowrap;
+}
+#newsite {
+  flex: 2 2;
+}
+
+#policy {
+  display: block;
+  margin-top: .5em;
+  min-height: 20em;
+  width: 90%;
+}
+.hide, div.debug {
+  display: none;
+}
+
+body.debug div.debug {
+  display: initial;
+}
+
+.error {
+  background: #ff8;
+  color: red;
+}
+
+#policy-error {
+  background: red;
+  color: #ff8;
+  padding: 0;
+  margin: 0;
+  font-weight: bold;
+}
+
+input, button {
+  font-size: 1em;
+}
+
+button.add {
+  font-weight: bold;
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.opt-group {
+  padding: 0.5em 0;
+}
+#xssFaq {
+  padding: 0.5em 1em;
+}
+#clearclick-options {
+  display: none;
+}
+
+
+.flextabs__tab {
+  /* shift all tabs to appear before content */
+  order: -1;
+  /* let tabs scale to fit multiple on each row */
+  width: auto;
+  margin: 0;
+}
+.flextabs__content--active {
+  /* ignore states activated for multi (accordion) toggle view */
+  display: none;
+}
+.flextabs__content--active--last {
+  /* show the last activated item */
+  display: block;
+}
+
+.flextabs__content, .flextabs__toggle[aria-expanded="true"] {
+  background-color: rgba(200, 200, 200, .5) !important;
+  border: 0 solid #888;
+}
+
+.flextabs__toggle {
+  -moz-appearance: none;
+  border-width: 0 1px 0 0 !important;
+  margin: 0 4px 0 0;
+  background: #ccc;
+  outline-width: 1px 0 0 0 !important;
+}
+
+
+
+.flextabs__content {
+  border-width: 0 1px 1px 0;
+  border-radius: 0 .5em 0 0;
+  padding: .5em;
+}
+
+.flextabs__toggle {
+  border-radius: .2em .2em 0 0;
+  padding: .2em .4em;
+}
diff --git a/src/ui/options.html b/src/ui/options.html
new file mode 100644
index 0000000..433a1bd
--- /dev/null
+++ b/src/ui/options.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>NoScript Settings</title>
+<meta charset="utf-8">
+<link rel="icon" href="/img/noscript-options.png">
+<link rel="stylesheet" href="/lib/flextabs.css" />
+<link rel="stylesheet" href="options.css" />
+<link rel="stylesheet" href="whirlpool.css" />
+<script src="/lib/include.js"></script>
+<script src="/lib/log.js"></script>
+<script src="/lib/flextabs.js"></script>
+<script src="/common/locale.js"></script>
+<script src="/ui/ui.js"></script>
+</head>
+<body>
+<div id="header">
+<h1 >
+NoScript Options
+</h1>
+<div>
+<span id="version"></span>
+</div>
+
+<div class="buttons">
+<span><input id="file-import" type="file"/></span>
+<button id="btn-import" accesskey="__MSG_Import_accesskey__">__MSG_Import__</button>
+<button id="btn-export" accesskey="__MSG_Export_accesskey__">__MSG_Export__</button>
+<button id="btn-reset" accesskey="__MSG_Reset_accesskey__">__MSG_Reset__</button>
+</div>
+</div>
+<section id="sect-io">
+
+</section>
+
+<div id="main-tabs" class="flextabs">
+
+<h3 class="flextabs__tab"><button class="flextabs__toggle">__MSG_SectionGeneral__</button></h3>
+<div class="flextabs__content flextabs__content--active--last">
+  <section id="sect-general">
+  <div class="opt-group">
+  <span id="global-opt">
+  <input type="checkbox" id="opt-global"><label for="opt-global" id="lbl-global">__MSG_NoEnforcement__</label>
+  </span>
+  <span id="auto-opt">
+  <input type="checkbox" class="enforcement_required" id="opt-auto"><label for="opt-auto" id="lbl-auto">__MSG_AutoAllowTopLevel__</label>
+  </span>
+
+  </div>
+
+  <fieldset class="enforcement_required">
+    <legend accesskey="__MSG_CustomizePresets_accesskey__">__MSG_CustomizePresets__</legend>
+    <div id="presets"></div>
+  </fieldset>
+  </section>
+</div>
+
+<h3 class="flextabs__tab"><button class="flextabs__toggle enforcement_required">__MSG_SectionSitePermissions__</button></h3>
+<div class="flextabs__content">
+  <section class="sect-sites">
+  <form id="form-newsite" class="browser-style" >
+  <label id="newsite-label" for="newsite" accesskey="__MSG_WebAddress_accesskey__">__MSG_WebAddress__</label><input name="newsite" id="newsite" type="text" placeholder="[https://]noscript.net"
+  ><button class="add">+</button>
+  </form>
+  <div id="sites">
+    <div class="cssload-container">
+  	   <div class="cssload-whirlpool"></div>
+    </div>
+  </div>
+  </section>
+</div>
+
+<h3 class="flextabs__tab appearance_tab"><button class="flextabs__toggle">__MSG_SectionAppearance__</button></h3>
+<div class="flextabs__content appearance_tab">
+  <div class="opt-group desktop">
+    <span id="showCtxMenuItem-opt">
+    <input type="checkbox" id="opt-showCtxMenuItem">
+    <label for="opt-showCtxMenuItem" id="lbl-showCtxMenuItem">__MSG_ShowCtxMenuItem__</label>
+    </span>
+  </div>
+  <div class="opt-group desktop">
+    <span id="showCountBadge-opt">
+    <input type="checkbox" id="opt-showCountBadge">
+    <label for="opt-showCountBadge" id="lbl-showCountBadge">__MSG_ShowCountBadge__</label>
+    </span>
+  </div>
+  <div class="opt-group">
+    <span id="showFullAddresses-opt">
+    <input type="checkbox" id="opt-showFullAddresses">
+    <label for="opt-showFullAddresses" id="lbl-showFullAddresses">__MSG_ShowFullAddresses__</label>
+    </span>
+  </div>
+</div>
+
+<h3 class="flextabs__tab"><button class="flextabs__toggle">__MSG_SectionAdvanced__</button></h3>
+<div class="flextabs__content">
+  <div class="opt-group">
+  <span id="xss-opts">
+    <input type="checkbox" id="opt-xss"><label for="opt-xss" id="lbl-xss">__MSG_OptFilterXGet__</label>
+  <span id="xssFaq">(<a href="https://noscript.net/faq#xss" title="https://noscript.net/faq#xss">__MSG_XssFaq__</a>)</span>
+  </span>
+  <button id="btn-delete-xss-choices" disabled>__MSG_XSS_clearUserChoices__</button>
+  </div>
+  <div id="clearclick-options" class="opt-group">
+  <input type="checkbox" id="opt-clearclick"><label for="opt-clearclick" id="lbl-clearclick">ClearClick</label>
+  </div>
+
+  <section id="debug" class="browser-style">
+  <div class="opt-group">
+    <span><input type="checkbox" id="opt-debug"><label id="label-debug" for="opt-debug">Debug</label></span>
+  </div>
+  <div id="debug-tools" class="debug browser-style">
+  <label for="policy">Policy:</label>
+  <div id="policy-error"></div>
+  <textarea id="policy" class="browser-style">
+  </textarea>
+  </div>
+  </section>
+</div>
+</div>
+<script src="/lib/persistent-tabs.js"></script>
+<script src="options.js"></script>
+</body>
+</html>
diff --git a/src/ui/options.js b/src/ui/options.js
new file mode 100644
index 0000000..79e6cb7
--- /dev/null
+++ b/src/ui/options.js
@@ -0,0 +1,220 @@
+'use strict';
+(async () => {
+
+  await UI.init();
+
+  let policy = UI.policy;
+
+  let version = browser.runtime.getManifest().version;
+  document.querySelector("#version").textContent = _("Version", version);
+  // simple general options
+  opt("global", o => {
+    if (o) {
+      policy.enforced = !o.checked;
+      UI.updateSettings({policy});
+    }
+    let {enforced} = policy;
+    let disabled = !enforced;
+    for (let e of document.querySelectorAll(".enforcement_required")) {
+      e.disabled = disabled;
+    }
+    return disabled;
+  });
+
+  opt("auto", o => {
+    if (o) {
+      policy.autoAllowTop = o.checked;
+      UI.updateSettings({policy});
+    }
+    return policy.autoAllowTop;
+  });
+
+  opt("xss");
+
+  {
+    let button = document.querySelector("#btn-reset");
+    button.onclick = async () => {
+      if (confirm(_("reset_warning"))) {
+        policy = new Policy();
+        await UI.updateSettings({policy, local: null, sync: null, xssUserChoices: {}});
+        window.location.reload();
+      }
+    }
+
+    let fileInput = document.querySelector("#file-import");
+    fileInput.onchange = () => {
+      let fr = new FileReader();
+      fr.onload = async () => {
+        try {
+          await UI.importSettings(fr.result);
+        } catch (e) {
+          error(e, "Importing settings %s", fr.result);
+        }
+        location.reload();
+      }
+      fr.readAsText(fileInput.files[0]);
+    }
+
+    button = document.querySelector("#btn-import");
+    button.onclick = () => fileInput.click();
+
+    document.querySelector("#btn-export").addEventListener("click", async e => {
+      let button = e.target;
+      button.disabled = true;
+      let settings = await UI.exportSettings();
+      let f = document.createElement("iframe");
+      f.srcdoc = `<a download="noscript_data.txt" target="_blank">NoScript Export</a>`;
+      f.style.position = "fixed";
+      f.style.top = "-999px";
+      f.style.height = "1px";
+      f.onload = () => {
+        let w = f.contentWindow;
+        let a = w.document.querySelector("a");
+        a.href = w.URL.createObjectURL(new w.Blob([settings], {
+          type: "text/plain"
+        }));
+        a.click();
+        setTimeout(() => {
+          f.remove();
+          button.disabled = false;
+        }, 1000);
+
+      };
+      document.body.appendChild(f);
+    });
+  }
+
+  {
+    let a = document.querySelector("#xssFaq a");
+    a.onclick = e => {
+      e.preventDefault();
+      browser.tabs.create({
+        url: a.href
+      });
+    }
+    let button = document.querySelector("#btn-delete-xss-choices");
+    let choices = UI.xssUserChoices;
+    button.disabled = Object.keys(choices).length === 0;
+    button.onclick = () => {
+      UI.updateSettings({
+        xssUserChoices: {}
+      });
+      button.disabled = true
+    };
+
+  }
+
+  opt("clearclick");
+  opt("debug", "local", b => {
+    document.body.classList.toggle("debug", b);
+    if (b) updateRawPolicyEditor();
+  });
+
+  // Appearance
+
+  opt("showCountBadge", "local");
+  opt("showCtxMenuItem", "local");
+  opt("showFullAddresses", "local");
+
+  // PRESET CUSTOMIZER
+  {
+    let parent = document.getElementById("presets");
+    let presetsUI = new UI.Sites(parent,
+      {"DEFAULT": true, "TRUSTED": true, "UNTRUSTED": true});
+
+    presetsUI.render([""]);
+    window.setTimeout(() => {
+      let def = parent.querySelector('input.preset[value="DEFAULT"]');
+      def.checked = true;
+      def.click();
+    }, 10);
+  }
+
+  // SITES UI
+  let sitesUI = new UI.Sites(document.getElementById("sites"));
+  {
+    sitesUI.onChange = () => {
+      if (UI.local.debug) {
+        updateRawPolicyEditor();
+      }
+    };
+    let sites = policy.sites;
+    sitesUI.render(sites);
+
+    let newSiteForm = document.querySelector("#form-newsite");
+    let newSiteInput = newSiteForm.newsite;
+    let button = newSiteForm.querySelector("button");
+    let canAdd = s => policy.get(s).siteMatch === null;
+
+    let validate = () => {
+      let site = newSiteInput.value.trim();
+      button.disabled = !(Sites.isValid(site) && canAdd(site));
+      sitesUI.filterSites(site);
+    }
+    validate();
+    newSiteInput.addEventListener("input", validate);
+
+    newSiteForm.addEventListener("submit", e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let site = newSiteInput.value.trim();
+      let valid = Sites.isValid(site);
+      if (valid && canAdd(site)) {
+        policy.set(site, policy.TRUSTED);
+        UI.updateSettings({policy});
+        newSiteInput.value = "";
+        sitesUI.render(policy.sites);
+        sitesUI.highlight(site);
+        sitesUI.onChange();
+      }
+    }, true);
+  }
+
+
+  // UTILITY FUNCTIONS
+
+  async function opt(name, storage = "sync", onchange) {
+    let input = document.querySelector(`#opt-${name}`);
+    if (!input) {
+      debug("Checkbox not found %s", name);
+      return;
+    }
+    if (typeof storage === "function") {
+      input.onchange = e => storage(input);
+      input.checked = storage(null);
+    } else {
+      let obj = UI[storage];
+      if (!obj) log(storage);
+      input.checked = obj[name];
+      if (onchange) onchange(input.checked);
+      input.onchange = async () => {
+        obj[name] = input.checked;
+        await UI.updateSettings({[storage]: obj});
+        if (onchange) onchange(obj[name]);
+      }
+    }
+  }
+
+
+  function updateRawPolicyEditor() {
+    if (!UI.local.debug) return;
+
+    // RAW POLICY EDITING (debug only)
+    let policyEditor = document.getElementById("policy");
+    policyEditor.value = JSON.stringify(policy.dry(true), null, 2);
+    if (!policyEditor.onchange) policyEditor.onchange = (e) => {
+      let ed = e.currentTarget
+      try {
+        policy = new Policy(JSON.parse(ed.value));
+        UI.updateSettings({policy});
+        sitesUI.render(policy.sites);
+        ed.className = "";
+        document.getElementById("policy-error").textContent = "";
+      } catch (e) {
+        error(e);
+        ed.className = "error";
+        document.getElementById("policy-error").textContent = e.message;
+      }
+    }
+  }
+})();
diff --git a/src/ui/popup.css b/src/ui/popup.css
new file mode 100644
index 0000000..f8b31e2
--- /dev/null
+++ b/src/ui/popup.css
@@ -0,0 +1,235 @@
+body {
+  background: white;
+}
+
+#top {
+  font-size: 1em;
+  position: relative;
+  margin: 0;
+  height: 2.4em;
+  min-width: 18.75em;
+  border-bottom: 0.06em solid #eee;
+  display: flex;
+  -moz-user-select: none;
+}
+
+
+#top a {
+  appearance: none !important;
+  -moz-appearance: none !important;
+  width: 2em;
+  height: 2em;
+  margin: 0.25em;
+  cursor: pointer;
+  font-size: 1em;
+  font-family: sans-serif;
+  font-weight: bold;
+  color: black;
+  background: transparent no-repeat center;
+  background-size: 100%;
+  transform: unset;
+  transition: all 0.3s;
+  border: none;
+  display: block;
+
+  top: 0;
+  padding: 0;
+  text-align: left;
+  vertical-align: middle;
+  line-height: 1em;
+
+}
+
+#top > .spacer {
+  flex-grow: 1;
+  display: block;
+  cursor: pointer;
+}
+
+
+
+#top > .hider.open  ~ .spacer {
+  display: none;
+}
+
+.hider {
+  background: #ccc;
+  box-shadow: inset 0 1px 3px #444;
+  border-radius: 1em 1em 0 0;
+  display: none;
+  position: relative;
+  margin: .25em 1.5em;
+  padding: 0;
+
+  height: 2em;
+  overflow: hidden;
+  opacity: .5;
+}
+
+
+
+.hider.open {
+  display: flex;
+  flex-grow: 1;
+  opacity: 1;
+  padding-left: 2em;
+}
+.hider:hover {
+  opacity: 1;
+}
+.hider:not(.open):not(.empty) {
+  display: block;
+  text-align: right;
+  line-height: 1em;
+  overflow: hidden;
+  width: 2em;
+}
+
+
+.reveal {
+  display: block;
+  padding: .3em;
+  margin: 0;
+}
+
+.hider.open > .reveal {
+  display: none !important;
+}
+
+.hider:not(.open) > :not(.reveal) {
+  display: none !important;
+}
+
+.hider-label {
+  position: absolute;
+  z-index: 100;
+  top: .5em;
+  right: .5em;
+  color: #222;
+  text-align: right;
+  vertical-align: middle;
+  line-height: 100%;
+  font-size: 1em;
+  font-weight: bold;
+  pointer-events: none;
+  text-shadow: -2px 0 2px white, 2px 0 2px white;
+}
+
+.hider-close {
+  -moz-appearance: none;
+  appearance: none;
+  color: black;
+  background: transparent;
+  padding: 0;
+  border-radius: .2em;
+  border: none;
+  position: absolute;
+  left: .2em;
+  top: 0;
+  font-size: 1em;
+  z-index: 100;
+  vertical-align: middle;
+  padding: .2em;
+}
+
+.hider-close:hover, .reveal:hover {
+  color: white !important;
+  text-shadow: -2px 0 2px red, 2px 0 2px red;
+}
+
+.hider > .icon {
+  opacity: .7;
+  margin: 0 .25em;
+  padding: 0;
+}
+
+#top > a:hover {
+  transform: scale(1.2);
+}
+
+#top a.icon {
+  text-indent: -500em;
+  color: transparent;
+}
+
+
+#top #revoke-temp {
+  background-image: url(/img/ui-revoke-temp64.png);
+}
+#top #temp-trust-page {
+  background-image: url(/img/ui-temp-all64.png);
+}
+
+#top #enforce-tab {
+  background-image: url(/img/ui-tab-no64.png);
+}
+#top #enforce-tab[aria-pressed="true"] {
+  background-image: url(/img/ui-tab64.png);
+}
+
+#top #enforce {
+  background-image: url(/img/ui-global-no64.png);
+}
+#top #enforce[aria-pressed="true"] {
+  background-image: url(/img/ui-global64.png);
+}
+
+#top #options {
+  background-image: url(/img/noscript-options.png);
+}
+#top #close {
+  background-image: url(/img/ui-close64.png);
+}
+
+#top #reload {
+  background-image: url(/img/ui-reload64.png);
+}
+
+#sites {
+  margin: 0.5em 0.25em;
+}
+
+#content {
+  text-align: center;
+}
+#buttons {
+  text-align: center;
+  margin: 0.5em;
+  display: flex;
+  justify-content: space-around;
+
+}
+#buttons button {
+  flex-grow: 1;
+  margin: .5em 2em;
+}
+
+.disabled .toggle.icon, .toggle.icon:disabled {
+  opacity: .2;
+  pointer-events: none;
+}
+
+#message {
+  height: auto;
+  margin: .5em;
+  padding: .8em 0 0 2.5em;
+  background-size: 2em;
+  background-position: left top;
+  background-repeat: no-repeat;
+  min-height: 3em;
+  transition: height .5s;
+  font-size: 1.2em;
+  vertical-align: middle;
+}
+#message.hidden {
+  display: none;
+  height: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.warning {
+  background-image: url("/img/warning64.png");
+}
+.error {
+  background-image: url("/img/error64.png");
+}
diff --git a/src/ui/popup.html b/src/ui/popup.html
new file mode 100644
index 0000000..d4bab21
--- /dev/null
+++ b/src/ui/popup.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta charset="utf-8">
+<title>NoScript Settings</title>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="popup.css" />
+<script src="/lib/include.js"></script>
+<script src="/lib/log.js"></script>
+<script src="/common/locale.js"></script>
+<script src="/ui/ui.js"></script>
+
+</head>
+<body>
+<div id="main">
+<div id="top">
+  <a aria-role="button" id="close" class="close icon">__MSG_Close__</a>
+  <a aria-role="button" id="reload" class="reload icon">__MSG_Reload__</a>
+  <a aria-role="button" id="options" class="options icon">__MSG_Options__</a>
+  <div class="hider">
+    <a aria-role="button" class="reveal" title="__MSG_Reveal__">🡆</a>
+    <div class="hider-label">__MSG_Hider__</div>
+    <button class="hider-close">🗙</button>
+  </div>
+  <div class="spacer"></div>
+  <a aria-role="button" id="enforce" class="toggle icon"></a>
+  <a aria-role="button" id="enforce-tab" class="toggle icon"></a>
+  <a aria-role="button" id="temp-trust-page" class="toggle icon">__MSG_TempTrustPage__</a>
+  <a aria-role="button" id="revoke-temp" class="toggle icon">__MSG_RevokeTemp__</a>
+</div>
+<div id="message" class="hidden"></div>
+<div id="content"></div>
+<div id="sites"></div>
+<div id="buttons">
+
+</div>
+</div>
+<script src="popup.js"></script>
+</body>
+</html>
diff --git a/src/ui/popup.js b/src/ui/popup.js
new file mode 100644
index 0000000..3f84549
--- /dev/null
+++ b/src/ui/popup.js
@@ -0,0 +1,249 @@
+'use strict';
+
+var sitesUI;
+
+addEventListener("unload", e => {
+  if (!UI.initialized) {
+    browser.runtime.sendMessage({
+      type: "openStandalonePopup"
+    });
+  }
+});
+
+(async () => {
+
+  function showMessage(className, message) {
+    let el = document.getElementById("message");
+    el.textContent = message;
+    el.className = className;
+  }
+
+  try {
+    let tabId;
+    let pendingReload = false;
+    let isBrowserAction = true;
+    let optionsClosed = false;
+    let tab = (await browser.tabs.query({
+      windowId: browser.windows ?
+        (await browser.windows.getLastFocused({windowTypes: ["normal"]})).id
+        : null,
+      active: true
+    }))[0];
+
+    if (!tab || tab.id === -1) {
+      log("No tab found to open the UI for");
+      close();
+    }
+    if (tab.url === document.URL) {
+      isBrowserAction = false;
+      try {
+        tabId = parseInt(document.URL.match(/#.*\btab(\d+)/)[1]);
+      } catch (e) {
+        close();
+      }
+      addEventListener("blur", close);
+    } else {
+      tabId = tab.id;
+    }
+
+    await UI.init(tabId);
+
+    if (isBrowserAction) {
+      browser.tabs.onActivated.addListener(e => {
+        if (e.tabId !== tabId) close();
+      });
+    }
+
+    await include("/ui/toolbar.js");
+    {
+      let clickHandlers = {
+        "options": e => {
+          browser.runtime.openOptionsPage();
+          close();
+        },
+        "close": close,
+        "reload": reload,
+        "temp-trust-page": e => sitesUI.tempTrustAll(),
+        "revoke-temp": e => {
+          UI.revokeTemp();
+          close();
+        }
+      };
+      for (let [id, handler] of Object.entries(clickHandlers)) {
+        document.getElementById(id).onclick = handler;
+      }
+    }
+    {
+      let policy = UI.policy;
+      let pressed = policy.enforced;
+      let button = document.getElementById("enforce");
+      button.setAttribute("aria-pressed", pressed);
+      button.textContent = button.title = _(pressed ? "NoEnforcement" :  "Enforce");
+      button.onclick = () => {
+        policy.enforced = !pressed;
+        UI.updateSettings({policy, reloadAffected: true});
+        close();
+      }
+    }
+    {
+      let pressed = !UI.unrestrictedTab;
+      let button = document.getElementById("enforce-tab");
+      button.setAttribute("aria-pressed", pressed);
+      button.textContent = button.title = _(pressed ? "NoEnforcementForTab" :  "EnforceForTab");
+      if (UI.policy.enforced) {
+        button.onclick = () => {
+          UI.updateSettings({
+            unrestrictedTab: pressed,
+            reloadAffected: true,
+          });
+          close();
+        }
+      } else {
+        button.disabled = true;
+      }
+    }
+
+
+    let mainFrame = UI.seen && UI.seen.find(thing => thing.request.type === "main_frame");
+    debug("Seen: %o", UI.seen);
+    if (!mainFrame) {
+
+      if (/^https?:/.test(tab.url) && !tab.url.startsWith("https://addons.mozilla.org/")) {
+        document.body.classList.add("disabled");
+        showMessage("warning", _("freshInstallReload"));
+        let buttons = document.querySelector("#buttons");
+        let b = document.createElement("button");
+        b.textContent = _("OK");
+        b.onclick = document.getElementById("reload").onclick = () => {
+          reload();
+          close();
+        }
+        buttons.appendChild(b);
+        b = document.createElement("button");
+        b.textContent = _("Cancel");
+        b.onclick = () => close();
+        buttons.appendChild(b);
+        return;
+      }
+      showMessage("warning", _("privilegedPage"));
+      document.getElementById("temp-trust-page").disabled = true;
+      if (!UI.seen) return;
+    }
+
+    let justDomains = !UI.local.showFullAddresses;
+
+    sitesUI = new UI.Sites(document.getElementById("sites"));
+
+    sitesUI.onChange = (row) => {
+      pendingReload = !row.temp2perm;
+      if (optionsClosed) return;
+      browser.tabs.query({url: browser.runtime.getManifest().options_ui.page })
+        .then(tabs => {
+          browser.tabs.remove(tabs.map(t => t.id));
+      });
+      optionsClosed = true;
+    };
+    initSitesUI();
+    UI.onSettings = initSitesUI;
+
+
+
+    function initSitesUI() {
+      pendingReload = false;
+      let {
+        typesMap
+      } = sitesUI;
+      typesMap.clear();
+      let policySites = UI.policy.sites;
+      let domains = new Map();
+
+      function urlToLabel(url) {
+        let {
+          origin
+        } = url;
+        let match = policySites.match(url);
+        if (match) return match;
+        if (domains.has(origin)) {
+          if (justDomains) return domains.get(origin);
+        } else {
+          let domain = tld.getDomain(url.hostname);
+          domain = url.protocol === "https:" ? Sites.secureDomainKey(domain) : domain;
+          domains.set(origin, domain);
+          if (justDomains) return domain;
+        }
+        return origin;
+      }
+      let seen = UI.seen;
+      let parsedSeen = seen.map(thing => Object.assign({
+          type: thing.policyType
+        }, Sites.parse(thing.request.url)))
+        .filter(parsed => parsed.url && parsed.url.origin !== "null");
+
+      let sitesSet = new Set(
+        parsedSeen.map(parsed => parsed.label = urlToLabel(parsed.url))
+      );
+      if (!justDomains) {
+        for (let domain of domains.values()) sitesSet.add(domain);
+      }
+      let sites = [...sitesSet];
+      for (let parsed of parsedSeen) {
+        sites.filter(s => parsed.label === s || domains.get(parsed.url.origin) === s).forEach(m => {
+          let siteTypes = typesMap.get(m);
+          if (!siteTypes) typesMap.set(m, siteTypes = new Set());
+          siteTypes.add(parsed.type);
+        });
+      }
+
+      sitesUI.mainUrl = new URL(mainFrame.request.url)
+      sitesUI.mainSite = urlToLabel(sitesUI.mainUrl);
+      sitesUI.mainDomain = tld.getDomain(sitesUI.mainUrl.hostname);
+
+      sitesUI.render(sites);
+    }
+
+    function reload() {
+      if (sitesUI) sitesUI.clear();
+      browser.tabs.reload(tabId);
+      pendingReload = false;
+    }
+
+    function close() {
+      if (isBrowserAction) {
+        window.close();
+      } else {
+        //browser.windows.remove(tab.windowId);
+        browser.tabs.remove(tab.id);
+      }
+    }
+
+    let {
+      onCompleted
+    } = browser.webNavigation;
+
+    let loadSnapshot = sitesUI.snapshot;
+    let onCompletedListener = navigated => {
+      if (navigated.tabId === tabId) {
+        UI.pullSettings();
+      }
+    };
+    onCompleted.addListener(onCompletedListener, {
+      url: [{
+        hostContains: sitesUI.mainDomain
+      }]
+    });
+    addEventListener("unload", e => {
+      onCompleted.removeListener(onCompletedListener);
+      debug("pendingReload", pendingReload);
+      if (pendingReload) {
+        UI.updateSettings({
+          policy: UI.policy,
+          reloadAffected: true,
+        });
+      }
+    }, true);
+  } catch (e) {
+    error(e, "Can't open popup");
+    close();
+  }
+
+})();
diff --git a/src/ui/prompt.css b/src/ui/prompt.css
new file mode 100644
index 0000000..9406f01
--- /dev/null
+++ b/src/ui/prompt.css
@@ -0,0 +1,91 @@
+
+body {
+  bottom: 8px;
+  font-family: sans-serif;
+  font-size: 12px;
+  color: #222;
+}
+
+#header {
+  text-align: left;
+  margin: 0;
+  line-height: 24px;
+  color: #048;
+  position: relative;
+  font-size: 24px;
+  z-index: 500;
+  padding: 8px;
+  display: block;
+  background: url(/img/icon96.png) no-repeat top right;
+  height: 96px;
+}
+
+#title {
+  margin-right: 96px;
+  font-size: 24px;
+  position: absolute;
+  bottom: 0;
+  top: 0;
+}
+
+#main {
+  background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 41%,#9fd8ef 90%,#2ab0ed 100%) no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 120px 16px 16px 16px;
+  top: 0;
+  left: 0;
+  right:0;
+  bottom: 0;
+  position: fixed;
+  justify-content: center;
+}
+#message {
+  flex-grow: 1;
+  width: 100%;
+  max-height: 300px;
+  padding: 8px;
+  text-align: center;
+  word-break: break-all;
+}
+#message.multiline {
+  overflow: auto;
+  font-size: 12px;
+  text-align: justify;
+  margin-bottom: 16px;
+  background: rgba(255,255,255,.5);
+}
+#message.multiline p {
+  margin: 1px;
+  padding: 0;
+}
+#options {
+  display: flex;
+  flex-grow: 2;
+  flex-direction: column;
+  text-align: left;
+  align-items:baseline;
+  justify-content: center;
+}
+
+
+#checks {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  text-align: left;
+}
+
+#buttons {
+  width: 100%;
+  display: flex;
+  flex-grow: 0;
+  flex-direction: row;
+  align-items: center;
+  margin: 8px;
+  justify-content: space-around;
+}
+#buttons button {
+  min-width: 100px;
+}
diff --git a/src/ui/prompt.html b/src/ui/prompt.html
new file mode 100644
index 0000000..902b375
--- /dev/null
+++ b/src/ui/prompt.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title></title>
+<meta charset="utf-8">
+<link rel="stylesheet" type="text/css" href="prompt.css" />
+<script src="/lib/include.js"></script>
+<script src="/lib/log.js"></script>
+<script src="/common/locale.js"></script>
+<script src="/ui/resize_hack.js"></script>
+</head>
+<body>
+<div id="header">
+<h1 id="title"></h1>
+</div>
+<div id="main">
+<div id="message">
+</div>
+<div id="options">
+<input type="radio">
+</div>
+<div id="checks">
+  <input type="checkbox">
+</div>
+<div id="buttons">
+  <button id="button0" type="submit">OK</button><button id="button1">Cancel</button>
+</div>
+</div>
+<script src="prompt.js"></script>
+</body>
+</html>
diff --git a/src/ui/prompt.js b/src/ui/prompt.js
new file mode 100644
index 0000000..f19aac9
--- /dev/null
+++ b/src/ui/prompt.js
@@ -0,0 +1,91 @@
+(async () => {
+  window.bg = await browser.runtime.getBackgroundPage();
+  ["Prompts"]
+    .forEach(p => window[p] = bg[p]);
+  let data = Prompts.promptData;
+  debug(data);
+  let {title, message, options, checks, buttons} = data.features;
+
+  function labelFor(el, text) {
+    let label = document.createElement("label");
+    label.setAttribute("for", el.id);
+    label.textContent = text;
+    return label;
+  }
+
+  function createInput(container, {label, type, name, checked}, count) {
+    let input = document.createElement("input");
+    input.type = type;
+    input.value = count;
+    input.name = name;
+    input.checked = checked;
+    input.id = `${name}-${count}`;
+    let sub = document.createElement("div");
+    sub.appendChild(input);
+    sub.appendChild(labelFor(input, label));
+    container.appendChild(sub);
+  }
+
+  function createButton(container, label, count) {
+    let button = document.createElement("button");
+    if (count === 0) button.type = "submit";
+    button.id = `${button}-${count}`;
+    button.value = count;
+    button.textContent = label;
+    container.appendChild(button);
+  }
+
+  function renderInputs(container, dataset, type, name) {
+    if (typeof container === "string") {
+      container = document.querySelector(container);
+    }
+    if (typeof dataset === "string") {
+      container.innerHTML = dataset;
+      return;
+    }
+    container.innerHTML = "";
+    let count = 0;
+    if (dataset && dataset[Symbol.iterator]) {
+      let create = type === "button" ? createButton : createInput;
+      for (let data of dataset) {
+        data.type = type;
+        data.name = name;
+        create(container, data, count++);
+      }
+    }
+  }
+  if (title) {
+    document.title = title;
+    document.querySelector("#title").textContent = title;
+  }
+  if (message) {
+    let lines = message.split(/\n/);
+    let container = document.querySelector("#message");
+    container.classList.toggle("multiline", lines.length > 1);
+    message.innerHTML = "";
+    for (let l of lines) {
+      let p = document.createElement("p");
+      p.textContent = l;
+      container.appendChild(p);
+    }
+  }
+  renderInputs("#options", options, "radio", "opt");
+  renderInputs("#checks", checks, "checkbox", "flag");
+  renderInputs("#buttons", buttons, "button", "button");
+  addEventListener("unload", e => {
+    data.done();
+  });
+
+  let buttonClicked = e => {
+    let {result} = data;
+    result.button = parseInt(e.currentTarget.value);
+    let option = document.querySelector('#options [type="radio"]:checked');
+    result.option = option && parseInt(option.value);
+    result.checks = [...document.querySelectorAll('#checks [type="checkbox"]:checked')]
+      .map(c => parseInt(c.value));
+    data.done();
+  };
+  for (let b of document.querySelectorAll("#buttons button")) {
+    b.addEventListener("click", buttonClicked);
+  }
+})();
diff --git a/src/ui/resize_hack.js b/src/ui/resize_hack.js
new file mode 100644
index 0000000..c981e28
--- /dev/null
+++ b/src/ui/resize_hack.js
@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", async e => {
+  // Fix for Fx57 bug where bundled page loaded using
+  // browser.windows.create won't show contents unless resized.
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=1402110
+  let win = await browser.windows.getCurrent({populate: true});
+  if (win.tabs[0].url === document.URL) {
+    debug("Resize hack");
+    await browser.windows.update(win.id, {
+      width: win.width + 1
+    });
+    await browser.windows.update(win.id, {
+      width: win.width
+    });
+  }
+});
diff --git a/src/ui/siteInfo.html b/src/ui/siteInfo.html
new file mode 100644
index 0000000..0cb24ec
--- /dev/null
+++ b/src/ui/siteInfo.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="/lib/log.js"></script>
+<script src="/lib/include.js"></script>
+<script src="siteInfo.js"></script>
diff --git a/src/ui/siteInfo.js b/src/ui/siteInfo.js
new file mode 100644
index 0000000..708c983
--- /dev/null
+++ b/src/ui/siteInfo.js
@@ -0,0 +1,20 @@
+(async () => {
+  let [domain, tabId] = decodeURIComponent(location.hash.replace("#", "")).split(";");
+  const BASE =  "https://noscript.net";
+  await include(['/lib/punycode.js', '/common/Storage.js']);
+  let {siteInfoConsent} = await Storage.get("sync", "siteInfoConsent");
+  if (!siteInfoConsent) {
+    await include('/common/locale.js');
+    siteInfoConsent = confirm(_("siteInfo_confirm", [domain, BASE]));
+    if (siteInfoConsent) {
+      await Storage.set("sync", {siteInfoConsent});
+    } else {
+      let current = await browser.tabs.getCurrent();
+      await browser.tabs.update(parseInt(tabId), {active: true});
+      await browser.tabs.remove(current.id);
+      return;
+    }
+  }
+  let ace  = punycode.toASCII(domain);
+  location.href = `${BASE}/about/${domain};${ace}`;
+})();
diff --git a/src/ui/toolbar.js b/src/ui/toolbar.js
new file mode 100644
index 0000000..d2a2f6e
--- /dev/null
+++ b/src/ui/toolbar.js
@@ -0,0 +1,117 @@
+{
+  let toolbar = document.getElementById("top");
+  let spacer = toolbar.querySelector(".spacer");
+  let hider = toolbar.querySelector(".hider");
+
+  if (UI.local.toolbarLayout) {
+    debug(uneval(UI.local.toolbarLayout));
+    let {left, right, hidden} = UI.local.toolbarLayout;
+    for (let id of left) {
+      toolbar.insertBefore(document.getElementById(id), hider);
+    }
+    for (let id of right) {
+      toolbar.appendChild(document.getElementById(id));
+    }
+    for (let id of hidden) {
+      hider.appendChild(document.getElementById(id));
+    }
+  }
+
+  for (let i of toolbar.querySelectorAll(".icon")) {
+    if (!i.title) i.title = i.textContent;
+  }
+
+  function toggleHider(b) {
+    let cl = hider.classList;
+    cl.toggle("open", b);
+    cl.toggle("empty", !hider.querySelector(".icon"));
+  }
+  hider.querySelector(".hider-close").onclick = e => {
+    toggleHider(false);
+  };
+
+  toggleHider(false);
+
+  let dnd = {
+   dragstart(ev) {
+      let d = ev.target;
+      if (hider.querySelectorAll(".icon").length) {
+        toggleHider(true);
+      }
+
+      if (!d.classList.contains("icon")) {
+        ev.preventDefault();
+        return;
+      }
+      d.style.opacity = ".5";
+      let dt = ev.dataTransfer;
+      dt.setData("text/plain", d.id);
+      dt.dropEffect = "move";
+      dt.setDragImage(d, 0, 0);
+      toggleHider(true);
+    },
+    dragend(ev)  {
+      ev.target.style.opacity = "";
+    },
+    dragover(ev) {
+      ev.preventDefault();
+    },
+    dragenter(ev) {
+      let t = ev.target;
+    },
+    dragleave(ev) {
+      let t = ev.target;
+    },
+    drop(ev) {
+      let t = ev.target;
+      let d = document.getElementById(ev.dataTransfer.getData("text/plain"));
+      switch(t) {
+        case hider:
+          t.appendChild(d);
+          break;
+        case toolbar:
+          t.insertBefore(d, ev.clientX < hider.offsetLeft ? hider : spacer.nextElementSibling);
+          break;
+        default:
+          t.parentNode.insertBefore(d, ev.clientX < (t.offsetLeft + t.offsetWidth) ? t : t.nextElementSibling);
+      }
+
+      let left = [], right = [];
+      let side = left;
+      for (let el of document.querySelectorAll("#top > .icon, #top > .spacer")) {
+        if (el === spacer) {
+          side = right;
+        } else {
+          side.push(el.id);
+        }
+      }
+      UI.local.toolbarLayout = {
+        left, right,
+        hidden: Array.map(document.querySelectorAll("#top > .hider > .icon"), el => el.id),
+      };
+
+      debug("%o", UI.local);
+      UI.updateSettings({local: UI.local});
+    },
+
+    click(ev) {
+      let el = ev.target;
+      if (el.parentNode === hider && el.classList.contains("icon")) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      } else if (el === spacer || el.classList.contains("reveal")) {
+        toggleHider(true);
+      }
+    }
+
+  };
+
+
+  for (let [action, handler] of Object.entries(dnd)) {
+    toolbar.addEventListener(action, handler, true);
+  }
+
+  for (let draggable of document.querySelectorAll("#top .icon")) {
+    draggable.setAttribute("draggable", "true");
+  }
+}
diff --git a/src/ui/ui-hc.css b/src/ui/ui-hc.css
new file mode 100644
index 0000000..fd70e2a
--- /dev/null
+++ b/src/ui/ui-hc.css
@@ -0,0 +1,63 @@
+input {
+  transform: none !important;
+  width: auto !important;
+  position: static !important;
+}
+
+input[type="radio"] {
+  -moz-appearance:  radio !important;
+  padding-right: .2em !important;
+}
+input[type="checkbox"] {
+  -moz-appearance:  checkbox !important;
+}
+
+
+button {
+  text-indent: 0 !important;
+}
+
+label {
+  display: initial !important;
+  position: static !important;
+  transform: none !important;
+  opacity: 1 !important;
+  text-indent: 0 !Important;
+  position: static;
+  width: auto !important;
+  padding: 4px !important;
+}
+
+span.preset {
+  display: block;
+  width: auto !important;
+  white-space: nowrap !important;
+}
+
+input.temp {
+  position: static !important;
+  opacity: 1 !important;
+}
+
+.full-address {
+  font-size: 130%;
+}
+
+tr.site {
+  border-top: 1px solid #888;
+}
+
+#top {
+  display:flex;
+  flex-flow: row;
+  justify-content: space-around;
+
+}
+#top button  {
+  position: static;
+  width: auto;
+}
+#top button.icon {
+  font-size: 12px !important;
+  font-family: arial sans-serif !important;
+}
diff --git a/src/ui/ui.css b/src/ui/ui.css
new file mode 100644
index 0000000..55f9247
--- /dev/null
+++ b/src/ui/ui.css
@@ -0,0 +1,391 @@
+
+body {
+  font-family: sans-serif;
+  font: -moz-use-system-font;
+  font-size: 12px;
+}
+
+.mobile > body {
+  font-size: 4mm;
+  min-width: auto;
+}
+
+.mobile .desktop {
+  display: none !important;
+}
+
+ @media (max-width: 100mm) {
+   body {
+     background-size: 4em !important;
+     padding-right: 0 !important;
+    }
+
+   .presets {
+     width: 0;
+   }
+
+   .presets input.preset {
+     min-width: 0 !important;
+     background-color: none !important;
+     margin-bottom: 0;
+     margin-top: 1mm;
+     font-weight: bold;
+   }
+   .presets input.temp {
+    position: static;
+  }
+  .presets label.preset {
+    font-size: 50%;
+    top: -1mm;
+    left: 0;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+    text-shadow: 0 0 4px #ff8;
+    position: absolute;
+    overflow: visible;
+  }
+
+  td.presets {
+      white-space: nowrap !important;
+      vertical-align: bottom;
+    }
+   .url {
+     white-space: wrap;
+     word-break: break-all;
+     font-size: 75%;
+     letter-spacing: -0.2mm;
+
+   }
+
+ }
+
+input[type="text"] {
+  border: 1px solid;
+}
+input[type="checkbox"] {
+  width: 1em;
+  height: 1em;
+}
+
+.presets {
+  -moz-user-select: none;
+}
+.sites {
+  border: 0;
+  background: white;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  overflow-y: auto;
+
+}
+.sites tr, .sites td {
+  margin: 0;
+  padding: 0;
+  border: none;
+  font-size: 1em;
+}
+.sites > tr.site:hover, .sites > tr.sites:active {
+  background: #abf;
+}
+.sites > tr:nth-child(even) {background: #fff}
+.sites > tr:nth-child(odd) {background: #eee}
+
+.site .url {
+    padding: 0 0 0 0.5em;
+    color: #ccc;
+    vertical-align: middle;
+}
+.site .url .protocol { display: none }
+
+.site .url .domain { cursor: help }
+
+[data-key="domain"] .full-address .host,
+[data-key="domain"] .full-address .sub,
+[data-key="domain"] .full-address .protocol,
+[data-key="host"] .full-address span .protocol,
+[data-key="host"] .full-address span .protocol, {
+  background-color: #afe;
+}
+[data-key="host"] .full-address span .protocol,
+[data-key="domain"] .full-address span .host,
+[data-key="domain"] .full-address span .protocol {
+  border: none;
+}
+
+
+.site .url[data-key="domain"] .domain,
+.site .url[data-key="host"] .domain,
+.site .url[data-key="host"] .sub,
+.site .url[data-key="unsafe"] span {
+  color: #a00;
+}
+
+.site .url[data-key="secure"] .domain,
+.site .url[data-key="secure"] .sub,
+.site .url[data-key="full"] span {
+  color: black;
+}
+
+.site .url[data-key="full"] span,
+.site .url[data-key="unsafe"] span {
+  display: initial;
+}
+
+.site .url .domain {
+  font-weight: bold;
+}
+
+input.https-only {
+  font-size: 1em;
+  -moz-appearance: none;
+  background: url(/img/ui-http64.png) no-repeat center;
+  background-size: 1.5em;
+  width: 1.5em;
+  height: 1.5em;
+  margin: 0 0 -0.13em 0.13em;
+  padding:0;
+  cursor: pointer;
+}
+input.https-only:checked {
+  background-image: url(/img/ui-https64.png);
+}
+label.https-only {
+  display: none;
+}
+
+[data-preset="UNTRUSTED"] .https-only, [data-preset="DEFAULT"] .https-only {
+  visibility: hidden;
+}
+
+
+td.presets {
+  font-size: 1em;
+  white-space: nowrap;
+}
+
+.mobile td.presets {
+  white-space: normal;
+}
+
+span.preset {
+  position: relative;
+  display: inline-block;
+  top: 0.13em;
+  font-size: 1em;
+}
+
+.preset label, .preset input, .preset button {
+  cursor: pointer;
+}
+
+.presets input.preset {
+  font-size: 1em;
+  -moz-appearance: none;
+  background: url(/img/ui-no64.png) no-repeat center left;
+  background-size: 1.5em;
+  width: 1.5em;
+  height: 1.5em;
+  outline: 0;
+  opacity: .5;
+  margin: 0 .5em 0.13em .5em;
+}
+
+input.preset:active, input.preset:focus, input.preset:hover {
+  background-color: #ff8;
+  border-radius: .5em;
+}
+
+.presets input.preset:checked, #presets input.preset {
+  opacity: 1;
+  transform: none;
+  min-width: 9.38em;
+  background-color: #ddd;
+  border-radius: 0.5em;
+}
+
+.presets input.preset:focus {
+  transform: none;
+}
+.sites input + label {
+  font-size: 1em;
+  line-height: 1.5em;
+  vertical-align: top;
+}
+.presets label.preset {
+  padding: 0;
+  letter-spacing: -0.06em;
+  width: 0em;
+  overflow: hidden;
+  display: none;
+  text-transform: uppercase;
+  color: #000;
+  opacity: .6;
+  position: absolute;
+  left: 0em;
+  padding-left: 2.5em;
+
+  transition: 0.2s all;
+}
+
+.presets input.preset[value^="T"] + label {
+  text-transform: none;
+}
+
+.presets input.preset:checked + label, #presets .presets label {
+  opacity: 1;
+  width: 100%;
+  display: inline-block;
+}
+
+button.options {
+  -moz-appearance: none;
+  border: none;
+  background: none transparent;
+  font-family: sans-serif;
+  font-weight: bold;
+  color: #048;
+  text-shadow: -0.06em -0.06em 0.06em #fff, 0.13em 0.13em 0.13em #000;
+  padding: 0;
+  margin: 0;
+}
+
+.preset .options {
+  -moz-appearance: none;
+
+  border: 0;
+  background: none;
+  font-size: 1em;
+  width: 1em;
+  height: 1em;
+
+  opacity: 0;
+  position: absolute;
+  bottom: 0.88em;
+  left: 1.13em;
+
+  pointer-events: none;
+
+}
+
+.preset:hover input.preset:checked ~ .options {
+  display: block;
+  opacity: 1;
+  bottom: 0.38em;
+
+}
+input.preset[value="T_TRUSTED"] {
+  background-image: url(/img/ui-temp64.png);
+}
+
+input.preset[value="TRUSTED"] {
+  background-image: url(/img/ui-yes64.png)
+}
+input.preset[value="UNTRUSTED"] {
+  background-image: url(/img/ui-black64.png)
+}
+input.preset[value="CUSTOM"] {
+  background-image: url(/img/ui-custom64.png)
+}
+
+input.temp {
+  font-size: 1em;
+  -moz-appearance: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  background: url(/img/ui-clock64.png) no-repeat center;
+  background-size: 60%;
+  width: 1.5em;
+  height: 1.5em;
+  transition: 0.2s all;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+input.temp + label {
+  display: none;
+}
+
+input.preset:checked ~ input.temp {
+  opacity: .5;
+  right: .5em;
+  pointer-events: all;
+}
+.presets input.preset:checked ~ input.temp:checked {
+  opacity: 1 !important;
+  background-size: 100%;
+
+}
+
+.customizing input.preset:checked, #presets input.preset:checked, .customizer fieldset {
+  background-color: #ffb !important;
+  border-radius: 0.5em 0.5em 0 0;
+  margin: 0 0.06em 0.06em 0.06em;
+}
+.customizing input.preset:checked, #presets input.preset, #presets input.preset:checked  {
+  margin: 0 1em -0.2em 1em;
+  border-radius: 0.5em 0.5em 0 0;
+}
+
+.customizing input.preset:checked + label.preset {
+  padding-left: 3em;
+}
+
+.customizing, .customizer {
+  background-color: #cca !important;
+}
+
+.customizer div {
+  transition: 0.2s height;
+  padding: 0;
+  margin: 0;
+}
+
+span.cap {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.customizer.closed .customizer-controls   {
+  height: 0;
+  overflow: hidden;
+}
+
+span.cap {
+  padding: 0.5em;
+  font-weight: normal;
+}
+
+span.cap.needed {
+  font-weight: bold;
+  background-color: #c88;
+}
+
+fieldset {
+  border: 0;
+  padding: 1.5em 0.5em 0.5em 0.5em;
+  margin: 0;
+  position: relative;
+}
+
+legend {
+  font-weight: bold;
+  display: inline;
+  position: absolute;
+  top: 0.25em;
+  left: 1em;
+  white-space: nowrap;
+}
+.customizer legend {
+  font-weight: bold;
+  font-size: 0.75em;
+}
+
+#presets .https-only {
+  display: none;
+}
diff --git a/src/ui/ui.js b/src/ui/ui.js
new file mode 100644
index 0000000..99943d7
--- /dev/null
+++ b/src/ui/ui.js
@@ -0,0 +1,661 @@
+'use strict';
+var UI = (() => {
+
+  var UI = {
+    initialized: false,
+
+    presets: {
+      "DEFAULT": "Default",
+      "T_TRUSTED": "Trusted_temporary",
+      "TRUSTED": "Trusted_permanent",
+      "UNTRUSTED": "Untrusted",
+      "CUSTOM": "Custom",
+    },
+
+    async init(tabId = -1) {
+      UI.tabId = tabId;
+      let scripts = [
+        "/ui/ui.css",
+        "/lib/punycode.js",
+        "/lib/tld.js",
+        "/common/Policy.js",
+      ];
+      this.mobile = !("windows" in browser);
+      if (this.mobile) {
+        document.documentElement.classList.toggle("mobile", true);
+        scripts.push("/lib/fastclick.js");
+      }
+      await include(scripts);
+
+      detectHighContrast();
+
+      let inited = new Promise(resolve => {
+        let listener = m => {
+          if (m.type === "settings") {
+            UI.policy = new Policy(m.policy);
+            UI.snapshot = UI.policy.snapshot;
+            UI.seen = m.seen;
+            UI.unrestrictedTab = m.unrestrictedTab;
+            UI.xssUserChoices = m.xssUserChoices;
+            UI.local = m.local;
+            UI.sync = m.sync;
+            if (UI.local && !UI.local.debug) {
+              debug = () => {}; // be quiet!
+            }
+            resolve();
+            if (UI.onSettings) UI.onSettings();
+          }
+        };
+        browser.runtime.onMessage.addListener(listener);
+
+        if (this.mobile) FastClick.attach(document.body);
+        UI.pullSettings();
+      });
+
+      await inited;
+
+      this.initialized = true;
+      debug("Imported", Policy);
+    },
+    async pullSettings() {
+      browser.runtime.sendMessage({type: "NoScript.broadcastSettings", tabId: UI.tabId});
+    },
+    async updateSettings({policy, xssUserChoices, unrestrictedTab, local, sync, reloadAffected}) {
+      if (policy) policy = policy.dry(true);
+      return await browser.runtime.sendMessage({type: "NoScript.updateSettings",
+        policy,
+        xssUserChoices,
+        unrestrictedTab,
+        local,
+        sync,
+        reloadAffected,
+        tabId: UI.tabId,
+      });
+    },
+
+    async exportSettings() {
+      return await browser.runtime.sendMessage({type: "NoScript.exportSettings"});
+    },
+    async importSettings(data) {
+      return await browser.runtime.sendMessage({type: "NoScript.importSettings", data});
+    },
+
+    async revokeTemp() {
+      let policy = this.policy;
+      Policy.hydrate(policy.dry(), policy);
+      if (this.isDirty(true)) {
+        await this.updateSettings({policy, reloadAffected: true});
+      }
+    },
+
+    isDirty(reset = false) {
+      let currentSnapshot = this.policy.snapshot;
+      let dirty = currentSnapshot != this.snapshot;
+      if (reset) this.snapshot = currentSnapshot;
+      return dirty;
+    },
+
+    async openSiteInfo(domain) {
+      let url = `/ui/siteInfo.html#${encodeURIComponent(domain)};${UI.tabId}`;
+      browser.tabs.create({url});
+    }
+  };
+
+  function detectHighContrast() {
+    // detect high contrast
+    let canary = document.createElement("input");
+    canary.className="https-only";
+    canary.style.display = "none";
+    document.body.appendChild(canary);
+    if (UI.highContrast = window.getComputedStyle(canary).backgroundImage === "none") {
+      include("/ui/ui-hc.css");
+      document.documentElement.classList.toggle("hc");
+    }
+    canary.parentNode.removeChild(canary);
+  }
+
+  function fireOnChange(sitesUI, data) {
+    if (UI.isDirty(true)) {
+      UI.updateSettings({policy: UI.policy});
+      if (sitesUI.onChange) sitesUI.onChange(data, this);
+    }
+  }
+
+  function compareBy(prop, a, b) {
+    let x = a[prop], y = b[prop];
+    return x > y ? 1 : x < y ? -1 : 0;
+  }
+
+  const TEMPLATE = `
+    <table class="sites">
+    <tr class="site">
+
+    <td class="presets">
+    <span class="preset">
+      <input id="preset" class="preset" type="radio" name="preset"><label for="preset" class="preset">PRESET</label>
+      <button class="options tiny">⚙</button>
+      <input id="temp" class="temp" type="checkbox"><label for="temp">Temporary</input>
+    </span>
+    </td>
+
+    <td class="url" data-key="secure">
+    <input class="https-only" id="https-only" type="checkbox"><label for="https-only" class="https-only"></label>
+    <span class="full-address">
+    <span class="protocol">https://</span><span class="sub">www.</span><span class="domain">noscript.net</span><span class="path"></span>
+    </span>
+    </td>
+
+
+
+    </tr>
+    <tr class="customizer">
+    <td colspan="2">
+    <div class="customizer-controls">
+    <fieldset><legend></legend>
+    <span class="cap">
+      <input class="cap" type="checkbox" value="script" />
+      <label class="cap">script</label>
+    </span>
+    </fieldset>
+    </div>
+    </td>
+    </tr>
+    </table>
+  `;
+
+  const TEMP_PRESETS = ["CUSTOM"];
+  const DEF_PRESETS =  {
+    // name: customizable,
+    "DEFAULT": false,
+    "T_TRUSTED": false,
+    "TRUSTED": false,
+    "UNTRUSTED": false,
+    "CUSTOM": true,
+  };
+
+  UI.Sites = class {
+    constructor(parentNode, presets = DEF_PRESETS) {
+      this.parentNode = parentNode;
+      let policy = UI.policy;
+      this.uiCount =  UI.Sites.count = (UI.Sites.count || 0) + 1;
+      this.sites = policy.sites;
+      this.presets = presets;
+      this.customizing = null;
+      this.typesMap = new Map();
+      this.clear();
+    }
+
+    initRow(table = this.table) {
+      let row = table.querySelector("tr.site");
+
+      // PRESETS
+      {
+        let presets = row.querySelector(".presets");
+        let [span, input, label, options] = presets.querySelectorAll("span.preset, input.preset, label.preset, .options");
+        span.remove();
+        options.title = _("Options");
+        for (let [preset, customizable] of Object.entries(this.presets)) {
+          let messageKey = UI.presets[preset];
+          input.value = preset;
+          label.textContent = label.title = input.title = _(messageKey);
+          let clone = span.cloneNode(true);
+          clone.classList.add(preset);
+          let temp = clone.querySelector(".temp");
+          if (TEMP_PRESETS.includes(preset)) {
+            temp.title = _("allowTemp", `(${label.title.toUpperCase()})`);
+            temp.nextElementSibling.textContent = _("allowTemp", ""); // label;
+          } else {
+            temp.nextElementSibling.remove();
+            temp.remove();
+          }
+          if (customizable) {
+            clone.querySelector(".options").remove();
+          }
+          presets.appendChild(clone);
+        }
+      }
+
+      // URL
+      {
+        let [input, label] = row.querySelectorAll("input.https-only, label.https-only");
+        input.title = label.title = label.textContent = _("httpsOnly");
+      }
+
+      // CUSTOMIZER ROW
+      {
+        let [customizer, legend, cap, capInput, capLabel] = table.querySelectorAll(".customizer, legend, span.cap, input.cap, label.cap");
+        row._customizer = customizer;
+        customizer.remove();
+        let capParent = cap.parentNode;
+        capParent.removeChild(cap);
+        legend.textContent = _("allow");
+        let idSuffix = UI.Sites.count;
+        for (let capability of Permissions.ALL) {
+          capInput.id = `capability-${capability}-${idSuffix}`
+          capLabel.setAttribute("for", capInput.id);
+          capInput.value = capability;
+          capInput.title = capLabel.textContent = _(`cap_${capability}`);
+          let clone = capParent.appendChild(cap.cloneNode(true));
+          clone.classList.add(capability);
+        }
+      }
+
+      // debug(table.outerHTML);
+      return row;
+    }
+
+    allSiteRows() {
+      return this.table.querySelectorAll("tr.site");
+    }
+    clear() {
+      debug("Clearing list", this.table);
+
+      this.template = document.createElement("template");
+      this.template.innerHTML = TEMPLATE;
+      this.fragment = this.template.content;
+      this.table = this.fragment.querySelector("table.sites");
+      this.rowTemplate = this.initRow();
+
+      for (let r of this.allSiteRows()) {
+        r.parentNode.removeChild(r);
+      }
+      this.customize(null);
+      this.sitesCount = 0;
+    }
+
+    siteNeeds(site, type) {
+      let siteTypes = this.typesMap && this.typesMap.get(site);
+      return !!siteTypes && siteTypes.has(type);
+    }
+
+    handleEvent(ev) {
+      let target = ev.target;
+      let customizer = target.closest(".customizer");
+      let row = customizer ? customizer.parentNode.querySelector("tr.customizing") : target.closest("tr.site");
+      if (!row) return;
+      row.temp2perm = false;
+      let isTemp = target.matches("input.temp");
+      let preset = target.matches("input.preset") ? target
+        : customizer || isTemp ? row.querySelector("input.preset:checked")
+          : target.closest("input.preset");
+      debug("%s target %o\n\trow %s, perms %o\npreset %s %s",
+              ev.type,
+              target, row && row.siteMatch, row && row.perms,
+              preset && preset.value, preset && preset.checked);
+
+      if (!preset) {
+        if (target.matches("input.https-only") && ev.type === "change") {
+          this.toggleSecure(row, target.checked);
+          fireOnChange(this, row);
+        } else if (target.matches(".domain")) {
+          UI.openSiteInfo(row.domain);
+        }
+        return;
+      }
+
+      let policy = UI.policy;
+      let {siteMatch, contextMatch, perms} = row;
+      let presetValue = preset.value;
+      let policyPreset = presetValue.startsWith("T_") ? policy[presetValue.substring(2)].tempTwin : policy[presetValue];
+
+      if (policyPreset) {
+        if (row.perms !== policyPreset) {
+          row.temp2perm = row.perms && policyPreset.tempTwin === row.perms;
+          row.perms = policyPreset;
+        }
+      }
+
+
+      let isCap = customizer && target.matches(".cap");
+      let tempToggle = preset.parentNode.querySelector("input.temp");
+
+      if (ev.type === "change") {
+        if (preset.checked) {
+          row.dataset.preset = preset.value;
+        }
+        if (isCap) {
+          perms.set(target.value, target.checked);
+        } else if (policyPreset) {
+          if (tempToggle && tempToggle.checked) {
+            policyPreset = policyPreset.tempTwin;
+          }
+          row.contextMatch = null;
+          row.perms = policyPreset;
+          delete row._customPerms;
+          debug("Site match", siteMatch);
+          if (siteMatch) {
+            policy.set(siteMatch, policyPreset);
+          } else {
+            this.customize(policyPreset, preset, row);
+          }
+
+        } else if (preset.value === "CUSTOM") {
+          if (isTemp) {
+            row.perms.temp = target.checked;
+          } else {
+            let temp = preset.parentNode.querySelector("input.temp").checked;
+            let perms = row._customPerms ||
+              (row._customPerms = new Permissions(new Set(row.perms.capabilities), temp));
+            row.perms = perms;
+            policy.set(siteMatch, perms);
+            this.customize(perms, preset, row);
+          }
+        }
+        fireOnChange(this, row);
+      } else if (!(isCap || isTemp) && ev.type === "click") {
+          this.customize(row.perms, preset, row);
+      }
+    }
+
+    customize(perms, preset, row) {
+      debug("Customize preset %s (%o) - Dirty: %s", preset && preset.value, perms, this.dirty);
+      for(let r of this.table.querySelectorAll("tr.customizing")) {
+        r.classList.toggle("customizing", false);
+      }
+      let customizer = this.rowTemplate._customizer;
+      customizer.classList.toggle("closed", true);
+
+      if (!(perms && row && preset &&
+        row.dataset.preset === preset.value &&
+        this.presets[preset.value] &&
+        preset !== customizer._preset)) {
+           delete customizer._preset;
+           return;
+      }
+
+      customizer._preset = preset;
+      row.classList.toggle("customizing", true);
+      let immutable = Permissions.IMMUTABLE[preset.value] || {};
+      for (let input of customizer.querySelectorAll("input")) {
+        let type = input.value;
+        if (type in immutable) {
+          input.disabled = true;
+          input.checked = immutable[type];
+        } else {
+          input.checked = perms.allowing(type);
+          input.disabled = false;
+        }
+        input.parentNode.classList.toggle("needed", this.siteNeeds(row._site, type));
+        row.parentNode.insertBefore(customizer, row.nextElementSibling);
+        customizer.classList.toggle("closed", false);
+        customizer.onkeydown = e => {
+          switch(e.keyCode) {
+            case 38:
+            case 8:
+            e.preventDefault();
+            this.onkeydown = null;
+            this.customize(null);
+            preset.focus();
+            return false;
+          }
+        }
+        window.setTimeout(() => customizer.querySelector("input").focus(), 50);
+      }
+    }
+
+    render(sites = this.sites, sorter = this.sorter) {
+      let parentNode = this.parentNode;
+      debug("Rendering %o inside %o", sites, parentNode);
+      if (sites) this._populate(sites, sorter);
+      parentNode.innerHTML = "";
+      parentNode.appendChild(this.fragment);
+      let root = parentNode.querySelector("table.sites");
+      debug("Wiring", root);
+      if (!root.wiredBy) {
+        root.addEventListener("click", this, true);
+        root.addEventListener("change", this, true);
+        root.wiredBy = this;
+      }
+      return root;
+    }
+
+    _populate(sites, sorter) {
+      this.clear();
+      if (sites instanceof Sites) {
+        for (let [site, perms] of sites) {
+          this.append(site, site, perms);
+        }
+      } else {
+        for (let site of sites) {
+          let context = null;
+          if (site.site) {
+            site = site.site;
+            context = site.context;
+          }
+          let {siteMatch, perms, contextMatch} = UI.policy.get(site, context);
+          this.append(site, siteMatch, perms, contextMatch);
+        }
+        this.sites = sites;
+      }
+      this.sort(sorter);
+      window.setTimeout(() => this.focus(), 50);
+    }
+
+    focus() {
+      let firstPreset = this.table.querySelector("input.preset:checked");
+      if (firstPreset) firstPreset.focus();
+    }
+
+    sort(sorter = this.sorter) {
+      if (this.mainDomain) {
+        let md = this.mainDomain;
+        let wrappedCompare = sorter;
+        sorter = (a, b) => {
+          let x = a.domain, y = b.domain;
+          if (x === md) {
+            if (y !== md) {
+              return -1;
+            }
+          } else if (y === md) {
+            return 1;
+          }
+          return wrappedCompare(a, b);
+        }
+      }
+      let rows = [...this.allSiteRows()].sort(sorter);
+      if (this.mainSite) {
+        let mainLabel = "." + this.mainDomain;
+        let topIdx = rows.findIndex(r => r._label === mainLabel);
+        if (topIdx === -1) rows.findIndex(r => r._site === this.mainSite);
+        if (topIdx !== -1) {
+          // move the row to the top
+          let topRow = rows.splice(topIdx, 1)[0];
+          rows.unshift(topRow);
+          topRow.classList.toggle("main", true);
+        }
+      }
+      this.clear();
+      for (let row of rows) this.table.appendChild(row);
+      this.table.appendChild(this.rowTemplate._customizer);
+    }
+
+    sorter(a, b) {
+      return compareBy("domain", a, b) ||  compareBy("_label", a, b);
+    }
+
+    async tempTrustAll() {
+      let {policy} = UI;
+      let changed = 0;
+      for (let row of this.allSiteRows()) {
+        if (row._preset === "DEFAULT") {
+          policy.set(row._site, policy.TRUSTED.tempTwin);
+          changed++;
+        }
+      }
+      if (changed && UI.isDirty(true)) {
+        await UI.updateSettings({policy, reloadAffected: true});
+      }
+      return changed;
+    }
+
+    createSiteRow(site, siteMatch, perms, contextMatch = null, sitesCount = this.sitesCount++) {
+      debug("Creating row for site: %s, matching %s / %s, %o", site, siteMatch, contextMatch, perms);
+
+      let row = this.rowTemplate.cloneNode(true);
+      row.sitesCount = sitesCount;
+      let url;
+      try {
+        url = new URL(site);
+      } catch (e) {
+        let protocol = Sites.isSecureDomainKey(site) ? "https:" : "http:";
+        let hostname = Sites.toggleSecureDomainKey(site, false);
+        url = {protocol, hostname, origin: `${protocol}://${site}`, pathname: "/"};
+      }
+
+      let hostname = Sites.toExternal(url.hostname);
+      let domain = tld.getDomain(hostname);
+
+      if (!siteMatch) {
+        // siteMatch = url.protocol === "https:" ? Sites.secureDomainKey(domain) : site;
+        siteMatch = site;
+      }
+      let secure = Sites.isSecureDomainKey(siteMatch);
+      let keyStyle = secure ? "secure"
+        : !domain || /^\w+:/.test(siteMatch) ?
+            (url.protocol === "https:" ? "full" : "unsafe")
+          : domain === hostname ? "domain" : "host";
+
+      let urlContainer = row.querySelector(".url");
+      urlContainer.dataset.key = keyStyle;
+      row._site = site;
+
+      row.siteMatch = siteMatch;
+      row.contextMatch = contextMatch;
+      row.perms = perms;
+      row.domain = domain || siteMatch;
+      if (domain) { // "normal" URL
+        let justDomain = hostname === domain;
+        let domainEntry = secure || domain === site;
+        row._label =  domainEntry ? "." + domain : site;
+        row.querySelector(".protocol").textContent = `${url.protocol}//`;
+        row.querySelector(".sub").textContent = justDomain ?
+          (keyStyle === "full" || keyStyle == "unsafe"
+            ? "" : "…")
+            : hostname.substring(0, hostname.length - domain.length);
+
+        row.querySelector(".domain").textContent = domain;
+        row.querySelector(".path").textContent = siteMatch.length > url.origin.length ? url.pathname : "";
+        let httpsOnly = row.querySelector("input.https-only");
+        httpsOnly.checked = keyStyle === "full" || keyStyle === "secure";
+      } else {
+        row._label = siteMatch;
+        urlContainer.querySelector(".full-address").textContent = siteMatch;
+      }
+
+      let presets = row.querySelectorAll("input.preset");
+      let idSuffix = `-${this.uiCount}-${sitesCount}`;
+      for (let p of presets) {
+        p.id = `${p.value}${idSuffix}`;
+        p.name = `preset${idSuffix}`;
+        let label = p.nextElementSibling;
+        label.setAttribute("for", p.id);
+        let temp = p.parentNode.querySelector("input.temp");
+        if (temp) {
+          temp.id = `temp-${p.id}`;
+          label = temp.nextElementSibling;
+          label.setAttribute("for", temp.id);
+        }
+      }
+      let policy = UI.policy;
+
+      let presetName = "CUSTOM";
+      for (let p of ["TRUSTED", "UNTRUSTED", "DEFAULT"]) {
+        let preset = policy[p];
+        switch (perms) {
+          case preset:
+            presetName = p;
+            break;
+          case preset.tempTwin:
+            presetName = `T_${p}`;
+            if (!presetName in UI.presets) {
+              presetName = p;
+            }
+            break;
+          }
+      }
+      let tempFirst = true; // TODO: make it a preference
+      let unsafeMatch = keyStyle !== "secure" && keyStyle !== "full";
+      if (presetName === "DEFAULT" && (tempFirst || unsafeMatch)) {
+        // prioritize temporary privileges over permanent
+        for (let p of TEMP_PRESETS) {
+          if (p in this.presets && (unsafeMatch || tempFirst && p === "TRUSTED")) {
+            row.querySelector(`.presets input[value="${p}"]`).parentNode.querySelector("input.temp").checked = true;
+            perms = policy.TRUSTED.tempTwin;
+          }
+        }
+      }
+      let preset = row.querySelector(`.presets input[value="${presetName}"]`);
+      if (!preset) {
+        debug(`Preset %s not found in %s!`, presetName, row.innerHTML);
+      } else {
+        preset.checked = true;
+        row.dataset.preset = row._preset = presetName;
+        if (TEMP_PRESETS.includes(presetName)) {
+          let temp = preset.parentNode.querySelector("input.temp");
+          if (temp) {
+            temp.checked = perms.temp;
+          }
+        }
+      }
+      return row;
+    }
+
+    append(site, siteMatch, perms, contextMatch) {
+      this.table.appendChild(this.createSiteRow(...arguments));
+    }
+
+    toggleSecure(row, secure = !!row.querySelector("https-only:checked")) {
+      this.customize(null);
+      let site = row.siteMatch;
+      site = site.replace(/^https?:/, secure ? "https:" : "http:");
+      if (site === row.siteMatch) {
+        site = Sites.toggleSecureDomainKey(site, secure);
+      }
+      if (site !== row.siteMatch) {
+        let {policy} = UI;
+        policy.set(row.siteMatch, policy.DEFAULT);
+        policy.set(site, row.perms);
+        for(let r of this.allSiteRows()) {
+          if (r !== row && r.siteMatch === site && r.contextMatch === row.contextMatch) {
+            r.parentNode.removeChild(r);
+          }
+        }
+        let newRow = this.createSiteRow(site, site, row.perms, row.contextMatch, row.sitesCount);
+        row.parentNode.replaceChild(newRow, row);
+      }
+    }
+
+    highlight(key) {
+      key = Sites.toExternal(key);
+      for (let r of this.allSiteRows()) {
+        if (r.querySelector(".full-address").textContent.trim().includes(key)) {
+          let url = r.lastElementChild;
+          url.style.transition = r.style.transition = "none";
+          r.style.backgroundColor = "#850";
+          url.style.transform = "scale(2)";
+          r.querySelector("input.preset:checked").focus();
+          window.setTimeout(() => {
+              r.style.transition = "1s background-color";
+              url.style.transition = "1s transform";
+              r.style.backgroundColor = "";
+              url.style.transform = "none";
+              r.scrollIntoView();
+          }, 50);
+        }
+      }
+    }
+
+    filterSites(key) {
+      key = Sites.toExternal(key);
+      for (let r of this.allSiteRows()) {
+        if (r.querySelector(".full-address").textContent.trim().includes(key)) {
+          r.style.display = "";
+        } else {
+          r.style.display = "none";
+        }
+      }
+    }
+  }
+
+  return UI;
+})();
diff --git a/src/ui/whirlpool.css b/src/ui/whirlpool.css
new file mode 100644
index 0000000..0e2147a
--- /dev/null
+++ b/src/ui/whirlpool.css
@@ -0,0 +1,45 @@
+
+.cssload-container{
+	position:relative;
+}
+
+.cssload-whirlpool,
+.cssload-whirlpool::before,
+.cssload-whirlpool::after {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	border: 1px solid rgb(204,204,204);
+	border-left-color: rgb(0,0,0);
+	border-radius: 974px;
+}
+
+.cssload-whirlpool {
+	margin: -24px 0 0 -24px;
+	height: 49px;
+	width: 49px;
+	animation: cssload-rotate 1150ms linear infinite;
+}
+
+.cssload-whirlpool::before {
+	content: "";
+	margin: -22px 0 0 -22px;
+	height: 43px;
+	width: 43px;
+	animation: cssload-rotate 1150ms linear infinite;
+}
+
+.cssload-whirlpool::after {
+	content: "";
+	margin: -28px 0 0 -28px;
+	height: 55px;
+	width: 55px;
+	animation: cssload-rotate 2300ms linear infinite;
+}
+
+
+@keyframes cssload-rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}