[Deploy] Comparison reports

scripts/build-node-tools.mjs

@@ -10,9 +10,43 @@ const profilerEditConfig = {
   outfile: 'node-tools-dist/profiler-edit.js',
 };
 
+const analyzeBenchmarkConfig = {
+  ...nodeBaseConfig,
+  entryPoints: ['src/node-tools/analyze-benchmark.ts'],
+  outfile: 'node-tools-dist/analyze-benchmark.js',
+};
+
+const extractBenchmarkStatsConfig = {
+  ...nodeBaseConfig,
+  entryPoints: ['src/node-tools/extract-benchmark-stats.ts'],
+  outfile: 'node-tools-dist/extract-benchmark-stats.js',
+};
+
+const compareBenchmarkStatsConfig = {
+  ...nodeBaseConfig,
+  entryPoints: ['src/node-tools/compare-benchmark-stats.ts'],
+  outfile: 'node-tools-dist/compare-benchmark-stats.js',
+};
+
+// Dumps the call subtree below one benchmark bucket as per-iteration weight
+// vectors, for docs-developer/auto-bucketing-prototype.mjs to consume.
+const dumpBucketSubtreeConfig = {
+  ...nodeBaseConfig,
+  entryPoints: ['src/node-tools/dump-bucket-subtree.ts'],
+  outfile: 'node-tools-dist/dump-bucket-subtree.js',
+};
+
 async function build() {
   await esbuild.build(profilerEditConfig);
   console.log('✅ profiler-edit build completed');
+  await esbuild.build(analyzeBenchmarkConfig);
+  console.log('✅ analyze-benchmark build completed');
+  await esbuild.build(extractBenchmarkStatsConfig);
+  console.log('✅ extract-benchmark-stats build completed');
+  await esbuild.build(compareBenchmarkStatsConfig);
+  console.log('✅ compare-benchmark-stats build completed');
+  await esbuild.build(dumpBucketSubtreeConfig);
+  console.log('✅ dump-bucket-subtree build completed');
 }
 
 build().catch(console.error);

scripts/generate-known-functions-toml.mjs

@@ -0,0 +1,24 @@
+import { execSync } from 'child_process';
+import { writeFileSync } from 'fs';
+
+const jsCode = execSync(
+  'node_modules/.bin/esbuild src/node-tools/profile-insert-labels/known-functions.ts --platform=node --format=esm'
+).toString();
+
+const dataUrl = 'data:text/javascript,' + encodeURIComponent(jsCode);
+const { BREAK_OUT_BUCKETS } = await import(dataUrl);
+
+let toml = '';
+for (const bucket of BREAK_OUT_BUCKETS) {
+  toml += `[[buckets]]\n`;
+  toml += `name = ${JSON.stringify(bucket.name)}\n`;
+  toml += `funcPrefixes = [\n`;
+  for (const prefix of bucket.funcPrefixes) {
+    toml += `  ${JSON.stringify(prefix)},\n`;
+  }
+  toml += `]\n\n`;
+}
+
+const outPath = 'src/node-tools/profile-insert-labels/known-functions.toml';
+writeFileSync(outPath, toml.trimEnd() + '\n');
+console.log(`Wrote ${outPath}`);

src/actions/app.ts

@@ -78,6 +78,17 @@ export function changeProfilesToCompare(profiles: string[]): Action {
   };
 }
 
+export function changeProfilesToCompareBenchmark(
+  profiles: string[],
+  profileNames: string[]
+): Action {
+  return {
+    type: 'CHANGE_PROFILES_TO_COMPARE_BENCHMARK',
+    profiles,
+    profileNames,
+  };
+}
+
 export function startFetchingProfiles(): Action {
   return { type: 'START_FETCHING_PROFILES' };
 }

src/actions/receive-profile.ts

@@ -1256,7 +1256,7 @@ export function viewProfileFromPostMessage(
 // Given a profile view URL, extract the raw URL needed to fetch the profile
 // data. This mirrors the manual pathname splitting done in retrieveProfileForRawUrl,
 // so we can fetch the profile before calling stateFromLocation.
-function getProfileFetchUrl(urlString: string): string {
+export function getProfileFetchUrl(urlString: string): string {
   const pathParts = new URL(urlString).pathname.split('/').filter((d) => d);
   const dataSource = ensureIsValidDataSource(pathParts[0]);
   switch (dataSource) {
@@ -1461,6 +1461,7 @@ export function retrieveProfileForRawUrl(
       case 'uploaded-recordings':
       case 'none':
       case 'local':
+      case 'compare-benchmark':
         // There is no profile to download for these datasources.
         break;
       default:

src/app-logic/url-handling.ts

@@ -132,6 +132,8 @@ function getPathParts(urlState: UrlState): string[] {
         return ['compare'];
       }
       return ['compare', urlState.selectedTab];
+    case 'compare-benchmark':
+      return ['compare-benchmark'];
     case 'uploaded-recordings':
       return ['uploaded-recordings'];
     case 'from-browser':
@@ -172,6 +174,7 @@ type BaseQuery = {
   file: string; // Path into a zip file.
   transforms: string;
   profiles: string[];
+  names: string[]; // Display names for `profiles`, e.g. ["Chrome", "Firefox"]
   profileName: string;
   symbolServer: string;
   view: string;
@@ -270,6 +273,17 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         return '';
       }
       break;
+    case 'compare-benchmark':
+      if (urlState.profilesToCompare === null) {
+        return '';
+      }
+      return queryString.stringify(
+        {
+          profiles: urlState.profilesToCompare,
+          names: urlState.profileNamesToCompare ?? undefined,
+        },
+        { arrayFormat: 'bracket' }
+      );
     case 'public':
     case 'local':
     case 'from-browser':
@@ -463,6 +477,7 @@ export function ensureIsValidDataSource(
     case 'public':
     case 'from-url':
     case 'compare':
+    case 'compare-benchmark':
     case 'uploaded-recordings':
       return coercedDataSource;
     default:
@@ -602,6 +617,7 @@ export function stateFromLocation(
     hash: hasProfileHash ? pathParts[1] : '',
     profileUrl: hasProfileUrl ? decodeURIComponent(pathParts[1]) : '',
     profilesToCompare: query.profiles || null,
+    profileNamesToCompare: query.names || null,
     selectedTab,
     pathInZipFile: query.file || null,
     profileName: query.profileName,

src/components/app/AppViewRouter.tsx

@@ -9,6 +9,7 @@ import { ProfileViewer } from './ProfileViewer';
 import { ZipFileViewer } from './ZipFileViewer';
 import { Home } from './Home';
 import { CompareHome } from './CompareHome';
+import { BenchmarkCompareViewer } from './BenchmarkCompareViewer';
 import { ProfileRootMessage } from './ProfileRootMessage';
 import { getView } from 'firefox-profiler/selectors/app';
 import { getHasZipFile } from 'firefox-profiler/selectors/zipped-profiles';
@@ -34,6 +35,7 @@ const ERROR_MESSAGES_L10N_ID: { [key: string]: string } = Object.freeze({
   public: 'AppViewRouter--error-public',
   'from-url': 'AppViewRouter--error-from-url',
   compare: 'AppViewRouter--error-compare',
+  'compare-benchmark': 'AppViewRouter--error-compare',
 });
 
 type AppViewRouterStateProps = {
@@ -61,6 +63,10 @@ class AppViewRouterImpl extends PureComponent<AppViewRouterProps> {
           return <CompareHome />;
         }
         break;
+      case 'compare-benchmark':
+        // The viewer shows its own input form when there is nothing to compare
+        // yet, so that the URLs and names stay editable once a report is up.
+        return <BenchmarkCompareViewer />;
       case 'uploaded-recordings':
         return <UploadedRecordingsHome />;
       case 'from-browser':

src/components/app/BenchmarkCompareForm.tsx

@@ -0,0 +1,143 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { useState, useCallback } from 'react';
+import type { ChangeEvent, FormEvent } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { changeProfilesToCompareBenchmark } from 'firefox-profiler/actions/app';
+import { DEFAULT_BENCHMARK_PROFILE_NAMES } from './BenchmarkProfileNames';
+
+type Props = {
+  /** Pre-filled values, i.e. what is currently being compared. */
+  initialUrls: [string, string];
+  initialNames: [string, string];
+  /** Label for the submit button — "Compare" when nothing is loaded yet,
+   * "Update comparison" when this form is sitting above a loaded report. */
+  submitLabel: string;
+};
+
+/**
+ * The input form for the benchmark comparison view: two profile URLs and the
+ * names to call them by.
+ *
+ * It doubles as the empty state of `/compare-benchmark` and as an editable
+ * header above a loaded report, because the thing a reader most often wants
+ * after reading one comparison is a neighbouring one — the same pair the other
+ * way round, or one side swapped for a third build. Making them go back to a
+ * separate form page to do that loses the URLs they already had.
+ */
+export function BenchmarkCompareForm({
+  initialUrls,
+  initialNames,
+  submitLabel,
+}: Props) {
+  const dispatch = useDispatch();
+  const [urls, setUrls] = useState<[string, string]>(initialUrls);
+  const [names, setNames] = useState<[string, string]>(initialNames);
+
+  const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.currentTarget;
+    const index = name.endsWith('2') ? 1 : 0;
+    const setter = name.startsWith('url') ? setUrls : setNames;
+    setter((prev) => {
+      const next: [string, string] = [prev[0], prev[1]];
+      next[index] = value;
+      return next;
+    });
+  }, []);
+
+  const handleSwap = useCallback(() => {
+    setUrls(([a, b]) => [b, a]);
+    setNames(([a, b]) => [b, a]);
+  }, []);
+
+  const handleSubmit = useCallback(
+    (e: FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      dispatch(
+        changeProfilesToCompareBenchmark(
+          [urls[0].trim(), urls[1].trim()],
+          [
+            names[0].trim() || DEFAULT_BENCHMARK_PROFILE_NAMES[0],
+            names[1].trim() || DEFAULT_BENCHMARK_PROFILE_NAMES[1],
+          ]
+        )
+      );
+    },
+    [dispatch, urls, names]
+  );
+
+  return (
+    <form className="benchmarkCompareForm" onSubmit={handleSubmit}>
+      <span className="benchmarkCompareForm__heading">Name</span>
+      <span className="benchmarkCompareForm__heading">Profile URL</span>
+
+      {([0, 1] as const).map((i) => (
+        <Row
+          key={i}
+          index={i}
+          url={urls[i]}
+          name={names[i]}
+          onChange={handleChange}
+        />
+      ))}
+
+      <div className="benchmarkCompareForm__buttons">
+        <button
+          type="button"
+          className="photon-button photon-button-default"
+          onClick={handleSwap}
+          title="Swap the two sides. Every percentage in the report is relative to the first one, so this is how you ask the opposite question."
+        >
+          ⇅ Swap
+        </button>
+        <button
+          type="submit"
+          className="photon-button photon-button-primary"
+          disabled={urls[0].trim() === '' || urls[1].trim() === ''}
+        >
+          {submitLabel}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Row({
+  index,
+  url,
+  name,
+  onChange,
+}: {
+  index: 0 | 1;
+  url: string;
+  name: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}) {
+  const n = index + 1;
+  return (
+    <>
+      <input
+        name={`name${n}`}
+        aria-label={`Name of profile ${n}`}
+        className="photon-input benchmarkCompareForm__nameInput"
+        type="text"
+        placeholder={DEFAULT_BENCHMARK_PROFILE_NAMES[index]}
+        onChange={onChange}
+        value={name}
+      />
+      <input
+        name={`url${n}`}
+        aria-label={`URL of profile ${n}`}
+        className="photon-input"
+        type="url"
+        required
+        placeholder="https://"
+        onChange={onChange}
+        value={url}
+      />
+    </>
+  );
+}