feat(devtools): added string flag for browser support (angular#44952)

* Added `flag_browser` to toggle between different browser builds chrome and firefox
* Updated build command to support new flag configuration

PR Close angular#44952

Author: sumitarora

devtools/projects/shell-browser/src/BUILD.bazel

@@ -4,6 +4,7 @@ load("//devtools/tools:ng_module.bzl", "ng_module")
 load("//devtools/tools:typescript.bzl", "ts_library")
 load("//tools:defaults.bzl", "esbuild")
 load("//devtools/tools/esbuild:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
+load("@bazel_skylib//rules:common_settings.bzl", "string_flag")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -292,14 +293,23 @@ filegroup(
     ],
 )
 
+string_flag(
+    name = "flag_browser",
+    build_setting_default = "chrome",
+    values = [
+        "chrome",
+        "firefox",
+    ],
+)
+
 config_setting(
     name = "browser_chrome",
-    values = {"define": "browser=chrome"},
+    flag_values = {":flag_browser": "chrome"},
 )
 
 config_setting(
     name = "browser_firefox",
-    values = {"define": "browser=firefox"},
+    flag_values = {":flag_browser": "firefox"},
 )
 
 genrule(

package.json

@@ -37,9 +37,9 @@
     "ts-circular-deps:approve": "yarn -s ng-dev ts-circular-deps approve --config ./packages/circular-deps-test.conf.js",
     "check-tooling-setup": "yarn tsc --project .ng-dev/tsconfig.json",
     "devtools:devserver": "ibazel run //devtools/src:devserver",
-    "devtools:build:chrome": "bazelisk build --config snapshot //devtools/projects/shell-browser/src:prodapp --define browser=chrome",
-    "devtools:build:firefox": "bazelisk build --config snapshot //devtools/projects/shell-browser/src:prodapp --define browser=firefox",
-    "devtools:test": "bazelisk test --config snapshot //devtools/... --define browser=chrome"
+    "devtools:build:chrome": "bazelisk build --config snapshot --//devtools/projects/shell-browser/src:flag_browser=chrome -- devtools/projects/shell-browser/src:prodapp",
+    "devtools:build:firefox": "bazelisk build --config snapshot --//devtools/projects/shell-browser/src:flag_browser=firefox -- devtools/projects/shell-browser/src:prodapp",
+    "devtools:test": "bazelisk test --config snapshot --//devtools/projects/shell-browser/src:flag_browser=chrome -- //devtools/..."
   },
   "// 1": "dependencies are used locally and by bazel",
   "dependencies": {