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

This commit is contained in:
hackademix 2022-02-15 23:25:08 +01:00
parent 824b694b82
commit e08e4d7f74
2 changed files with 42 additions and 10 deletions

View File

@ -156,10 +156,23 @@ html.tor .tor, html:not(.tor) .not-tor {
.capsContext select { .capsContext select {
display: none; display: none;
} }
.contextual .capsContext select { .contextual .capsContext select {
display: initial; 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"] { input[type="text"] {
border: 1px solid; border: 1px solid;
@ -454,6 +467,7 @@ input.preset:checked ~ input.temp {
.customizer fieldset { .customizer fieldset {
box-shadow: 1px 1px 1px #888; box-shadow: 1px 1px 1px #888;
max-width: 580px; max-width: 580px;
position: relative;
} }
#presets legend select, #presets legend button { #presets legend select, #presets legend button {
@ -520,7 +534,7 @@ legend {
background-color: #850 !important; background-color: #850 !important;
} }
.hilite-end { .hilite-end {
transition: 1s background-color; transition: background-color 1s;
} }
.hilite .url { .hilite .url {
transform: scale(2); transform: scale(2);
@ -528,7 +542,7 @@ legend {
} }
.hilite-end .url { .hilite-end .url {
transform: none; transform: none;
transition: 1s transform; transition: transform 1s;
} }
#xssChoices { #xssChoices {

View File

@ -494,6 +494,12 @@ var UI = (() => {
if (ev.type === "change") { if (ev.type === "change") {
let {policy} = UI; let {policy} = UI;
row.permissionsChanged = false;
if (!row._originalPerms) {
row._originalPerms = row.perms.clone();
}
if (target.matches(".capsContext select")) { if (target.matches(".capsContext select")) {
let opt = target.querySelector("option:checked"); let opt = target.querySelector("option:checked");
if (!opt) return; if (!opt) return;
@ -504,6 +510,7 @@ var UI = (() => {
let temp = row.perms.temp || UI.forceIncognito; let temp = row.perms.temp || UI.forceIncognito;
perms = new Permissions(new Set(row.perms.capabilities), temp); perms = new Permissions(new Set(row.perms.capabilities), temp);
row.perms.contextual.set(context, perms); row.perms.contextual.set(context, perms);
fireOnChange(this, row);
} }
row.perms = row._customPerms = perms; row.perms = row._customPerms = perms;
row.siteMatch = siteMatch; row.siteMatch = siteMatch;
@ -512,10 +519,7 @@ var UI = (() => {
tempToggle.checked = perms.temp; tempToggle.checked = perms.temp;
return; return;
} }
row.permissionsChanged = false;
if (!row._originalPerms) {
row._originalPerms = row.perms.clone();
}
let presetValue = preset.value; let presetValue = preset.value;
let policyPreset = presetValue.startsWith("T_") ? policy[presetValue.substring(2)].tempTwin : policy[presetValue]; 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"); let selected = ctxSelect.querySelector("option:checked");
ctxReset.disabled = !(selected && selected.value !== "*"); ctxReset.disabled = !(selected && selected.value !== "*");
ctxReset.onclick = () => { ctxReset.onclick = () => {
let perms = UI.policy.get(row.siteMatch).perms; let perms = UI.policy.get(row.siteMatch).perms;
perms.contextual.delete(row.contextMatch); perms.contextual.delete(row.contextMatch);
row.permissionsChanged = true; row.permissionsChanged = row._originalPerms && !row.perms.sameAs(row._originalPerms);
fireOnChange(this, row); fireOnChange(this, row);
selected.previousElementSibling.selected = true; selected.previousElementSibling.selected = true;
selected.remove(); if (!this.mainDomain) selected.remove();
ctxSelect.dispatchEvent(new Event("change")); 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(); handleSelection();
} }