From 2e99a601dc82a9d6a1fbd7073d29d1eb42395fe2 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 18:05:41 +0530 Subject: [PATCH 1/8] feat: add inspect mode state notification to parent window Implemented a new method to notify the parent window when the inspect mode state changes. This includes error handling for potential issues when sending the message. The change enhances communication between the overlay model and its parent context. --- front_end/core/sdk/OverlayModel.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/front_end/core/sdk/OverlayModel.ts b/front_end/core/sdk/OverlayModel.ts index c9f84b546cd9..96b62060dd75 100644 --- a/front_end/core/sdk/OverlayModel.ts +++ b/front_end/core/sdk/OverlayModel.ts @@ -287,10 +287,28 @@ export class OverlayModel extends SDKModel implements ProtocolProxyA Promise { await this.domModel.requestDocument(); this.inspectModeEnabledInternal = mode !== Protocol.Overlay.InspectMode.None; + this.notifyParentWindowOfInspectModeChange(); this.dispatchEventToListeners(Events.InspectModeWillBeToggled, this); this.highlighter.setInspectMode(mode, this.buildHighlightConfig('all', showDetailedTooltip)); } + private notifyParentWindowOfInspectModeChange(): void { + // If the window is not undefined and the parent is not the same as the window, send a message to the parent window. + try { + if (typeof window !== "undefined" && window.parent && window.parent !== window) { + window.parent.postMessage( + { + type: "inspectModeStateChanged", + enabled: this.inspectModeEnabledInternal, + }, + "*" + ); + } + } catch (error) { + console.error('Error sending inspect mode', error); + } + } + inspectModeEnabled(): boolean { return this.inspectModeEnabledInternal; } From 2732fe0122fd297f0df5cda0041accf4a545de19 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 18:56:56 +0530 Subject: [PATCH 2/8] feat: add CI workflow for DevTools frontend build and deployment Introduced a new GitHub Actions workflow to automate the build and deployment of the Chrome DevTools frontend. The workflow includes steps for checking out the repository, cloning the DevTools source, setting up Node.js, building the project, and uploading the built files to an S3 bucket. This enhances the CI/CD process for the project. --- .github/workflows/stageBuild.yml | 70 ++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 .github/workflows/stageBuild.yml diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml new file mode 100644 index 000000000000..a85c8fe3e741 --- /dev/null +++ b/.github/workflows/stageBuild.yml @@ -0,0 +1,70 @@ +name: DevTools Frontend CI + +on: + workflow_dispatch: + inputs: + version: + description: "Version to build (e.g. v1, v2, v3)" + required: true + default: "v3" + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + + env: + NODE_VERSION: 22 + S3_BUCKET: stage-falcon-component-v1 + AWS_REGION: us-east-1 + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + with: + fetch-depth: 0 + + - name: Clone Chrome DevTools + run: | + git clone https://github.com/ChromeDevTools/devtools-frontend.git chromedev + cd chromedev + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: ${{ env.NODE_VERSION }} + + - name: Build Chrome DevTools + run: | + npm install + npm run build + + - name: Find DevTools build folder + id: find_frontend_dir + run: | + # Find the parent folder containing devtools_app.html + FRONTEND_DIR=$(find out -type f -name "devtools_app.html" -exec dirname {} \;) + echo "Detected frontend directory: $FRONTEND_DIR" + echo "FRONTEND_DIR=$FRONTEND_DIR" >> $GITHUB_ENV + + - name: Print versions + run: | + node -v + npm -v + + - name: List built files + run: ls -altr ${{ env.FRONTEND_DIR }} + + - name: Configure AWS credentials + uses: aws-actions/configure-aws-credentials@v2 + with: + aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + aws-region: ${{ env.AWS_REGION }} + + - name: Upload front_end folder to S3 + run: | + aws s3 sync ${{ env.FRONTEND_DIR }} s3://${{ env.S3_BUCKET }}/${{ inputs.version }}/ \ + --acl public-read --follow-symlinks --delete + + - name: Confirm S3 upload + run: aws s3 ls s3://${{ env.S3_BUCKET }}/${{ inputs.version }}/ \ No newline at end of file From d37c6dfe75c0d099dc3c941c02a24125bc9cc52f Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 19:11:32 +0530 Subject: [PATCH 3/8] feat: enhance CI workflow for Chrome DevTools build Updated the GitHub Actions workflow to improve the build process for the Chrome DevTools frontend. Changes include removing the default version requirement, setting up depot_tools for dependency management, syncing dependencies, and generating build files before the build step. Additionally, updated AWS credentials to use development secrets for deployment. This streamlines the CI/CD pipeline and ensures a more efficient build process. --- .github/workflows/stageBuild.yml | 28 ++++++++++++++++++++-------- 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index a85c8fe3e741..09ed0ff815e1 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -6,7 +6,6 @@ on: version: description: "Version to build (e.g. v1, v2, v3)" required: true - default: "v3" jobs: build-and-deploy: @@ -22,21 +21,34 @@ jobs: uses: actions/checkout@v3 with: fetch-depth: 0 + ref: stage - - name: Clone Chrome DevTools + - name: Setup depot_tools run: | - git clone https://github.com/ChromeDevTools/devtools-frontend.git chromedev - cd chromedev + git clone --depth=1 https://chromium.googlesource.com/chromium/tools/depot_tools.git /tmp/depot_tools + echo "$GITHUB_WORKSPACE" >> $GITHUB_PATH + echo "/tmp/depot_tools" >> $GITHUB_PATH - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: ${{ env.NODE_VERSION }} + - name: Sync dependencies + run: | + export PATH="/tmp/depot_tools:$PATH" + gclient sync + + - name: Generate build files + run: | + export PATH="/tmp/depot_tools:$PATH" + gn gen out/Default + - name: Build Chrome DevTools run: | - npm install - npm run build + export PATH="/tmp/depot_tools:$PATH" + npm install + npm run build - name: Find DevTools build folder id: find_frontend_dir @@ -57,8 +69,8 @@ jobs: - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v2 with: - aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} - aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} + aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID_DEV }} + aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY_DEV }} aws-region: ${{ env.AWS_REGION }} - name: Upload front_end folder to S3 From 729994d7b7cb722ec02aa45cb7bef839d081b520 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 19:40:32 +0530 Subject: [PATCH 4/8] feat: add push trigger for stage branch in CI workflow Updated the GitHub Actions workflow to include a push trigger for the 'stage' branch. This enhancement allows for automated builds and tests to run whenever changes are pushed to the stage branch, improving the CI/CD process for the Chrome DevTools frontend. --- .github/workflows/stageBuild.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index 09ed0ff815e1..daad60ef4b57 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -1,6 +1,9 @@ name: DevTools Frontend CI on: + push: + branches: + - stage workflow_dispatch: inputs: version: From a2aafe77aff12746e0c79a5f6fd792ad8e959fc6 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 20:24:26 +0530 Subject: [PATCH 5/8] chore: enhance CI workflow by adding gclient config and build file generation This update modifies the GitHub Actions workflow to include the creation of a gclient configuration file and adds a step for generating build files. The path for depot_tools has been standardized, improving the overall build process for the DevTools frontend. --- .github/workflows/stageBuild.yml | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index a2b9c70aa79d..4e9cea0117b0 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -26,23 +26,39 @@ jobs: - name: Setup depot_tools run: | git clone --depth=1 https://chromium.googlesource.com/chromium/tools/depot_tools.git /tmp/depot_tools - - - name: add depot_tools path to PATH - run: | - echo "${{ github.workspace }}/depot_tools" >> $GITHUB_PATH + echo "/tmp/depot_tools" >> $GITHUB_PATH - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: ${{ env.NODE_VERSION }} + - name: Create gclient config + run: | + cat > .gclient << 'EOF' + solutions = [ + { + "name": "devtools-frontend", + "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git", + "managed": False, + "custom_deps": {}, + } + ] + EOF + - name: Sync dependencies run: | - export PATH="${{ github.workspace }}/depot_tools:$PATH" + export PATH="/tmp/depot_tools:$PATH" gclient sync + - name: Generate build files + run: | + export PATH="/tmp/depot_tools:$PATH" + gn gen out/Default + - name: Build Chrome DevTools run: | + export PATH="/tmp/depot_tools:$PATH" npm install npm run build @@ -75,4 +91,4 @@ jobs: --acl public-read --follow-symlinks --delete - name: Confirm S3 upload - run: aws s3 ls s3://${{ env.S3_BUCKET }}/${{ inputs.version }}/ + run: aws s3 ls s3://${{ env.S3_BUCKET }}/${{ inputs.version }}/ \ No newline at end of file From 0327b08971278cd5a9c8b24be11737935da03327 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 21:26:24 +0530 Subject: [PATCH 6/8] fix --- .github/workflows/stageBuild.yml | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index 4e9cea0117b0..f859c4d69052 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -50,6 +50,40 @@ jobs: run: | export PATH="/tmp/depot_tools:$PATH" gclient sync + # Verify dependencies were downloaded + ls -la buildtools/ || echo "Warning: buildtools not found" + # Check for Ninja in buildtools + find buildtools -name "ninja" -type f 2>/dev/null || echo "Warning: Ninja not found in buildtools" + + - name: Download Ninja if not found + run: | + export PATH="/tmp/depot_tools:$PATH" + # Check if Ninja exists in buildtools + if ! find buildtools -name "ninja" -type f 2>/dev/null | grep -q .; then + echo "Ninja not found in buildtools, downloading via CIPD..." + mkdir -p third_party/ninja + # Download Ninja for Linux + cipd ensure -root third_party/ninja -ensure-file - <> $GITHUB_PATH + fi + if [ -d "buildtools" ]; then + echo "$PWD/buildtools" >> $GITHUB_PATH + fi + if [ -d "third_party/ninja" ]; then + echo "$PWD/third_party/ninja" >> $GITHUB_PATH + fi - name: Generate build files run: | From 540602988d686a03b0de64a47af406c562bc5b44 Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 21:46:08 +0530 Subject: [PATCH 7/8] chore: refine CI workflow by updating gclient config and enhancing ninja path handling This update modifies the GitHub Actions workflow to improve the gclient configuration and streamline the handling of the ninja build tool's path. The changes ensure that the correct paths are set for both the devtools-frontend and third-party directories, enhancing the build process for the DevTools frontend. --- .github/workflows/stageBuild.yml | 68 ++++++++++++++------------------ 1 file changed, 29 insertions(+), 39 deletions(-) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index f859c4d69052..49fe5a4e0cd7 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -36,63 +36,53 @@ jobs: - name: Create gclient config run: | cat > .gclient << 'EOF' - solutions = [ + solutions = [ { - "name": "devtools-frontend", - "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git", - "managed": False, - "custom_deps": {}, - } - ] + "managed": False, + "name": "devtools-frontend", + "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git", + "custom_deps": {}, + "deps_file": "DEPS", + "safesync_url": "", + }, + ] EOF - name: Sync dependencies run: | export PATH="/tmp/depot_tools:$PATH" gclient sync - # Verify dependencies were downloaded - ls -la buildtools/ || echo "Warning: buildtools not found" - # Check for Ninja in buildtools - find buildtools -name "ninja" -type f 2>/dev/null || echo "Warning: Ninja not found in buildtools" - - - name: Download Ninja if not found - run: | - export PATH="/tmp/depot_tools:$PATH" - # Check if Ninja exists in buildtools - if ! find buildtools -name "ninja" -type f 2>/dev/null | grep -q .; then - echo "Ninja not found in buildtools, downloading via CIPD..." - mkdir -p third_party/ninja - # Download Ninja for Linux - cipd ensure -root third_party/ninja -ensure-file - <> $GITHUB_PATH - fi - if [ -d "buildtools" ]; then - echo "$PWD/buildtools" >> $GITHUB_PATH - fi - if [ -d "third_party/ninja" ]; then + # Add ninja to PATH (check both possible locations) + if [ -d "devtools-frontend/third_party/ninja" ]; then + export PATH="$PWD/devtools-frontend/third_party/ninja:$PATH" + echo "$PWD/devtools-frontend/third_party/ninja" >> $GITHUB_PATH + elif [ -d "third_party/ninja" ]; then + export PATH="$PWD/third_party/ninja:$PATH" echo "$PWD/third_party/ninja" >> $GITHUB_PATH fi - name: Generate build files run: | export PATH="/tmp/depot_tools:$PATH" + # Ensure ninja is in PATH + if [ -d "devtools-frontend/third_party/ninja" ]; then + export PATH="$PWD/devtools-frontend/third_party/ninja:$PATH" + elif [ -d "third_party/ninja" ]; then + export PATH="$PWD/third_party/ninja:$PATH" + fi + cd devtools-frontend || cd . gn gen out/Default - name: Build Chrome DevTools run: | export PATH="/tmp/depot_tools:$PATH" + # Ensure ninja is in PATH + if [ -d "devtools-frontend/third_party/ninja" ]; then + export PATH="$PWD/devtools-frontend/third_party/ninja:$PATH" + elif [ -d "third_party/ninja" ]; then + export PATH="$PWD/third_party/ninja:$PATH" + fi + cd devtools-frontend || cd . npm install npm run build From 6f62c7f78abe0d20c83f68f5948ef1549543c6da Mon Sep 17 00:00:00 2001 From: vaibhavLT Date: Mon, 24 Nov 2025 21:49:12 +0530 Subject: [PATCH 8/8] fix --- .github/workflows/stageBuild.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/stageBuild.yml b/.github/workflows/stageBuild.yml index 49fe5a4e0cd7..37bfbb0a9f14 100644 --- a/.github/workflows/stageBuild.yml +++ b/.github/workflows/stageBuild.yml @@ -36,16 +36,16 @@ jobs: - name: Create gclient config run: | cat > .gclient << 'EOF' - solutions = [ + solutions = [ { - "managed": False, - "name": "devtools-frontend", - "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git", - "custom_deps": {}, - "deps_file": "DEPS", - "safesync_url": "", + "managed": False, + "name": "devtools-frontend", + "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git", + "custom_deps": {}, + "deps_file": "DEPS", + "safesync_url": "", }, - ] + ] EOF - name: Sync dependencies