chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/Images/generate-css-vars.js

@@ -7,7 +7,7 @@ const {writeIfChanged} = require('../../scripts/build/ninja/write-if-changed.js'
 const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 
 /**
- * @param {string} fileName
+ * @param fileName
  */
 function generateCSSVariableDefinition(fileName) {
   // The `style` referenced here is the `:root` style rule in the constructed stylesheet down below

package/front_end/Images/readme.md

@@ -6,8 +6,7 @@
 
 2. Add respective entries to `.gni` files.
    - Update the `devtools_image_files` list in `config/gni/devtools_image_files.gni`.
-   - Update the `grd_files_release_sources` list in `config/gni/devtools_grd_files.gni`.
+   - Update the `grd_files_bundled_sources` list in `config/gni/devtools_grd_files.gni`.
 
 3. Use Icon component in the DevTools front-end:
    - Visit https://docs.google.com/document/d/1EA--IokG6YW51y7unS8dIKUx6EtyjETT0uglmvIpfsg for more information on that.
-

package/front_end/Images/rollup.config.mjs

@@ -15,7 +15,18 @@ export default {
         importMetaAssets({
           async transform(assetBuffer, assetPath) {
             if (assetPath.endsWith('.svg')) {
-              const {data} = await optimize(assetBuffer.toString());
+              const {data} = await optimize(assetBuffer.toString(), {
+                plugins: [
+                  {
+                    name: 'preset-default',
+                    params: {
+                      overrides: {
+                        inlineStyles: false,
+                      },
+                    },
+                  },
+                ],
+              });
               return data;
             }
             return null;

package/front_end/Images/src/baseline-high-availability.svg

@@ -0,0 +1,17 @@
+<svg width="18" height="10" viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Baseline icons CC BY-ND licensed: https://web-platform-dx.github.io/web-features/name-and-logo-usage-guidelines/ -->
+  <style>
+    .green-shape {
+      fill: #C4EED0; /* Light mode */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .green-shape {
+        fill: #125225; /* Dark mode */
+      }
+    }
+  </style>
+  <path d="M420 30L390 60L480 150L390 240L330 180L300 210L390 300L540 150L420 30Z" class="green-shape"/>
+  <path d="M150 0L30 120L60 150L150 60L210 120L240 90L150 0Z" class="green-shape"/>
+  <path d="M390 0L420 30L150 300L0 150L30 120L150 240L390 0Z" fill="#1EA446"/>
+</svg>

package/front_end/Images/src/baseline-limited-availability.svg

@@ -0,0 +1,19 @@
+<svg width="18" height="10" viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Baseline icons CC BY-ND licensed: https://web-platform-dx.github.io/web-features/name-and-logo-usage-guidelines/ -->
+  <style>
+    .gray-shape {
+      fill: #C6C6C6; /* Light mode */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .gray-shape {
+        fill: #565656; /* Dark mode */
+      }
+    }
+  </style>
+  <path d="M150 0L240 90L210 120L120 30L150 0Z" fill="#F09409"/>
+  <path d="M420 30L540 150L420 270L390 240L480 150L390 60L420 30Z" class="gray-shape"/>
+  <path d="M330 180L300 210L390 300L420 270L330 180Z" fill="#F09409"/>
+  <path d="M120 30L150 60L60 150L150 240L120 270L0 150L120 30Z" class="gray-shape"/>
+  <path d="M390 0L420 30L150 300L120 270L390 0Z" fill="#F09409"/>
+</svg>

package/front_end/Images/src/baseline-low-availability.svg

@@ -0,0 +1,31 @@
+<svg width="18" height="10" viewBox="0 0 540 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Baseline icons CC BY-ND licensed: https://web-platform-dx.github.io/web-features/name-and-logo-usage-guidelines/ -->
+  <style>
+    .blue-shape {
+      fill: #A8C7FA; /* Light mode */
+    }
+
+    .darker-blue-shape {
+      fill: #1B6EF3; /* Light mode */
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .blue-shape {
+        fill: #2D509E; /* Dark mode */
+      }
+
+      .darker-blue-shape {
+        fill: #4185FF; /* Dark mode */
+      }
+    }
+  </style>
+  <path d="M150 0L180 30L150 60L120 30L150 0Z" class="blue-shape"/>
+  <path d="M210 60L240 90L210 120L180 90L210 60Z" class="blue-shape"/>
+  <path d="M450 60L480 90L450 120L420 90L450 60Z" class="blue-shape"/>
+  <path d="M510 120L540 150L510 180L480 150L510 120Z" class="blue-shape"/>
+  <path d="M450 180L480 210L450 240L420 210L450 180Z" class="blue-shape"/>
+  <path d="M390 240L420 270L390 300L360 270L390 240Z" class="blue-shape"/>
+  <path d="M330 180L360 210L330 240L300 210L330 180Z" class="blue-shape"/>
+  <path d="M90 60L120 90L90 120L60 90L90 60Z" class="blue-shape"/>
+  <path d="M390 0L420 30L150 300L0 150L30 120L150 240L390 0Z" class="darker-blue-shape"/>
+</svg>

package/front_end/Images/src/bucket.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9108 2.00177L16.0739 16.6795C15.9799 17.4299 15.3418 17.9937 14.5856 17.994H7.18323C6.42511 17.9938 5.7866 17.4272 5.69495 16.6746L3.90784 2.00177H17.9108ZM7.18323 16.494H14.5856L16.2106 3.50177H5.6012L7.18323 16.494Z" fill="black"/>
+<path d="M8.90189 6.50294C8.90715 7.60475 9.80206 8.49591 10.9038 8.4961C12.0126 8.4961 12.9102 7.59411 12.9058 6.48536L12.8999 5.00294L14.3999 4.99708L14.4058 6.4795C14.4135 8.419 12.8434 9.9961 10.9038 9.9961C8.97653 9.99591 7.41125 8.43804 7.40189 6.51075L7.39506 5.00391L8.89506 4.9961L8.90189 6.50294Z" fill="black"/>
+</svg>

package/front_end/Images/src/label-auto.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 16C3.08333 16 2.72917 15.8542 2.4375 15.5625C2.14583 15.2708 2 14.9167 2 14.5V9.5C2.23611 9.5 2.47222 9.5 2.70833 9.5C2.95833 9.5 3.22222 9.5 3.5 9.5V14.5H12.25L15.625 10L12.25 5.5H9.52083C9.52083 5.25 9.52083 5 9.52083 4.75C9.52083 4.5 9.52083 4.25 9.52083 4H12.25C12.4861 4 12.7083 4.05556 12.9167 4.16667C13.125 4.26389 13.3056 4.40972 13.4583 4.60417L17.5 10L13.4583 15.3958C13.3056 15.5903 13.125 15.7431 12.9167 15.8542C12.7083 15.9514 12.4861 16 12.25 16H3.5ZM4.5 8C4.48611 8 4.43056 7.95833 4.33333 7.875C4.13889 7.08333 3.75 6.40278 3.16667 5.83333C2.59722 5.25 1.91667 4.86111 1.125 4.66667C1.09722 4.65278 1.05556 4.59722 1 4.5C1 4.47222 1.04167 4.41667 1.125 4.33333C1.91667 4.13889 2.59722 3.75694 3.16667 3.1875C3.75 2.60417 4.13889 1.91667 4.33333 1.125C4.34722 1.09722 4.40278 1.05556 4.5 1C4.52778 1 4.58333 1.04167 4.66667 1.125C4.875 1.91667 5.26389 2.59722 5.83333 3.16667C6.40278 3.73611 7.08333 4.125 7.875 4.33333C7.90278 4.33333 7.94445 4.38889 8 4.5C8 4.51389 7.95833 4.56944 7.875 4.66667C7.08333 4.86111 6.39583 5.25 5.8125 5.83333C5.24306 6.40278 4.86111 7.08333 4.66667 7.875C4.66667 7.90278 4.61111 7.94444 4.5 8Z" fill="black"/>
+</svg>

package/front_end/Images/src/shield.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 18C8.125 17.5417 6.57292 16.4803 5.34375 14.8158C4.11458 13.1513 3.5 11.3029 3.5 9.27083V4.5L10 2L16.5 4.5V9.27083C16.5 11.3029 15.8854 13.1513 14.6563 14.8158C13.4271 16.4803 11.875 17.5417 10 18ZM10 16.4375C11.4444 15.9896 12.6389 15.0938 13.5833 13.75C14.5278 12.4063 15 10.9132 15 9.27083V5.52083L10 3.60417L5 5.52083V9.27083C5 10.9132 5.47222 12.4063 6.41667 13.75C7.36111 15.0938 8.55556 15.9896 10 16.4375Z" fill="black"/>
+</svg>

package/front_end/Images/src/smart-assistant.svg

@@ -1 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_670_22)"><path d="M10 19L7 16H4.5C4.09722 16 3.74306 15.8542 3.4375 15.5625C3.14583 15.2569 3 14.9028 3 14.5V3.5C3 3.09722 3.14583 2.75 3.4375 2.45833C3.74306 2.15278 4.09722 2 4.5 2H9C9 2.22222 9 2.45833 9 2.70833C9 2.95833 9 3.22222 9 3.5H4.5V14.5H7.60417L10 16.8958L12.375 14.5H15.5V11C15.7639 11 16.0208 11 16.2708 11C16.5208 11 16.7639 11 17 11V14.5C17 14.9028 16.8542 15.2569 16.5625 15.5625C16.2708 15.8542 15.9167 16 15.5 16H13L10 19ZM14.5 10C14.5 8.75 14.0625 7.6875 13.1875 6.8125C12.3125 5.9375 11.25 5.5 10 5.5C11.25 5.5 12.3125 5.0625 13.1875 4.1875C14.0625 3.3125 14.5 2.25 14.5 0.999999C14.5 2.25 14.9375 3.3125 15.8125 4.1875C16.6875 5.0625 17.75 5.5 19 5.5C17.75 5.5 16.6875 5.9375 15.8125 6.8125C14.9375 7.6875 14.5 8.75 14.5 10Z" fill="black"/></g><defs><clipPath id="clip0_670_22"><rect width="20" height="20" fill="white"/></clipPath></defs></svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 19L7 16H4.5C4.09722 16 3.74306 15.8542 3.4375 15.5625C3.14583 15.2569 3 14.9028 3 14.5V3.5C3 3.09722 3.14583 2.75 3.4375 2.45833C3.74306 2.15278 4.09722 2 4.5 2H10.5C10.5 2.23611 10.5 2.47917 10.5 2.72917C10.5 2.96528 10.5 3.22222 10.5 3.5H4.5V14.5H15.5V9.5C15.7639 9.5 16.0208 9.5 16.2708 9.5C16.5208 9.5 16.7639 9.5 17 9.5V14.5C17 14.9028 16.8542 15.2569 16.5625 15.5625C16.2708 15.8542 15.9167 16 15.5 16H13L10 19ZM15.5 8C15.4861 8 15.4306 7.95833 15.3333 7.875C15.1389 7.08333 14.75 6.40278 14.1667 5.83333C13.5972 5.25 12.9167 4.86111 12.125 4.66667C12.0972 4.65278 12.0556 4.59722 12 4.5C12 4.47222 12.0417 4.41667 12.125 4.33333C12.9167 4.13889 13.5972 3.75694 14.1667 3.1875C14.75 2.60417 15.1389 1.91667 15.3333 1.125C15.3472 1.09722 15.4028 1.05556 15.5 1C15.5278 1 15.5833 1.04167 15.6667 1.125C15.875 1.91667 16.2639 2.59722 16.8333 3.16667C17.4028 3.73611 18.0833 4.125 18.875 4.33333C18.9028 4.33333 18.9444 4.38889 19 4.5C19 4.51389 18.9583 4.56944 18.875 4.66667C18.0833 4.86111 17.3958 5.25 16.8125 5.83333C16.2431 6.40278 15.8611 7.08333 15.6667 7.875C15.6667 7.90278 15.6111 7.94444 15.5 8Z" fill="black"/>
+</svg>

package/front_end/Images/src/speculative-loads.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M80-240v-480h80v480H80Zm560 0-57-56 144-144H240v-80h487L584-664l56-56 240 240-240 240Z"/></svg>

package/front_end/Images/src/text-analysis.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+<path d="M1.19209e-07 16.0001V14.5001H9V16.0001H1.19209e-07ZM1.19209e-07 12.2501V10.7501H14V12.2501H1.19209e-07ZM1.19209e-07 8.50012V7.00012H9V8.50012H1.19209e-07ZM12.5 7.00012C12.4861 7.00012 12.4306 6.95845 12.3333 6.87512C12.1389 6.08345 11.75 5.4029 11.1667 4.83345C10.5972 4.25012 9.91667 3.86123 9.125 3.66679C9.09722 3.6529 9.05556 3.59734 9 3.50012C9 3.47234 9.04167 3.41679 9.125 3.33345C9.91667 3.13901 10.5972 2.75707 11.1667 2.18762C11.75 1.60429 12.1389 0.916788 12.3333 0.125122C12.3472 0.0973434 12.4028 0.0556766 12.5 0.000121117C12.5278 0.000121117 12.5833 0.0417879 12.6667 0.125122C12.875 0.916788 13.2639 1.59734 13.8333 2.16679C14.4028 2.73623 15.0833 3.12512 15.875 3.33345C15.9028 3.33345 15.9444 3.38901 16 3.50012C16 3.51401 15.9583 3.56957 15.875 3.66679C15.0833 3.86123 14.3958 4.25012 13.8125 4.83345C13.2431 5.4029 12.8611 6.08345 12.6667 6.87512C12.6667 6.9029 12.6111 6.94457 12.5 7.00012Z" fill="black"/>
+</svg>

package/front_end/Tests.js

@@ -29,7 +29,7 @@
  */
 
 /**
- * @fileoverview This file contains small testing framework along with the
+ * @file This file contains small testing framework along with the
  * test suite for the frontend. These tests are a part of the continues build
  * and are executed by the devtools_browsertest.cc as a part of the
  * Interactive UI Test suite.
@@ -46,10 +46,6 @@
   let Root;
   /** @type {import('./core/sdk/sdk.js')} */
   let SDK;
-  /** @type {import('./panels/sources/sources.js')} */
-  let Sources;
-  /** @type {import('./panels/timeline/timeline.js')} */
-  let Timeline;
   /** @type {import('./ui/legacy/legacy.js')} */
   let UI;
   /** @type {import('./models/workspace/workspace.js')} */
@@ -57,7 +53,7 @@
   const TestSuite = class {
     /**
      * Test suite for interactive UI tests.
-     * @param {Object} domAutomationController DomAutomationController instance.
+     * @param domAutomationController DomAutomationController instance.
      */
     constructor(domAutomationController) {
       this.domAutomationController_ = domAutomationController;
@@ -76,7 +72,7 @@
 
   /**
    * Reports test failure.
-   * @param {string} message Failure description.
+   * @param message Failure description.
    */
   TestSuite.prototype.fail = function(message) {
     if (this.controlTaken_) {
@@ -88,9 +84,9 @@
 
   /**
    * Equals assertion tests that expected === actual.
-   * @param {!Object|boolean} expected Expected object.
-   * @param {!Object|boolean} actual Actual object.
-   * @param {string} opt_message User message to print if the test fails.
+   * @param expected Expected object.
+   * @param actual Actual object.
+   * @param opt_message User message to print if the test fails.
    */
   TestSuite.prototype.assertEquals = function(expected, actual, opt_message) {
     if (expected !== actual) {
@@ -104,8 +100,8 @@
 
   /**
    * True assertion tests that value == true.
-   * @param {!Object} value Actual object.
-   * @param {string} opt_message User message to print if the test fails.
+   * @param value Actual object.
+   * @param opt_message User message to print if the test fails.
    */
   TestSuite.prototype.assertTrue = function(value, opt_message) {
     this.assertEquals(true, Boolean(value), opt_message);
@@ -113,7 +109,7 @@
 
   /**
    * Takes control over execution.
-   * @param {{slownessFactor:number}=} options
+   * @param options
    */
   TestSuite.prototype.takeControl = function(options) {
     const {slownessFactor} = {slownessFactor: 1, ...options};
@@ -164,8 +160,6 @@
       HostModule,
       Root,
       SDK,
-      Sources,
-      Timeline,
       UI,
       Workspace,
     ] =
@@ -174,8 +168,6 @@
            self.runtime.loadLegacyModule('core/host/host.js'),
            self.runtime.loadLegacyModule('core/root/root.js'),
            self.runtime.loadLegacyModule('core/sdk/sdk.js'),
-           self.runtime.loadLegacyModule('panels/sources/sources.js'),
-           self.runtime.loadLegacyModule('panels/timeline/timeline.js'),
            self.runtime.loadLegacyModule('ui/legacy/legacy.js'),
            self.runtime.loadLegacyModule('models/workspace/workspace.js'),
          ]));
@@ -188,7 +180,7 @@
 
   /**
    * Run specified test on a fresh instance of the test suite.
-   * @param {Array<string>} args method name followed by its parameters.
+   * @param args method name followed by its parameters.
    */
   TestSuite.prototype.dispatchOnTestSuite = async function(args) {
     const methodName = args.shift();
@@ -205,7 +197,7 @@
   /**
    * Wrap an async method with TestSuite.{takeControl(), releaseControl()}
    * and invoke TestSuite.reportOk_ upon completion.
-   * @param {Array<string>} args method name followed by its parameters.
+   * @param args method name followed by its parameters.
    */
   TestSuite.prototype.waitForAsync = function(var_args) {
     const args = Array.prototype.slice.call(arguments);
@@ -216,11 +208,11 @@
 
   /**
    * Overrides the method with specified name until it's called first time.
-   * @param {!Object} receiver An object whose method to override.
-   * @param {string} methodName Name of the method to override.
-   * @param {!Function} override A function that should be called right after the
+   * @param receiver An object whose method to override.
+   * @param methodName Name of the method to override.
+   * @param override A function that should be called right after the
    *     overridden method returns.
-   * @param {?boolean} opt_sticky Whether restore original method after first run
+   * @param opt_sticky Whether restore original method after first run
    *     or not.
    */
   TestSuite.prototype.addSniffer = function(receiver, methodName, override, opt_sticky) {
@@ -250,8 +242,8 @@
 
   /**
    * Waits for current throttler invocations, if any.
-   * @param {!Common.Throttler} throttler
-   * @param {function()} callback
+   * @param throttler
+   * @param callback
    */
   TestSuite.prototype.waitForThrottler = function(throttler, callback) {
     const test = this;
@@ -282,7 +274,7 @@
   };
 
   /**
-   * @param {string} panelName Name of the panel to show.
+   * @param panelName Name of the panel to show.
    */
   TestSuite.prototype.showPanel = function(panelName) {
     return UI.InspectorView.InspectorView.instance().showPanel(panelName);
@@ -966,94 +958,6 @@
     }
   };
 
-  TestSuite.prototype.testScreenshotRecording = function() {
-    const test = this;
-
-    function performActionsInPage(callback) {
-      let count = 0;
-      const div = document.createElement('div');
-      div.setAttribute('style', 'left: 0px; top: 0px; width: 100px; height: 100px; position: absolute;');
-      document.body.appendChild(div);
-      requestAnimationFrame(frame);
-      function frame() {
-        const color = [0, 0, 0];
-        color[count % 3] = 255;
-        div.style.backgroundColor = 'rgb(' + color.join(',') + ')';
-        if (++count > 10) {
-          requestAnimationFrame(callback);
-        } else {
-          requestAnimationFrame(frame);
-        }
-      }
-    }
-
-    const captureFilmStripSetting =
-        Common.Settings.Settings.instance().createSetting('timeline-capture-film-strip', false);
-    captureFilmStripSetting.set(true);
-    test.evaluateInConsole_(performActionsInPage.toString(), function() {});
-    test.invokeAsyncWithTimeline_('performActionsInPage', onTimelineDone);
-
-    function onTimelineDone() {
-      captureFilmStripSetting.set(false);
-      const filmStripModel = Timeline.TimelinePanel.TimelinePanel.instance().performanceModel?.filmStripModel();
-      const frames = filmStripModel.frames();
-      test.assertTrue(frames.length > 4 && typeof frames.length === 'number');
-      loadFrameImages(frames);
-    }
-
-    function loadFrameImages(frames) {
-      const readyImages = [];
-      for (const frame of frames) {
-        frame.imageDataPromise().then(onGotImageData);
-      }
-
-      function onGotImageData(dataUri) {
-        const image = new Image();
-        test.assertTrue(Boolean(dataUri), 'No image data for frame');
-        image.addEventListener('load', onLoad);
-        image.src = dataUri;
-      }
-
-      function onLoad(event) {
-        readyImages.push(event.target);
-        if (readyImages.length === frames.length) {
-          validateImagesAndCompleteTest(readyImages);
-        }
-      }
-    }
-
-    function validateImagesAndCompleteTest(images) {
-      let redCount = 0;
-      let greenCount = 0;
-      let blueCount = 0;
-
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d', {willReadFrequently: true});
-      for (const image of images) {
-        test.assertTrue(image.naturalWidth > 10);
-        test.assertTrue(image.naturalHeight > 10);
-        canvas.width = image.naturalWidth;
-        canvas.height = image.naturalHeight;
-        ctx.drawImage(image, 0, 0);
-        const data = ctx.getImageData(0, 0, 1, 1);
-        const color = Array.prototype.join.call(data.data, ',');
-        if (data.data[0] > 200) {
-          redCount++;
-        } else if (data.data[1] > 200) {
-          greenCount++;
-        } else if (data.data[2] > 200) {
-          blueCount++;
-        } else {
-          test.fail('Unexpected color: ' + color);
-        }
-      }
-      test.assertTrue(redCount && greenCount && blueCount, 'Color check failed');
-      test.releaseControl();
-    }
-
-    test.takeControl();
-  };
-
   TestSuite.prototype.testSettings = function() {
     const test = this;
 
@@ -1125,44 +1029,55 @@
     }
   };
 
-  TestSuite.prototype.testRawHeadersWithHSTS = function(url) {
+  TestSuite.prototype.testRawHeadersWithHSTS = async function(url) {
     const test = this;
     test.takeControl({slownessFactor: 10});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.ResponseReceived, onResponseReceived);
-
-    this.evaluateInConsole_(`location.href= "${url}";`, () => {});
 
-    let count = 0;
-    function onResponseReceived(event) {
-      const networkRequest = event.data.request;
-      if (!networkRequest.url().startsWith('http')) {
-        return;
+    const rawResponseEventsPromise = new Promise(resolve => {
+      let count = 0;
+      this.addSniffer(SDK.NetworkManager.NetworkDispatcher.prototype, 'responseReceivedExtraInfo', function() {
+        if (++count === 2) {
+          resolve();
+        }
+      }, /* sticky=*/ true);
+    });
+    const requests = await new Promise(resolve => {
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.NetworkManager.NetworkManager, SDK.NetworkManager.Events.ResponseReceived, onResponseReceived);
+      const requests = [];
+      function onResponseReceived(event) {
+        const networkRequest = event.data.request;
+        console.error(`${networkRequest.url()} ${networkRequest.statusCode}`);
+        if (!networkRequest.url().startsWith('http')) {
+          return;
+        }
+        requests.push(networkRequest);
+        if (requests.length === 3) {
+          resolve(requests);
+        }
       }
-      switch (++count) {
-        case 1:  // Original redirect
-          test.assertEquals(301, networkRequest.statusCode);
-          test.assertEquals('Moved Permanently', networkRequest.statusText);
-          test.assertTrue(url.endsWith(networkRequest.responseHeaderValue('Location')));
-          break;
+      this.evaluateInConsole_(`location.href= "${url}";`, () => {});
+    });
 
-        case 2:  // HSTS internal redirect
-          test.assertTrue(networkRequest.url().startsWith('http://'));
-          test.assertEquals(307, networkRequest.statusCode);
-          test.assertEquals('Internal Redirect', networkRequest.statusText);
-          test.assertEquals('HSTS', networkRequest.responseHeaderValue('Non-Authoritative-Reason'));
-          test.assertTrue(networkRequest.responseHeaderValue('Location').startsWith('https://'));
-          break;
+    await rawResponseEventsPromise;
 
-        case 3:  // Final response
-          test.assertTrue(networkRequest.url().startsWith('https://'));
-          test.assertTrue(networkRequest.requestHeaderValue('Referer').startsWith('http://127.0.0.1'));
-          test.assertEquals(200, networkRequest.statusCode);
-          test.assertEquals('OK', networkRequest.statusText);
-          test.assertEquals('132', networkRequest.responseHeaderValue('Content-Length'));
-          test.releaseControl();
-      }
-    }
+    test.assertTrue(requests[0] !== requests[1]);
+    test.assertEquals(301, requests[0].statusCode);
+    test.assertEquals('Moved Permanently', requests[0].statusText);
+    test.assertTrue(url.endsWith(requests[0].responseHeaderValue('Location')));
+
+    test.assertTrue(requests[1].url().startsWith('http://'));
+    test.assertEquals(307, requests[1].statusCode);
+    test.assertEquals('Internal Redirect', requests[1].statusText);
+    test.assertEquals('HSTS', requests[1].responseHeaderValue('Non-Authoritative-Reason'));
+    test.assertTrue(requests[1].responseHeaderValue('Location').startsWith('https://'));
+
+    test.assertTrue(requests[2].url().startsWith('https://'));
+    test.assertTrue(requests[2].requestHeaderValue('Referer').startsWith('http://127.0.0.1'));
+    test.assertEquals(200, requests[2].statusCode);
+    test.assertEquals('OK', requests[2].statusText);
+    test.assertEquals('132', requests[2].responseHeaderValue('Content-Length'));
+    test.releaseControl();
   };
 
   TestSuite.prototype.waitForTestResultsInConsole = function() {
@@ -1208,74 +1123,6 @@
     this.takeControl();
   };
 
-  TestSuite.prototype._overrideMethod = function(receiver, methodName, override) {
-    const original = receiver[methodName];
-    if (typeof original !== 'function') {
-      this.fail(`TestSuite._overrideMethod: ${methodName} is not a function`);
-      return;
-    }
-    receiver[methodName] = function() {
-      let value;
-      try {
-        value = original.apply(receiver, arguments);
-      } finally {
-        receiver[methodName] = original;
-      }
-      override.apply(original, arguments);
-      return value;
-    };
-  };
-
-  TestSuite.prototype.startTimeline = function(callback) {
-    const test = this;
-    this.showPanel('timeline').then(function() {
-      const timeline = Timeline.TimelinePanel.TimelinePanel.instance();
-      test._overrideMethod(timeline, 'recordingStarted', callback);
-      timeline._toggleRecording();
-    });
-  };
-
-  TestSuite.prototype.stopTimeline = function(callback) {
-    const timeline = Timeline.TimelinePanel.TimelinePanel.instance();
-    this._overrideMethod(timeline, 'loadingComplete', callback);
-    timeline._toggleRecording();
-  };
-
-  TestSuite.prototype.invokePageFunctionAsync = function(functionName, opt_args, callback_is_always_last) {
-    const callback = arguments[arguments.length - 1];
-    const doneMessage = `DONE: ${functionName}.${++this._asyncInvocationId}`;
-    const argsString = arguments.length < 3 ?
-        '' :
-        Array.prototype.slice.call(arguments, 1, -1).map(arg => JSON.stringify(arg)).join(',') + ',';
-    this.evaluateInConsole_(
-        `${functionName}(${argsString} function() { console.log('${doneMessage}'); });`, function() {});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageAdded, onConsoleMessage);
-
-    function onConsoleMessage(event) {
-      const text = event.data.messageText;
-      if (text === doneMessage) {
-        SDK.TargetManager.TargetManager.instance().removeModelListener(
-            SDK.ConsoleModel.ConsoleModel, SDK.ConsoleModel.Events.MessageAdded, onConsoleMessage);
-        callback();
-      }
-    }
-  };
-
-  TestSuite.prototype.invokeAsyncWithTimeline_ = function(functionName, callback) {
-    const test = this;
-
-    this.startTimeline(onRecordingStarted);
-
-    function onRecordingStarted() {
-      test.invokePageFunctionAsync(functionName, pageActionsDone);
-    }
-
-    function pageActionsDone() {
-      test.stopTimeline(callback);
-    }
-  };
-
   TestSuite.prototype.enableExperiment = function(name) {
     Root.Runtime.experiments.enableForTest(name);
   };
@@ -1354,8 +1201,8 @@
   };
 
   /**
-   * @param {string} url
-   * @return {!Promise<!SDK.Target.Target>}
+   * @param url
+   * @returns
    */
   async function createIsolatedTarget(url, opt_browserContextIds) {
     const targetAgent = SDK.TargetManager.TargetManager.instance().rootTarget()?.targetAgent();
@@ -1530,8 +1377,8 @@
 
   /**
    * Serializes array of uiSourceCodes to string.
-   * @param {!Array.<!Workspace.UISourceCode>} uiSourceCodes
-   * @return {string}
+   * @param uiSourceCodes
+   * @returns
    */
   TestSuite.prototype.uiSourceCodesToString_ = function(uiSourceCodes) {
     const names = [];
@@ -1569,11 +1416,11 @@
 
   /**
    * Returns all loaded non anonymous uiSourceCodes.
-   * @return {!Array.<!Workspace.UISourceCode>}
+   * @returns
    */
   TestSuite.prototype.nonAnonymousUISourceCodes_ = function() {
     /**
-     * @param {!Workspace.UISourceCode} uiSourceCode
+     * @param uiSourceCode
      */
     function filterOutService(uiSourceCode) {
       return !uiSourceCode.project().isServiceProject();
@@ -1583,12 +1430,12 @@
     return uiSourceCodes.filter(filterOutService);
   };
 
-  /*
- * Evaluates the code in the console as if user typed it manually and invokes
- * the callback when the result message is received and added to the console.
- * @param {string} code
- * @param {function(string)} callback
- */
+  /**
+   * Evaluates the code in the console as if user typed it manually and invokes
+   * the callback when the result message is received and added to the console.
+   * @param {string} code
+   * @param {function(string)} callback
+   */
   TestSuite.prototype.evaluateInConsole_ = function(code, callback) {
     function innerEvaluate() {
       UI.Context.Context.instance().removeFlavorChangeListener(
@@ -1616,9 +1463,9 @@
   /**
    * Checks that all expected scripts are present in the scripts list
    * in the Scripts panel.
-   * @param {!Array.<string>} expected Regular expressions describing
+   * @param expected Regular expressions describing
    *     expected script names.
-   * @return {boolean} Whether all the scripts are in "scripts-files" select
+   * @returns Whether all the scripts are in "scripts-files" select
    *     box
    */
   TestSuite.prototype._scriptsAreParsed = function(expected) {
@@ -1638,7 +1485,7 @@
 
   /**
    * Waits for script pause, checks expectations, and invokes the callback.
-   * @param {function():void} callback
+   * @param callback
    */
   TestSuite.prototype._waitForScriptPause = function(callback) {
     this.addSniffer(SDK.DebuggerModel.DebuggerModel.prototype, 'pausedScript', callback);
@@ -1647,7 +1494,8 @@
   /**
    * Waits until all the scripts are parsed and invokes the callback.
    */
-  TestSuite.prototype._waitUntilScriptsAreParsed = function(expectedScripts, callback) {
+  TestSuite.prototype._waitUntilScriptsAreParsed = async function(expectedScripts, callback) {
+    const Sources = await self.runtime.loadLegacyModule('panels/sources/sources.js');
     const test = this;
 
     function waitForAllScripts() {

package/front_end/application_tokens.css

@@ -28,7 +28,6 @@
   --icon-file-image: var(--sys-color-green-bright);
   --icon-file-script: var(--sys-color-orange-bright);
   --icon-file-styles: var(--sys-color-purple-bright);
-  --icon-fold-marker: var(--sys-color-on-surface-subtle);
   --icon-folder-authored: var(--sys-color-orange);
   --icon-folder-primary: var(--sys-color-on-surface-subtle);
   --icon-folder-deployed: var(--sys-color-primary-bright);
@@ -229,6 +228,13 @@
    */
   --app-color-ai-assistance-input-divider: rgb(0 0 0 / 10%);
 
+  /**
+  * Gradient colors for Google AI, used in the Global AI button in promotion enabled state
+  */
+  --app-color-google-ai-blue: #4285f4;
+  --app-color-google-ai-green: #2daeb8;
+  --app-gradient-google-ai: linear-gradient(46deg, var(--app-color-google-ai-blue) 32.34%, var(--app-color-google-ai-green) 98.11%);
+
   &.baseline-default {
     /**
      * Color for navigation drawers.

package/front_end/core/common/Base64.test.ts

@@ -8,7 +8,7 @@ describe('Base64 decoder', () => {
   function decode(str: string) {
     const encoded = btoa(str);
     const decoded = Common.Base64.decode(encoded);
-    const view = new DataView(decoded);
+    const view = new DataView(decoded.buffer);
     for (let idx = 0; idx < str.length; idx++) {
       assert.strictEqual(view.getUint8(idx), str.charCodeAt(idx));
     }