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

98
popup/popup.js
View File

@ -11,6 +11,22 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
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 =>
FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
? getTabRealURLFirefox(tab)
@ -81,8 +97,17 @@ function initPopup() {
// action buttons
$('#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();
Object.assign($('#popup-manage-button'), {
@ -91,18 +116,36 @@ function initPopup() {
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 = () => {
chrome.runtime.openOptionsPage();
window.close();
};
$('#popup-options-icon').onclick = () => {
event.preventDefault();
chrome.runtime.openOptionsPage();
window.close();
};
$('#popup-wiki-button').onclick = handleEvent.openURLandHide;
if (!prefs.get('popup.stylesFirst')) {
document.body.insertBefore(
$('body > .actions'),
installed);
}
$('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
if (!tabURL) {
document.body.classList.add('blocked');
@ -129,7 +172,7 @@ function initPopup() {
$('label', info).textContent = t('unreachableAMO');
const note = (FIREFOX < 59 ? t('unreachableAMOHintOldFF') : t('unreachableAMOHint')) +
(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 noteNode = $create('fragment', note.split('\n').map(renderLine));
const target = $('p', info);
@ -241,6 +284,9 @@ function showStyles(styles) {
}
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,
});
const editLinkAccess = $('.style-edit-link-accessibility', entry);
Object.assign(editLinkAccess, {
href: editLinkAccess.getAttribute('href') + style.id,
onclick: handleEvent.openLink,
});
const styleName = $('.style-name', entry);
Object.assign(styleName, {
htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
@ -304,14 +356,7 @@ function createStyleElement({
if (check) detectSloppyRegexps([style]);
const oldElement = $(ENTRY_ID_PREFIX + style.id);
if (oldElement && oldElement.contains(document.activeElement)) {
// 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) {
if (oldElement) {
oldElement.parentNode.replaceChild(entry, oldElement);
} else {
container.appendChild(entry);
@ -330,13 +375,16 @@ Object.assign(handleEvent, {
},
name(event) {
this.checkbox.dispatchEvent(new MouseEvent('click'));
if (prefs.get('popupclick') === 1) {
this.checkbox.dispatchEvent(new MouseEvent('click'));
} else {
const entry = handleEvent.getClickedStyleElement(event);
$('.style-edit-link', entry).click();
}
event.preventDefault();
},
toggle(event) {
// when fired on checkbox, prevent the parent label from seeing the event, see #501
event.stopPropagation();
API.saveStyle({
id: handleEvent.getClickedStyleId(event),
enabled: this.matches('.enable') || this.checked,
@ -350,9 +398,12 @@ Object.assign(handleEvent, {
box.dataset.display = true;
box.style.cssText = '';
$('b', box).textContent = $('.style-name', entry).textContent;
$('[data-cmd="ok"]', box).focus();
$('[data-cmd="ok"]', box).onclick = () => confirm(true);
$('[data-cmd="cancel"]', box).onclick = () => confirm(false);
$('button[data-cmd="ok"]', box).focus();
$('button[data-cmd="ok"]', box).onclick = () => confirm(true);
$('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 => {
const keyCode = event.keyCode || event.which;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@ -438,7 +489,7 @@ Object.assign(handleEvent, {
event.preventDefault();
getActiveTab()
.then(activeTab => API.openURL({
url: this.href || this.dataset.href,
url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
index: activeTab.index + 1,
message: tryJSONparse(this.dataset.sendMessage),
}))
@ -483,6 +534,9 @@ function handleDelete(id) {
if (!$('.entry')) {
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 {
overflow-y: auto;
overflow-x: hidden;
}
#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: "";
top: -50px;
left: -1000px;
right: -1000px;
bottom: -12px;
bottom: 0;
position: absolute;
pointer-events: none;
animation: fadein 1s;
@ -18,15 +22,17 @@ body.search-results-shown {
#search-results {
position: relative;
margin-top: -1em;
}
#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;
padding: 5px;
text-align: center;
margin: 0 0 var(--outer-padding);
margin: 0 var(--outer-padding) var(--outer-padding);
}
#search-results-list {
@ -39,24 +45,29 @@ body.search-results-shown {
position: relative;
padding: 8px 8px 21px;
min-height: 160px;
margin: 0 2px;
}
.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: 1px solid #555;
border: 1px solid var(--gray-lightness-33);
margin-bottom: 24px;
background-color: #eee;
background-color: var(--gray-lightness-93);
}
.search-result:last-of-type {
margin-bottom: 0;
}
.search-result:hover {
border-color: #000;
background-color: #fff;
border-color: var(--black);
background-color: var(--white);
}
.search-result .lds-spinner {
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 {
@ -79,7 +90,7 @@ body.search-results-shown {
.search-result-title {
margin-bottom: .5em;
display: block;
color: #555;
color: var(--gray-lightness-33);
overflow-wrap: break-word;
}
@ -103,14 +114,14 @@ body.search-results-shown {
line-height: 18px;
text-align: center;
position: absolute;
background-color: hsla(180, 100%, 27%, .75);
color: #fff;
background-color: var(--darkcyan-alpha-75);
color: var(--white);
transition: background-color .5s;
pointer-events: none;
}
.search-result-screenshot:hover ~ .search-result-status {
background-color: hsla(180, 100%, 27%, 1);
background-color: var(--darkcyan);
}
.search-result-actions {
@ -131,13 +142,13 @@ body.search-results-shown {
}
.search-result-actions button {
box-shadow: 2px 2px 20px #000;
box-shadow: 2px 2px 20px var(--black);
white-space: nowrap;
margin: 3px;
}
.search-result-meta {
background-color: hsla(0, 0%, 93%, 0.75);
background-color: var(--search-result-meta);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@ -150,7 +161,7 @@ body.search-results-shown {
}
.search-result:hover .search-result-meta {
background-color: hsla(0, 0%, 100%, 0.75);
background-color: var(--white-alpha-75);
}
.search-result-meta dt {
@ -179,16 +190,13 @@ body.search-results-shown {
font-weight: bold;
}
.search-result-meta [data-type="rating"][data-class="good"] dd {
color: darkgreen;
}
.search-result-meta [data-type="rating"][data-class="good"] 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 {
color: darkred;
color: var(--darkred);
}
.search-result-meta [data-type="rating"][data-class="none"] dd {
@ -227,8 +235,7 @@ body.search-results-shown {
}
.search-results-nav[data-type="bottom"] {
margin-top: -1em;
margin-bottom: 1em;
margin: 1.25rem 0 .5rem;
}
#search-results .search-results-nav button {
@ -249,12 +256,7 @@ body.search-results-shown {
}
#search-results .search-results-nav button:not(:disabled):hover {
text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
#find-styles-inline-group label {
position: relative;
padding-left: 16px;
text-shadow: 0 1px 4px var(--black-alpha-5);
}
/* spinner: https://github.com/loadingio/css-spinner */