[WebVitals] Update building documentation

I verified the build docs were accurate and marked the manual edits
within the imported package.

I also extended roll_front_end_third_party.py to accept an optional
version number, so rebuild.sh scripts can choose to pin to a specific
version.

Bug: 421413367
Change-Id: I12ac25414d2009cf70cc3e65b64c63a027c2165b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7030185
Commit-Queue: Connor Clark <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/third_party/web-vitals/README.chromium

@@ -14,15 +14,15 @@ Essential metrics for a healthy site.
 
 ## Bumping.
 
+First, go update rebuild.sh to specify the version you want. Then run the rebuild script:
+
 ```bash
 ./front_end/third_party/web-vitals/rebuild.sh
-
-# Also, consider commenting out roll script to just recompile without a bump, however this will reset some edits 2,3 listed below.
 ```
 
 ## DevTools edits to web-vitals
 
 1. There's a sed edit in the rebuild.sh to expose `attributeINP`. That'll continue in v5 but be harder to do.
-2. Some lines are manually commented out in `attribution/onINP.js`'s `saveInteractionTarget`.  b/376777343 Unknown if needed in v5.
-3. Some lines are added in `onHidden.js` to resolve a memory leak. Not needed in v5. b/425309898#comment4
-4. (Not part of package, but..) There's a hack to clear `interactionTargetElement` in our own web-vitals-injected that won't be necessary in v5.
+2. Minor manual edits (ctrl+f "cdt-modification"):
+   * some lines are manually commented out in `attribution/onINP.js`'s `saveInteractionTarget`.  b/376777343 Unknown if needed in v5.
+3. (Not part of package, but..) There's a hack to clear `interactionTargetElement` in our own web-vitals-injected that won't be necessary in v5.

front_end/third_party/web-vitals/package/dist/modules/attribution/onINP.js

@@ -60,6 +60,7 @@ const handleLoAFEntries = (entries) => {
 // Get a reference to the interaction target element in case it's removed
 // from the DOM later.
 const saveInteractionTarget = (entry) => {
+    // cdt-modification
     // TODO(b/376777343): Remove this modification when web-vitals.js doesn't retain DOM nodes anymore
     // Although it is useful for DevTools to retain nodes for diagnostic purposes, it is not preferable
     // to retaining Nodes in memory when the user does not expect them to.

front_end/third_party/web-vitals/rebuild.sh

@@ -4,8 +4,8 @@ set -euo pipefail
 
 SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 
-# Roll the latest version of the package from NPM
-vpython3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist
+# Roll the specified version of the package from NPM
+vpython3 scripts/deps/roll_front_end_third_party.py web-vitals web-vitals dist 4.2.4
 
 # We need this one helper function to be exported, so modify the source .ts and then rebuild
 sed -i -e 's/^const attributeINP/export const attributeINP/g' $SCRIPT_DIR/package/src/attribution/onINP.ts

scripts/deps/roll_front_end_third_party.py

@@ -112,6 +112,7 @@ def main():
     parser.add_argument('package_name')
     parser.add_argument('output_dir')
     parser.add_argument('library_dir')
+    parser.add_argument('version', default='latest')
 
     args = parser.parse_args()
 
@@ -125,7 +126,7 @@ def main():
     old_package_json = json.load(open(f'{package_path}/package.json'))
     package_json = json.load(
         urllib.request.urlopen(
-            f'https://registry.npmjs.org/{package_name}/latest'))
+            f'https://registry.npmjs.org/{package_name}/{args.version}'))
 
     # Version check
     version = parse_version(package_json['version'])