More precise DnD of toolbar buttons + work-around for https://bugzilla.mozilla.org/show_bug.cgi?id=568313
This commit is contained in:
hackademix
parent
93fa4ad7dc
commit
d2f43eb305
|
|
@ -37,8 +37,21 @@ body {
|
|||
text-align: left;
|
||||
vertical-align: middle;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#top .icon > div {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#top .icon:after {
|
||||
content: attr(title);
|
||||
}
|
||||
|
||||
.mobile #top {
|
||||
height: 3.5em;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@
|
|||
<body tabindex="-1" id="noscript-popup">
|
||||
<div tabindex="-1" id="main">
|
||||
<div id="top">
|
||||
<button aria-role="button" id="close" class="close icon">__MSG_Close__</button>
|
||||
<button aria-role="button" id="reload" class="reload icon">__MSG_Reload__</button>
|
||||
<button aria-role="button" id="options" class="options icon">__MSG_Options__</button>
|
||||
<button aria-role="button" id="close" class="close icon" title="__MSG_Close__"></button>
|
||||
<button aria-role="button" id="reload" class="reload icon" title="__MSG_Reload__"></button>
|
||||
<button aria-role="button" id="options" class="options icon" title="__MSG_Options__"></button>
|
||||
<div class="hider">
|
||||
<a aria-role="button" class="reveal" title="__MSG_Reveal__">…</a>
|
||||
<div class="hider-label">__MSG_Hider__</div>
|
||||
|
|
@ -28,8 +28,8 @@
|
|||
<div class="spacer"></div>
|
||||
<button aria-role="button" id="enforce" class="toggle icon"></button>
|
||||
<button aria-role="button" id="enforce-tab" class="toggle icon"></button>
|
||||
<button aria-role="button" id="temp-trust-page" class="toggle icon">__MSG_TempTrustPage__</button>
|
||||
<button aria-role="button" id="revoke-temp" class="toggle icon">__MSG_RevokeTemp__</button>
|
||||
<button aria-role="button" id="temp-trust-page" class="toggle icon" title="__MSG_TempTrustPage__"></button>
|
||||
<button aria-role="button" id="revoke-temp" class="toggle icon" title="__MSG_RevokeTemp__"></button>
|
||||
</div>
|
||||
<div id="message" class="hidden"></div>
|
||||
<div id="high-contrast-chooser" class="opt-group">
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@ addEventListener("unload", e => {
|
|||
let pressed = policy.enforced;
|
||||
let button = document.getElementById("enforce");
|
||||
button.setAttribute("aria-pressed", pressed);
|
||||
button.textContent = button.title = _(pressed ? "NoEnforcement" : "Enforce");
|
||||
button.title = _(pressed ? "NoEnforcement" : "Enforce");
|
||||
button.onclick = async () => {
|
||||
this.disabled = true;
|
||||
policy.enforced = !pressed;
|
||||
|
|
@ -165,7 +165,7 @@ addEventListener("unload", e => {
|
|||
let pressed = !UI.unrestrictedTab;
|
||||
let button = document.getElementById("enforce-tab");
|
||||
button.setAttribute("aria-pressed", pressed);
|
||||
button.textContent = button.title = _(pressed ? "NoEnforcementForTab" : "EnforceForTab");
|
||||
button.title = _(pressed ? "NoEnforcementForTab" : "EnforceForTab");
|
||||
if (UI.policy.enforced) {
|
||||
button.onclick = async () => {
|
||||
this.disabled = true;
|
||||
|
|
|
|||
|
|
@ -16,10 +16,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
|
@ -48,6 +44,7 @@
|
|||
dt.dropEffect = "move";
|
||||
dt.setDragImage(d, 0, 0);
|
||||
toggleHider(true);
|
||||
this.draggedElement = d;
|
||||
},
|
||||
dragend(ev) {
|
||||
ev.target.style.opacity = "";
|
||||
|
|
@ -56,23 +53,30 @@
|
|||
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"));
|
||||
let d = ev.dataTransfer ?
|
||||
document.getElementById(ev.dataTransfer.getData("text/plain"))
|
||||
: this.draggedElement;
|
||||
this.draggedElement = null;
|
||||
if (!d) return;
|
||||
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);
|
||||
if (!t.closest("#top")) return; // outside the toolbar?
|
||||
let stop = null;
|
||||
for (let c of toolbar.children) {
|
||||
if (ev.clientX < c.offsetLeft + c.offsetWidth / 2) {
|
||||
stop = c;
|
||||
break;
|
||||
}
|
||||
}
|
||||
t.insertBefore(d, stop);
|
||||
}
|
||||
|
||||
let left = [], right = [];
|
||||
|
|
@ -103,14 +107,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
for (let [action, handler] of Object.entries(dnd)) {
|
||||
toolbar.addEventListener(action, handler, true);
|
||||
}
|
||||
|
||||
let dragDiv = document.createElement("div");
|
||||
for (let draggable of document.querySelectorAll("#top .icon")) {
|
||||
draggable.setAttribute("draggable", "true");
|
||||
// work-around for https://bugzilla.mozilla.org/show_bug.cgi?id=568313
|
||||
draggable.appendChild(dragDiv.cloneNode());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue