feat(frontend): Add developer upvotes column to overview page (#1791)

* feat(frontend): Add developer upvotes column to overview page

Adds a new 'Developer Upvotes' column to the feature overview table. This provides a signal of developer interest for each feature at a glance.

The change includes:
- A new cell renderer to display the upvote count with an icon and tooltip.
- A utility function to format large numbers (e.g., 12345 to 12.3K).
- Unit tests for the new column and formatting logic.
- E2E tests and snapshot updates to verify the new column's appearance.
- Updated CSV export to include the developer upvotes data.

Fixes #1665

* revert utils.ts changes

* fix test

Author: jcscottiii

e2e/tests/overview-page.spec.ts

@@ -48,6 +48,16 @@ test('screenshot for availability sort', async ({page}) => {
   await expect(pageContainer).toHaveScreenshot();
 });
 
+test('screenshot for developer upvotes column', async ({page}) => {
+  await gotoOverviewPageUrl(
+    page,
+    'http://localhost:5555/?columns=name,baseline_status,availability_chrome,availability_firefox,availability_edge,' +
+      'availability_safari,chrome_usage,developer_signal_upvotes',
+  );
+  const pageContainer = page.locator('.page-container');
+  await expect(pageContainer).toHaveScreenshot();
+});
+
 test('shows an error that their query is invalid', async ({page}) => {
   await page.goto('http://localhost:5555/?q=available_on%3Achrom');
 

e2e/tests/overview-page.spec.ts-snapshots/screenshot-for-developer-upvotes-column-1-chromium-linux.png

@@ -117,6 +117,66 @@ describe('renderChromeUsage', () => {
   });
 });
 
+describe('renderDeveloperSignalUpvotes', () => {
+  let container: HTMLElement;
+  let feature: components['schemas']['Feature'];
+  beforeEach(() => {
+    container = document.createElement('div');
+
+    feature = {
+      feature_id: 'id',
+      name: 'name',
+    };
+  });
+
+  it('renders upvotes when available', async () => {
+    feature.developer_signals = {upvotes: 12345, link: 'http://example.com'};
+    const result = CELL_DEFS[ColumnKey.DeveloperSignalUpvotes].cellRenderer(
+      feature,
+      {search: ''},
+      {},
+    );
+    render(result, container);
+    const el = await fixture(container);
+    const tooltip = el.querySelector('sl-tooltip');
+    expect(tooltip).to.exist;
+    expect(tooltip!.getAttribute('content')).to.equal(
+      '12,345 developer upvotes. Need this feature across browsers? Click this and upvote it on GitHub.',
+    );
+    const span = el.querySelector('span');
+    expect(span).to.exist;
+    expect(el.textContent.trim()).to.equal('12.3K');
+  });
+
+  it('renders nothing when upvotes are not available', async () => {
+    const result = CELL_DEFS[ColumnKey.DeveloperSignalUpvotes].cellRenderer(
+      feature,
+      {search: ''},
+      {},
+    );
+    render(result, container);
+    const el = await fixture(container);
+    expect(el.textContent.trim()).to.equal('');
+  });
+
+  it('renders upvotes with correct formatting for smaller numbers', async () => {
+    feature.developer_signals = {
+      upvotes: 500,
+      link: 'http://example.com',
+    };
+    const result = CELL_DEFS[ColumnKey.DeveloperSignalUpvotes].cellRenderer(
+      feature,
+      {search: ''},
+      {},
+    );
+    render(result, container);
+    const el = await fixture(container);
+    const span = el.querySelector('span');
+    expect(span).to.exist;
+    expect(el.textContent.trim()).to.equal('500');
+  });
+});
+
 describe('renderBaselineStatus', () => {
   let container: HTMLElement;
   beforeEach(() => {

e2e/tests/overview-page.spec.ts-snapshots/screenshot-for-developer-upvotes-column-1-firefox-linux.png

@@ -28,6 +28,7 @@ import {
   TOP_HTML_INTEROP_ISSUES,
 } from '../utils/constants.js';
 import './webstatus-feature-badge.js';
+import {formatDeveloperUpvotesMessages} from '../utils/format.js';
 
 const MISSING_VALUE = html``;
 
@@ -89,6 +90,7 @@ export enum ColumnKey {
   ExpFirefoxAndroid = 'experimental_firefox_android',
   ExpSafariIos = 'experimental_safari_ios',
   ChromeUsage = 'chrome_usage',
+  DeveloperSignalUpvotes = 'developer_signal_upvotes',
 }
 
 const columnKeyMapping = Object.entries(ColumnKey).reduce(
@@ -244,6 +246,32 @@ export const renderChromeUsage: CellRenderer = (
   return html`<span id="chrome-usage">${usage}</span>`;
 };
 
+const renderDeveloperSignalUpvotes: CellRenderer = (
+  feature,
+  _routerLocation,
+  _options,
+) => {
+  const upvotes = feature.developer_signals?.upvotes;
+  const link = feature.developer_signals?.link;
+  if (upvotes === undefined || link === undefined) {
+    // If upvotes is undefined, link will be undefined as well. But we currently mark both as optional.
+    // This check is just in case something goes wrong.
+    return html`${nothing}`;
+  }
+
+  const messages = formatDeveloperUpvotesMessages(upvotes);
+
+  return html`
+    <sl-tooltip content="${messages.message}">
+      <div class="dev-signal-cell">
+        <span
+          ><a href=${link} target="_blank">${messages.shorthandNumber}</a></span
+        >
+      </div>
+    </sl-tooltip>
+  `;
+};
+
 function formatDateString(dateString: string): string {
   return formatDate(new Date(dateString));
 }
@@ -678,6 +706,13 @@ export const CELL_DEFS: Record<ColumnKey, ColumnDefinition> = {
     cellRenderer: renderChromeUsage,
     options: {},
   },
+  [ColumnKey.DeveloperSignalUpvotes]: {
+    nameInDialog: 'Developer Upvotes',
+    headerHtml: html`Upvotes <sl-icon name="hand-thumbs-up"></sl-icon>`,
+    cellClass: 'centered',
+    cellRenderer: renderDeveloperSignalUpvotes,
+    options: {},
+  },
 };
 
 export function calcColGroupSpans(

e2e/tests/overview-page.spec.ts-snapshots/screenshot-for-developer-upvotes-column-1-webkit-linux.png

@@ -239,6 +239,9 @@ export class WebstatusOverviewFilters extends LitElement {
         case ColumnKey.ChromeUsage:
           columns.push(name);
           break;
+        case ColumnKey.DeveloperSignalUpvotes:
+          columns.push(name);
+          break;
         case ColumnKey.StableChrome:
         case ColumnKey.StableEdge:
         case ColumnKey.StableFirefox:
@@ -265,6 +268,8 @@ export class WebstatusOverviewFilters extends LitElement {
       const browserImpl = feature.browser_implementations!;
       const wptData = feature.wpt;
       const chromeUsage = feature.usage?.chrome?.daily?.toString() || '';
+      const developerSignalUpvotes =
+        feature.developer_signals?.upvotes?.toString() || '';
       const row: string[] = [];
 
       const pushBrowserChannelValue = (
@@ -292,6 +297,9 @@ export class WebstatusOverviewFilters extends LitElement {
           case ColumnKey.ChromeUsage:
             row.push(chromeUsage);
             break;
+          case ColumnKey.DeveloperSignalUpvotes:
+            row.push(developerSignalUpvotes);
+            break;
           case ColumnKey.StableChrome:
           case ColumnKey.StableEdge:
           case ColumnKey.StableFirefox: