[XProf: trace viewer] Implement Feature Flag system with Local Storage

This CL adds a simple feature flag system to XProf Trace Viewer v2.
It uses `localStorage` as the source of truth in TypeScript to allow users to enable/disable experimental features.
The flags are exposed to the WebAssembly (C++) application via Emscripten bindings.
C++ queries the flags on demand and caches them to avoid repeated calls to JavaScript, ensuring performance.

PiperOrigin-RevId: 914134151

Author: lilysjtu2011

frontend/app/components/trace_viewer_v2/application.cc

@@ -41,6 +41,13 @@ const char* const kWindowTarget = EMSCRIPTEN_EVENT_TARGET_WINDOW;
 const char* const kCanvasTarget = "#canvas";
 constexpr float kScrollbarSize = 10.0f;
 
+EM_JS(bool, GetFeatureFlagFromJS, (const char* name), {
+  if (window.getFeatureFlag) {
+    return window.getFeatureFlag(UTF8ToString(name));
+  }
+  return false;
+});
+
 EM_BOOL OnResize(int eventType, const EmscriptenUiEvent* uiEvent,
                  void* userData) {
   Application::Instance().RequestRedraw();
@@ -325,6 +332,17 @@ void Application::SetVisibleFlowCategories(
       emscripten::vecFromJSArray<int>(category_ids));
 }
 
+bool Application::IsFeatureEnabled(const std::string& name) {
+  auto it = feature_flags_cache_.find(name);
+  if (it != feature_flags_cache_.end()) {
+    return it->second;
+  }
+
+  bool enabled = GetFeatureFlagFromJS(name.c_str());
+  feature_flags_cache_[name] = enabled;
+  return enabled;
+}
+
 void Application::Resize(float dpr, int width, int height) {
   float old_dpr = CanvasState::Current().device_pixel_ratio();
 

frontend/app/components/trace_viewer_v2/application.h

@@ -5,20 +5,21 @@
 #include <cstdint>
 #include <memory>
 #include <string>
+#include <unordered_map>
 
 #include "emscripten/val.h"
 #include "absl/base/no_destructor.h"
 #include "absl/time/clock.h"
 #include "absl/time/time.h"
 #include "imgui.h"
 #include "frontend/app/components/trace_viewer_v2/canvas_state.h"
+#include "frontend/app/components/trace_viewer_v2/color/colors.h"
 #include "frontend/app/components/trace_viewer_v2/scheduler.h"
 #include "frontend/app/components/trace_viewer_v2/timeline/data_provider.h"
 #include "frontend/app/components/trace_viewer_v2/timeline/time_range.h"
 #include "frontend/app/components/trace_viewer_v2/timeline/timeline.h"
 #include "frontend/app/components/trace_viewer_v2/trace_helper/trace_event.h"
 #include "frontend/app/components/trace_viewer_v2/webgpu_render_platform.h"
-#include "frontend/app/components/trace_viewer_v2/color/colors.h"
 
 namespace traceviewer {
 
@@ -52,6 +53,8 @@ class Application {
 
   ColorPalette& GetPalette() { return palette_; };
 
+  bool IsFeatureEnabled(const std::string& name);
+
   bool IsInitialized() const { return timeline_ != nullptr; }
 
   void SetVisibleFlowCategory(int category_id) {
@@ -120,6 +123,8 @@ class Application {
   ColorPalette palette_ = ColorPalette::Default();
   uint64_t palette_version_ = 0xDEADBEEF;
 
+  std::unordered_map<std::string, bool> feature_flags_cache_;
+
   void MainLoop();
   // Draws a single frame. Should ONLY be called from MainLoop() to ensure
   // DeltaTime and Animations are updated correctly. Other methods should

frontend/app/components/trace_viewer_v2/application_test.cc

@@ -1,6 +1,7 @@
 #include "frontend/app/components/trace_viewer_v2/application.h"
 
 #include <emscripten/bind.h>
+#include <emscripten/em_asm.h>
 #include <emscripten/emscripten.h>
 
 #include "<gtest/gtest.h>"
@@ -55,5 +56,19 @@ TEST_F(ApplicationTest, ShutdownClearsImGuiContext) {
   EXPECT_FALSE(app.IsInitialized());
 }
 
+TEST_F(ApplicationTest, IsFeatureEnabledReadsFromJs) {
+  EM_ASM({
+    window.getFeatureFlag = (name) => {
+      if (name === 'test_flag_true') return true;
+      if (name === 'test_flag_false') return false;
+      return false;
+    };
+  });
+  Application& app = Application::Instance();
+
+  EXPECT_TRUE(app.IsFeatureEnabled("test_flag_true"));
+  EXPECT_FALSE(app.IsFeatureEnabled("test_flag_false"));
+}
+
 }  // namespace
 }  // namespace traceviewer

frontend/app/components/trace_viewer_v2/main.ts

@@ -137,6 +137,7 @@ declare global {
 
   export declare interface TraceViewerV2Module extends EmscriptenModule {
   HEAPU8: Uint8Array;
+  getFeatureFlag?(name: string): boolean;
   SetPalette(paletteName: string): void;
   canvas: HTMLCanvasElement;
   callMain(args: string[]): void;
@@ -940,6 +941,12 @@ export async function traceViewerV2Main(
 
   try {
     traceviewerModule = await initGpuAndStartWasmApp();
+    traceviewerModule.getFeatureFlag = (name: string): boolean => {
+      // TODO(b/498744795): Now only supports boolean flags (true/false).
+      // Will be extended in the future.
+      const value = window.localStorage.getItem(`xprof_ff_${name}`);
+      return value === 'true';
+    };
     activeWasmModule = traceviewerModule;
   } catch (e) {
     const error = e as Error;