From 8df8a30032c8b3d90f08f071d24f7c686735053b Mon Sep 17 00:00:00 2001
From: mukunda katta <mukunda.vjcs6@gmail.com>
Date: Fri, 15 May 2026 08:29:32 -0700
Subject: [PATCH] Use disabled availability icons on feature page

---
 .../test/webstatus-feature-page.test.ts       | 50 +++++++++++++++++++
 .../js/components/webstatus-feature-page.ts   | 11 +++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/frontend/src/static/js/components/test/webstatus-feature-page.test.ts b/frontend/src/static/js/components/test/webstatus-feature-page.test.ts
index 6647b79fa..a2cd47757 100644
--- a/frontend/src/static/js/components/test/webstatus-feature-page.test.ts
+++ b/frontend/src/static/js/components/test/webstatus-feature-page.test.ts
@@ -216,6 +216,56 @@ describe('webstatus-feature-page', () => {
     });
   });
 
+  describe('renderOneWPTCard', () => {
+    let element: FeaturePage;
+    let hostElement: HTMLDivElement;
+
+    beforeEach(async () => {
+      element = await fixture(
+        html`<webstatus-feature-page
+          .location=${location}
+        ></webstatus-feature-page>`,
+      );
+      hostElement = document.createElement('div');
+    });
+
+    it('marks unavailable browser implementation cards as disabled', async () => {
+      element.feature = {
+        feature_id: 'id',
+        name: 'name',
+        browser_implementations: {
+          chrome: {status: 'unavailable'},
+        },
+      };
+
+      const actual = element.renderOneWPTCard('chrome', 'chrome_24x24.png');
+      render(actual, hostElement);
+      const host = await fixture(hostElement);
+      const card = host.querySelector('sl-card');
+
+      expect(card).to.exist;
+      expect(card!.classList.contains('browser-impl-unavailable')).to.be.true;
+    });
+
+    it('marks available browser implementation cards as available', async () => {
+      element.feature = {
+        feature_id: 'id',
+        name: 'name',
+        browser_implementations: {
+          chrome: {status: 'available', version: '123'},
+        },
+      };
+
+      const actual = element.renderOneWPTCard('chrome', 'chrome_24x24.png');
+      render(actual, hostElement);
+      const host = await fixture(hostElement);
+      const card = host.querySelector('sl-card');
+
+      expect(card).to.exist;
+      expect(card!.classList.contains('browser-impl-available')).to.be.true;
+    });
+  });
+
   describe('renderDeveloperSignal', () => {
     let element: FeaturePage;
     let hostElement: HTMLDivElement;
diff --git a/frontend/src/static/js/components/webstatus-feature-page.ts b/frontend/src/static/js/components/webstatus-feature-page.ts
index a619dbce5..1d228360b 100644
--- a/frontend/src/static/js/components/webstatus-feature-page.ts
+++ b/frontend/src/static/js/components/webstatus-feature-page.ts
@@ -223,6 +223,10 @@ export class FeaturePage extends BaseChartsPage {
         .wptScore .icon {
           float: right;
         }
+        .wptScore.browser-impl-unavailable .icon {
+          filter: grayscale(1);
+          opacity: 50%;
+        }
         .wptScore .score {
           font-size: 150%;
           white-space: nowrap;
@@ -711,6 +715,8 @@ export class FeaturePage extends BaseChartsPage {
     browser: components['parameters']['browserPathParam'],
     icon: string,
   ): TemplateResult {
+    const browserImpl = this.feature?.browser_implementations?.[browser];
+    const browserImplStatus = browserImpl?.status || 'unavailable';
     const scorePart = this.feature
       ? renderBrowserQuality(
           this.feature,
@@ -718,10 +724,11 @@ export class FeaturePage extends BaseChartsPage {
           {browser: browser, fallbackText: 'N/A'},
         )
       : html`<sl-skeleton effect="sheen"></sl-skeleton>`;
-    const browserImpl = this.feature?.browser_implementations?.[browser];
 
     return html`
-      <sl-card class="halign-stretch wptScore">
+      <sl-card
+        class="halign-stretch wptScore browser-impl-${browserImplStatus}"
+      >
         <img height="32" src="/public/img/${icon}" class="icon" />
         <div>${BROWSER_ID_TO_LABEL[browser]}</div>
         <div class="score">${scorePart}</div>