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

popup

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-10-12 16:31:59 -04:00 committed by GitHub
parent e83ff94ef7
commit 97108767e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 808 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

820
popup/popup.css
View File

File diff suppressed because it is too large Load Diff

96
popup/popup.js
View File

@ -11,6 +11,22 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
toggleSideBorders(); toggleSideBorders();
if (prefs.get('popupui') === 1) {
document.documentElement.classList.add('classicUI');
} else {
document.documentElement.classList.add('iconUI');
}
if (prefs.get('popupclick') === 1) {
document.documentElement.classList.add('toggleUI');
} else {
document.documentElement.classList.add('directLinkUI');
}
if (!prefs.get('popup.stylesFirst')) {
document.documentElement.classList.add('actions-top');
}
getActiveTab().then(tab => getActiveTab().then(tab =>
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading' FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
? getTabRealURLFirefox(tab) ? getTabRealURLFirefox(tab)
@ -81,8 +97,17 @@ function initPopup() {
// action buttons // action buttons
$('#disableAll').onchange = function () { $('#disableAll').onchange = function () {
installed.classList.toggle('disabled', this.checked); document.body.classList.toggle('disabled', this.checked);
}; };
$('#disable-all-icon').onclick = () => {
$('#disableAll').click();
};
$('#find-styles-icon').onclick = () => {
$('#find-styles-link').click();
};
setupLivePrefs(); setupLivePrefs();
Object.assign($('#popup-manage-button'), { Object.assign($('#popup-manage-button'), {
@ -91,18 +116,36 @@ function initPopup() {
oncontextmenu: handleEvent.openManager, oncontextmenu: handleEvent.openManager,
}); });
Object.assign($('#popup-manage-icon'), {
onclick: handleEvent.openManager,
onmouseup: handleEvent.openManager,
oncontextmenu: handleEvent.openManager,
});
$('#find-external-icon').onclick = () => {
event.preventDefault();
$('input.toggle-inline').click()
};
$('#find-inline-icon').onclick = () => {
event.preventDefault();
$('input.toggle-inline').click()
};
$('#popup-options-button').onclick = () => { $('#popup-options-button').onclick = () => {
chrome.runtime.openOptionsPage(); chrome.runtime.openOptionsPage();
window.close(); window.close();
}; };
$('#popup-options-icon').onclick = () => {
event.preventDefault();
chrome.runtime.openOptionsPage();
window.close();
};
$('#popup-wiki-button').onclick = handleEvent.openURLandHide; $('#popup-wiki-button').onclick = handleEvent.openURLandHide;
if (!prefs.get('popup.stylesFirst')) { $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
document.body.insertBefore(
$('body > .actions'),
installed);
}
if (!tabURL) { if (!tabURL) {
document.body.classList.add('blocked'); document.body.classList.add('blocked');
@ -129,7 +172,7 @@ function initPopup() {
$('label', info).textContent = t('unreachableAMO'); $('label', info).textContent = t('unreachableAMO');
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) + const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF')); (FIREFOX < 60 ? '' : '\n' + t('unreachableAMOHintNewFF'));
const renderToken = s => s[0] === '<' ? $create('b', tWordBreak(s.slice(1, -1))) : s; const renderToken = s => s[0] === '<' ? $create('b', s.slice(1, -1)) : s;
const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken)); const renderLine = line => $create('p', line.split(/(<.*?>)/).map(renderToken));
const noteNode = $create('fragment', note.split('\n').map(renderLine)); const noteNode = $create('fragment', note.split('\n').map(renderLine));
const target = $('p', info); const target = $('p', info);
@ -241,6 +284,9 @@ function showStyles(styles) {
} }
window.dispatchEvent(new Event('showStyles:done')); window.dispatchEvent(new Event('showStyles:done'));
}); });
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
$('#installed').classList.toggle('reverse-stripe', reverseZebra);
} }
@ -272,6 +318,12 @@ function createStyleElement({
onclick: handleEvent.openLink, onclick: handleEvent.openLink,
}); });
const editLinkAccess = $('.style-edit-link-accessibility', entry);
Object.assign(editLinkAccess, {
href: editLinkAccess.getAttribute('href') + style.id,
onclick: handleEvent.openLink,
});
const styleName = $('.style-name', entry); const styleName = $('.style-name', entry);
Object.assign(styleName, { Object.assign(styleName, {
htmlFor: ENTRY_ID_PREFIX_RAW + style.id, htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
@ -304,14 +356,7 @@ function createStyleElement({
if (check) detectSloppyRegexps([style]); if (check) detectSloppyRegexps([style]);
const oldElement = $(ENTRY_ID_PREFIX + style.id); const oldElement = $(ENTRY_ID_PREFIX + style.id);
if (oldElement && oldElement.contains(document.activeElement)) { if (oldElement) {
// preserve the focused element inside
const {className} = document.activeElement;
oldElement.parentNode.replaceChild(entry, oldElement);
// we're not using $() since className may contain multiple tokens
const el = entry.getElementsByClassName(className)[0];
if (el) el.focus();
} else if (oldElement) {
oldElement.parentNode.replaceChild(entry, oldElement); oldElement.parentNode.replaceChild(entry, oldElement);
} else { } else {
container.appendChild(entry); container.appendChild(entry);
@ -330,13 +375,16 @@ Object.assign(handleEvent, {
}, },
name(event) { name(event) {
if (prefs.get('popupclick') === 1) {
this.checkbox.dispatchEvent(new MouseEvent('click')); this.checkbox.dispatchEvent(new MouseEvent('click'));
} else {
const entry = handleEvent.getClickedStyleElement(event);
$('.style-edit-link', entry).click();
}
event.preventDefault(); event.preventDefault();
}, },
toggle(event) { toggle(event) {
// when fired on checkbox, prevent the parent label from seeing the event, see #501
event.stopPropagation();
API.saveStyle({ API.saveStyle({
id: handleEvent.getClickedStyleId(event), id: handleEvent.getClickedStyleId(event),
enabled: this.matches('.enable') || this.checked, enabled: this.matches('.enable') || this.checked,
@ -350,9 +398,12 @@ Object.assign(handleEvent, {
box.dataset.display = true; box.dataset.display = true;
box.style.cssText = ''; box.style.cssText = '';
$('b', box).textContent = $('.style-name', entry).textContent; $('b', box).textContent = $('.style-name', entry).textContent;
$('[data-cmd="ok"]', box).focus(); $('button[data-cmd="ok"]', box).focus();
$('[data-cmd="ok"]', box).onclick = () => confirm(true); $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
$('[data-cmd="cancel"]', box).onclick = () => confirm(false); $('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
$('a[data-cmd="ok"]', box).focus();
$('a[data-cmd="ok"]', box).onclick = () => confirm(true); event.preventDefault();
$('a[data-cmd="cancel"]', box).onclick = () => confirm(false); event.preventDefault();
window.onkeydown = event => { window.onkeydown = event => {
const keyCode = event.keyCode || event.which; const keyCode = event.keyCode || event.which;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@ -438,7 +489,7 @@ Object.assign(handleEvent, {
event.preventDefault(); event.preventDefault();
getActiveTab() getActiveTab()
.then(activeTab => API.openURL({ .then(activeTab => API.openURL({
url: this.href || this.dataset.href, url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
index: activeTab.index + 1, index: activeTab.index + 1,
message: tryJSONparse(this.dataset.sendMessage), message: tryJSONparse(this.dataset.sendMessage),
})) }))
@ -483,6 +534,9 @@ function handleDelete(id) {
if (!$('.entry')) { if (!$('.entry')) {
installed.appendChild(template.noStyles.cloneNode(true)); installed.appendChild(template.noStyles.cloneNode(true));
} }
var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
$('#installed').classList.toggle('reverse-stripe', reverseZebra);
} }

66
popup/search-results.css
View File

@ -1,15 +1,19 @@
:root {
--search-result-meta: hsla(0, 0%, 93%, 0.75);
}
body.search-results-shown { body.search-results-shown {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
} }
#search-results:not([data-empty]):before { #search-results:not([data-empty]):before {
background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px); background-image: linear-gradient(transparent, var(--black-alpha-3) 200px);
content: ""; content: "";
top: -50px; top: -50px;
left: -1000px; left: -1000px;
right: -1000px; right: -1000px;
bottom: -12px; bottom: 0;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
animation: fadein 1s; animation: fadein 1s;
@ -18,15 +22,17 @@ body.search-results-shown {
#search-results { #search-results {
position: relative; position: relative;
margin-top: -1em;
} }
#search-results-error { #search-results-error {
background-color: rgba(255, 0, 0, 0.4); flex-basis: 100%;
background-color: var(--darkred);
color: var(--white);
text-shadow: 2px 1px 1px var(--black);
font-weight: bold; font-weight: bold;
padding: 5px; padding: 5px;
text-align: center; text-align: center;
margin: 0 0 var(--outer-padding); margin: 0 var(--outer-padding) var(--outer-padding);
} }
#search-results-list { #search-results-list {
@ -39,24 +45,29 @@ body.search-results-shown {
position: relative; position: relative;
padding: 8px 8px 21px; padding: 8px 8px 21px;
min-height: 160px; min-height: 160px;
margin: 0 2px;
} }
.search-result { .search-result {
box-shadow: 1px 1px 10px rgba(0, 0, 0, .75); box-shadow: 1px 1px 10px var(--black-alpha-75);
border-radius: 4px; border-radius: 4px;
border: 1px solid #555; border: 1px solid var(--gray-lightness-33);
margin-bottom: 24px; margin-bottom: 24px;
background-color: #eee; background-color: var(--gray-lightness-93);
}
.search-result:last-of-type {
margin-bottom: 0;
} }
.search-result:hover { .search-result:hover {
border-color: #000; border-color: var(--black);
background-color: #fff; background-color: var(--white);
} }
.search-result .lds-spinner { .search-result .lds-spinner {
transform: scale(.5); transform: scale(.5);
filter: invert(1) drop-shadow(1px 1px 3px #000); filter: invert(1) drop-shadow(1px 1px 3px var(--black));
} }
.search-result-empty .lds-spinner { .search-result-empty .lds-spinner {
@ -79,7 +90,7 @@ body.search-results-shown {
.search-result-title { .search-result-title {
margin-bottom: .5em; margin-bottom: .5em;
display: block; display: block;
color: #555; color: var(--gray-lightness-33);
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -103,14 +114,14 @@ body.search-results-shown {
line-height: 18px; line-height: 18px;
text-align: center; text-align: center;
position: absolute; position: absolute;
background-color: hsla(180, 100%, 27%, .75); background-color: var(--darkcyan-alpha-75);
color: #fff; color: var(--white);
transition: background-color .5s; transition: background-color .5s;
pointer-events: none; pointer-events: none;
} }
.search-result-screenshot:hover ~ .search-result-status { .search-result-screenshot:hover ~ .search-result-status {
background-color: hsla(180, 100%, 27%, 1); background-color: var(--darkcyan);
} }
.search-result-actions { .search-result-actions {
@ -131,13 +142,13 @@ body.search-results-shown {
} }
.search-result-actions button { .search-result-actions button {
box-shadow: 2px 2px 20px #000; box-shadow: 2px 2px 20px var(--black);
white-space: nowrap; white-space: nowrap;
margin: 3px; margin: 3px;
} }
.search-result-meta { .search-result-meta {
background-color: hsla(0, 0%, 93%, 0.75); background-color: var(--search-result-meta);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
@ -150,7 +161,7 @@ body.search-results-shown {
} }
.search-result:hover .search-result-meta { .search-result:hover .search-result-meta {
background-color: hsla(0, 0%, 100%, 0.75); background-color: var(--white-alpha-75);
} }
.search-result-meta dt { .search-result-meta dt {
@ -179,16 +190,13 @@ body.search-results-shown {
font-weight: bold; font-weight: bold;
} }
.search-result-meta [data-type="rating"][data-class="good"] dd { .search-result-meta [data-type="rating"][data-class="good"] dd,
color: darkgreen;
}
.search-result-meta [data-type="rating"][data-class="okay"] dd { .search-result-meta [data-type="rating"][data-class="okay"] dd {
color: darkgreen; color: var(--darkgreen);
} }
.search-result-meta [data-type="rating"][data-class="bad"] dd { .search-result-meta [data-type="rating"][data-class="bad"] dd {
color: darkred; color: var(--darkred);
} }
.search-result-meta [data-type="rating"][data-class="none"] dd { .search-result-meta [data-type="rating"][data-class="none"] dd {
@ -227,8 +235,7 @@ body.search-results-shown {
} }
.search-results-nav[data-type="bottom"] { .search-results-nav[data-type="bottom"] {
margin-top: -1em; margin: 1.25rem 0 .5rem;
margin-bottom: 1em;
} }
#search-results .search-results-nav button { #search-results .search-results-nav button {
@ -249,12 +256,7 @@ body.search-results-shown {
} }
#search-results .search-results-nav button:not(:disabled):hover { #search-results .search-results-nav button:not(:disabled):hover {
text-shadow: 0 1px 4px rgba(0, 0, 0, .5); text-shadow: 0 1px 4px var(--black-alpha-5);
}
#find-styles-inline-group label {
position: relative;
padding-left: 16px;
} }
/* spinner: https://github.com/loadingio/css-spinner */ /* spinner: https://github.com/loadingio/css-spinner */