Remove percentage change from browser cards

frontend/src/static/js/components/test/webstatus-feature-page.test.ts

@@ -18,7 +18,6 @@ import {expect, fixture, html} from '@open-wc/testing';
 import {FeaturePage} from '../webstatus-feature-page.js';
 import '../webstatus-feature-page.js';
 import sinon from 'sinon';
-import {WPTRunMetric} from '../../api/client.js';
 import {render} from 'lit';
 import {FeatureMovedError} from '../../api/errors.js';
 
@@ -175,109 +174,7 @@ describe('webstatus-feature-page', () => {
     expect(descriptionSection).to.not.be.null;
     expect(descriptionSection?.textContent).to.contain('AMAZING DESCRIPTION');
   });
-  describe('renderDeltaChip', () => {
-    let element: FeaturePage;
-    let hostElement: HTMLDivElement;
-
-    beforeEach(async () => {
-      element = await fixture(
-        html`<webstatus-feature-page
-          .location=${location}
-        ></webstatus-feature-page>`,
-      );
-      hostElement = document.createElement('div');
 
-      // Create a new Map for featureSupport
-      element.featureSupport = new Map<string, Array<WPTRunMetric>>([
-        // increase case
-        [
-          'chrome',
-          [
-            {
-              test_pass_count: 90,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-27T01:28:25.177Z',
-            },
-            {
-              test_pass_count: 85,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-26T01:28:07.225Z',
-            },
-          ],
-        ],
-        // decrease case
-        [
-          'edge',
-          [
-            {
-              test_pass_count: 70,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-27T01:28:25.177Z',
-            },
-            {
-              test_pass_count: 75,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-26T01:28:07.225Z',
-            },
-          ],
-        ],
-        // no changes case
-        [
-          'safari',
-          [
-            {
-              test_pass_count: 80,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-27T01:28:25.177Z',
-            },
-            {
-              test_pass_count: 80,
-              total_tests_count: 100,
-              run_timestamp: '2023-12-26T01:28:07.225Z',
-            },
-          ],
-        ],
-        // firefox will be the no runs case
-      ]);
-      await element.updateComplete;
-    });
-
-    it('renders unchanged chip when there are no runs', async () => {
-      const chipTemplate = element.renderDeltaChip('firefox');
-      render(chipTemplate, hostElement);
-      const host = await fixture(hostElement);
-      const chip = host.querySelector('span');
-      expect(chip?.classList.contains('unchanged')).to.be.true;
-      expect(chip?.textContent).to.equal('');
-    });
-
-    it('renders chip with positive delta and increased class', async () => {
-      const chipTemplate = element.renderDeltaChip('chrome');
-      render(chipTemplate, hostElement);
-      const host = await fixture(hostElement);
-      const chip = host.querySelector('span');
-      expect(chip?.classList.contains('increased')).to.be.true;
-      expect(chip?.textContent).to.equal('+5.0%');
-    });
-
-    it('renders chip with negative delta and decreased class', async () => {
-      const chipTemplate = element.renderDeltaChip('edge');
-      render(chipTemplate, hostElement);
-      const host = await fixture(hostElement);
-      const chip = host.querySelector('span');
-      expect(chip?.classList.contains('decreased')).to.be.true;
-      expect(chip?.textContent).to.equal('-5.0%');
-    });
-
-    it('renders chip with no delta and unchanged class', async () => {
-      const chipTemplate = element.renderDeltaChip('safari');
-      render(chipTemplate, hostElement);
-      const host = await fixture(hostElement);
-      const chip = host.querySelector('span');
-      expect(chip?.classList.contains('unchanged')).to.be.true;
-      expect(chip?.textContent).to.equal('0.0%');
-    });
-  });
   describe('renderBrowserImpl', () => {
     let element: FeaturePage;
     let hostElement: HTMLDivElement;

frontend/src/static/js/components/webstatus-feature-page.ts

@@ -167,18 +167,6 @@ export class FeaturePage extends BaseChartsPage {
           gap: var(--content-padding-half);
           align-items: center;
         }
-        .chip.increased {
-          background: var(--chip-background-increased);
-          color: var(--chip-color-increased);
-        }
-        .chip.unchanged {
-          background: var(--chip-background-unchanged);
-          color: var(--chip-color-unchanged);
-        }
-        .chip.decreased {
-          background: var(--chip-background-decreased);
-          color: var(--chip-color-decreased);
-        }
 
         baseline-date {
           font-size: 0.8em;
@@ -537,35 +525,6 @@ export class FeaturePage extends BaseChartsPage {
     `;
   }
 
-  renderDeltaChip(
-    browser: components['parameters']['browserPathParam'],
-  ): TemplateResult {
-    const runs = this.featureSupport.get(browser);
-    if (runs === undefined || runs.length === 0) {
-      return html` <span class="chip small unchanged"></span> `;
-    }
-
-    // Runs are retrieved in descending chronological order.
-    const mostRecentRun = runs[0];
-    const oldestRun = runs[runs.length - 1];
-    const mostRecentPercent =
-      mostRecentRun.test_pass_count! / mostRecentRun.total_tests_count!;
-    const oldestPercent =
-      oldestRun.test_pass_count! / oldestRun.total_tests_count!;
-    const delta = (mostRecentPercent - oldestPercent) * 100.0;
-    let deltaStr = Number(delta).toFixed(1) + '%';
-    let deltaClass = 'unchanged';
-    if (delta > 0) {
-      deltaStr = '+' + deltaStr;
-      deltaClass = 'increased';
-    } else if (delta < 0) {
-      deltaClass = 'decreased';
-    } else {
-      deltaClass = 'unchanged';
-    }
-    return html` <span class="chip small ${deltaClass}">${deltaStr}</span> `;
-  }
-
   renderBrowserImpl(
     browserImpl?: components['schemas']['BrowserImplementation'],
   ): TemplateResult {
@@ -591,15 +550,19 @@ export class FeaturePage extends BaseChartsPage {
     icon: string,
   ): TemplateResult {
     const scorePart = this.feature
-      ? renderBrowserQuality(this.feature, {search: ''}, {browser: browser})
+      ? renderBrowserQuality(
+          this.feature,
+          {search: ''},
+          {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">
         <img height="32" src="/public/img/${icon}" class="icon" />
         <div>${BROWSER_ID_TO_LABEL[browser]}</div>
-        <div class="score">${scorePart} ${this.renderDeltaChip(browser)}</div>
+        <div class="score">${scorePart}</div>
         ${this.renderBrowserImpl(browserImpl)}
       </sl-card>
     `;

frontend/src/static/js/components/webstatus-overview-cells.ts

@@ -31,8 +31,6 @@ import './webstatus-feature-badge.js';
 import {formatDeveloperUpvotesMessages} from '../utils/format.js';
 import {VendorPositions} from '../utils/vendor-position.js';
 
-const MISSING_VALUE = html``;
-
 type CellRenderer = {
   (
     feature: components['schemas']['Feature'],
@@ -41,6 +39,7 @@ type CellRenderer = {
       browser?: components['parameters']['browserPathParam'];
       channel?: components['parameters']['channelPathParam'];
       platform?: string;
+      fallbackText?: string;
     },
   ): TemplateResult | typeof nothing;
 };
@@ -445,7 +444,7 @@ export const renderAvailablity: CellRenderer = (
 };
 
 function renderMissingPercentage(): TemplateResult {
-  return html`<span class="missing percent">${MISSING_VALUE}</span>`;
+  return html`<span class="missing percent"></span>`;
 }
 
 function renderPercentage(score?: number): TemplateResult {
@@ -462,14 +461,16 @@ function renderPercentage(score?: number): TemplateResult {
 export const renderBrowserQuality: CellRenderer = (
   feature,
   _routerLocation,
-  {browser},
+  {browser, fallbackText},
 ) => {
   const score: number | undefined = feature.wpt?.stable?.[browser!]?.score;
   let percentage = renderPercentage(score);
   const browserImpl = feature.browser_implementations?.[browser!];
   const browserImplStatus = browserImpl?.status || 'unavailable';
-  if (browserImplStatus === 'unavailable') {
-    percentage = renderMissingPercentage();
+  if (browserImplStatus === 'unavailable' || score === undefined) {
+    percentage = fallbackText
+      ? html`<span class="percent">${fallbackText}</span>`
+      : renderMissingPercentage();
   }
   if (feature.spec && isJavaScriptFeature(feature.spec)) {
     percentage = renderJavaScriptFeatureValue();