Fix dev server rejecting non-localhost hosts when using FX_PROFILER_HOST (#5889)

Author: ojuschugh1

CONTRIBUTING.md

@@ -96,7 +96,7 @@ If you'd like to use [profiler.firefox.com](https://profiler.firefox.com) via UR
 FX_PROFILER_HOST="0.0.0.0" yarn start
 ```
 
-You'll probably also want to add your non-localhost domains to the `allowedHosts` property in `server.js`.
+When using `FX_PROFILER_HOST="0.0.0.0"`, any hostname is allowed so you can access the profiler from other devices on your network. If you want to expose only a specific hostname instead, set `FX_PROFILER_HOST` to that hostname directly and it will be added to the allowed hosts automatically.
 
 ## Finding something to work on
 

docs-developer/CHANGELOG-formats.md

@@ -6,6 +6,12 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 62
+
+A new `display` field of type `CounterDisplayConfig` was added to `RawCounter`.
+This metadata makes counters self-describing in terms of how they are rendered in the UI.
+For existing profiles, the display config is derived from the counter's `category` and `name`.
+
 ### Version 61
 
 The `SourceTable` in `profile.shared.sources` was updated:

scripts/lib/dev-server.mjs

@@ -26,16 +26,20 @@ const EXTRA_HEADERS = {
 // Allowed hosts for dev server
 const ALLOWED_HOSTS = ['localhost', '.app.github.dev'];
 
-function isHostAllowed(hostHeader) {
+function isHostAllowed(hostHeader, boundHost) {
   if (!hostHeader) {
     return false;
   }
 
-  // Extract hostname without port
+  // When binding to all interfaces, allow any host.
+  if (boundHost === '0.0.0.0' || boundHost === '::' || boundHost === '::0') {
+    return true;
+  }
+
   const hostname = hostHeader.split(':')[0];
+  const allowedHosts = [...ALLOWED_HOSTS, boundHost];
 
-  // Check exact match or suffix match for wildcard patterns
-  return ALLOWED_HOSTS.some((allowedHost) => {
+  return allowedHosts.some((allowedHost) => {
     if (allowedHost.startsWith('.')) {
       // Wildcard pattern like '.app.github.dev'
       return hostname.endsWith(allowedHost);
@@ -75,7 +79,7 @@ export async function startDevServer(buildConfig, options = {}) {
   // Create HTTP server
   const server = http.createServer((req, res) => {
     // Validate Host header
-    if (!isHostAllowed(req.headers.host)) {
+    if (!isHostAllowed(req.headers.host, host)) {
       res.writeHead(403, { 'Content-Type': 'text/plain' });
       res.end('Invalid Host header');
       return;
@@ -86,7 +90,10 @@ export async function startDevServer(buildConfig, options = {}) {
       port: esbuildServerPort,
       path: req.url,
       method: req.method,
-      headers: req.headers,
+      headers: {
+        ...req.headers,
+        host: hostname + ':' + esbuildServerPort,
+      },
     };
 
     // Forward each incoming request to esbuild

src/app-logic/constants.ts

@@ -12,7 +12,7 @@ export const GECKO_PROFILE_VERSION = 34;
 // The current version of the "processed" profile format.
 // Please don't forget to update the processed profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const PROCESSED_PROFILE_VERSION = 61;
+export const PROCESSED_PROFILE_VERSION = 62;
 
 // The following are the margin sizes for the left and right of the timeline. Independent
 // components need to share these values.

src/profile-logic/process-profile.ts

@@ -97,6 +97,7 @@ import type {
   GeckoSourceTable,
   IndexIntoCategoryList,
   IndexIntoFrameTable,
+  CounterDisplayConfig,
 } from 'firefox-profiler/types';
 import { decompress, isGzip } from 'firefox-profiler/utils/gz';
 
@@ -972,6 +973,61 @@ function _processSamples(
   return samples;
 }
 
+/**
+ * Derive a CounterDisplayConfig from a counter's category and name.
+ */
+function _deriveCounterDisplay(
+  category: string,
+  name: string
+): CounterDisplayConfig {
+  if (category === 'Memory') {
+    return {
+      graphType: 'line-accumulated',
+      unit: 'bytes',
+      color: 'orange',
+      markerLocation: 'timeline-memory',
+      sortOrder: 2,
+      label: 'Memory',
+    };
+  } else if (category === 'power') {
+    return {
+      graphType: 'line-rate',
+      unit: 'pWh',
+      color: 'grey',
+      markerLocation: null,
+      sortOrder: 6,
+      label: name,
+    };
+  } else if (category === 'Bandwidth') {
+    return {
+      graphType: 'line-rate',
+      unit: 'bytes',
+      color: 'blue',
+      markerLocation: null,
+      sortOrder: 8,
+      label: 'Bandwidth',
+    };
+  } else if (category === 'CPU' && name === 'processCPU') {
+    return {
+      graphType: 'line-rate',
+      unit: 'percent',
+      color: 'grey',
+      markerLocation: null,
+      sortOrder: 5,
+      label: 'Process CPU',
+    };
+  }
+
+  return {
+    graphType: 'line-rate',
+    unit: '',
+    color: 'grey',
+    markerLocation: null,
+    sortOrder: 9,
+    label: name,
+  };
+}
+
 /**
  * Converts the Gecko list of counters into the processed format.
  */
@@ -1031,6 +1087,7 @@ function _processCounters(
         pid: mainThreadPid,
         mainThreadIndex,
         samples: adjustTableTimeDeltas(processedCounterSamples, delta),
+        display: _deriveCounterDisplay(category, name),
       });
       return result;
     },

src/profile-logic/processed-profile-versioning.ts

@@ -3049,6 +3049,66 @@ const _upgraders: {
     }
   },
 
+  [62]: (profile: any) => {
+    // Added CounterDisplayConfig to counters. This metadata controls how a
+    // counter is rendered (graph type, color, unit, etc.).
+    // Derive defaults from the counter's category and name.
+    if (profile.counters) {
+      for (const counter of profile.counters) {
+        if (counter.display !== undefined) {
+          continue;
+        }
+        const { category, name } = counter;
+        if (category === 'Memory') {
+          counter.display = {
+            graphType: 'line-accumulated',
+            unit: 'bytes',
+            color: 'orange',
+            markerLocation: 'timeline-memory',
+            sortOrder: 2,
+            label: 'Memory',
+          };
+        } else if (category === 'power') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'pWh',
+            color: 'grey',
+            markerLocation: null,
+            sortOrder: 6,
+            label: name,
+          };
+        } else if (category === 'Bandwidth') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'bytes',
+            color: 'blue',
+            markerLocation: null,
+            sortOrder: 8,
+            label: 'Bandwidth',
+          };
+        } else if (category === 'CPU' && name === 'processCPU') {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: 'percent',
+            color: 'grey',
+            markerLocation: null,
+            sortOrder: 5,
+            label: 'Process CPU',
+          };
+        } else {
+          counter.display = {
+            graphType: 'line-rate',
+            unit: '',
+            color: 'grey',
+            markerLocation: null,
+            sortOrder: 9,
+            label: name,
+          };
+        }
+      }
+    }
+  },
+
   // If you add a new upgrader here, please document the change in
   // `docs-developer/CHANGELOG-formats.md`.
 };

src/profile-logic/profile-data.ts

@@ -2307,7 +2307,7 @@ export function processCounter(rawCounter: RawCounter): Counter {
     color: rawCounter.color,
     pid: rawCounter.pid,
     mainThreadIndex: rawCounter.mainThreadIndex,
-
+    display: rawCounter.display,
     samples,
   };
 

src/test/fixtures/profiles/processed-profile.ts

@@ -33,6 +33,7 @@ import type {
   CategoryList,
   JsTracerTable,
   RawCounter,
+  CounterDisplayConfig,
   TabID,
   MarkerPayload,
   NetworkPayload,
@@ -1479,6 +1480,18 @@ export function getProfileWithJsTracerEvents(
   return profile;
 }
 
+/**
+ * Default display configuration for test counters.
+ */
+const DEFAULT_TEST_COUNTER_DISPLAY: CounterDisplayConfig = {
+  graphType: 'line-rate',
+  unit: '',
+  color: 'grey',
+  markerLocation: null,
+  sortOrder: 9,
+  label: 'My Counter',
+};
+
 /**
  * Creates a Counter fixture for a given thread.
  */
@@ -1504,6 +1517,7 @@ export function getCounterForThread(
       count: sampleTimes.map((_, i) => Math.sin(i)),
       length: thread.samples.length,
     },
+    display: DEFAULT_TEST_COUNTER_DISPLAY,
   };
   return counter;
 }
@@ -1541,6 +1555,7 @@ export function getCounterForThreadWithSamples(
     pid: thread.pid,
     mainThreadIndex,
     samples: newSamples,
+    display: DEFAULT_TEST_COUNTER_DISPLAY,
   };
   return counter;
 }

src/test/integration/symbolicator-cli/__snapshots__/symbolicator-cli.test.ts.snap

@@ -87,7 +87,7 @@ Object {
     "markerSchema": Array [],
     "oscpu": "macOS 14.6.1",
     "pausedRanges": Array [],
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "a.out",
     "sampleUnits": Object {
@@ -1415,7 +1415,7 @@ Object {
     "markerSchema": Array [],
     "oscpu": "macOS 14.6.1",
     "pausedRanges": Array [],
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "a.out",
     "sampleUnits": Object {

src/test/store/__snapshots__/profile-view.test.ts.snap

@@ -418,7 +418,7 @@ Object {
     "oscpu": "",
     "physicalCPUs": 0,
     "platform": "",
-    "preprocessedProfileVersion": 61,
+    "preprocessedProfileVersion": 62,
     "processType": 0,
     "product": "Firefox",
     "sourceURL": "",