open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #294 from openstyles/narcolepticinsomniac-accessibility

Browse Source 
Hide focus outlines without crippling accessibility, plus buttons
This commit is contained in:
tophf 2017-12-13 06:20:30 +03:00 committed by GitHub
commit 9fbe97bfd6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 324 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
edit.html
View File

@ -107,7 +107,9 @@
<br> <br>
<div class="applies-to"> <div class="applies-to">
<label i18n-text="appliesLabel"> <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> </label>
<ul class="applies-to-list"></ul> <ul class="applies-to-list"></ul>
</div> </div>
@ -191,20 +193,24 @@
<label id="enabled-label" i18n-text="styleEnabledLabel"> <label id="enabled-label" i18n-text="styleEnabledLabel">
<input type="checkbox" id="enabled" class="style-contributor"> <input type="checkbox" id="enabled" class="style-contributor">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label><!-- </label>
--><svg id="toggle-style-help" class="svg-icon info"> <a href="#" id="toggle-style-help" class="svg-inline-wrapper">
<use xlink:href="#svg-icon-help"/> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</svg> </a>
</div> </div>
</section> </section>
<section id="actions"> <section id="actions">
<div> <div>
<button id="save-button" i18n-text="styleSaveLabel"></button> <button id="save-button" i18n-text="styleSaveLabel"></button>
<button id="beautify" i18n-text="styleBeautify"></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>
<div id="mozilla-format-container"> <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="from-mozilla" i18n-text="importLabel"></button>
<button id="to-mozilla" i18n-text="exportLabel"></button> <button id="to-mozilla" i18n-text="exportLabel"></button>
</div> </div>
@ -246,11 +252,9 @@
<input id="editor.colorpicker" type="checkbox"> <input id="editor.colorpicker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label> </label>
<span class="svg-inline-wrapper" i18n-title="shortcutsNote"> <a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote">
<svg id="colorpicker-settings" class="svg-icon settings"> <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
<use xlink:href="#svg-icon-settings"/> </a>
</svg>
</span>
</div> </div>
<div class="option usercss-only"> <div class="option usercss-only">
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning"> <label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
@ -268,9 +272,9 @@
<select id="editor.keyMap"></select> <select id="editor.keyMap"></select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
<span class="svg-inline-wrapper"> <a id="keyMap-help" href="#" class="svg-inline-wrapper">
<svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</span> </a>
</div> </div>
<div class="option aligned"> <div class="option aligned">
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label> <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@ -300,19 +304,17 @@
</select> </select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg> <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</div> </div>
<span class="svg-inline-wrapper" i18n-title="linterConfigTooltip"> <a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
<svg id="linter-settings" class="svg-icon settings"> <svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
<use xlink:href="#svg-icon-settings"/> </a>
</svg>
</span>
</div> </div>
</details> </details>
<details id="lint" class="hidden" data-pref="editor.lint.expanded"> <details id="lint" class="hidden" data-pref="editor.lint.expanded">
<summary> <summary>
<h2 i18n-text="linterIssues">: <span id="issue-count"></span><!-- EAT SPACE <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
--><svg id="lint-help" class="svg-icon info intercepts-click"> <a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click">
<use xlink:href="#svg-icon-help"/> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</svg> </a>
</h2> </h2>
</summary> </summary>
<div></div> <div></div>
@ -324,7 +326,11 @@
</div> </div>
</div> </div>
<section id="sections"> <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> </section>
<div id="help-popup"> <div id="help-popup">
<div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg> <div class="title"></div><svg id="sections-help" class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>

3
edit/colorpicker-helper.js
View File

@ -62,7 +62,8 @@ onDOMscriptReady('/colorview.js').then(() => {
cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color')); cm.state.colorpicker.openPopup(prefs.get('editor.colorpicker.color'));
} }
function configureColorpicker() { function configureColorpicker(event) {
event.preventDefault();
const input = $create('input', { const input = $create('input', {
type: 'search', type: 'search',
spellcheck: false, spellcheck: false,

50
edit/edit.css
View File

@ -32,6 +32,15 @@ body {
margin-bottom: 4px; 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 { #basic-info-enabled {
margin-top: 2px; margin-top: 2px;
} }
@ -93,24 +102,35 @@ label {
#url:not([href^="http"]) { #url:not([href^="http"]) {
display: none; display: none;
} }
#save-button {
opacity: .5;
pointer-events: none;
}
.dirty #save-button {
opacity: 1;
pointer-events: all;
}
.svg-icon { .svg-icon {
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
transition: fill .5s; transition: fill .5s;
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-left: 0.2rem;
} }
h2 .svg-icon, label .svg-icon { .svg-inline-wrapper {
margin-top: -1px; 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 { .svg-icon.info {
width: 14px; width: 14px;
@ -145,7 +165,6 @@ input:invalid {
align-items: center; align-items: center;
margin-left: -13px; margin-left: -13px;
cursor: pointer; cursor: pointer;
outline: none;
margin-top: 8px; margin-top: 8px;
margin-bottom: 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 { .regexp-report summary, .regexp-report div {
cursor: pointer; cursor: pointer;
outline: none;
} }
.regexp-report mark { .regexp-report mark {
background-color: rgba(255, 255, 0, .5); 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; font-weight: bold;
margin-left: -1rem; margin-left: -1rem;
margin-bottom: .5rem; margin-bottom: .5rem;
outline: none;
cursor: default; cursor: default;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -609,6 +626,11 @@ html:not(.usercss) .usercss-only,
display: none !important; /* hide during page init */ display: none !important; /* hide during page init */
} }
.usercss #name {
background-color: #eee;
color: #888;
}
#sections .single-editor { #sections .single-editor {
margin: 0; margin: 0;
padding: 0; padding: 0;

21
edit/edit.js
View File

@ -273,8 +273,6 @@ function initHooks() {
} }
} }
// common for usercss and classic
function onChange(event) { function onChange(event) {
const node = event.target; const node = event.target;
if ('savedValue' in node) { if ('savedValue' in node) {
@ -317,12 +315,6 @@ function setCleanItem(node, isClean) {
function isCleanGlobal() { function isCleanGlobal() {
const clean = Object.keys(dirty).length === 0; const clean = Object.keys(dirty).length === 0;
setDirtyClass(document.body, !clean); setDirtyClass(document.body, !clean);
// let saveBtn = $('#save-button')
// if (clean){
// //saveBtn.removeAttribute('disabled');
// }else{
// //saveBtn.setAttribute('disabled', true);
// }
return clean; return clean;
} }
@ -406,6 +398,7 @@ function updateTitle() {
const clean = isCleanGlobal(); const clean = isCleanGlobal();
const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]); const title = styleId === null ? t('addStyleTitle') : t('editStyleTitle', [name]);
document.title = clean ? title : DIRTY_TITLE.replace('$', title); document.title = clean ? title : DIRTY_TITLE.replace('$', title);
$('#save-button').disabled = clean;
} }
function updateLintReportIfEnabled(...args) { function updateLintReportIfEnabled(...args) {
@ -500,19 +493,23 @@ function fromMozillaFormat() {
} }
} }
function showSectionHelp() { function showSectionHelp(event) {
event.preventDefault();
showHelp(t('styleSectionsTitle'), t('sectionHelp')); showHelp(t('styleSectionsTitle'), t('sectionHelp'));
} }
function showAppliesToHelp() { function showAppliesToHelp(event) {
event.preventDefault();
showHelp(t('appliesLabel'), t('appliesHelp')); showHelp(t('appliesLabel'), t('appliesHelp'));
} }
function showToMozillaHelp() { function showToMozillaHelp(event) {
event.preventDefault();
showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp')); showHelp(t('styleMozillaFormatHeading'), t('styleToMozillaFormatHelp'));
} }
function showToggleStyleHelp() { function showToggleStyleHelp(event) {
event.preventDefault();
showHelp(t('helpAlt'), t('styleEnabledToggleHint')); showHelp(t('helpAlt'), t('styleEnabledToggleHint'));
} }

3
edit/lint.js
View File

@ -149,7 +149,8 @@ var linterConfig = {
}, },
// this is an event listener so it can't refer to self via 'this' // this is an event listener so it can't refer to self via 'this'
openOnClick() { openOnClick(event) {
event.preventDefault();
setupLinterPopup(linterConfig.stringify()); setupLinterPopup(linterConfig.stringify());
}, },

21
global.css
View File

@ -7,7 +7,8 @@ button {
font: 400 13.3333px Arial; font: 400 13.3333px Arial;
color: #000; color: #000;
background-color: hsl(0, 0%, 100%); 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%; background-size: 100% 100%;
transition: background-color .25s, border-color .25s; transition: background-color .25s, border-color .25s;
} }
@ -17,6 +18,14 @@ button:not(:disabled):hover {
border-color: hsl(0, 0%, 52%); 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 */ /* For some odd reason these hovers appear lighter than all other button hovers in every browser */
#message-box-buttons button:not(:disabled):hover { #message-box-buttons button:not(:disabled):hover {
background-color: hsl(0, 0%, 90%); background-color: hsl(0, 0%, 90%);
@ -60,12 +69,11 @@ input[type="checkbox"]:not(.slider) {
display: inline-flex; display: inline-flex;
border-radius: 2px; border-radius: 2px;
background-color: hsla(0, 0%, 0%, .1); background-color: hsla(0, 0%, 0%, .1);
outline: none;
margin: 0; margin: 0;
transition: background-color .1s, border-color .1s; 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%); border-color: hsl(0, 0%, 32%);
background-color: hsl(0, 0%, 82%); background-color: hsl(0, 0%, 82%);
} }
@ -128,7 +136,6 @@ select {
input[type="radio"] { input[type="radio"] {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
outline: none;
background: hsl(0, 0%, 88%); background: hsl(0, 0%, 88%);
border-radius: 50%; border-radius: 50%;
border: 1px solid hsl(0, 0%, 60%); border: 1px solid hsl(0, 0%, 60%);
@ -170,8 +177,14 @@ select[disabled] > option {
display: none !important; display: none !important;
} }
[data-focused-via-click] :focus,
[data-focused-via-click]:focus {
outline: none;
}
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
.moz-appearance-bug .svg-icon.checked, .moz-appearance-bug .svg-icon.checked,
.moz-appearance-bug .onoffswitch input,
.moz-appearance-bug input[type="radio"]:after { .moz-appearance-bug input[type="radio"]:after {
display: none !important; display: none !important;
} }

BIN
images/button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 203 B

BIN
images/help.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 532 B

BIN
images/world_go.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

44
js/dom.js
View File

@ -57,6 +57,7 @@ $$.remove = (selector, base = document) => {
onDOMready().then(() => { onDOMready().then(() => {
$.remove('#firefox-transitions-bug-suppressor'); $.remove('#firefox-transitions-bug-suppressor');
initCollapsibles(); initCollapsibles();
focusAccessibility();
}); });
if (!chrome.app && chrome.windows) { if (!chrome.app && chrome.windows) {
@ -314,3 +315,46 @@ function initCollapsibles({bindClickOn = 'h2'} = {}) {
prefs.set(el.dataset.pref, el.open); 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
View File

@ -41,7 +41,7 @@
</p> </p>
<p class="actions"> <p class="actions">
<a class="style-edit-link"> <a class="style-edit-link">
<button i18n-text="editStyleLabel"></button> <button i18n-text="editStyleLabel" tabindex="-1"></button>
</a> </a>
<button class="enable" i18n-text="enableStyleLabel"></button> <button class="enable" i18n-text="enableStyleLabel"></button>
<button class="disable" i18n-text="disableStyleLabel"></button> <button class="disable" i18n-text="disableStyleLabel"></button>
@ -64,16 +64,16 @@
</h2> </h2>
<p class="actions"> <p class="actions">
<a target="_blank" class="homepage"></a> <a target="_blank" class="homepage"></a>
<span i18n-title="deleteStyleLabel"> <a href="#" class="delete" i18n-title="deleteStyleLabel">
<svg class="svg-icon delete" viewBox="0 0 20 20"> <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 <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 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
</svg> </svg>
</span> </a>
</p> </p>
<div class="applies-to"> <div class="applies-to">
<div class="targets"></div> <div class="targets"></div>
<span class="expander">...</span> <a href="#" class="expander">...</a>
</div> </div>
</div> </div>
</template> </template>
@ -92,27 +92,27 @@
</template> </template>
<template data-id="configureIcon"> <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> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</span> </a>
</template> </template>
<template data-id="updaterIcons"> <template data-id="updaterIcons">
<span class="updater-icons"> <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"> <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 <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"/> 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 <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"/> C7,4,4.6,6.2,4.1,9h2.1C6.6,7.3,8.1,6,10,6z"/>
</svg> </svg>
</span> </a>
<span class="update" i18n-title="installUpdate"> <a href="#" class="update" i18n-title="installUpdate">
<svg class="svg-icon" viewBox="0 0 20 20"> <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 "/> <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"/> <rect shape-rendering="crispEdges" x="4" y="15" width="12" height="2"/>
</svg> </svg>
</span> </a>
<span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate"> <span class="up-to-date" i18n-title="updateCheckSucceededNoUpdate">
<svg class="svg-icon" viewBox="0 0 20 20"> <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"/> <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"> <details id="filters" data-pref="manage.filters.expanded">
<summary> <summary>
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2> <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> <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 <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 "/> 5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
</svg> </svg>
</a>
</summary> </summary>
<div class="filter-selection"> <div class="filter-selection">
@ -239,18 +241,20 @@
<input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false" <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
data-filter=":not(.not-matching)" data-filter=":not(.not-matching)"
data-filter-hide=".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> </div>
</details> </details>
<p class="nowrap"> <p class="nowrap">
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button> <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"> <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"/> <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> </svg>
</span> </a>
</p> </p>
<p> <p>
@ -261,7 +265,7 @@
<div id="add-style-wrapper"> <div id="add-style-wrapper">
<a href="edit.html"> <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> </a>
<label id="add-style-as-usercss-wrapper"> <label id="add-style-as-usercss-wrapper">
<input type="checkbox" id="newStyleAsUsercss"> <input type="checkbox" id="newStyleAsUsercss">
@ -292,10 +296,12 @@
<label for="manage.newUI.favicons" i18n-text="manageFavicons"> <label for="manage.newUI.favicons" i18n-text="manageFavicons">
<input id="manage.newUI.favicons" type="checkbox"> <input id="manage.newUI.favicons" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <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> <title i18n-text="optionsSubheading"></title>
<use xlink:href="#svg-icon-select-arrow"/> <use xlink:href="#svg-icon-select-arrow"/>
</svg> </svg>
</a>
</label> </label>
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp"> <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
<div> <div>
@ -317,7 +323,7 @@
<a id="find-editor-styles" <a id="find-editor-styles"
href="https://userstyles.org/styles/browse/chrome-extension" href="https://userstyles.org/styles/browse/chrome-extension"
i18n-title="editorStylesButton" i18n-title="editorStylesButton"
target="_blank"><button i18n-text="cm_theme"></button></a> target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
</p> </p>
</details> </details>

11
manage/config-dialog.css
View File

@ -97,11 +97,8 @@
visibility: hidden; visibility: hidden;
} }
.svg-icon.config-reset-icon { .config-reset-icon .svg-icon {
/*position: absolute;*/
pointer-events: all !important;
cursor: pointer; cursor: pointer;
/*right: -7px;*/
fill: #aaa; fill: #aaa;
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -110,7 +107,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.svg-icon.config-reset-icon:hover { .config-reset-icon:hover .svg-icon {
fill: #666; fill: #666;
} }
@ -155,9 +152,11 @@
.color-swatch { .color-swatch {
position: absolute; position: absolute;
top: 0;
left: 0;
border: 1px solid gray; border: 1px solid gray;
margin-top: -22px;
cursor: pointer; cursor: pointer;
opacity: 1;
} }
.colorpicker-popup { .colorpicker-popup {

16
manage/config-dialog.js
View File

@ -195,12 +195,15 @@ function configDialog(style) {
} }
function buildConfigForm() { 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:title', t('genericResetLabel')),
$create('SVG:polygon', { $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 ' + 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', '5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10',
}), })
])
]); ]);
for (const va of vars) { for (const va of vars) {
let children; let children;
@ -208,8 +211,9 @@ function configDialog(style) {
case 'color': case 'color':
children = [ children = [
$create('.cm-colorview.config-value', [ $create('.cm-colorview.config-value', [
va.input = $create('.color-swatch', { va.input = $create('a.color-swatch', {
va, va,
href: '#',
onclick: showColorpicker onclick: showColorpicker
}), }),
]), ]),
@ -269,6 +273,8 @@ function configDialog(style) {
...children, ...children,
resetter, resetter,
])); ]));
va.savedValue = va.value;
} }
} }
@ -307,6 +313,7 @@ function configDialog(style) {
const el = va.input.closest('label'); const el = va.input.closest('label');
el.classList.toggle('dirty', Boolean(va.dirty)); el.classList.toggle('dirty', Boolean(va.dirty));
el.classList.toggle('nondefault', !isDefault(va)); el.classList.toggle('nondefault', !isDefault(va));
$('.config-reset-icon', el).disabled = isDefault(va);
} }
function resetOnClick(event) { function resetOnClick(event) {
@ -316,7 +323,8 @@ function configDialog(style) {
onchange({target: this.va.input}); onchange({target: this.va.input});
} }
function showColorpicker() { function showColorpicker(event) {
event.preventDefault();
window.removeEventListener('keydown', messageBox.listeners.key, true); window.removeEventListener('keydown', messageBox.listeners.key, true);
const box = $('#message-box-contents'); const box = $('#message-box-contents');
colorpicker.show({ colorpicker.show({

7
manage/filters.js
View File

@ -31,7 +31,8 @@ onDOMready().then(onBackgroundReady).then(() => {
if (urlFilterParam) { if (urlFilterParam) {
$('#search').value = 'url:' + urlFilterParam; $('#search').value = 'url:' + urlFilterParam;
} }
$('#search-help').onclick = () => { $('#search-help').onclick = event => {
event.preventDefault();
messageBox({ messageBox({
className: 'help-text', className: 'help-text',
title: t('searchStyles'), title: t('searchStyles'),
@ -352,7 +353,9 @@ function showFiltersStats() {
debounce(showFiltersStats, 100); debounce(showFiltersStats, 100);
return; 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 numTotal = BG.cachedStyles.list.length;
const numHidden = installed.getElementsByClassName('entry hidden').length; const numHidden = installed.getElementsByClassName('entry hidden').length;
const numShown = Math.min(numTotal - numHidden, installed.children.length); const numShown = Math.min(numTotal - numHidden, installed.children.length);

1
manage/incremental-search.js
View File

@ -7,6 +7,7 @@ onDOMready().then(() => {
let focusedName = ''; let focusedName = '';
const input = $create('textarea', { const input = $create('textarea', {
spellcheck: false, spellcheck: false,
attributes: {tabindex: -1},
oninput: incrementalSearch, oninput: incrementalSearch,
}); });
replaceInlineStyle({ replaceInlineStyle({

70
manage/manage.css
View File

@ -145,12 +145,11 @@ select {
} }
.svg-icon.config { .svg-icon.config {
width: 16px; transform: scale(.8);
height: 16px;
} }
.homepage { .homepage {
margin-left: 0.1em; margin-left: 0.25em;
margin-right: 0.1em; margin-right: 0.1em;
} }
@ -159,8 +158,7 @@ select {
} }
.homepage .svg-icon { .homepage .svg-icon {
margin-top: -4px; margin-top: 0;
margin-left: .5ex;
} }
.style-name { .style-name {
@ -190,6 +188,7 @@ select {
.actions > * { .actions > * {
margin-bottom: .25rem; margin-bottom: .25rem;
display: inline-block;
} }
.actions > *:not(:last-child) { .actions > *:not(:last-child) {
@ -212,7 +211,6 @@ select {
.applies-to-extra-expander { .applies-to-extra-expander {
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
outline: none;
} }
.applies-to-extra-expander { .applies-to-extra-expander {
@ -284,7 +282,6 @@ select {
align-items: center; align-items: center;
margin-left: -13px; margin-left: -13px;
cursor: pointer; cursor: pointer;
outline: none;
} }
#header summary h2 { #header summary h2 {
@ -363,7 +360,6 @@ select {
.filter-selection select { .filter-selection select {
height: 18px; height: 18px;
outline: none;
border: none; border: none;
max-width: 100%; max-width: 100%;
padding-left: 4px; padding-left: 4px;
@ -449,9 +445,8 @@ select {
color: hsla(180, 100%, 15%, 1); color: hsla(180, 100%, 15%, 1);
} }
.newUI .homepage .svg-icon { .newUI .homepage:not([href=""]) {
position: absolute; position: absolute;
margin-top: 0;
margin-left: -28px; margin-left: -28px;
} }
@ -462,11 +457,9 @@ select {
} }
.newUI .actions > * { .newUI .actions > * {
margin: 0; margin: 0 6px 0 0;
} width: 20px;
height: 20px;
.newUI .actions .svg-icon {
margin-right: 8px;
} }
.newUI .updater-icons > * { .newUI .updater-icons > * {
@ -488,7 +481,7 @@ select {
.newUI .checking-update .check-update { .newUI .checking-update .check-update {
opacity: 0; opacity: 0;
display: inline; display: inline-block;
pointer-events: none; pointer-events: none;
} }
@ -496,7 +489,7 @@ select {
.newUI .no-update:not(.update-problem):not(.update-done) .up-to-date, .newUI .no-update:not(.update-problem):not(.update-done) .up-to-date,
.newUI .no-update.update-problem .check-update, .newUI .no-update.update-problem .check-update,
.newUI .update-done .updated { .newUI .update-done .updated {
display: inline; display: inline-block;
} }
.newUI .up-to-date svg, .newUI .up-to-date svg,
@ -595,6 +588,7 @@ select {
line-height: .5ex; line-height: .5ex;
vertical-align: super; vertical-align: super;
letter-spacing: .1ex; letter-spacing: .1ex;
text-decoration: none;
} }
.newUI .applies-to:not(.has-more) .expander { .newUI .applies-to:not(.has-more) .expander {
@ -602,7 +596,7 @@ select {
} }
.newUI .has-favicons .applies-to .expander { .newUI .has-favicons .applies-to .expander {
padding-left: 20px; margin-left: 20px;
} }
.newUI .target:hover { .newUI .target:hover {
@ -661,15 +655,21 @@ select {
margin-right: .5em; margin-right: .5em;
} }
#newUIoptions [data-toggle-on-click] { #newUIoptions [data-toggle-on-click="#faviconsHelp"] {
transform: rotate(-90deg); width: 14px;
cursor: pointer; height: 14px;
right: -16px; display: inline-block;
top: 0; vertical-align: middle;
pointer-events: auto; 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; transform: none;
} }
@ -690,14 +690,14 @@ input[id^="manage.newUI"] {
} }
/* Default, no update buttons */ /* Default, no update buttons */
.update, .updater-icons .update,
.check-update { .updater-icons .check-update {
display: none; display: none;
} }
/* Check update button for things that can*/ /* Check update button for things that can */
.updatable .check-update { .updatable .check-update {
display: inline; display: inline-block;
} }
/* Update check in progress */ /* Update check in progress */
@ -707,7 +707,7 @@ input[id^="manage.newUI"] {
/* Updates available */ /* Updates available */
.can-update .update { .can-update .update {
display: inline; display: inline-block;
} }
.can-update[data-details$="locally edited"] button.update:after { .can-update[data-details$="locally edited"] button.update:after {
@ -804,6 +804,10 @@ input[id^="manage.newUI"] {
#reset-filters { #reset-filters {
position: absolute; position: absolute;
margin-top: 2px; margin-top: 2px;
display: inline-block;
}
#reset-filters svg {
fill: hsla(180, 50%, 27%, .5); fill: hsla(180, 50%, 27%, .5);
width: 24px; /* widen the click area a bit */ width: 24px; /* widen the click area a bit */
height: 20px; height: 20px;
@ -811,7 +815,7 @@ input[id^="manage.newUI"] {
box-sizing: border-box; box-sizing: border-box;
} }
#reset-filters:hover { #reset-filters:hover svg {
fill: hsla(180, 50%, 27%, 1); fill: hsla(180, 50%, 27%, 1);
} }
@ -839,8 +843,8 @@ input[id^="manage.newUI"] {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
#search-wrapper .info { #search-help {
margin: 4px -5px 0 8px; margin: 4px -5px 0 2px;
} }
#message-box.help-text > div { #message-box.help-text > div {

11
manage/manage.js
View File

@ -334,10 +334,12 @@ Object.assign(handleEvent, {
}, },
check(event, entry) { check(event, entry) {
event.preventDefault();
checkUpdate(entry); checkUpdate(entry);
}, },
update(event, entry) { update(event, entry) {
event.preventDefault();
const request = Object.assign(entry.updatedCode, { const request = Object.assign(entry.updatedCode, {
id: entry.styleId, id: entry.styleId,
reason: 'update', reason: 'update',
@ -353,6 +355,7 @@ Object.assign(handleEvent, {
}, },
delete(event, entry) { delete(event, entry) {
event.preventDefault();
const id = entry.styleId; const id = entry.styleId;
const {name} = BG.cachedStyles.byId.get(id) || {}; const {name} = BG.cachedStyles.byId.get(id) || {};
animateElement(entry); animateElement(entry);
@ -362,8 +365,8 @@ Object.assign(handleEvent, {
className: 'danger center', className: 'danger center',
buttons: [t('confirmDelete'), t('confirmCancel')], buttons: [t('confirmDelete'), t('confirmCancel')],
}) })
.then(({button, enter}) => { .then(({button}) => {
if (button === 0 || enter) { if (button === 0) {
deleteStyleSafe({id}); deleteStyleSafe({id});
} }
}); });
@ -374,7 +377,8 @@ Object.assign(handleEvent, {
event.preventDefault(); event.preventDefault();
}, },
expandTargets() { expandTargets(event) {
event.preventDefault();
this.closest('.applies-to').classList.toggle('expanded'); this.closest('.applies-to').classList.toggle('expanded');
}, },
@ -388,6 +392,7 @@ Object.assign(handleEvent, {
}, },
config(event, {styleMeta}) { config(event, {styleMeta}) {
event.preventDefault()
configDialog(styleMeta); configDialog(styleMeta);
}, },
}); });

8
manage/updater-ui.js
View File

@ -170,7 +170,8 @@ function renderUpdatesOnlyFilter({show, check} = {}) {
} }
function showUpdateHistory() { function showUpdateHistory(event) {
event.preventDefault();
const log = $create('.update-history-log'); const log = $create('.update-history-log');
let logText, scroller, toggler; let logText, scroller, toggler;
let deleted = false; let deleted = false;
@ -179,13 +180,17 @@ function showUpdateHistory() {
messageBox({ messageBox({
title: t('updateCheckHistory'), title: t('updateCheckHistory'),
contents: log, contents: log,
blockScroll: true,
buttons: [ buttons: [
t('confirmOK'), t('confirmOK'),
logText && {textContent: t('confirmDelete'), onclick: deleteHistory}, logText && {textContent: t('confirmDelete'), onclick: deleteHistory},
], ],
onshow: logText && (() => { onshow: logText && (() => {
scroller = $('#message-box-contents'); scroller = $('#message-box-contents');
scroller.tabIndex = 0;
setTimeout(() => scroller.focus());
scrollToBottom(); scrollToBottom();
$('#message-box-buttons button').insertAdjacentElement('afterend', $('#message-box-buttons button').insertAdjacentElement('afterend',
// TODO: add a global class for our labels // TODO: add a global class for our labels
// TODO: add a <template> or a common function to create such controls // 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'})), $create('SVG:use', {'xlink:href': '#svg-icon-checked'})),
t('manageOnlyUpdates'), t('manageOnlyUpdates'),
])); ]));
toggler.onchange(); toggler.onchange();
}), }),
}); });

52
msgbox/msgbox.js
View File

@ -1,3 +1,4 @@
/* global focusAccessibility */
'use strict'; 'use strict';
function messageBox({ function messageBox({
@ -12,10 +13,14 @@ function messageBox({
bindGlobalListeners(); bindGlobalListeners();
createElement(); createElement();
document.body.appendChild(messageBox.element); document.body.appendChild(messageBox.element);
if (onshow) {
messageBox.originalFocus = document.activeElement;
moveFocus(1);
if (typeof onshow === 'function') {
onshow(messageBox.element); onshow(messageBox.element);
} }
messageBox.element.focus();
return new Promise(_resolve => { return new Promise(_resolve => {
messageBox.resolve = _resolve; messageBox.resolve = _resolve;
}); });
@ -29,13 +34,30 @@ function messageBox({
resolveWith({button: this.buttonIndex}); resolveWith({button: this.buttonIndex});
}, },
key(event) { key(event) {
const keyCode = event.keyCode || event.which; const {which, shiftKey, ctrlKey, altKey, metaKey, target} = event;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey if (shiftKey && which !== 9 || ctrlKey || altKey || metaKey) {
&& (keyCode === 13 || keyCode === 27)) { 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.preventDefault();
event.stopPropagation(); 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() { scroll() {
scrollTo(blockScroll.x, blockScroll.y); scrollTo(blockScroll.x, blockScroll.y);
@ -50,6 +72,9 @@ function messageBox({
className: 'fadeout', className: 'fadeout',
onComplete: removeSelf, onComplete: removeSelf,
}); });
if (messageBox.element.contains(document.activeElement)) {
messageBox.originalFocus.focus();
}
} }
function createElement() { function createElement() {
@ -97,6 +122,21 @@ function messageBox({
messageBox.element = null; messageBox.element = null;
messageBox.resolve = 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 => messageBox.alert = text =>

16
options/onoffswitch.css
View File

@ -9,7 +9,21 @@
} }
.onoffswitch input { .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 { .onoffswitch span {

7
options/options.js
View File

@ -7,12 +7,15 @@ setTimeout(splitLongTooltips);
if (!FIREFOX && !OPERA) { if (!FIREFOX && !OPERA) {
const block = $('#advanced'); const block = $('#advanced');
block.classList.add('collapsible', 'collapsed'); const toggleAdvanced = event => {
block.onclick = event => {
if (block.classList.contains('collapsed') || event.target.closest('h1')) { if (block.classList.contains('collapsed') || event.target.closest('h1')) {
block.classList.toggle('collapsed'); 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 // actions

1
popup/popup.js
View File

@ -326,6 +326,7 @@ Object.assign(handleEvent, {
box.dataset.display = true; box.dataset.display = true;
box.style.cssText = ''; box.style.cssText = '';
$('b', box).textContent = (BG.cachedStyles.byId.get(id) || {}).name; $('b', box).textContent = (BG.cachedStyles.byId.get(id) || {}).name;
$('[data-cmd="ok"]', box).focus();
$('[data-cmd="ok"]', box).onclick = () => confirm(true); $('[data-cmd="ok"]', box).onclick = () => confirm(true);
$('[data-cmd="cancel"]', box).onclick = () => confirm(false); $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
window.onkeydown = event => { window.onkeydown = event => {