Merge pull request #534 from Devin-AXIS/Carrie

Add monochrome plugin logos and normalize visual sizing

Author: jhe009809-hue

apps/app/public/ext-douyin.png

@@ -31,6 +31,50 @@ img[src$="/ext-video-console.png"] {
   scale: 1.2;
 }
 
+/* Normalize the visible bounds and centers of the transparent plugin marks. */
+img[src$="/ext-xiaohongshu.png"] {
+  scale: 1.2;
+  translate: 0 -3.2%;
+}
+
+img[src$="/ext-douyin.png"] {
+  scale: 1.455;
+  translate: 0 -4%;
+}
+
+img[src$="/ext-wechat-channels.png"] {
+  scale: 1.25;
+  translate: 0 -2.2%;
+}
+
+img[src$="/ext-operation-recorder.png"] {
+  scale: 1.4;
+  translate: -3.7% -5.5%;
+}
+
+img[src$="/ext-onto.png"] {
+  scale: 1.25;
+  translate: 0 -4%;
+}
+
+img[src$="/ext-short-video.png"] {
+  scale: 1.35;
+  translate: 0 -1.1%;
+}
+
+/* Keep monochrome plugin marks readable on both dark and light icon tiles. */
+:is(.dark, [data-theme="dark"]) img:is(
+  [src$="/ext-xiaohongshu.png"],
+  [src$="/ext-douyin.png"],
+  [src$="/ext-wechat-channels.png"],
+  [src$="/ext-operation-recorder.png"],
+  [src$="/ext-onto.png"],
+  [src$="/ext-short-video.png"]
+) {
+  filter: invert(1);
+  mix-blend-mode: difference;
+}
+
 @custom-variant dark (&:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
 @custom-variant electron {
   html.ipollowork-electron & {

apps/app/public/ext-onto.png

@@ -1,16 +1,22 @@
 const featuredPluginIconSrc: Readonly<Record<string, string>> = {
   context7: "/ext-context7.svg",
   "design-agent": "/ext-design.png",
+  "douyin-ops": "/ext-douyin.png",
   figma: "/ext-figma.svg",
   github: "/ext-github.svg",
   "media-studio": "/ext-image-studio.png",
   "image-studio": "/ext-image-studio.png",
+  "ipollo-onto": "/ext-onto.png",
   linear: "/ext-linear.svg",
   notion: "/ext-notion.svg",
+  "operation-recorder": "/ext-operation-recorder.png",
   sentry: "/ext-sentry.svg",
+  "short-video-studio": "/ext-short-video.png",
   stripe: "/ext-stripe.svg",
   "video-agent": "/ext-video.png",
   "video-console": "/ext-video-console.png",
+  "wechat-channels-ops": "/ext-wechat-channels.png",
+  "xiaohongshu-ops": "/ext-xiaohongshu.png",
 };
 
 export function resolveExtensionIconSrc(iconSrc: string): string {

apps/app/public/ext-operation-recorder.png

@@ -1,11 +1,21 @@
+const pluginLogos = [
+  { name: "Xiaohongshu Operations", localizedName: "小红书运营台", file: "ext-xiaohongshu.png" },
+  { name: "Douyin Operations", localizedName: "抖音运营台", file: "ext-douyin.png" },
+  { name: "WeChat Channels Operations", localizedName: "视频号运营台", file: "ext-wechat-channels.png" },
+  { name: "Operation Recorder", localizedName: "操作录制", file: "ext-operation-recorder.png" },
+  { name: "iPollo Onto", localizedName: "iPollo Onto", file: "ext-onto.png" },
+  { name: "Short Video Studio", localizedName: "短片创作工作台", file: "ext-short-video.png" },
+];
+
 export default {
   id: "plugin-library-refresh",
   title: "Refresh the installed plugin library",
   kind: "user-facing",
   steps: [{
     name: "Refresh plugins without losing the installed library",
     run: async (ctx) => {
-      await ctx.navigateHash("/settings/extensions");
+      await ctx.waitFor("Boolean(window.__ipolloworkControl)");
+      await ctx.control("settings.panel.open", { panel: "extensions" });
       await ctx.waitFor(`document.querySelector('[data-testid="plugin-installed-tile"]') !== null`, {
         timeoutMs: 30_000,
         label: "installed plugins",
@@ -36,6 +46,11 @@ export default {
             timeoutMs: 30_000,
             label: "both plugin list responses",
           });
+          await ctx.waitFor(`Boolean([...document.querySelectorAll('[data-testid="plugin-package-list-item"] img')]
+            .find(img => img.src.endsWith('/ext-xiaohongshu.png') && img.complete && img.naturalWidth > 0))`, {
+            timeoutMs: 30_000,
+            label: "bundled catalog rendered after refresh",
+          });
         },
         assert: async () => {
           const result = await ctx.eval(`({
@@ -47,10 +62,107 @@ export default {
           ctx.assert(result.responses.some(item => item.catalog && item.status === 200 && item.count > 0), "Bundled catalog did not load.");
           ctx.assert(result.installed > 0 && !result.error, "Plugin cards or error state are incorrect.");
         },
-        screenshot: "plugin-library-refreshed",
+        screenshot: {
+          name: "plugin-library-refreshed",
+          requireText: ["iPolloWork"],
+          rejectText: ["Failed to load plugin packages", "无法加载插件包", "Something went wrong"],
+        },
       }).finally(async () => {
         await ctx.eval(`window.__restorePluginRefreshFetch?.(); delete window.__restorePluginRefreshFetch; delete window.__pluginRefreshProof;`);
       });
     },
-  }],
+  }, ...["light", "dark"].flatMap((theme) => pluginLogos.map((plugin) => ({
+    name: `Show ${plugin.name}'s approved logo in ${theme} mode`,
+    run: async (ctx) => {
+      let visibleName;
+      await ctx.prove(`${plugin.name} displays its own local PNG in the ${theme} plugin catalog`, {
+        voiceover: `搜索${plugin.localizedName}，${theme === "dark" ? "深色" : "浅色"}列表显示对应的黑白图标，便于辨认插件。`,
+        action: async () => {
+          if (await ctx.eval("document.documentElement.dataset.theme") !== theme) {
+            await ctx.control("settings.panel.open", { panel: "appearance" });
+            const labels = theme === "dark" ? ["Dark", "深色"] : ["Light", "浅色"];
+            await ctx.waitFor(`Boolean([...document.querySelectorAll('button')]
+              .find(button => ${JSON.stringify(labels)}.includes(button.getAttribute('aria-label'))))`);
+            await ctx.eval(`([...document.querySelectorAll('button')]
+              .find(button => ${JSON.stringify(labels)}.includes(button.getAttribute('aria-label')))).click()`);
+            await ctx.waitFor(`document.documentElement.dataset.theme === ${JSON.stringify(theme)}`);
+            await ctx.control("settings.panel.open", { panel: "extensions" });
+            await ctx.waitFor(`Boolean(document.querySelector('input[aria-label="Search plugins"], input[aria-label="搜索插件"]'))`);
+          }
+          await ctx.eval(`(() => {
+            [...document.querySelectorAll('[role="tab"]')]
+              .find(tab => ['个人', 'Personal'].includes(tab.textContent.trim()))?.click();
+          })()`);
+          await ctx.fill('input[aria-label="Search plugins"], input[aria-label="搜索插件"]', "");
+          await ctx.waitFor(`document.body.innerText.includes(${JSON.stringify(plugin.name)})
+            || document.body.innerText.includes(${JSON.stringify(plugin.localizedName)})`, { timeoutMs: 30_000 });
+          visibleName = await ctx.eval(`document.body.innerText.includes(${JSON.stringify(plugin.name)})
+            ? ${JSON.stringify(plugin.name)} : ${JSON.stringify(plugin.localizedName)}`);
+          await ctx.fill('input[aria-label="Search plugins"], input[aria-label="搜索插件"]', visibleName);
+          await ctx.waitFor(`Boolean([...document.querySelectorAll('[data-testid="plugin-package-list-item"] img')]
+            .find(img => img.src.endsWith(${JSON.stringify(plugin.file)}) && img.complete && img.naturalWidth > 0))`, {
+            timeoutMs: 15_000,
+            label: `${plugin.name} loaded logo`,
+          });
+        },
+        assert: async () => {
+          const logo = await ctx.eval(`(() => {
+            const img = [...document.querySelectorAll('[data-testid="plugin-package-list-item"] img')]
+              .find(img => img.src.endsWith(${JSON.stringify(plugin.file)}));
+            const row = img?.closest('[data-testid="plugin-package-list-item"]');
+            return { loaded: Boolean(img?.complete && img.naturalWidth > 0),
+              ownRow: Boolean(row?.innerText.includes(${JSON.stringify(plugin.name)})
+                || row?.innerText.includes(${JSON.stringify(plugin.localizedName)})),
+              visible: Boolean(img?.getClientRects().length) };
+          })()`);
+          ctx.assert(logo.loaded && logo.ownRow && logo.visible, `${plugin.name} logo is missing or on the wrong row.`);
+          const bounds = await ctx.eval(`(async () => {
+            const img = [...document.querySelectorAll('[data-testid="plugin-package-list-item"] img')]
+              .find(img => img.src.endsWith(${JSON.stringify(plugin.file)}));
+            await img.decode();
+            const canvas = document.createElement('canvas');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            const context = canvas.getContext('2d');
+            context.drawImage(img, 0, 0);
+            const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data;
+            let left = canvas.width, top = canvas.height, right = 0, bottom = 0;
+            for (let y = 0; y < canvas.height; y++) for (let x = 0; x < canvas.width; x++) {
+              if (pixels[(y * canvas.width + x) * 4 + 3] < 128) continue;
+              left = Math.min(left, x); top = Math.min(top, y);
+              right = Math.max(right, x + 1); bottom = Math.max(bottom, y + 1);
+            }
+            const rect = img.getBoundingClientRect();
+            const tile = img.parentElement.getBoundingClientRect();
+            const visibleWidth = (right - left) / canvas.width * rect.width;
+            const visibleHeight = (bottom - top) / canvas.height * rect.height;
+            const centerX = rect.left + (left + right) / 2 / canvas.width * rect.width;
+            const centerY = rect.top + (top + bottom) / 2 / canvas.height * rect.height;
+            return {
+              visibleWidth, visibleHeight,
+              sizeRatio: Math.max(visibleWidth, visibleHeight) / parseFloat(getComputedStyle(img).width),
+              centerOffset: Math.max(Math.abs(centerX - tile.left - tile.width / 2), Math.abs(centerY - tile.top - tile.height / 2)),
+              contained: centerX - visibleWidth / 2 >= tile.left && centerX + visibleWidth / 2 <= tile.right
+                && centerY - visibleHeight / 2 >= tile.top && centerY + visibleHeight / 2 <= tile.bottom,
+            };
+          })()`, { awaitPromise: true });
+          ctx.assert(bounds.sizeRatio >= 0.95 && bounds.sizeRatio <= 1.05, `${plugin.name} visible mark does not match adjacent full-size logos: ${JSON.stringify(bounds)}`);
+          ctx.assert(bounds.centerOffset < 0.75 && bounds.contained, `${plugin.name} mark is off-center or clipped: ${JSON.stringify(bounds)}`);
+          if (theme === "dark") {
+            const styles = await ctx.eval(`(() => {
+              const img = [...document.querySelectorAll('[data-testid="plugin-package-list-item"] img')]
+                .find(img => img.src.endsWith(${JSON.stringify(plugin.file)}));
+              return { filter: getComputedStyle(img).filter, blend: getComputedStyle(img).mixBlendMode };
+            })()`);
+            ctx.assert(styles.filter === "invert(1)" && styles.blend === "difference", `${plugin.name} lacks dark background contrast.`);
+          }
+        },
+        screenshot: {
+          name: `${plugin.file.replace(".png", "")}-${theme}`,
+          get requireText() { return [visibleName]; },
+          rejectText: ["Something went wrong"],
+        },
+      });
+    },
+  })))],
 };