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

manage: simplify DOM (append icons only when needed)

Browse Source
This commit is contained in:
tophf 2017-04-22 15:09:48 +03:00
parent e3c135e87e
commit 3dc934369b
3 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
manage.css
View File

@ -275,7 +275,7 @@ summary {
}
.newUI .can-update .update,
.newUI .no-update:not(.update-problem) .up-to-date,
.newUI .no-update:not(.update-problem):not(.update-done) .up-to-date,
.newUI .no-update.update-problem .check-update,
.newUI .update-done .updated {
display: inline;

83
manage.html
View File

@ -18,12 +18,7 @@
<div class="entry">
<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>
<a target="_blank" class="homepage"></a>
</h2>
<p class="applies-to">
<label i18n-text="appliesDisplay"></label>
@ -50,44 +45,13 @@
<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">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
</a>
<a target="_blank" class="homepage"></a>
<span i18n-title="deleteStyleLabel">
<svg class="svg-icon delete" 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>
</span>
<span class="updater-icons">
<span class="check-update" 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>
</span>
<span class="update" 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>
</span>
<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"/>
</svg>
</span>
<span class="updated" i18n-title="updateCompleted">
<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"/>
</svg>
</span>
<span class="update-note"></span>
</span>
</p>
<div class="applies-to">
<div class="targets"></div>
@ -96,6 +60,49 @@
</div>
</template>
<template data-id="homepageIconBig">
<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>
</template>
<template data-id="homepageIconSmall">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
</template>
<template data-id="updaterIcons">
<span class="updater-icons">
<span class="check-update" 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>
</span>
<span class="update" 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>
</span>
<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"/>
</svg>
</span>
<span class="updated" i18n-title="updateCompleted">
<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"/>
</svg>
</span>
<span class="update-note"></span>
</span>
</template>
<template data-id="appliesToTarget">
<span class="target"></span>
</template>

31
manage.js
View File

@ -98,22 +98,29 @@ function showStyles(styles = []) {
const sorted = styles
.map(style => ({name: style.name.toLocaleLowerCase(), style}))
.sort((a, b) => (a.name < b.name ? -1 : a.name == b.name ? 0 : 1));
let index = 0;
const shouldRenderAll = (history.state || {}).scrollY > window.innerHeight;
const renderBin = document.createDocumentFragment();
renderStyles(0);
if (shouldRenderAll) {
renderStyles();
} else {
requestAnimationFrame(renderStyles);
}
function renderStyles(index) {
function renderStyles() {
const t0 = performance.now();
let rendered = 0;
while (index < sorted.length
&& (shouldRenderAll || performance.now() - t0 < 10 || ++rendered < 10)) {
&& (shouldRenderAll || ++rendered < 10 || performance.now() - t0 < 10)) {
renderBin.appendChild(createStyleElement(sorted[index++]));
}
filterAndAppend({container: renderBin});
if (index < sorted.length) {
setTimeout(renderStyles, 0, index);
} else if (shouldRenderAll && 'scrollY' in (history.state || {})) {
setTimeout(() => scrollTo(0, history.state.scrollY));
requestAnimationFrame(renderStyles);
return;
}
if ('scrollY' in (history.state || {})) {
setTimeout(window.scrollTo, 0, 0, history.state.scrollY);
}
if (newUI.enabled && newUI.favicons) {
debounce(handleEvent.loadFavicons, 16);
@ -125,7 +132,7 @@ function showStyles(styles = []) {
function createStyleElement({style, name}) {
// query the sub-elements just once, then reuse the references
if ((createStyleElement.parts || {}).newUI !== newUI.enabled) {
const entry = template[`style${newUI.enabled ? 'Compact' : ''}`].cloneNode(true);
const entry = template[`style${newUI.enabled ? 'Compact' : ''}`];
createStyleElement.parts = {
newUI: newUI.enabled,
entry,
@ -133,8 +140,9 @@ function createStyleElement({style, name}) {
checker: $('.checker', entry) || {},
nameLink: $('.style-name-link', entry),
editLink: $('.style-edit-link', entry) || {},
editHrefBase: $('.style-name-link, .style-edit-link', entry).getAttribute('href'),
editHrefBase: $('.style-name-link', entry).getAttribute('href'),
homepage: $('.homepage', entry),
homepageIcon: template[`homepageIcon${newUI.enabled ? 'Small' : 'Big'}`],
appliesTo: $('.applies-to', entry),
targets: $('.targets', entry),
expander: $('.expander', entry),
@ -159,6 +167,13 @@ function createStyleElement({style, name}) {
(style.enabled ? 'enabled' : 'disabled') +
(style.updateUrl ? ' updatable' : '');
if (style.url) {
$('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));
}
if (style.updateUrl && newUI.enabled) {
$('.actions', entry).appendChild(template.updaterIcons.cloneNode(true));
}
// name being supplied signifies we're invoked by showStyles()
// which debounces its main loop thus loading the postponed favicons
createStyleTargetsElement({entry, style, postponeFavicons: name});