Move monochromatic themes to their own list draft
authorMark Striemer <mstriemer@mozilla.com>
Wed, 06 Oct 2021 10:14:40 -0500
changeset 4006145 322360dcfbedd382f86f1dff3d189965eda9ee0e
parent 4006144 813e253b57748fc022c47dcc8829c032700c9b46
child 4006146 2d78bc02f762a24160f38356a1bcb97abd251543
child 4006149 6ccc884b058d9566c1344d774c21b2ab8eec1a68
push id737615
push usermstriemer@mozilla.com
push dateWed, 06 Oct 2021 15:25:04 +0000
treeherdertry@2d78bc02f762 [default view] [failures only]
milestone95.0a1
Move monochromatic themes to their own list
toolkit/mozapps/extensions/content/aboutaddons.css
toolkit/mozapps/extensions/content/aboutaddons.js
--- a/toolkit/mozapps/extensions/content/aboutaddons.css
+++ b/toolkit/mozapps/extensions/content/aboutaddons.css
@@ -756,31 +756,31 @@ section:not(:empty) ~ #empty-addons-mess
     padding: 0;
     /* move the badged dot into the top-end (right in ltr, left in rtl) corner. */
     margin-top: -20px;
   }
 }
 
 /* Colorways Section */
 
-section[section="2"] addon-card {
+.monochromatic-addon-list addon-card {
   display: inline-block;
 }
 
-section[section="2"] addon-card .card {
+.monochromatic-addon-list addon-card .card {
   box-sizing: border-box;
   margin-inline-end: 16px;
   overflow: clip;
   width: calc((var(--section-width) / 3) - 16px);
 }
 
 /* Remove disabled add-on fade */
-section[section="2"] addon-card:not([expanded]) > .addon.card[active="false"] {
+.monochromatic-addon-list addon-card:not([expanded]) > .addon.card[active="false"] {
   opacity: unset;
 }
 
-section[section="2"] .addon-name-container {
+.monochromatic-addon-list .addon-name-container {
   flex-flow: row wrap-reverse;
 }
 
-section[section="2"] .addon-name-container .addon-name {
+.monochromatic-addon-list .addon-name-container .addon-name {
   margin-top: 16px;
 }
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -4609,30 +4609,32 @@ gViewController.defineView("list", async
       headingId: type + "-disabled-heading",
       filterFn: addon =>
         !addon.hidden &&
         !addon.isActive &&
         !isPending(addon, "uninstall") &&
         !isMonochromaticTheme(addon),
     },
   ];
+  list.setSections(sections);
+  frag.appendChild(list);
 
   if (type == "theme" && monochromaticEnabled) {
-    sections.push({
-      headingId: type + "-monochromatic-heading",
-      subheadingId: type + "-monochromatic-subheading",
-      filterFn: addon =>
-        !addon.hidden &&
-        !addon.isActive &&
-        !isPending(addon, "uninstall") &&
-        isMonochromaticTheme(addon),
-    });
-  }
-  list.setSections(sections);
-  frag.appendChild(list);
+    let monochromaticList = document.createElement("addon-list");
+    monochromaticList.classList.add("monochromatic-addon-list");
+    monochromaticList.type = type;
+    monochromaticList.setSections([
+      {
+        headingId: type + "-monochromatic-heading",
+        subheadingId: type + "-monochromatic-subheading",
+        filterFn: addon => !addon.hidden && isMonochromaticTheme(addon),
+      },
+    ]);
+    frag.appendChild(monochromaticList);
+  }
 
   // Show recommendations for themes and extensions.
   if (
     LIST_RECOMMENDATIONS_ENABLED &&
     (type == "extension" || type == "theme")
   ) {
     let elementName =
       type == "extension"