Automatically persist contextual policy on creation and use animation to convey it being a new instance.

src/ui/ui.css

@@ -156,10 +156,23 @@ html.tor .tor, html:not(.tor) .not-tor {
 .capsContext select {
   display: none;
 }
+
 .contextual .capsContext select {
   display: initial;
 }
 
+.pageTurn {
+  position: absolute;
+  outline: 3px solid #888;
+  z-index: 1000;
+  background-color: white;
+  transform-origin: bottom center;
+  transition: transform .5s;
+}
+
+.pageTurn.endgame {
+  transform: scale(.5, .1);
+}
 
 input[type="text"] {
   border: 1px solid;
@@ -454,6 +467,7 @@ input.preset:checked ~ input.temp {
 .customizer fieldset {
   box-shadow: 1px 1px 1px #888;
   max-width: 580px;
+  position: relative;
 }
 
 #presets legend select, #presets legend button {
@@ -520,7 +534,7 @@ legend {
   background-color: #850 !important;
 }
 .hilite-end {
-  transition: 1s background-color;
+  transition: background-color 1s;
 }
 .hilite .url {
   transform: scale(2);
@@ -528,7 +542,7 @@ legend {
 }
 .hilite-end .url {
   transform: none;
-  transition: 1s transform;
+  transition: transform 1s;
 }
 
 #xssChoices {

src/ui/ui.js

@@ -494,6 +494,12 @@ var UI = (() => {
 
       if (ev.type === "change") {
         let {policy} = UI;
+
+        row.permissionsChanged = false;
+        if (!row._originalPerms) {
+          row._originalPerms = row.perms.clone();
+        }
+
         if (target.matches(".capsContext select")) {
           let opt = target.querySelector("option:checked");
           if (!opt) return;
@@ -504,6 +510,7 @@ var UI = (() => {
             let temp = row.perms.temp || UI.forceIncognito;
             perms = new Permissions(new Set(row.perms.capabilities), temp);
             row.perms.contextual.set(context, perms);
+            fireOnChange(this, row);
           }
           row.perms = row._customPerms = perms;
           row.siteMatch = siteMatch;
@@ -512,10 +519,7 @@ var UI = (() => {
           tempToggle.checked = perms.temp;
           return;
         }
-        row.permissionsChanged = false;
+
-        if (!row._originalPerms) {
-          row._originalPerms = row.perms.clone();
-        }
 
         let presetValue = preset.value;
         let policyPreset = presetValue.startsWith("T_") ? policy[presetValue.substring(2)].tempTwin : policy[presetValue];
@@ -633,20 +637,34 @@ var UI = (() => {
             }
           }
         }
-        let handleSelection = ctxSelect.onchange = () => {
+        let handleSelection = () => {
           let selected = ctxSelect.querySelector("option:checked");
           ctxReset.disabled = !(selected && selected.value !== "*");
-
           ctxReset.onclick = () => {
             let perms = UI.policy.get(row.siteMatch).perms;
             perms.contextual.delete(row.contextMatch);
-            row.permissionsChanged = true;
+            row.permissionsChanged = row._originalPerms && !row.perms.sameAs(row._originalPerms);
             fireOnChange(this, row);
             selected.previousElementSibling.selected = true;
-            selected.remove();
+            if (!this.mainDomain) selected.remove();
             ctxSelect.dispatchEvent(new Event("change"));
           }
         }
+        ctxSelect.onchange = e => {
+          let caps = customizer.querySelector(".caps");
+          let pageTurn = caps.cloneNode(true);
+          let s = pageTurn.style;
+          s.top = `${caps.offsetTop}px`;
+          s.left =`${caps.offsetLeft}px`;
+          s.width = `${caps.offsetWidth}px`;
+          s.height = `${caps.offsetHeight}px`;
+          pageTurn.classList.add("pageTurn");
+          caps.parentNode.appendChild(pageTurn);
+          setTimeout(() => pageTurn.classList.add("endgame"), 1);
+          setTimeout(() => pageTurn.remove(), 500);
+          handleSelection();
+        }
+
         handleSelection();
       }