diff --git a/src/ui/ui.css b/src/ui/ui.css index 97ede7c..bdb0f71 100644 --- a/src/ui/ui.css +++ b/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 { diff --git a/src/ui/ui.js b/src/ui/ui.js index 6dcc8d8..e5ad1d0 100644 --- a/src/ui/ui.js +++ b/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(); }