Merge pull request #294 from openstyles/narcolepticinsomniac-accessibility
Hide focus outlines without crippling accessibility, plus buttons
This commit is contained in:
tophf
GitHub
commit
9fbe97bfd6
56
edit.html
56
edit.html
|
|
@ -107,7 +107,9 @@
|
|||
<br>
|
||||
<div class="applies-to">
|
||||
<label i18n-text="appliesLabel">
|
||||
<svg class="svg-icon info applies-to-help"><use xlink:href="#svg-icon-help"/></svg>
|
||||
<a href="#" class="svg-inline-wrapper applies-to-help">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</label>
|
||||
<ul class="applies-to-list"></ul>
|
||||
</div>
|
||||
|
|
@ -191,20 +193,24 @@
|
|||
<label id="enabled-label" i18n-text="styleEnabledLabel">
|
||||
<input type="checkbox" id="enabled" class="style-contributor">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label><!--
|
||||
--><svg id="toggle-style-help" class="svg-icon info">
|
||||
<use xlink:href="#svg-icon-help"/>
|
||||
</svg>
|
||||
</label>
|
||||
<a href="#" id="toggle-style-help" class="svg-inline-wrapper">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section id="actions">
|
||||
<div>
|
||||
<button id="save-button" i18n-text="styleSaveLabel"></button>
|
||||
<button id="beautify" i18n-text="styleBeautify"></button>
|
||||
<a href="manage.html"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
|
||||
<a href="manage.html" tabindex="-1"><button id="cancel-button" i18n-text="styleCancelEditLabel"></button></a>
|
||||
</div>
|
||||
<div id="mozilla-format-container">
|
||||
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading"><svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
|
||||
<h2 id="mozilla-format-heading" i18n-text="styleMozillaFormatHeading">
|
||||
<a class="svg-inline-wrapper" href="#">
|
||||
<svg id="to-mozilla-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</h2>
|
||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||
</div>
|
||||
|
|
@ -246,11 +252,9 @@
|
|||
<input id="editor.colorpicker" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
<span class="svg-inline-wrapper" i18n-title="shortcutsNote">
|
||||
<svg id="colorpicker-settings" class="svg-icon settings">
|
||||
<use xlink:href="#svg-icon-settings"/>
|
||||
</svg>
|
||||
</span>
|
||||
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
|
||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="option usercss-only">
|
||||
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
|
||||
|
|
@ -268,9 +272,9 @@
|
|||
<select id="editor.keyMap"></select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<span class="svg-inline-wrapper">
|
||||
<svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</span>
|
||||
<a id="keyMap-help" href="#" class="svg-inline-wrapper">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="option aligned">
|
||||
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
|
||||
|
|
@ -300,19 +304,17 @@
|
|||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
|
||||
<svg id="linter-settings" class="svg-icon settings">
|
||||
<use xlink:href="#svg-icon-settings"/>
|
||||
</svg>
|
||||
</span>
|
||||
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
|
||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</details>
|
||||
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="linterIssues">: <span id="issue-count"></span><!-- EAT SPACE
|
||||
--><svg id="lint-help" class="svg-icon info intercepts-click">
|
||||
<use xlink:href="#svg-icon-help"/>
|
||||
</svg>
|
||||
<h2 i18n-text="linterIssues">: <span id="issue-count"></span>
|
||||
<a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</h2>
|
||||
</summary>
|
||||
<div></div>
|
||||
|
|
@ -324,7 +326,11 @@
|
|||
</div>
|
||||
</div>
|
||||
<section id="sections">
|
||||
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><svg id="sections-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg></h2>
|
||||
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span>
|
||||
<a id="sections-help" href="#" class="svg-inline-wrapper">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</h2>
|
||||
</section>
|
||||
<div id="help-popup">
|
||||
<div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,8 @@ onDOMscriptReady('/colorview.js').then(() => {
|
|||
cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color'));
|
||||
}
|
||||
|
||||
function configureColorpicker() {
|
||||
function configureColorpicker(event) {
|
||||
event.preventDefault();
|
||||
const input = $create('input', {
|
||||
type: 'search',
|
||||
spellcheck: false,
|
||||
|
|
|
|||
|
|
@ -32,6 +32,15 @@ body {
|
|||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#options > div.option:nth-last-of-type(7) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#options > div.option:nth-last-of-type(7) + .usercss-only {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#basic-info-enabled {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
@ -93,24 +102,35 @@ label {
|
|||
#url:not([href^="http"]) {
|
||||
display: none;
|
||||
}
|
||||
#save-button {
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dirty #save-button {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
.svg-icon {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
transition: fill .5s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
h2 .svg-icon, label .svg-icon {
|
||||
margin-top: -1px;
|
||||
.svg-inline-wrapper {
|
||||
margin-left: .2rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#mozilla-format-heading .svg-inline-wrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
#basic-info-enabled .svg-inline-wrapper {
|
||||
margin-left: .1rem;
|
||||
}
|
||||
#colorpicker-settings.svg-inline-wrapper {
|
||||
margin: -2px 0 0 .1rem;
|
||||
}
|
||||
.svg-inline-wrapper.applies-to-help {
|
||||
margin: -2px 0 0 .25rem;
|
||||
}
|
||||
.aligned .svg-inline-wrapper {
|
||||
margin: -2px 0 0 .3rem;
|
||||
}
|
||||
#sections-help {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.svg-icon.info {
|
||||
width: 14px;
|
||||
|
|
@ -145,7 +165,6 @@ input:invalid {
|
|||
align-items: center;
|
||||
margin-left: -13px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -360,7 +379,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
|||
}
|
||||
.regexp-report summary, .regexp-report div {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.regexp-report mark {
|
||||
background-color: rgba(255, 255, 0, .5);
|
||||
|
|
@ -376,7 +394,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
|||
font-weight: bold;
|
||||
margin-left: -1rem;
|
||||
margin-bottom: .5rem;
|
||||
outline: none;
|
||||
cursor: default;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
|
@ -609,6 +626,11 @@ html:not(.usercss) .usercss-only,
|
|||
display: none !important; /* hide during page init */
|
||||
}
|
||||
|
||||
.usercss #name {
|
||||
background-color: #eee;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#sections .single-editor {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
21
edit/edit.js
21
edit/edit.js
|
|
@ -273,8 +273,6 @@ function initHooks() {
|
|||
}
|
||||
}
|
||||
|
||||
// common for usercss and classic
|
||||
|
||||
function onChange(event) {
|
||||
const node = event.target;
|
||||
if ('savedValue' in node) {
|
||||
|
|
@ -317,12 +315,6 @@ function setCleanItem(node, isClean) {
|
|||
function isCleanGlobal() {
|
||||
const clean = Object.keys(dirty).length === 0;
|
||||
setDirtyClass(document.body, !clean);
|
||||
// let saveBtn = $('#save-button')
|
||||
// if (clean){
|
||||
// //saveBtn.removeAttribute('disabled');
|
||||
// }else{
|
||||
// //saveBtn.setAttribute('disabled', true);
|
||||
// }
|
||||
return clean;
|
||||
}
|
||||
|
||||
|
|
@ -406,6 +398,7 @@ function updateTitle() {
|
|||
const clean = isCleanGlobal();
|
||||
const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]);
|
||||
document.title = clean ? title : DIRTY_TITLE.replace('$', title);
|
||||
$('#save-button').disabled = clean;
|
||||
}
|
||||
|
||||
function updateLintReportIfEnabled(...args) {
|
||||
|
|
@ -500,19 +493,23 @@ function fromMozillaFormat() {
|
|||
}
|
||||
}
|
||||
|
||||
function showSectionHelp() {
|
||||
function showSectionHelp(event) {
|
||||
event.preventDefault();
|
||||
showHelp(t('styleSectionsTitle'), t('sectionHelp'));
|
||||
}
|
||||
|
||||
function showAppliesToHelp() {
|
||||
function showAppliesToHelp(event) {
|
||||
event.preventDefault();
|
||||
showHelp(t('appliesLabel'), t('appliesHelp'));
|
||||
}
|
||||
|
||||
function showToMozillaHelp() {
|
||||
function showToMozillaHelp(event) {
|
||||
event.preventDefault();
|
||||
showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp'));
|
||||
}
|
||||
|
||||
function showToggleStyleHelp() {
|
||||
function showToggleStyleHelp(event) {
|
||||
event.preventDefault();
|
||||
showHelp(t('helpAlt'), t('styleEnabledToggleHint'));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,8 @@ var linterConfig = {
|
|||
},
|
||||
|
||||
// this is an event listener so it can't refer to self via 'this'
|
||||
openOnClick() {
|
||||
openOnClick(event) {
|
||||
event.preventDefault();
|
||||
setupLinterPopup(linterConfig.stringify());
|
||||
},
|
||||
|
||||
|
|
|
|||
21
global.css
21
global.css
|
|
@ -7,7 +7,8 @@ button {
|
|||
font: 400 13.3333px Arial;
|
||||
color: #000;
|
||||
background-color: hsl(0, 0%, 100%);
|
||||
background: url(../images/button.png)repeat-x;
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
|
||||
background-repeat: repeat-x;
|
||||
background-size: 100% 100%;
|
||||
transition: background-color .25s, border-color .25s;
|
||||
}
|
||||
|
|
@ -17,6 +18,14 @@ button:not(:disabled):hover {
|
|||
border-color: hsl(0, 0%, 52%);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
border-color: hsl(0, 0%, 52%);
|
||||
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
|
||||
background-repeat: repeat-x;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
|
||||
#message-box-buttons button:not(:disabled):hover {
|
||||
background-color: hsl(0, 0%, 90%);
|
||||
|
|
@ -60,12 +69,11 @@ input[type="checkbox"]:not(.slider) {
|
|||
display: inline-flex;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0, 0%, 0%, .1);
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: background-color .1s, border-color .1s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(.slider):not(:disabled):hover {
|
||||
input[type="checkbox"]:not(.slider):hover {
|
||||
border-color: hsl(0, 0%, 32%);
|
||||
background-color: hsl(0, 0%, 82%);
|
||||
}
|
||||
|
|
@ -128,7 +136,6 @@ select {
|
|||
input[type="radio"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
outline: none;
|
||||
background: hsl(0, 0%, 88%);
|
||||
border-radius: 50%;
|
||||
border: 1px solid hsl(0, 0%, 60%);
|
||||
|
|
@ -170,8 +177,14 @@ select[disabled] > option {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
[data-focused-via-click] :focus,
|
||||
[data-focused-via-click]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none) {
|
||||
.moz-appearance-bug .svg-icon.checked,
|
||||
.moz-appearance-bug .onoffswitch input,
|
||||
.moz-appearance-bug input[type="radio"]:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 203 B |
BIN
images/help.png
BIN
images/help.png
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
44
js/dom.js
44
js/dom.js
|
|
@ -57,6 +57,7 @@ $$.remove = (selector, base = document) => {
|
|||
onDOMready().then(() => {
|
||||
$.remove('#firefox-transitions-bug-suppressor');
|
||||
initCollapsibles();
|
||||
focusAccessibility();
|
||||
});
|
||||
|
||||
if (!chrome.app && chrome.windows) {
|
||||
|
|
@ -314,3 +315,46 @@ function initCollapsibles({bindClickOn = 'h2'} = {}) {
|
|||
prefs.set(el.dataset.pref, el.open);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function focusAccessibility() {
|
||||
// Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
|
||||
// Since we don't want full layout recalc, we modify only the closest focusable element,
|
||||
// which we try to find in DOM for this many parentElement jumps:
|
||||
const focusables = focusAccessibility.ELEMENTS =
|
||||
['a', 'button', 'input', 'label', 'select', 'summary'];
|
||||
const GIVE_UP_DEPTH = 4;
|
||||
addEventListener('mousedown', suppressOutlineOnClick, {passive: true});
|
||||
addEventListener('keydown', keepOutlineOnTab, {passive: true});
|
||||
|
||||
function suppressOutlineOnClick({target}) {
|
||||
for (let el = target, i = 0; el && i++ < GIVE_UP_DEPTH; el = el.parentElement) {
|
||||
if (focusables.includes(el.localName)) {
|
||||
if (el.dataset.focusedViaClick === undefined) {
|
||||
el.dataset.focusedViaClick = '';
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function keepOutlineOnTab(event) {
|
||||
if (event.which === 9) {
|
||||
setTimeout(keepOutlineOnTab, 0, true);
|
||||
return;
|
||||
} else if (event !== true) {
|
||||
return;
|
||||
}
|
||||
let el = document.activeElement;
|
||||
if (!el || !focusables.includes(el.localName)) {
|
||||
return;
|
||||
}
|
||||
if (el.dataset.focusedViaClick !== undefined) {
|
||||
delete el.dataset.focusedViaClick;
|
||||
}
|
||||
el = el.closest('[data-focused-via-click]');
|
||||
if (el) {
|
||||
delete el.dataset.focusedViaClick;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
manage.html
42
manage.html
|
|
@ -41,7 +41,7 @@
|
|||
</p>
|
||||
<p class="actions">
|
||||
<a class="style-edit-link">
|
||||
<button i18n-text="editStyleLabel"></button>
|
||||
<button i18n-text="editStyleLabel" tabindex="-1"></button>
|
||||
</a>
|
||||
<button class="enable" i18n-text="enableStyleLabel"></button>
|
||||
<button class="disable" i18n-text="disableStyleLabel"></button>
|
||||
|
|
@ -64,16 +64,16 @@
|
|||
</h2>
|
||||
<p class="actions">
|
||||
<a target="_blank" class="homepage"></a>
|
||||
<span i18n-title="deleteStyleLabel">
|
||||
<svg class="svg-icon delete" viewBox="0 0 20 20">
|
||||
<a href="#" class="delete" i18n-title="deleteStyleLabel">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
|
||||
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<div class="applies-to">
|
||||
<div class="targets"></div>
|
||||
<span class="expander">...</span>
|
||||
<a href="#" class="expander">...</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -92,27 +92,27 @@
|
|||
</template>
|
||||
|
||||
<template data-id="configureIcon">
|
||||
<span class="configure-usercss" i18n-title="configureStyle">
|
||||
<a href="#" class="configure-usercss" i18n-title="configureStyle">
|
||||
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
|
||||
</span>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<template data-id="updaterIcons">
|
||||
<span class="updater-icons">
|
||||
<span class="check-update" i18n-title="checkForUpdate">
|
||||
<a href="#" class="check-update" i18n-title="checkForUpdate">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<path d="M18,16.6l-3.1-3.1c0.5-0.7,0.9-1.5,1-2.5h-2.1c-0.4,1.7-2,3-3.9,3c-0.8,0-1.6-0.3-2.3-0.7
|
||||
L10,11H6.1H4.1H4v6l2.3-2.3c1,0.8,2.3,1.3,3.7,1.3c1.3,0,2.5-0.4,3.5-1.1l3.1,3.1L18,16.6z"/>
|
||||
<path d="M10,6c0.8,0,1.6,0.3,2.3,0.7L10,9h3.9h2.1H16V3l-2.3,2.3C12.7,4.5,11.4,4,10,4
|
||||
C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="update" i18n-title="installUpdate">
|
||||
</a>
|
||||
<a href="#" class="update" i18n-title="installUpdate">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon points="16,8 12,8 12,3 8,3 8,8 4,8 10,14 "/>
|
||||
<rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon points="15.83 4.75 8.76 11.82 5.2 8.26 3.51 9.95 8.76 15.19 17.52 6.43 15.83 4.75"/>
|
||||
|
|
@ -166,11 +166,13 @@
|
|||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
|
||||
<svg id="reset-filters" class="svg-icon" viewBox="0 0 20 20">
|
||||
<a id="reset-filters" href="#">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<title i18n-text="genericResetLabel"></title>
|
||||
<polygon points="16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5
|
||||
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
|
||||
</svg>
|
||||
</a>
|
||||
</summary>
|
||||
|
||||
<div class="filter-selection">
|
||||
|
|
@ -239,18 +241,20 @@
|
|||
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
|
||||
data-filter=":not(.not-matching)"
|
||||
data-filter-hide=".not-matching">
|
||||
<svg id="search-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
<a href="#" id="search-help">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
||||
<p class="nowrap">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
<span id="update-history" i18n-title="genericHistoryLabel">
|
||||
<a href="#" id="update-history" i18n-title="genericHistoryLabel">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
|
||||
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
|
@ -261,7 +265,7 @@
|
|||
|
||||
<div id="add-style-wrapper">
|
||||
<a href="edit.html">
|
||||
<button id="add-style-label" i18n-text="addStyleLabel"></button>
|
||||
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
|
||||
</a>
|
||||
<label id="add-style-as-usercss-wrapper">
|
||||
<input type="checkbox" id="newStyleAsUsercss">
|
||||
|
|
@ -292,10 +296,12 @@
|
|||
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
||||
<input id="manage.newUI.favicons" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<svg class="svg-icon select-arrow" data-toggle-on-click="#faviconsHelp">
|
||||
<a href="#" data-toggle-on-click="#faviconsHelp">
|
||||
<svg class="svg-icon select-arrow">
|
||||
<title i18n-text="optionsSubheading"></title>
|
||||
<use xlink:href="#svg-icon-select-arrow"/>
|
||||
</svg>
|
||||
</a>
|
||||
</label>
|
||||
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
||||
<div>
|
||||
|
|
@ -317,7 +323,7 @@
|
|||
<a id="find-editor-styles"
|
||||
href="https://userstyles.org/styles/browse/chrome-extension"
|
||||
i18n-title="editorStylesButton"
|
||||
target="_blank"><button i18n-text="cm_theme"></button></a>
|
||||
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
||||
</p>
|
||||
|
||||
</details>
|
||||
|
|
|
|||
|
|
@ -97,11 +97,8 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
.svg-icon.config-reset-icon {
|
||||
/*position: absolute;*/
|
||||
pointer-events: all !important;
|
||||
.config-reset-icon .svg-icon {
|
||||
cursor: pointer;
|
||||
/*right: -7px;*/
|
||||
fill: #aaa;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
@ -110,7 +107,7 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.svg-icon.config-reset-icon:hover {
|
||||
.config-reset-icon:hover .svg-icon {
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
|
|
@ -155,9 +152,11 @@
|
|||
|
||||
.color-swatch {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 1px solid gray;
|
||||
margin-top: -22px;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.colorpicker-popup {
|
||||
|
|
|
|||
|
|
@ -195,12 +195,15 @@ function configDialog(style) {
|
|||
}
|
||||
|
||||
function buildConfigForm() {
|
||||
let resetter = $create('SVG:svg.svg-icon.config-reset-icon', {viewBox: '0 0 20 20'}, [
|
||||
let resetter =
|
||||
$create('a.config-reset-icon', {href: '#'}, [
|
||||
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
|
||||
$create('SVG:title', t('genericResetLabel')),
|
||||
$create('SVG:polygon', {
|
||||
points: '16.2,5.5 14.5,3.8 10,8.3 5.5,3.8 3.8,5.5 8.3,10 3.8,14.5 ' +
|
||||
'5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10',
|
||||
}),
|
||||
})
|
||||
])
|
||||
]);
|
||||
for (const va of vars) {
|
||||
let children;
|
||||
|
|
@ -208,8 +211,9 @@ function configDialog(style) {
|
|||
case 'color':
|
||||
children = [
|
||||
$create('.cm-colorview.config-value', [
|
||||
va.input = $create('.color-swatch', {
|
||||
va.input = $create('a.color-swatch', {
|
||||
va,
|
||||
href: '#',
|
||||
onclick: showColorpicker
|
||||
}),
|
||||
]),
|
||||
|
|
@ -269,6 +273,8 @@ function configDialog(style) {
|
|||
...children,
|
||||
resetter,
|
||||
]));
|
||||
|
||||
va.savedValue = va.value;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,6 +313,7 @@ function configDialog(style) {
|
|||
const el = va.input.closest('label');
|
||||
el.classList.toggle('dirty', Boolean(va.dirty));
|
||||
el.classList.toggle('nondefault', !isDefault(va));
|
||||
$('.config-reset-icon', el).disabled = isDefault(va);
|
||||
}
|
||||
|
||||
function resetOnClick(event) {
|
||||
|
|
@ -316,7 +323,8 @@ function configDialog(style) {
|
|||
onchange({target: this.va.input});
|
||||
}
|
||||
|
||||
function showColorpicker() {
|
||||
function showColorpicker(event) {
|
||||
event.preventDefault();
|
||||
window.removeEventListener('keydown', messageBox.listeners.key, true);
|
||||
const box = $('#message-box-contents');
|
||||
colorpicker.show({
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@ onDOMready().then(onBackgroundReady).then(() => {
|
|||
if (urlFilterParam) {
|
||||
$('#search').value = 'url:' + urlFilterParam;
|
||||
}
|
||||
$('#search-help').onclick = () => {
|
||||
$('#search-help').onclick = event => {
|
||||
event.preventDefault();
|
||||
messageBox({
|
||||
className: 'help-text',
|
||||
title: t('searchStyles'),
|
||||
|
|
@ -352,7 +353,9 @@ function showFiltersStats() {
|
|||
debounce(showFiltersStats, 100);
|
||||
return;
|
||||
}
|
||||
$('#filters summary').classList.toggle('active', filtersSelector.hide !== '');
|
||||
const active = filtersSelector.hide !== '';
|
||||
$('#filters summary').classList.toggle('active', active);
|
||||
$('#reset-filters').disabled = !active;
|
||||
const numTotal = BG.cachedStyles.list.length;
|
||||
const numHidden = installed.getElementsByClassName('entry hidden').length;
|
||||
const numShown = Math.min(numTotal - numHidden, installed.children.length);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ onDOMready().then(() => {
|
|||
let focusedName = '';
|
||||
const input = $create('textarea', {
|
||||
spellcheck: false,
|
||||
attributes: {tabindex: -1},
|
||||
oninput: incrementalSearch,
|
||||
});
|
||||
replaceInlineStyle({
|
||||
|
|
|
|||
|
|
@ -145,12 +145,11 @@ select {
|
|||
}
|
||||
|
||||
.svg-icon.config {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
.homepage {
|
||||
margin-left: 0.1em;
|
||||
margin-left: 0.25em;
|
||||
margin-right: 0.1em;
|
||||
}
|
||||
|
||||
|
|
@ -159,8 +158,7 @@ select {
|
|||
}
|
||||
|
||||
.homepage .svg-icon {
|
||||
margin-top: -4px;
|
||||
margin-left: .5ex;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.style-name {
|
||||
|
|
@ -190,6 +188,7 @@ select {
|
|||
|
||||
.actions > * {
|
||||
margin-bottom: .25rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actions > *:not(:last-child) {
|
||||
|
|
@ -212,7 +211,6 @@ select {
|
|||
.applies-to-extra-expander {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.applies-to-extra-expander {
|
||||
|
|
@ -284,7 +282,6 @@ select {
|
|||
align-items: center;
|
||||
margin-left: -13px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#header summary h2 {
|
||||
|
|
@ -363,7 +360,6 @@ select {
|
|||
|
||||
.filter-selection select {
|
||||
height: 18px;
|
||||
outline: none;
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
padding-left: 4px;
|
||||
|
|
@ -449,9 +445,8 @@ select {
|
|||
color: hsla(180, 100%, 15%, 1);
|
||||
}
|
||||
|
||||
.newUI .homepage .svg-icon {
|
||||
.newUI .homepage:not([href=""]) {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
margin-left: -28px;
|
||||
}
|
||||
|
||||
|
|
@ -462,11 +457,9 @@ select {
|
|||
}
|
||||
|
||||
.newUI .actions > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.newUI .actions .svg-icon {
|
||||
margin-right: 8px;
|
||||
margin: 0 6px 0 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.newUI .updater-icons > * {
|
||||
|
|
@ -488,7 +481,7 @@ select {
|
|||
|
||||
.newUI .checking-update .check-update {
|
||||
opacity: 0;
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
|
@ -496,7 +489,7 @@ select {
|
|||
.newUI .no-update:not(.update-problem):not(.update-done) .up-to-date,
|
||||
.newUI .no-update.update-problem .check-update,
|
||||
.newUI .update-done .updated {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.newUI .up-to-date svg,
|
||||
|
|
@ -595,6 +588,7 @@ select {
|
|||
line-height: .5ex;
|
||||
vertical-align: super;
|
||||
letter-spacing: .1ex;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.newUI .applies-to:not(.has-more) .expander {
|
||||
|
|
@ -602,7 +596,7 @@ select {
|
|||
}
|
||||
|
||||
.newUI .has-favicons .applies-to .expander {
|
||||
padding-left: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.newUI .target:hover {
|
||||
|
|
@ -661,15 +655,21 @@ select {
|
|||
margin-right: .5em;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click] {
|
||||
transform: rotate(-90deg);
|
||||
cursor: pointer;
|
||||
right: -16px;
|
||||
top: 0;
|
||||
pointer-events: auto;
|
||||
#newUIoptions [data-toggle-on-click="#faviconsHelp"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click][open] {
|
||||
#newUIoptions [data-toggle-on-click] svg {
|
||||
transform: rotate(-90deg);
|
||||
position: static;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click][open] svg {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
|
@ -690,14 +690,14 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
/* Default, no update buttons */
|
||||
.update,
|
||||
.check-update {
|
||||
.updater-icons .update,
|
||||
.updater-icons .check-update {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Check update button for things that can */
|
||||
.updatable .check-update {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Update check in progress */
|
||||
|
|
@ -707,7 +707,7 @@ input[id^="manage.newUI"] {
|
|||
|
||||
/* Updates available */
|
||||
.can-update .update {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.can-update[data-details$="locally edited"] button.update:after {
|
||||
|
|
@ -804,6 +804,10 @@ input[id^="manage.newUI"] {
|
|||
#reset-filters {
|
||||
position: absolute;
|
||||
margin-top: 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#reset-filters svg {
|
||||
fill: hsla(180, 50%, 27%, .5);
|
||||
width: 24px; /* widen the click area a bit */
|
||||
height: 20px;
|
||||
|
|
@ -811,7 +815,7 @@ input[id^="manage.newUI"] {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#reset-filters:hover {
|
||||
#reset-filters:hover svg {
|
||||
fill: hsla(180, 50%, 27%, 1);
|
||||
}
|
||||
|
||||
|
|
@ -839,8 +843,8 @@ input[id^="manage.newUI"] {
|
|||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
#search-wrapper .info {
|
||||
margin: 4px -5px 0 8px;
|
||||
#search-help {
|
||||
margin: 4px -5px 0 2px;
|
||||
}
|
||||
|
||||
#message-box.help-text > div {
|
||||
|
|
|
|||
|
|
@ -334,10 +334,12 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
check(event, entry) {
|
||||
event.preventDefault();
|
||||
checkUpdate(entry);
|
||||
},
|
||||
|
||||
update(event, entry) {
|
||||
event.preventDefault();
|
||||
const request = Object.assign(entry.updatedCode, {
|
||||
id: entry.styleId,
|
||||
reason: 'update',
|
||||
|
|
@ -353,6 +355,7 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
delete(event, entry) {
|
||||
event.preventDefault();
|
||||
const id = entry.styleId;
|
||||
const {name} = BG.cachedStyles.byId.get(id) || {};
|
||||
animateElement(entry);
|
||||
|
|
@ -362,8 +365,8 @@ Object.assign(handleEvent, {
|
|||
className: 'danger center',
|
||||
buttons: [t('confirmDelete'), t('confirmCancel')],
|
||||
})
|
||||
.then(({button, enter}) => {
|
||||
if (button === 0 || enter) {
|
||||
.then(({button}) => {
|
||||
if (button === 0) {
|
||||
deleteStyleSafe({id});
|
||||
}
|
||||
});
|
||||
|
|
@ -374,7 +377,8 @@ Object.assign(handleEvent, {
|
|||
event.preventDefault();
|
||||
},
|
||||
|
||||
expandTargets() {
|
||||
expandTargets(event) {
|
||||
event.preventDefault();
|
||||
this.closest('.applies-to').classList.toggle('expanded');
|
||||
},
|
||||
|
||||
|
|
@ -388,6 +392,7 @@ Object.assign(handleEvent, {
|
|||
},
|
||||
|
||||
config(event, {styleMeta}) {
|
||||
event.preventDefault()
|
||||
configDialog(styleMeta);
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -170,7 +170,8 @@ function renderUpdatesOnlyFilter({show, check} = {}) {
|
|||
}
|
||||
|
||||
|
||||
function showUpdateHistory() {
|
||||
function showUpdateHistory(event) {
|
||||
event.preventDefault();
|
||||
const log = $create('.update-history-log');
|
||||
let logText, scroller, toggler;
|
||||
let deleted = false;
|
||||
|
|
@ -179,13 +180,17 @@ function showUpdateHistory() {
|
|||
messageBox({
|
||||
title: t('updateCheckHistory'),
|
||||
contents: log,
|
||||
blockScroll: true,
|
||||
buttons: [
|
||||
t('confirmOK'),
|
||||
logText && {textContent: t('confirmDelete'), onclick: deleteHistory},
|
||||
],
|
||||
onshow: logText && (() => {
|
||||
scroller = $('#message-box-contents');
|
||||
scroller.tabIndex = 0;
|
||||
setTimeout(() => scroller.focus());
|
||||
scrollToBottom();
|
||||
|
||||
$('#message-box-buttons button').insertAdjacentElement('afterend',
|
||||
// TODO: add a global class for our labels
|
||||
// TODO: add a <template> or a common function to create such controls
|
||||
|
|
@ -196,6 +201,7 @@ function showUpdateHistory() {
|
|||
$create('SVG:use', {'xlink:href': '#svg-icon-checked'})),
|
||||
t('manageOnlyUpdates'),
|
||||
]));
|
||||
|
||||
toggler.onchange();
|
||||
}),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
/* global focusAccessibility */
|
||||
'use strict';
|
||||
|
||||
function messageBox({
|
||||
|
|
@ -12,10 +13,14 @@ function messageBox({
|
|||
bindGlobalListeners();
|
||||
createElement();
|
||||
document.body.appendChild(messageBox.element);
|
||||
if (onshow) {
|
||||
|
||||
messageBox.originalFocus = document.activeElement;
|
||||
moveFocus(1);
|
||||
|
||||
if (typeof onshow === 'function') {
|
||||
onshow(messageBox.element);
|
||||
}
|
||||
messageBox.element.focus();
|
||||
|
||||
return new Promise(_resolve => {
|
||||
messageBox.resolve = _resolve;
|
||||
});
|
||||
|
|
@ -29,13 +34,30 @@ function messageBox({
|
|||
resolveWith({button: this.buttonIndex});
|
||||
},
|
||||
key(event) {
|
||||
const keyCode = event.keyCode || event.which;
|
||||
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
|
||||
&& (keyCode === 13 || keyCode === 27)) {
|
||||
const {which, shiftKey, ctrlKey, altKey, metaKey, target} = event;
|
||||
if (shiftKey && which !== 9 || ctrlKey || altKey || metaKey) {
|
||||
return;
|
||||
}
|
||||
switch (which) {
|
||||
case 13:
|
||||
for (let el = target; el; el = el.parentElement) {
|
||||
if (focusAccessibility.ELEMENTS.includes(el.localName)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 27:
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
resolveWith(keyCode === 13 ? {enter: true} : {esc: true});
|
||||
break;
|
||||
case 9:
|
||||
moveFocus(shiftKey ? -1 : 1);
|
||||
event.preventDefault();
|
||||
return;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
resolveWith(which === 13 ? {enter: true} : {esc: true});
|
||||
},
|
||||
scroll() {
|
||||
scrollTo(blockScroll.x, blockScroll.y);
|
||||
|
|
@ -50,6 +72,9 @@ function messageBox({
|
|||
className: 'fadeout',
|
||||
onComplete: removeSelf,
|
||||
});
|
||||
if (messageBox.element.contains(document.activeElement)) {
|
||||
messageBox.originalFocus.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function createElement() {
|
||||
|
|
@ -97,6 +122,21 @@ function messageBox({
|
|||
messageBox.element = null;
|
||||
messageBox.resolve = null;
|
||||
}
|
||||
|
||||
function moveFocus(dir) {
|
||||
const elements = [...messageBox.element.getElementsByTagName('*')];
|
||||
const activeIndex = elements.indexOf(document.activeElement);
|
||||
const num = elements.length;
|
||||
for (let i = 1; i < num; i++) {
|
||||
const elementIndex = (activeIndex + i * dir + num) % num;
|
||||
// we don't use positive tabindex so we stop at any valid value
|
||||
const el = elements[elementIndex];
|
||||
if (!el.disabled && el.tabIndex >= 0) {
|
||||
el.focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
messageBox.alert = text =>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,21 @@
|
|||
}
|
||||
|
||||
.onoffswitch input {
|
||||
display: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
bottom: -10px;
|
||||
left: -10px;
|
||||
width: calc(100% + 12px);
|
||||
}
|
||||
|
||||
#message-box .onoffswitch input {
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
bottom: 0;
|
||||
height: calc(100% + 12px);
|
||||
}
|
||||
|
||||
.onoffswitch span {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,15 @@ setTimeout(splitLongTooltips);
|
|||
|
||||
if (!FIREFOX && !OPERA) {
|
||||
const block = $('#advanced');
|
||||
block.classList.add('collapsible', 'collapsed');
|
||||
block.onclick = event => {
|
||||
const toggleAdvanced = event => {
|
||||
if (block.classList.contains('collapsed') || event.target.closest('h1')) {
|
||||
block.classList.toggle('collapsed');
|
||||
}
|
||||
};
|
||||
block.classList.add('collapsible', 'collapsed');
|
||||
block.onclick = toggleAdvanced;
|
||||
block.onkeydown = event => event.which === 13 && toggleAdvanced(event);
|
||||
$('h1', block).tabIndex = 0;
|
||||
}
|
||||
|
||||
// actions
|
||||
|
|
|
|||
|
|
@ -326,6 +326,7 @@ Object.assign(handleEvent, {
|
|||
box.dataset.display = true;
|
||||
box.style.cssText = '';
|
||||
$('b', box).textContent = (BG.cachedStyles.byId.get(id) || {}).name;
|
||||
$('[data-cmd="ok"]', box).focus();
|
||||
$('[data-cmd="ok"]', box).onclick = () => confirm(true);
|
||||
$('[data-cmd="cancel"]', box).onclick = () => confirm(false);
|
||||
window.onkeydown = event => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user