diff --git a/global.css b/global.css index 4237fe22..785afdcd 100644 --- a/global.css +++ b/global.css @@ -371,6 +371,7 @@ body.resizing-v > * { .split-btn { position: relative; white-space: nowrap; + --menu-pad: .5em; } .split-btn-pedal { margin-left: -1px !important; @@ -386,7 +387,7 @@ body.resizing-v > * { border-top: calc(var(--side) * 1.3) solid currentColor; vertical-align: bottom; } -.split-btn-pedal.active { +.split-btn.active .split-btn-pedal { box-shadow: inset 0 0 100px rgba(0, 0, 0, .2); } .split-btn-menu { @@ -400,7 +401,7 @@ body.resizing-v > * { z-index: 1000; } .split-btn-menu > * { - padding: .5em 1em; + padding: var(--menu-pad) 1em; display: block; } .split-btn-menu > :hover { diff --git a/js/dom-on-load.js b/js/dom-on-load.js index a4e3787c..213fcb02 100644 --- a/js/dom-on-load.js +++ b/js/dom-on-load.js @@ -97,29 +97,31 @@ * @param {PointerEvent} [event] - absent when self-invoked to hide the menu */ function splitMenu(event) { - const prevMenu = $(SPLIT_BTN_MENU); + const prevMenu = $('.split-btn.active ' + SPLIT_BTN_MENU) || $(SPLIT_BTN_MENU); const prevPedal = (prevMenu || {}).previousElementSibling; const pedal = event && event.target.closest('.split-btn-pedal'); const entry = event && prevMenu && event.target.closest(SPLIT_BTN_MENU + '>*'); if (prevMenu) { + prevMenu.onfocusout = null; prevMenu.remove(); - prevPedal.classList.remove('active'); + prevPedal.parentElement.classList.remove('active'); window.off('keydown', splitMenuEscape); + if (!event) prevPedal.focus(); } - if (pedal) { + if (pedal && pedal !== prevPedal) { const menu = $create(SPLIT_BTN_MENU, Array.from(pedal.attributes, ({name, value}) => name.startsWith('menu-') && $create('a', {tabIndex: 0, __cmd: name.split('-').pop()}, value) )); window.on('keydown', splitMenuEscape); - menu.on('focusout', e => { + menu.onfocusout = e => { if (!menu.contains(e.relatedTarget)) { setTimeout(splitMenu); } - }); + }; pedal.on('mousedown', e => e.preventDefault()); - pedal.classList.toggle('active'); + pedal.parentElement.classList.toggle('active'); pedal.after(menu); moveFocus(menu, 0); focusAccessibility.toggle(menu.firstChild, focusAccessibility.get(pedal)); diff --git a/popup/popup.css b/popup/popup.css index 0e88b94b..6b08e6fc 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -911,6 +911,12 @@ html:not(.styles-last) .split-btn-pedal::after { } } +@media (max-height: 130px) { + #find-split { + --menu-pad: .25em; + } +} + /* Popup adjustments for common zoom levels */ @media (-webkit-min-device-pixel-ratio: 1.05) {