Bug 1733632 - Update colorways section in about:addons to be a 3x6 gr…

…id. r=harry,mstriemer a=RyanVM

Differential Revision: https://phabricator.services.mozilla.com/D127504

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -758,3 +758,53 @@ section:not(:empty) ~ #empty-addons-message {
     margin-top: -20px;
   }
 }
+
+/* Colorways Section */
+
+.monochromatic-addon-list section {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+}
+
+.monochromatic-addon-list .header-name,
+.monochromatic-addon-list .list-section-subheading {
+  flex-basis: 100%;
+}
+
+.monochromatic-addon-list addon-card .card {
+  box-sizing: border-box;
+  height: calc(100% - 16px);
+  overflow: clip;
+  width: calc((var(--section-width) / 3) - 16px);
+}
+
+.monochromatic-addon-list addon-card .card .card-contents {
+  white-space: normal;
+}
+
+/* Remove disabled add-on fade */
+.monochromatic-addon-list addon-card:not([expanded]) > .addon.card[active="false"] {
+  opacity: unset;
+}
+
+.monochromatic-addon-list .addon-name-container {
+  align-items: start;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 3em 1fr;
+  row-gap: 16px;
+}
+
+.monochromatic-addon-list .addon-name-container .addon-name {
+  grid-column-end: span 2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.monochromatic-addon-list .addon-name-container .spacer {
+  display: none;
+}

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -4614,20 +4614,22 @@ gViewController.defineView("list", async type => {
         !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),
-    });
+    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);
   }
-  list.setSections(sections);
-  frag.appendChild(list);
 
   // Show recommendations for themes and extensions.
   if (

toolkit/mozapps/extensions/test/browser/browser_monochromatic_aboutaddons.js

@@ -23,8 +23,7 @@ add_task(async function testMonochromaticList() {
   let doc = win.document;
 
   // Wait for the colorway themes list to render.
-  let colorwayList = doc.querySelector("section[section='2']");
-  await colorwayList.cardsReady;
+  let colorwayList = doc.querySelector(".monochromatic-addon-list");
   await themeAddon.disable();
 
   // Check that all the cards are visible.
@@ -47,10 +46,10 @@ add_task(async function testMonochromaticList() {
   is(
     subheading.getAttribute("data-l10n-id"),
     "theme-monochromatic-subheading",
-    "Header string is correct."
+    "Subheader string is correct."
   );
 
-  // Check that an enabled theme moves to the enabled section & out of the colorways section.
+  // Check that the test theme is in the colorways section.
   let card = colorwayList.querySelector(
     "addon-card[addon-id='[email protected]']"
   );
@@ -60,45 +59,36 @@ add_task(async function testMonochromaticList() {
     "Colorways section contains monochromatic theme"
   );
 
+  // Check that the test theme is in the enabled section.
   let addon = await AddonManager.getAddonByID("[email protected]");
-  await addon.enable();
   let enabledSection = doc.querySelector("section[section='0']");
-
-  // After enabling the theme the card will not move to the appropriate section until a mousemove.
   let mutationPromise = BrowserTestUtils.waitForMutationCondition(
     enabledSection,
     { childList: true },
-    () => enabledSection.contains(card)
+    () =>
+      enabledSection.children.length > 1 &&
+      enabledSection.children[1].getAttribute("addon-id") ==
+        "[email protected]"
   );
-
-  await EventUtils.synthesizeMouseAtCenter(heading, { type: "mousemove" }, win);
+  await addon.enable();
   await mutationPromise;
-
-  ok(
-    enabledSection.contains(card),
-    "Enabled section contains enabled colorway theme"
+  let enabledCard = enabledSection.querySelector(
+    "addon-card[addon-id='[email protected]']"
   );
-
   ok(
-    !colorwayList.contains(card),
-    "Colorway section no longer contains enabled theme"
+    enabledSection.contains(enabledCard),
+    "Enabled section contains enabled colorway theme"
   );
 
-  // // Check that disabling a theme moves it back to the colorways section.
+  // Check that disabling a theme removes it from the enabled section.
   await addon.disable();
 
-  // After disabling a theme the card will not move to the appropriate section until a mousemove.
   mutationPromise = BrowserTestUtils.waitForMutationCondition(
-    colorwayList,
+    enabledSection,
     { childList: true },
-    () => colorwayList.contains(card)
+    () => !enabledSection.contains(enabledCard)
   );
 
-  await EventUtils.synthesizeMouseAtCenter(
-    subheading,
-    { type: "mousemove" },
-    win
-  );
   await mutationPromise;
 
   ok(