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,44 +45,13 @@
         <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>
-        <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>

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});