switch from dummy links to dummy buttons (#1192)
The reason is that dummy links like <a href="#"> cause the built-in tooltip pop up on hover which is just useless noise
This commit is contained in:
tophf
GitHub
parent
41533e863d
commit
b8f6f5db8d
54
edit.html
54
edit.html
|
|
@ -86,21 +86,21 @@
|
|||
</div>
|
||||
<div class="applies-value-wrapper">
|
||||
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
||||
<a class="remove-applies-to" href="#" i18n-text="appliesRemove" i18n-title="appliesRemove">
|
||||
<button class="remove-applies-to fake" i18n-text="appliesRemove" i18n-title="appliesRemove">
|
||||
<svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
|
||||
</a>
|
||||
<a class="add-applies-to" href="#" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
</button>
|
||||
<button class="add-applies-to fake" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template data-id="appliesToEverything">
|
||||
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
||||
<a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" href="#">
|
||||
<button class="add-applies-to fake" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -113,9 +113,9 @@
|
|||
<label i18n-text="sectionCode" class="code-label"></label>
|
||||
<div class="applies-to">
|
||||
<label i18n-text="appliesLabel">
|
||||
<a href="#" class="svg-inline-wrapper applies-to-help" tabindex="0">
|
||||
<button class="svg-inline-wrapper applies-to-help fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</label>
|
||||
<ul class="applies-to-list"></ul>
|
||||
</div>
|
||||
|
|
@ -136,16 +136,16 @@
|
|||
<div data-type="main">
|
||||
<div data-type="content"></div>
|
||||
<div data-type="actions">
|
||||
<a data-action="case" i18n-title="searchCaseSensitive" href="#" tabindex="0">Aa</a>
|
||||
<a data-action="prev" i18n-title="genericPrevious" href="#" data-hotkey-tooltip="findPrev" tabindex="0">
|
||||
<button data-action="case" i18n-title="searchCaseSensitive" class="fake">Aa</button>
|
||||
<button data-action="prev" i18n-title="genericPrevious" data-hotkey-tooltip="findPrev" class="fake">
|
||||
<svg class="svg-icon" style="transform: rotate(180deg)"><use xlink:href="#svg-icon-v"/></svg>
|
||||
</a>
|
||||
<a data-action="next" i18n-title="genericNext" href="#" data-hotkey-tooltip="findNext" tabindex="0">
|
||||
</button>
|
||||
<button data-action="next" i18n-title="genericNext" data-hotkey-tooltip="findNext" class="fake">
|
||||
<svg class="svg-icon"><use xlink:href="#svg-icon-v"/></svg>
|
||||
</a>
|
||||
<a data-action="close" i18n-title="confirmClose" href="#" data-hotkey-tooltip="=Esc" tabindex="0">
|
||||
</button>
|
||||
<button data-action="close" i18n-title="confirmClose" data-hotkey-tooltip="=Esc" class="fake">
|
||||
<svg class="svg-icon dismiss"><use xlink:href="#svg-icon-close"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div data-type="status">
|
||||
|
|
@ -257,12 +257,12 @@
|
|||
<section id="basic-info">
|
||||
<div id="basic-info-name">
|
||||
<input id="name" class="style-contributor" spellcheck="false">
|
||||
<a id="reset-name" href="#" i18n-title="customNameResetHint" tabindex="0" hidden>
|
||||
<button id="reset-name" i18n-title="customNameResetHint" class="fake" hidden>
|
||||
<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>
|
||||
</a>
|
||||
</button>
|
||||
<a id="url" target="_blank"><svg class="svg-icon"><use xlink:href="#svg-icon-external-link"/></svg></a>
|
||||
</div>
|
||||
<div id="basic-info-enabled">
|
||||
|
|
@ -289,10 +289,10 @@
|
|||
<div id="mozilla-format-buttons" class="sectioned-only">
|
||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||
<a id="to-mozilla-help" class="svg-inline-wrapper" href="#" tabindex="0"
|
||||
<button id="to-mozilla-help" class="svg-inline-wrapper fake"
|
||||
i18n-title="styleMozillaFormatHeading">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<div id="details-wrapper">
|
||||
|
|
@ -342,9 +342,9 @@
|
|||
<input id="editor.colorpicker" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
<a id="colorpicker-settings" href="#" class="svg-inline-wrapper" i18n-title="shortcutsNote" tabindex="0">
|
||||
<button id="colorpicker-settings" class="svg-inline-wrapper fake" i18n-title="shortcutsNote">
|
||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div class="option usercss-only">
|
||||
<label i18n-text="appliesLineWidgetLabel" i18n-title="appliesLineWidgetWarning">
|
||||
|
|
@ -364,9 +364,9 @@
|
|||
<select id="editor.keyMap"></select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<a id="keyMap-help" href="#" class="svg-inline-wrapper" tabindex="0">
|
||||
<button id="keyMap-help" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
<div class="option aligned">
|
||||
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
|
||||
|
|
@ -396,9 +396,9 @@
|
|||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<a id="linter-settings" href="#" class="svg-inline-wrapper" i18n-title="linterConfigTooltip" tabindex="0">
|
||||
<button id="linter-settings" class="svg-inline-wrapper fake" i18n-title="linterConfigTooltip">
|
||||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-config"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -410,9 +410,9 @@
|
|||
<details id="lint" data-pref="editor.lint.expanded" class="hidden-unless-compact ignore-pref-if-compact">
|
||||
<summary>
|
||||
<h2 i18n-text="linterIssues">: <span id="issue-count"></span>
|
||||
<a id="lint-help" href="#" class="svg-inline-wrapper intercepts-click" tabindex="0">
|
||||
<button id="lint-help" class="svg-inline-wrapper intercepts-click fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</h2>
|
||||
</summary>
|
||||
<div class="lint-scroll-container">
|
||||
|
|
|
|||
|
|
@ -735,7 +735,7 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
|
|||
#help-popup .rules p {
|
||||
margin: .25em 0;
|
||||
}
|
||||
#help-popup button {
|
||||
#help-popup .buttons button {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
|
|||
color: ${fore};
|
||||
}
|
||||
${C_CONTAINER} input,
|
||||
${C_CONTAINER} button,
|
||||
${C_CONTAINER} button:not(.fake),
|
||||
${C_CONTAINER} select {
|
||||
background: rgba(255, 255, 255, ${
|
||||
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
|
||||
|
|
|
|||
|
|
@ -96,12 +96,12 @@ const regexpTester = (() => {
|
|||
: GET_FAVICON_URL + new URL(url).hostname;
|
||||
const icon = $create('img', {src: faviconUrl});
|
||||
if (match.text.length === url.length) {
|
||||
full.push($create('a', {href: '#'}, [
|
||||
full.push($create('button.fake', [
|
||||
icon,
|
||||
url,
|
||||
]));
|
||||
} else {
|
||||
partial.push($create('a', {href: '#'}, [
|
||||
partial.push($create('button.fake', [
|
||||
icon,
|
||||
url.substr(0, match.pos),
|
||||
$create('mark', match.text),
|
||||
|
|
@ -154,24 +154,18 @@ const regexpTester = (() => {
|
|||
.split(/(\\+)/)
|
||||
.map(s => (s.startsWith('\\') ? $create('code', s) : s)));
|
||||
report.appendChild(note);
|
||||
adjustNote(report, note);
|
||||
report.style.paddingBottom = note.offsetHeight + 'px';
|
||||
},
|
||||
};
|
||||
|
||||
function adjustNote(report, note) {
|
||||
report.style.paddingBottom = note.offsetHeight + 'px';
|
||||
}
|
||||
|
||||
function onClick(event) {
|
||||
const a = event.target.closest('a');
|
||||
const a = event.target.closest('a, button');
|
||||
if (a) {
|
||||
event.preventDefault();
|
||||
openURL({
|
||||
url: a.href && a.getAttribute('href') !== '#' && a.href || a.textContent,
|
||||
url: a.href || a.textContent,
|
||||
currentWindow: null,
|
||||
});
|
||||
} else if (event.target.closest('details')) {
|
||||
setTimeout(adjustNote);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
24
global.css
24
global.css
|
|
@ -15,7 +15,7 @@ body:lang(zh-HK) {
|
|||
font-family: Arial, 'Microsoft JhengHei UI', 'Microsoft JhengHei', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
button {
|
||||
button:not(.fake) {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
user-select: none;
|
||||
|
|
@ -35,12 +35,12 @@ button {
|
|||
transition: background-color .25s, border-color .25s;
|
||||
}
|
||||
|
||||
button:not(:disabled):hover {
|
||||
button:not(.fake):not(:disabled):hover {
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
border-color: hsl(0, 0%, 52%);
|
||||
}
|
||||
|
||||
button:active {
|
||||
button:not(.fake):active {
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
border-color: hsl(0, 0%, 52%);
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
|
||||
|
|
@ -48,8 +48,20 @@ button:active {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.fake { /* must be a single simple selector so its specificity loses to anything declared afterwards */
|
||||
all: unset;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.fake[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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(.fake):not(:disabled):hover {
|
||||
background-color: hsl(0, 0%, 90%);
|
||||
border-color: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
|
@ -274,12 +286,12 @@ input[type="number"][data-focused-via-click]:focus {
|
|||
}
|
||||
|
||||
/* Firefox cannot handle fractions in font-size */
|
||||
.firefox button:not(.install) {
|
||||
.firefox button:not(.fake):not(.install) {
|
||||
line-height: 13px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
.firefox.moz-appearance-bug button:not(.install) {
|
||||
.firefox.moz-appearance-bug button:not(.fake):not(.install) {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ async function configDialog(style) {
|
|||
}
|
||||
|
||||
function onshow(box) {
|
||||
$('button', box).insertAdjacentElement('afterend',
|
||||
$('#message-box-buttons button').after(
|
||||
$create('label#config-autosave-wrapper', {
|
||||
title: t('configOnChangeTooltip'),
|
||||
}, [
|
||||
|
|
@ -215,7 +215,7 @@ async function configDialog(style) {
|
|||
|
||||
function buildConfigForm() {
|
||||
let resetter =
|
||||
$create('a.config-reset-icon', {href: '#'}, [
|
||||
$create('button.fake.config-reset-icon', [
|
||||
$create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'}, [
|
||||
$create('SVG:title', t('genericResetLabel')),
|
||||
$create('SVG:polygon', {
|
||||
|
|
@ -230,9 +230,8 @@ async function configDialog(style) {
|
|||
case 'color':
|
||||
children = [
|
||||
$create('.colorview-swatch.config-value', [
|
||||
va.input = $create('a.color-swatch', {
|
||||
va.input = $create('button.fake.color-swatch', {
|
||||
va,
|
||||
href: '#',
|
||||
onclick: showColorpicker,
|
||||
}),
|
||||
]),
|
||||
|
|
|
|||
|
|
@ -422,7 +422,6 @@ async function waitForSheet({
|
|||
}
|
||||
// set language for a) CSS :lang pseudo and b) hyphenation
|
||||
document.documentElement.setAttribute('lang', chrome.i18n.getUILanguage());
|
||||
document.on('click', keepAddressOnDummyClick);
|
||||
document.on('wheel', changeFocusedInputOnWheel, {capture: true, passive: false});
|
||||
|
||||
Promise.resolve().then(async () => {
|
||||
|
|
@ -488,13 +487,6 @@ async function waitForSheet({
|
|||
}
|
||||
}
|
||||
|
||||
function keepAddressOnDummyClick(e) {
|
||||
// avoid adding # to the page URL when clicking dummy links
|
||||
if (e.target.closest('a[href="#"]')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function keepFocusRingOnTabbing(event) {
|
||||
if (event.key === 'Tab' && !event.ctrlKey && !event.altKey && !event.metaKey) {
|
||||
focusAccessibility.lastFocusedViaClick = false;
|
||||
|
|
|
|||
43
manage.html
43
manage.html
|
|
@ -63,18 +63,18 @@
|
|||
</a>
|
||||
</h2>
|
||||
<p class="actions">
|
||||
<a target="_blank" class="homepage" tabindex="0"></a>
|
||||
<a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
|
||||
<a target="_blank" class="homepage"></a>
|
||||
<button class="delete fake" 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>
|
||||
</a>
|
||||
</button>
|
||||
</p>
|
||||
<p class="style-info" data-type="age"></p>
|
||||
<div class="applies-to">
|
||||
<div class="targets"></div>
|
||||
<a href="#" class="expander" tabindex="0">...</a>
|
||||
<button class="expander fake">...</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -93,27 +93,27 @@
|
|||
</template>
|
||||
|
||||
<template data-id="configureIcon">
|
||||
<a href="#" class="configure-usercss" i18n-title="configureStyle" tabindex="0">
|
||||
<button class="configure-usercss fake" i18n-title="configureStyle">
|
||||
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
|
||||
</a>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template data-id="updaterIcons">
|
||||
<span class="updater-icons">
|
||||
<a href="#" class="check-update" i18n-title="checkForUpdate" tabindex="0">
|
||||
<button class="check-update fake" 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>
|
||||
</a>
|
||||
<a href="#" class="update" i18n-title="installUpdate" tabindex="0">
|
||||
</button>
|
||||
<button class="update fake" 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>
|
||||
</a>
|
||||
</button>
|
||||
<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"/>
|
||||
|
|
@ -178,13 +178,13 @@
|
|||
<h2 i18n-text="manageFilters">:
|
||||
<div class="filter-stats-wrapper">
|
||||
<span id="filters-stats"></span>
|
||||
<a id="reset-filters" href="#" tabindex="0">
|
||||
<button id="reset-filters" class="fake">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</h2>
|
||||
</summary>
|
||||
|
|
@ -267,9 +267,9 @@
|
|||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<a href="#" id="search-help" tabindex="0">
|
||||
<button id="search-help" class="fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
|
@ -279,9 +279,9 @@
|
|||
<select id="manage.newUI.sort"></select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<a href="#" id="sorter-help" tabindex="0">
|
||||
<button id="sorter-help" class="fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -289,12 +289,14 @@
|
|||
<details id="actions" data-pref="manage.actions.expanded">
|
||||
<summary><h2 i18n-text="optionsActions"></h2></summary>
|
||||
<div id="update-check">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates">
|
||||
<span id="update-progress"></span>
|
||||
</button>
|
||||
<button id="update-history" i18n-title="genericHistoryLabel" class="fake">
|
||||
<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>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="update-all">
|
||||
|
|
@ -313,8 +315,7 @@
|
|||
<span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
|
||||
<a id="usercss-wiki"
|
||||
href="https://github.com/openstyles/stylus/wiki/Usercss"
|
||||
i18n-title="externalUsercssDocument"
|
||||
tabindex="0">
|
||||
i18n-title="externalUsercssDocument">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ async function showUpdateHistory(event) {
|
|||
let scroller, toggler;
|
||||
let deleted = false;
|
||||
await require(['/js/storage-util']); /* global chromeLocal */
|
||||
const [lines, states] = await Promise.all([
|
||||
const [lines = [], states] = await Promise.all([
|
||||
chromeLocal.getValue('updateLog'),
|
||||
API.updater.getStates(),
|
||||
]);
|
||||
|
|
|
|||
33
options.html
33
options.html
|
|
@ -159,10 +159,9 @@
|
|||
</label>
|
||||
<label>
|
||||
<span i18n-text="manageFavicons">
|
||||
<a i18n-title="manageFaviconsHelp"
|
||||
data-cmd="note" href="#" class="svg-inline-wrapper">
|
||||
<button i18n-title="manageFaviconsHelp" data-cmd="note" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="manage.newUI.favicons" class="slider">
|
||||
|
|
@ -188,10 +187,9 @@
|
|||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsUpdateInterval">
|
||||
<a i18n-title="optionsUpdateImportNote"
|
||||
data-cmd="note" href="#" class="svg-inline-wrapper">
|
||||
<button i18n-title="optionsUpdateImportNote" data-cmd="note" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<input type="number" min="0" id="updateInterval">
|
||||
</label>
|
||||
|
|
@ -225,25 +223,24 @@
|
|||
<div class="block" id="advanced">
|
||||
<div class="collapsible-resizer">
|
||||
<h1 i18n-text="optionsAdvanced">
|
||||
<a href="#" class="svg-inline-wrapper is-collapsed" tabindex="0">
|
||||
<button class="svg-inline-wrapper is-collapsed fake">
|
||||
<svg class="svg-icon" viewBox="0 0 1792 1792">
|
||||
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="svg-inline-wrapper is-expanded" tabindex="0">
|
||||
</button>
|
||||
<button class="svg-inline-wrapper is-expanded fake">
|
||||
<svg class="svg-icon" viewBox="0 0 1792 1792">
|
||||
<path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="items">
|
||||
<label class="chromium-only">
|
||||
<span i18n-text="optionsAdvancedStyleViaXhr">
|
||||
<a i18n-title="optionsAdvancedStyleViaXhrNote"
|
||||
data-cmd="note" href="#" class="svg-inline-wrapper">
|
||||
<button i18n-title="optionsAdvancedStyleViaXhrNote" data-cmd="note" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="styleViaXhr" class="slider">
|
||||
|
|
@ -253,10 +250,9 @@
|
|||
<label>
|
||||
<span>
|
||||
<span i18n-html="optionsAdvancedPatchCsp"></span>
|
||||
<a i18n-title="optionsAdvancedPatchCspNote"
|
||||
data-cmd="note" href="#" class="svg-inline-wrapper">
|
||||
<button i18n-title="optionsAdvancedPatchCspNote" data-cmd="note" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="patchCsp" class="slider">
|
||||
|
|
@ -265,10 +261,9 @@
|
|||
</label>
|
||||
<label>
|
||||
<span i18n-text="optionsAdvancedExposeIframes">
|
||||
<a i18n-title="optionsAdvancedExposeIframesNote"
|
||||
data-cmd="note" href="#" class="svg-inline-wrapper">
|
||||
<button i18n-title="optionsAdvancedExposeIframesNote" data-cmd="note" class="svg-inline-wrapper fake">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</button>
|
||||
</span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="exposeIframes" class="slider">
|
||||
|
|
|
|||
14
popup.html
14
popup.html
|
|
@ -28,19 +28,19 @@
|
|||
</label>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a href="#" class="configure" i18n-title="configureStyle">
|
||||
<button class="configure fake" i18n-title="configureStyle">
|
||||
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
|
||||
</a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
||||
</button>
|
||||
<button class="style-edit-link fake" i18n-title="editStyleLabel">
|
||||
<svg class="svg-icon edit" viewBox="0 0 14 16">
|
||||
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="menu-button" i18n-title="popupMenuButtonTooltip">
|
||||
</button>
|
||||
<button class="menu-button fake" i18n-title="popupMenuButtonTooltip">
|
||||
<svg class="svg-icon menu-button-icon" viewBox="0 0 3 16">
|
||||
<path fill-rule="evenodd" d="M0 2.5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zm0 5a1.5 1.5 0 1 0 3 0 1.5 1.5 0 0 0-3 0zM1.5 14a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu">
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div id="write-style">
|
||||
<a id="write-for-frames" href="#" title="<IFRAME>..." hidden></a>
|
||||
<button id="write-for-frames" title="<IFRAME>..." class="fake" hidden></button>
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* global $ $$ $remove animateElement getEventKeyName moveFocus */// dom.js
|
||||
/* global API */// msg.js
|
||||
/* global getActiveTab tryJSONparse */// toolbox.js
|
||||
/* global getActiveTab */// toolbox.js
|
||||
/* global resortEntries tabURL */// popup.js
|
||||
/* global t */// localization.js
|
||||
'use strict';
|
||||
|
|
@ -95,12 +95,6 @@ const Events = {
|
|||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
// prevent the popup being opened in a background tab
|
||||
// when an irrelevant link was accidentally clicked
|
||||
if (el.closest('a')) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
name(event) {
|
||||
|
|
@ -126,7 +120,7 @@ const Events = {
|
|||
await API.openURL({
|
||||
url: this.href || this.dataset.href,
|
||||
index: (await getActiveTab()).index + 1,
|
||||
message: tryJSONparse(this.dataset.sendMessage),
|
||||
message: this._sendMessage,
|
||||
});
|
||||
window.close();
|
||||
},
|
||||
|
|
|
|||
|
|
@ -178,12 +178,10 @@ function initUnreachable(isStore) {
|
|||
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
|
||||
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
|
||||
const renderToken = s => s[0] === '<'
|
||||
? $create('a', {
|
||||
? $create('button.fake', {
|
||||
textContent: s.slice(1, -1),
|
||||
onclick: Events.copyContent,
|
||||
href: '#',
|
||||
className: 'copy',
|
||||
tabIndex: 0,
|
||||
title: t('copy'),
|
||||
})
|
||||
: s;
|
||||
|
|
@ -324,9 +322,7 @@ function createStyleElement(style) {
|
|||
Object.assign($('input', entry), {
|
||||
onclick: Events.toggleState,
|
||||
});
|
||||
const editLink = $('.style-edit-link', entry);
|
||||
Object.assign(editLink, {
|
||||
href: editLink.getAttribute('href') + style.id,
|
||||
Object.assign($('.style-edit-link', entry), {
|
||||
onclick: e => Events.openEditor(e, {id: style.id}),
|
||||
});
|
||||
const styleName = $('.style-name', entry);
|
||||
|
|
@ -343,7 +339,7 @@ function createStyleElement(style) {
|
|||
config.href = style.url;
|
||||
config.target = '_blank';
|
||||
config.title = t('configureStyleOnHomepage');
|
||||
config.dataset.sendMessage = JSON.stringify({method: 'openSettings'});
|
||||
config._sendMessage = {method: 'openSettings'};
|
||||
$('use', config).attributes['xlink:href'].nodeValue = '#svg-icon-config-uso';
|
||||
} else {
|
||||
config.classList.add('hidden');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user