Automatically persist contextual policy on creation and use animation to convey it being a new instance.
This commit is contained in:
parent
824b694b82
commit
e08e4d7f74
|
@ -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 {
|
||||||
|
|
34
src/ui/ui.js
34
src/ui/ui.js
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue