manage: simplify DOM (append icons only when needed)

manage.css

@@ -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;

manage.html

@@ -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">
+        <a target="_blank" class="homepage"></a>
-          <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>
@@ -50,17 +45,35 @@
         <a class="style-name-link" href="edit.html?id="></a>
       </h2>
       <p class="actions">
-        <a target="_blank" class="homepage">
+        <a target="_blank" class="homepage"></a>
-          <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>
         <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>
+      </p>
+      <div class="applies-to">
+        <div class="targets"></div>
+        <span class="expander">...</span>
+      </div>
+    </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">
@@ -88,12 +101,6 @@
       </span>
       <span class="update-note"></span>
     </span>
-      </p>
-      <div class="applies-to">
-        <div class="targets"></div>
-        <span class="expander">...</span>
-      </div>
-    </div>
   </template>
 
   <template data-id="appliesToTarget">

manage.js

@@ -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);
+      requestAnimationFrame(renderStyles);
-    } else if (shouldRenderAll && 'scrollY' in (history.state || {})) {
+      return;
-      setTimeout(() => scrollTo(0, history.state.scrollY));
+    }
+    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});