set even/odd class based on html { --columns: # } variable

manage/manage.js

@@ -50,7 +50,13 @@ function onRuntimeMessage(msg) {
     case 'styleDeleted':
       handleDelete(msg.id);
       break;
+    case 'styleApply':
+    case 'styleReplaceAll':
+      break;
+    default:
+      return;
   }
+  setTimeout(sorter.updateStripes, 0, {onlyWhenColumnsChanged: true});
 }
 
 
@@ -117,9 +123,6 @@ function showStyles(styles = [], matchUrlIds) {
       style,
       name: style.name.toLocaleLowerCase() + '\n' + style.name,
     })),
-  }).map((info, index) => {
-    info.index = index;
-    return info;
   });
   let index = 0;
   let firstRun = true;
@@ -149,7 +152,7 @@ function showStyles(styles = [], matchUrlIds) {
       }
       renderBin.appendChild(entry);
     }
-    filterAndAppend({container: renderBin});
+    filterAndAppend({container: renderBin}).then(sorter.updateStripes);
     if (index < sorted.length) {
       requestAnimationFrame(renderStyles);
       if (firstRun) setTimeout(recreateStyleTargets, 0, {styles, iconsOnly: true});
@@ -174,7 +177,7 @@ function showStyles(styles = [], matchUrlIds) {
 }
 
 
-function createStyleElement({style, name, index}) {
+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' : ''}`];
@@ -227,7 +230,6 @@ function createStyleElement({style, name, index}) {
     (style.enabled ? 'enabled' : 'disabled') +
     (style.updateUrl ? ' updatable' : '') +
     (style.usercssData ? ' usercss' : '');
-  if (index !== undefined) entry.classList.add(index % 2 ? 'odd' : 'even');
 
   if (style.url) {
     $('.homepage', entry).appendChild(parts.homepageIcon.cloneNode(true));

manage/sort.js

@@ -61,6 +61,8 @@ const sorter = (() => {
 
   const splitRegex = /\s*,\s*/;
 
+  let columns = 1;
+
   function addOptions() {
     let container;
     const select = $('#manage.newUI.sort');
@@ -140,15 +142,37 @@ const sorter = (() => {
     updateStripes();
   }
 
-  function updateStripes() {
+  function updateStripes({onlyWhenColumnsChanged} = {}) {
+    if (onlyWhenColumnsChanged && !updateColumnCount()) return;
     let index = 0;
-    [...installed.children].forEach(entry => {
+    let isOdd = false;
-      const list = entry.classList;
+    const flipRows = columns % 2 === 0;
-      if (!list.contains('hidden')) {
+    for (const {classList} of installed.children) {
-        list.add(index % 2 ? 'odd' : 'even');
+      if (classList.contains('hidden')) continue;
-        list.remove(index++ % 2 ? 'even' : 'odd');
+      classList.toggle('odd', isOdd);
+      classList.toggle('even', !isOdd);
+      if (flipRows && ++index >= columns) {
+        index = 0;
+      } else {
+        isOdd = !isOdd;
       }
-    });
+    }
+  }
+
+  function updateColumnCount() {
+    let newValue = 1;
+    for (let el = document.documentElement.lastElementChild;
+         el.localName === 'style';
+         el = el.previousElementSibling) {
+      if (el.textContent.includes('--columns:')) {
+        newValue = Math.max(1, getComputedStyle(document.documentElement).getPropertyValue('--columns') | 0);
+        break;
+      }
+    }
+    if (columns !== newValue) {
+      columns = newValue;
+      return true;
+    }
   }
 
   function showHelp(event) {
@@ -168,6 +192,7 @@ const sorter = (() => {
     prefs.subscribe(['manage.newUI.sort'], update);
     $('#sorter-help').onclick = showHelp;
     addOptions();
+    updateColumnCount();
   }
 
   return {init, update, sort, updateStripes};