manage: fix & speedup createStyleElement a bit
This commit is contained in:
tophf
parent
e31def4b8e
commit
c061268aeb
19
manage.css
19
manage.css
|
|
@ -154,9 +154,10 @@ summary {
|
|||
|
||||
/* compact layout */
|
||||
|
||||
.newUI {
|
||||
.newUI #installed {
|
||||
display: table;
|
||||
margin: .75rem 0 .75rem 0;
|
||||
margin-top: .75rem;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.newUI .disabled {
|
||||
|
|
@ -273,10 +274,6 @@ summary {
|
|||
letter-spacing: .1ex;
|
||||
}
|
||||
|
||||
.newUI.has-favicons .target {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.newUI .target:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
|
@ -295,7 +292,11 @@ summary {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.newUI.has-favicons .target img[src] {
|
||||
.newUI .has-favicons .target {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.newUI .has-favicons .target img[src] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -336,7 +337,7 @@ input[id^="manage.newUI"] {
|
|||
}
|
||||
|
||||
/* Check update button for things that can*/
|
||||
*[style-update-url] .check-update {
|
||||
.updatable .check-update {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -389,7 +390,7 @@ fieldset {
|
|||
}
|
||||
|
||||
.enabled-only > .disabled,
|
||||
.edited-only > [style-update-url] {
|
||||
.edited-only > .updatable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
22
manage.html
22
manage.html
|
|
@ -16,7 +16,15 @@
|
|||
|
||||
<template data-id="style">
|
||||
<div class="entry">
|
||||
<h2 class="style-name"><a class="style-name-link" href="edit.html?id="></a></h2>
|
||||
<h2 class="style-name">
|
||||
<a class="style-name-link" href="edit.html?id="></a>
|
||||
<a target="_blank" class="homepage">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
|
||||
<polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
|
||||
</svg>
|
||||
</a>
|
||||
</h2>
|
||||
<p class="applies-to"><label i18n-text="appliesDisplay"></label></p>
|
||||
<p class="actions">
|
||||
<a class="style-edit-link" href="edit.html?id=">
|
||||
|
|
@ -39,6 +47,12 @@
|
|||
<a class="style-name-link" href="edit.html?id="></a>
|
||||
</h2>
|
||||
<p class="actions">
|
||||
<a target="_blank" class="homepage">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
|
||||
<polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/>
|
||||
</svg>
|
||||
</a>
|
||||
<span i18n-title="deleteStyleLabel">
|
||||
<svg class="svg-icon delete" viewBox="0 0 14 16">
|
||||
<path shape-rendering="crispEdges" fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
|
||||
|
|
@ -79,12 +93,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<template data-id="styleHomepage">
|
||||
<a target="_blank" class="homepage"><svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<polygon shape-rendering="crispEdges" points="3,3 3,17 17,17 17,13 15,13 15,15 5,15 5,5 7,5 7,3 "/>
|
||||
<polygon points="10,3 12.5,5.5 8,10 10,12 14.5,7.5 17,10 17,3 "/></svg></a>
|
||||
</template>
|
||||
|
||||
<template data-id="appliesToTarget">
|
||||
<span class="target"></span>
|
||||
</template>
|
||||
|
|
|
|||
56
manage.js
56
manage.js
|
|
@ -125,36 +125,22 @@ function showStyles(styles = []) {
|
|||
|
||||
function createStyleElement({style, name}) {
|
||||
const entry = template[`style${newUI.enabled ? 'Compact' : ''}`].cloneNode(true);
|
||||
entry.classList.add(style.enabled ? 'enabled' : 'disabled');
|
||||
entry.setAttribute('style-id', style.id);
|
||||
entry.className += ' ' +
|
||||
(style.enabled ? 'enabled' : 'disabled') +
|
||||
(style.updateUrl ? ' updatable' : '');
|
||||
entry.id = 'style-' + style.id;
|
||||
entry.styleId = style.id;
|
||||
entry.styleNameLowerCase = name || style.name.toLocaleLowerCase();
|
||||
if (style.updateUrl) {
|
||||
entry.setAttribute('style-update-url', style.updateUrl);
|
||||
}
|
||||
if (style.md5Url) {
|
||||
entry.setAttribute('style-md5-url', style.md5Url);
|
||||
}
|
||||
if (style.originalMd5) {
|
||||
entry.setAttribute('style-original-md5', style.originalMd5);
|
||||
}
|
||||
|
||||
const styleName = $('.style-name', entry);
|
||||
const styleNameEditLink = $('a', styleName);
|
||||
styleNameEditLink.appendChild(document.createTextNode(style.name));
|
||||
styleNameEditLink.href = styleNameEditLink.getAttribute('href') + style.id;
|
||||
const editLink = $('.style-name-link', entry);
|
||||
editLink.appendChild(document.createTextNode(style.name));
|
||||
editLink.href = editLink.getAttribute('href') + style.id;
|
||||
|
||||
const homepage = $('.homepage', entry);
|
||||
if (style.url) {
|
||||
const homepage = Object.assign(template.styleHomepage.cloneNode(true), {
|
||||
href: style.url,
|
||||
title: style.url,
|
||||
});
|
||||
if (newUI.enabled) {
|
||||
const actions = $('.actions', entry);
|
||||
actions.insertBefore(homepage, actions.firstChild);
|
||||
homepage.href = homepage.title = style.url;
|
||||
} else {
|
||||
styleName.appendChild(homepage);
|
||||
}
|
||||
homepage.remove();
|
||||
}
|
||||
|
||||
const appliesTo = $('.applies-to', entry);
|
||||
|
|
@ -163,11 +149,10 @@ function createStyleElement({style, name}) {
|
|||
regexpsBefore: '/',
|
||||
regexpsAfter: '/',
|
||||
};
|
||||
const showFavicons = newUI.enabled && newUI.favicons;
|
||||
const maxTargets = newUI.enabled ? Number.MAX_VALUE : 10;
|
||||
const displayed = new Set();
|
||||
let container = newUI.enabled ? $('.targets', appliesTo) : appliesTo;
|
||||
let numTargets = 0;
|
||||
let numIcons = 0;
|
||||
for (const type of TARGET_TYPES) {
|
||||
for (const section of style.sections) {
|
||||
for (const targetValue of section[type] || []) {
|
||||
|
|
@ -175,25 +160,26 @@ function createStyleElement({style, name}) {
|
|||
continue;
|
||||
}
|
||||
displayed.add(targetValue);
|
||||
if (numTargets++ == maxTargets) {
|
||||
const element = template.appliesToTarget.cloneNode(true);
|
||||
if (!newUI.enabled) {
|
||||
if (numTargets == 10) {
|
||||
container = appliesTo.appendChild(template.extraAppliesTo.cloneNode(true));
|
||||
} else if (numTargets > 1 && !newUI.enabled) {
|
||||
} else if (numTargets > 1) {
|
||||
container.appendChild(template.appliesToSeparator.cloneNode(true));
|
||||
}
|
||||
const element = template.appliesToTarget.cloneNode(true);
|
||||
if (showFavicons) {
|
||||
} else if (newUI.favicons) {
|
||||
let favicon = '';
|
||||
if (type == 'domains') {
|
||||
favicon = GET_FAVICON_URL + targetValue;
|
||||
} else if (targetValue.startsWith('chrome-extension:')) {
|
||||
favicon = OWN_ICON;
|
||||
} else if (type != 'regexps') {
|
||||
favicon = targetValue.match(/^.*?:\/\/([^/]+)/);
|
||||
favicon = targetValue.includes('://') && targetValue.match(/^.*?:\/\/([^/]+)/);
|
||||
favicon = favicon ? GET_FAVICON_URL + favicon[1] : '';
|
||||
}
|
||||
if (favicon) {
|
||||
element.appendChild(document.createElement('img')).dataset.src = favicon;
|
||||
debounce(handleEvent.loadFavicons);
|
||||
numIcons++;
|
||||
}
|
||||
}
|
||||
element.appendChild(
|
||||
|
|
@ -202,6 +188,7 @@ function createStyleElement({style, name}) {
|
|||
targetValue +
|
||||
(decorations[type + 'After'] || '')));
|
||||
container.appendChild(element);
|
||||
numTargets++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -215,6 +202,9 @@ function createStyleElement({style, name}) {
|
|||
if (numTargets > newUI.targets) {
|
||||
appliesTo.appendChild(template.expandAppliesTo.cloneNode(true));
|
||||
}
|
||||
if (numIcons) {
|
||||
debounce(handleEvent.loadFavicons);
|
||||
}
|
||||
} else {
|
||||
const editLink = $('.style-edit-link', entry);
|
||||
editLink.href = editLink.getAttribute('href') + style.id;
|
||||
|
|
@ -419,7 +409,7 @@ function checkUpdateAll() {
|
|||
btnApply.classList.add('hidden');
|
||||
noUpdates.classList.add('hidden');
|
||||
|
||||
Promise.all($$('[style-update-url]').map(checkUpdate))
|
||||
Promise.all($$('.updatable').map(checkUpdate))
|
||||
.then(updatables => {
|
||||
btnCheck.disabled = false;
|
||||
const numUpdatable = updatables.filter(u => u).length;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user