manage: fix & speedup createStyleElement a bit

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,6 +292,10 @@ summary {
   display: none;
 }
 
+.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;
 }
 

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>

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.className += ' ' +
-  entry.setAttribute('style-id', style.id);
+    (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 editLink = $('.style-name-link', entry);
-  const styleNameEditLink = $('a', styleName);
+  editLink.appendChild(document.createTextNode(style.name));
-  styleNameEditLink.appendChild(document.createTextNode(style.name));
+  editLink.href = editLink.getAttribute('href') + style.id;
-  styleNameEditLink.href = styleNameEditLink.getAttribute('href') + style.id;
+
+  const homepage = $('.homepage', entry);
   if (style.url) {
-    const homepage = Object.assign(template.styleHomepage.cloneNode(true), {
+    homepage.href = homepage.title = style.url;
-      href: style.url,
-      title: style.url,
-    });
-    if (newUI.enabled) {
-      const actions = $('.actions', entry);
-      actions.insertBefore(homepage, actions.firstChild);
   } 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);
+        } else if (newUI.favicons) {
-        if (showFavicons) {
           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;