chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -89,6 +89,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.muteOnWindowChanged = false;
 
     this.#dimHighlightSVG = UI.UIUtils.createSVGChild(this.element, 'svg', 'timeline-minimap-dim-highlight-svg hidden');
+    this.#initializeDimHighlightSVG();
   }
 
   enableCreateBreadcrumbsButton(): void {
@@ -195,7 +196,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     });
   }
 
-  private update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
+  override update(start?: Trace.Types.Timing.MilliSeconds, end?: Trace.Types.Timing.MilliSeconds): void {
     if (!this.isShowing()) {
       return;
     }
@@ -308,51 +309,91 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     this.muteOnWindowChanged = false;
   }
 
-  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds): void {
-    let mask = this.#dimHighlightSVG?.querySelector('mask');
-    if (!mask) {
-      // Set up the desaturation mask
-      const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
-      mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
-      mask.id = 'dim-highlight-cutouts';
-      /* Within the mask...
-          - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
-          - white fill = be 100% desaturated
-          - grey fill  = show at the Lightness level of grayscale/desaturation
-      */
-      const showAllRect = UI.UIUtils.createSVGChild(mask, 'rect');
-      showAllRect.setAttribute('width', '100%');
-      showAllRect.setAttribute('height', '100%');
-      showAllRect.setAttribute('fill', 'hsl(0deg 0% 95%)');
-
-      const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect') as SVGRectElement;
-      desaturateRect.setAttribute('width', '100%');
-      desaturateRect.setAttribute('height', '100%');
-      desaturateRect.setAttribute('fill', '#ffffff');
-      desaturateRect.setAttribute('mask', `url(#${mask.id})`);
-      desaturateRect.style.mixBlendMode = 'saturation';
-
-      const punchRect = UI.UIUtils.createSVGChild(mask, 'rect', 'punch');
-      punchRect.setAttribute('y', '0');
-      punchRect.setAttribute('height', '100%');
-      punchRect.setAttribute('fill', 'black');
-
-      const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
-      const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
-      bracket.setAttribute('fill', bracketColor);
-    }
+  /**
+   * This function will create three rectangles and a polygon, which will be use to highlight the time range.
+   */
+  #initializeDimHighlightSVG(): void {
+    // Set up the desaturation mask
+    const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
+    const mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
+    mask.id = 'dim-highlight-cutouts';
+    /* Within the mask...
+        - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
+        - white fill = be 100% desaturated
+        - grey fill  = show at the Lightness level of grayscale/desaturation
+    */
+
+    // This a rectangle covers the entire SVG and has a light gray fill. This sets the base desaturation level for the
+    // masked area.
+    // The colour here should be fixed because the colour's brightness changes the desaturation level.
+    const showAllRect = UI.UIUtils.createSVGChild(mask, 'rect');
+    showAllRect.setAttribute('width', '100%');
+    showAllRect.setAttribute('height', '100%');
+    showAllRect.setAttribute('fill', 'hsl(0deg 0% 95%)');
+
+    // This rectangle also covers the entire SVG and has a fill with the current background. It is linked to the
+    // `mask` element.
+    // The `mixBlendMode` is set to 'saturation', so this rectangle will completely desaturate the area it covers
+    // within the mask.
+    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background') as SVGRectElement;
+    desaturateRect.setAttribute('width', '100%');
+    desaturateRect.setAttribute('height', '100%');
+    desaturateRect.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
+    desaturateRect.setAttribute('mask', `url(#${mask.id})`);
+    desaturateRect.style.mixBlendMode = 'saturation';
+
+    // This rectangle is positioned at the top of the not-to-desaturate time range, with full height and a black fill.
+    // It will be used to "punch" through the desaturation, revealing the original colours beneath.
+    // The *black* fill on the "punch-out" rectangle is crucial because black is fully transparent in a mask.
+    const punchRect = UI.UIUtils.createSVGChild(mask, 'rect', 'punch');
+    punchRect.setAttribute('y', '0');
+    punchRect.setAttribute('height', '100%');
+    punchRect.setAttribute('fill', 'black');
+
+    // This polygon is for the bracket beyond the not desaturated area.
+    const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
+    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
+    bracket.setAttribute('fill', bracketColor);
+
+    ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+      const desaturateRect = this.#dimHighlightSVG.querySelector('rect.background');
+      desaturateRect?.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
+
+      const bracket = this.#dimHighlightSVG.querySelector('polygon');
+      bracket?.setAttribute(
+          'fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover'));
+    });
+  }
+
+  #addBracket(left: number, right: number): void {
+    const TRIANGLE_SIZE = 5;  // px size of triangles
+    const bracket = this.#dimHighlightSVG.querySelector('polygon');
+    bracket?.setAttribute(
+        'points',
+        `${left},0 ${left},${TRIANGLE_SIZE} ${left + TRIANGLE_SIZE - 1},1 ${right - TRIANGLE_SIZE - 1},1 ${right},${
+            TRIANGLE_SIZE} ${right},0`);
+    bracket?.classList.remove('hidden');
+  }
 
+  #hideBracket(): void {
+    const bracket = this.#dimHighlightSVG.querySelector('polygon');
+    bracket?.classList.add('hidden');
+  }
+
+  highlightBounds(bounds: Trace.Types.Timing.TraceWindowMicroSeconds, withBracket: boolean): void {
     const left = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.min));
     const right = this.overviewCalculator.computePosition(Trace.Helpers.Timing.microSecondsToMilliseconds(bounds.max));
 
+    // Update the punch out rectangle to the not-to-desaturate time range.
     const punchRect = this.#dimHighlightSVG.querySelector('rect.punch');
     punchRect?.setAttribute('x', left.toString());
     punchRect?.setAttribute('width', (right - left).toString());
 
-    const size = 5;  // px size of triangles
-    const bracket = this.#dimHighlightSVG.querySelector('polygon');
-    bracket?.setAttribute(
-        'points', `${left},0 ${left},${size} ${left + size - 1},1 ${right - size - 1},1 ${right},${size} ${right},0`);
+    if (withBracket) {
+      this.#addBracket(left, right);
+    } else {
+      this.#hideBracket();
+    }
 
     this.#dimHighlightSVG.classList.remove('hidden');
   }
@@ -432,7 +473,7 @@ export class TimelineOverviewBase extends UI.Widget.VBox implements TimelineOver
     return this.calculatorInternal;
   }
 
-  update(): void {
+  override update(): void {
     throw new Error('Not implemented');
   }
 

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -70,19 +70,19 @@ Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.PERFORMANCE,
   storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.flamechartMouseWheelAction),
-  settingName: 'flamechart-mouse-wheel-action',
+  settingName: 'flamechart-selected-navigation',
   settingType: Common.Settings.SettingType.ENUM,
-  defaultValue: 'zoom',
+  defaultValue: 'classic',
   options: [
     {
       title: i18nLazyString(UIStrings.scroll),
       text: i18nLazyString(UIStrings.scroll),
-      value: 'scroll',
+      value: 'modern',
     },
     {
       title: i18nLazyString(UIStrings.zoom),
       text: i18nLazyString(UIStrings.zoom),
-      value: 'zoom',
+      value: 'classic',
     },
   ],
 });

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -66,6 +66,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
     padding-inline: 2px;
+
+    &.link {
+      overflow: visible;
+
+      & > button.text-button.devtools-link {
+        background-color: inherit;
+      }
+    }
   }
 
   &.width-constrained {

package/front_end/ui/legacy/filter.css

@@ -103,7 +103,7 @@
   position: relative;
 }
 
-.filter-checkbox-filter > [is="dt-checkbox"] {
+.filter-checkbox-filter > dt-checkbox {
   display: flex;
   margin: auto 0;
 }

package/front_end/ui/legacy/inspectorCommon.css

@@ -392,7 +392,7 @@ input::placeholder {
   outline: none;
   padding: 0 var(--sys-size-9) 0 var(--sys-size-5);
   background-image: var(--combobox-dropdown-arrow);
-  background-color: var(--sys-color-surface);
+  background-color: transparent;
   background-position: right center;
   background-repeat: no-repeat;
 }

package/front_end/ui/legacy/listWidget.css

@@ -7,10 +7,13 @@
 .list {
   flex: auto 0 1;
   overflow-y: auto;
-  border: 1px solid var(--sys-color-divider);
   flex-direction: column;
 
   --override-background-list-item-color: hsl(0deg 0% 96%);
+
+  &:has(div) {
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
 }
 
 .theme-with-dark-background .list,

package/front_end/ui/legacy/reportView.css

@@ -74,7 +74,7 @@
 .report-row {
   margin: 10px 0 2px 18px;
 
-  &:has(span[is="dt-checkbox"]) {
+  &:has(dt-checkbox) {
     margin-top: 7px;
   }
 }

package/front_end/ui/legacy/toolbar.css

@@ -128,7 +128,8 @@ devtools-issue-counter.main-toolbar {
 .toolbar-has-dropdown {
   justify-content: space-between;
   height: var(--sys-size-9);
-  padding: 0 var(--sys-size-3) 0 var(--sys-size-5);
+  padding: 0 var(--sys-size-2) 0 var(--sys-size-4);
+  margin: 0 var(--sys-size-2);
   gap: var(--sys-size-2);
   border-radius: var(--sys-shape-corner-extra-small);
 
@@ -152,7 +153,7 @@ devtools-issue-counter.main-toolbar {
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 
   &[disabled] {
@@ -160,10 +161,6 @@ devtools-issue-counter.main-toolbar {
     background-color: var(--sys-color-state-disabled-container);
     color: var(--sys-color-state-disabled);
   }
-
-  &:first-child {
-    margin-left: var(--sys-size-2);
-  }
 }
 
 .toolbar-has-dropdown-shrinkable {

package/front_end/ui/legacy/treeoutline.css

@@ -47,7 +47,7 @@
   border-top-color: var(--sys-color-tonal-container);
 }
 
-.tree-outline li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+.tree-outline li:hover:not(:has(dt-checkbox)) .selection {
   display: block;
   background-color: var(--sys-color-state-hover-on-subtle);
 }
@@ -214,6 +214,8 @@ ol.tree-outline:not(.hide-selection-when-blurred) li.selected:focus {
   & .tree-variant-navigation li.selected:focus,
   .tree-variant-navigation li.selected:focus devtools-icon {
     color: var(--app-color-navigation-drawer-label-selected);
+
+    --override-file-source-icon-color: var(--app-color-navigation-drawer-label-selected);
   }
 }
 

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -334,6 +334,7 @@ export const knownContextValues = new Set([
   'affected-requests',
   'affected-sources',
   'ai-assistance-enabled',
+  'ai-assistance-history-entries',
   'align-content',
   'align-content-center',
   'align-content-flex-end',
@@ -356,6 +357,7 @@ export const knownContextValues = new Set([
   'allocation-stack',
   'allow-pasting',
   'allow-scroll-past-eof',
+  'allow-scroll-past-eof-false',
   'alpha',
   'am',
   'anchor-link',
@@ -605,6 +607,7 @@ export const knownContextValues = new Set([
   'call-tree',
   'cancel',
   'cancel-animation-frame',
+  'cancel-cross-origin-context-chat',
   'candara',
   'canplay',
   'canplaythrough',
@@ -805,6 +808,7 @@ export const knownContextValues = new Set([
   'converter-puppeteer',
   'converter-puppeteer-firefox',
   'converter-puppeteer-replay',
+  'cookie-control-override-enabled',
   'cookie-preview',
   'cookie-view-show-decoded',
   'cookies',
@@ -1323,7 +1327,7 @@ export const knownContextValues = new Set([
   'fit-to-window',
   'fix-this-issue',
   'flame',
-  'flamechart-mouse-wheel-action',
+  'flamechart-selected-navigation',
   'flex',
   'flex-basis',
   'flex-direction',
@@ -1438,6 +1442,8 @@ export const knownContextValues = new Set([
   'googlebot-desktop',
   'googlebot-smartphone',
   'gotpointercapture',
+  'grace-period-link',
+  'grace-period-mitigation-disabled',
   'grid',
   'grid-area',
   'grid-auto-columns',
@@ -1497,6 +1503,8 @@ export const knownContextValues = new Set([
   'help.report-issue',
   'help.show-release-note',
   'helvetica',
+  'heuristic-link',
+  'heuristic-mitigation-disabled',
   'hex',
   'hi',
   'hide-all-others',
@@ -3272,6 +3280,7 @@ export const knownContextValues = new Set([
   'timeline.insights.cls-culprits',
   'timeline.insights.document-latency',
   'timeline.insights.font-display',
+  'timeline.insights.image-delivery',
   'timeline.insights.inp',
   'timeline.insights.lcp-by-phase',
   'timeline.insights.lcp-discovery',
@@ -3331,6 +3340,7 @@ export const knownContextValues = new Set([
   'timeline.toggle-insight.cls-culprits',
   'timeline.toggle-insight.document-latency',
   'timeline.toggle-insight.font-display',
+  'timeline.toggle-insight.image-delivery',
   'timeline.toggle-insight.inp',
   'timeline.toggle-insight.lcp-by-phase',
   'timeline.toggle-insight.lcp-discovery',
@@ -3458,6 +3468,7 @@ export const knownContextValues = new Set([
   'view-all-rules',
   'view-all-speculations',
   'view-computed-value',
+  'view-details',
   'view-parsed',
   'view-source',
   'view-timeline',

package/front_end/ui/visual_logging/LoggingDriver.test.ts

@@ -554,6 +554,33 @@ describe('LoggingDriver', () => {
     assert.strictEqual(event.context, 1936227034);
   });
 
+  it('logs state with change of a label`s control', async () => {
+    const recordChange = sinon.stub(
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance,
+        'recordChange',
+    );
+
+    const label = document.createElement('label');
+    label.setAttribute('jslog', 'TreeItem; track: change');
+    const input = document.createElement('input');
+    input.type = 'radio';
+    input.checked = true;
+    input.style.display = 'none';
+    label.appendChild(input);
+    renderElementIntoDOM(label);
+    await VisualLoggingTesting.LoggingDriver.startLogging();
+    let logging = expectCall(recordChange);
+    input.dispatchEvent(new Event('change'));
+    let [event] = await logging;
+    assert.strictEqual(event.context, 1530936795);
+
+    input.checked = false;
+    logging = expectCall(recordChange);
+    input.dispatchEvent(new Event('change'));
+    [event] = await logging;
+    assert.strictEqual(event.context, 1936227034);
+  });
+
   it('logs hover', async () => {
     addLoggableElements();
     await VisualLoggingTesting.LoggingDriver.startLogging({hoverLogThrottler: throttler});
@@ -977,7 +1004,6 @@ describe('LoggingDriver', () => {
     assert.sameDeepMembers(recordImpression.lastCall.firstArg.impressions, [
       {id: getVeId(loggable2), type: 1, context: 345, parent: getVeId(parent), width: 0, height: 0},
     ]);
-
   });
 
   it('logs root non-DOM impressions', async () => {

package/front_end/ui/visual_logging/LoggingDriver.ts

@@ -221,7 +221,13 @@ async function process(): Promise<void> {
           loggingState.pendingChangeContext = event.inputType;
           pendingChange.add(element);
         }, {capture: true});
-        element.addEventListener('change', () => logPendingChange(element), {capture: true});
+        element.addEventListener('change', (event: Event) => {
+          const target = event?.target ?? element;
+          if (['checkbox', 'radio'].includes((target as HTMLInputElement).type)) {
+            loggingState.pendingChangeContext = (target as HTMLInputElement).checked ? 'on' : 'off';
+          }
+          logPendingChange(element);
+        }, {capture: true});
         element.addEventListener('focusout', () => {
           if (loggingState.pendingChangeContext) {
             void logPendingChange(element);
@@ -301,9 +307,6 @@ function logPendingChange(element: Element): void {
   if (!loggingState) {
     return;
   }
-  if (['checkbox', 'radio'].includes((element as HTMLInputElement).type)) {
-    loggingState.pendingChangeContext = (element as HTMLInputElement).checked ? 'on' : 'off';
-  }
   void logChange(element);
   delete loggingState.pendingChangeContext;
   pendingChange.delete(element);

package/package.json

@@ -32,7 +32,6 @@
     "lint": "vpython3 third_party/node/node.py --output scripts/test/run_lint_check.js",
     "prebuild": "gn gen out/Default",
     "rdb": "rdb stream -new -realm chrome:public --",
-    "setup-dtrun": "cd scripts/devtools_run && npm link",
     "start": "node -e 'console.log(`This script has been removed in favor of --custom-devtools-frontend. For more information, see https://docs.google.com/document/d/1COgCBWWuTh2o-Zbp6h_z0h0LtlJaimaEDsION4RZPxc/edit?usp=sharing`);'",
     "stylelint-test": "vpython3 third_party/node/node.py --output ./node_modules/.bin/mocha \"./scripts/stylelint_rules/tests/*_test.js\"",
     "webtest": "vpython3 third_party/node/node.py --output scripts/npm_test.js",
@@ -86,7 +85,7 @@
     "lit-analyzer": "2.0.3",
     "mocha": "9.2.2",
     "postcss": "8.4.38",
-    "puppeteer-core": "23.0.2",
+    "puppeteer-core": "23.8.0",
     "recast": "0.20.5",
     "rimraf": "3.0.2",
     "rollup-plugin-sourcemaps2": "0.4.2",
@@ -106,5 +105,5 @@
     "tslib": "2.8.0",
     "ws": "$ws"
   },
-  "version": "1.0.1380117"
+  "version": "1.0.1386602"
 }

package/scripts/build/wasm-as.py

@@ -54,7 +54,7 @@ def script_main(args):
         options.output
     ])
     (size, offset) = re.search(
-        b'Section {[^}]*Type: CODE[^}]*Size: (\d*)[^}]*Offset: (\d*)[^}]*}',
+        rb'Section {[^}]*Type: CODE[^}]*Size: (\d*)[^}]*Offset: (\d*)[^}]*}',
         wasm_obj_headers).groups()
 
     # readobj reports as offset the location of the first byte of the header.

package/scripts/freestyler/auto_freestyler.js

@@ -264,10 +264,17 @@ class Example {
 
       await this.#devtoolsPage.locator('aria/Ask a question about the selected element').fill(query);
 
-      this.#devtoolsPage.evaluate(() => {
-        window.addEventListener('freestylersideeffect', ev => {
-          ev.detail.confirm();
-        });
+      const abort = new AbortController();
+      const autoAcceptEvals = async signal => {
+        while (!signal.aborted) {
+          await this.#devtoolsPage.locator('aria/Continue').click({signal});
+        }
+      };
+      autoAcceptEvals(abort.signal).catch(err => {
+        if (err.message === 'This operation was aborted') {
+          return;
+        }
+        console.error('autoAcceptEvals', err);
       });
 
       const done = this.#devtoolsPage.evaluate(() => {
@@ -282,6 +289,7 @@ class Example {
 
       await this.#devtoolsPage.keyboard.press('Enter');
       await done;
+      abort.abort();
 
       const result = JSON.parse(await this.#devtoolsPage.evaluate(() => {
         return localStorage.getItem('freestylerStructuredLog');

package/scripts/freestyler/to_tsv.mjs

@@ -0,0 +1,40 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+
+// Converts a JSON results file into two TSV files: queries and responses.
+// Usage: node to_tsv.mjs path/to/file.json
+
+import fs from 'fs/promises';
+import assert from 'assert';
+
+const file = process.argv[2];
+
+assert(file.endsWith('.json'));
+
+const data = JSON.parse(await fs.readFile(file, 'utf-8'));
+
+const responses = [];
+const queries = [];
+
+function formatRequest(request) {
+  const lines = [
+    ...(request.chat_history || []).map(item => item.text),
+    request.input,
+  ]
+  return lines.join('\n\n===\n\n');
+}
+
+const escapeCell = val => `"${(String(val)).replaceAll('"', '""')}"`;
+
+for (const example of data.examples) {
+  responses.push(escapeCell(example.response));
+  queries.push(escapeCell(formatRequest(example.request)));
+}
+
+assert(responses.length === queries.length);
+
+await fs.writeFile(file.replace('.json', '-queries.tsv'), queries.join('\n'));
+await fs.writeFile(file.replace('.json', '-responses.tsv'), responses.join('\n'));
+

package/scripts/tools/update_goldens.py

@@ -55,7 +55,6 @@ class ProjectConfig:
 TOOLS_DIR = os.path.dirname(os.path.abspath(__file__))
 BASE_DIR = os.path.normpath(os.path.join(TOOLS_DIR, '..', '..'))
 DEPOT_TOOLS_DIR = os.path.join(BASE_DIR, 'third_party', 'depot_tools')
-GSUTIL = os.path.join(DEPOT_TOOLS_DIR, 'gsutil.py')
 VPYTHON = os.path.join(DEPOT_TOOLS_DIR, 'vpython3')
 GOLDENS_DIR = os.path.join(BASE_DIR, 'test', 'interactions', 'goldens')
 
@@ -64,13 +63,12 @@ WARNING_BUILDERS_STILL_RUNNING = 'Patchset %s has builders that are still ' \
 WARNING_BUILDERS_FAILED = 'Patchset %s has builders that failed:\n  %s\n'
 WARNING_BUILDERS_MISSING = 'Patchset %s does not have screenshot tests for ' \
     'all platform.\nOnly these builders found:\n  %s'
-WARNING_GSUTIL_CONNECTIVITY = (
-    'Ups! gsutil seems to not work for you right '
+WARNING_GCS_CONNECTIVITY = (
+    'Ups! "gcloud storage" seems to not work for you right '
     'now.\nThis is either a connectivity problem or a configuration issue.\n'
     'Make sure you are logged in with your Google account and you are included '
     'in the devtools-dev@google.com group.\n'
-    'Try running "./third_party/depot_tools/gsutil.py config" command.\n'
-    'When prompted for a project id, please use "v8-infra".\n')
+    'Try running "gcloud config set core/project v8-infra" command.\n')
 WARNING_GIT_DIRTY = 'Before attempting to apply screenshot patches, please' \
     'make sure your local repo is clean.\nFolder %s seems to contain ' \
     'un-committed changes.' % GOLDENS_DIR
@@ -154,7 +152,7 @@ def trigger(project_config, options):
 
 def update(project_config, options):
     test_clean_git()
-    test_gsutil_connectivity(project_config)
+    test_gcs_connectivity(project_config)
     wait_sec = options.wait_sec
     if wait_sec:
         wait_sec = max(wait_sec, 30)
@@ -205,15 +203,15 @@ def test_clean_git():
         sys.exit(0)
 
 
-def test_gsutil_connectivity(project_config):
-    """Test if gsutil needs to be configured for current user."""
-    process = subprocess.Popen(gsutil_cmd('ls', project_config.gs_root),
+def test_gcs_connectivity(project_config):
+    """Test if gcloud needs to be configured for current user."""
+    process = subprocess.Popen(gcstorage_cmd('ls', project_config.gs_root),
                                stdout=subprocess.PIPE,
                                stderr=subprocess.PIPE)
     _, stderr = process.communicate()
     if process.returncode != 0:
         print(stderr.decode('utf-8'), '\n')
-        print(WARNING_GSUTIL_CONNECTIVITY)
+        print(WARNING_GCS_CONNECTIVITY)
         sys.exit(0)
 
 
@@ -403,7 +401,7 @@ def download_patches(project_config, results, destination_dir, verbose):
         local_path = os.path.join(destination_dir, patch_platform + '.patch')
         if verbose:
             print('Downloading patch file from: ' + gs_location)
-        run_command(gsutil_cmd('cp', gs_location, local_path), verbose)
+        run_command(gcstorage_cmd('cp', gs_location, local_path), verbose)
         patches.append(local_path)
     return patches
 
@@ -446,8 +444,8 @@ def run_command(command, verbose, message=None):
         sys.exit(1)
 
 
-def gsutil_cmd(*args):
-    return [VPYTHON, GSUTIL] + list(args)
+def gcstorage_cmd(*args):
+    return ["gcloud", "storage"] + list(args)
 
 
 if __name__ == '__main__':