chrome-devtools-frontend 1.0.938678 → 1.0.939473

package/.stylelintrc.json

@@ -12,15 +12,6 @@
     "declaration-no-important": true,
     "color-named": "never",
     "max-empty-lines": 1,
-    "property-no-vendor-prefix": [
-      true,
-      {
-        "ignoreProperties": [
-          "border-image",
-          "/^mask-/"
-        ]
-      }
-    ],
     "selector-type-no-unknown": [
       true,
       {
@@ -28,6 +19,13 @@
           "/^devtools-/"
         ]
       }
-    ]
+    ],
+    "max-line-length": null,
+    "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "selector-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "media-feature-name-no-vendor-prefix": null
   }
 }

package/config/gni/all_devtools_files.gni

@@ -58,7 +58,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/layers_test_runner/layers_test_runner.js",
   "front_end/panels/layer_viewer/module.json",
   "front_end/panels/layers/module.json",
-  "front_end/entrypoints/main/module.json",
   "front_end/panels/media/module.json",
   "front_end/entrypoints/ndb_app/ndb_app.json",
   "front_end/legacy_test_runner/network_test_runner/network_test_runner.js",

package/config/gni/devtools_grd_files.gni

@@ -595,6 +595,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSRule.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
+  "front_end/core/sdk/CategorizedBreakpoint.js",
   "front_end/core/sdk/ChildTargetManager.js",
   "front_end/core/sdk/CompilerSourceMappingContentProvider.js",
   "front_end/core/sdk/Connections.js",
@@ -607,6 +608,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/DOMModel.js",
   "front_end/core/sdk/DebuggerModel.js",
   "front_end/core/sdk/EmulationModel.js",
+  "front_end/core/sdk/EventBreakpointsModel.js",
   "front_end/core/sdk/FilmStripModel.js",
   "front_end/core/sdk/FrameAssociated.js",
   "front_end/core/sdk/FrameManager.js",

package/docs/triage_guidelines.md

@@ -43,22 +43,24 @@ Issues in the untriaged queue should receive a meaningful response within a busi
 
 ## How should issues be triaged?
 
-An issue is triaged when it meets the following criteria:
-
-- Priority is set correctly
-- Component is set correctly
-- Type is set correctly especially consider Feature vs Bug vs Bug-Regression
-- Status is set correctly (Available most of the time)
-- Request bisection from the Chrome Test Engineer team by adding the label "Needs-Bisect".
+- Close issues as `WontFix` if they don't reproduce (in simple cases) or are requests for features we've already concluded not to pursue.
+- Close issues as `Archived` that are valid, but it seems unlikely that we will get there anytime soon.
+- Move issues out of `Platform>DevTools` if they are not DevTools issues (but just reported via the menu item in DevTools), put on the `Hotlist-DevTools-Triaged` and leave the `Untriaged` status as is.
+- Assign regression bugs with bisects to individuals directly and set the status to `Assigned`.  
+  - Put proper `Platform>DevTools>XXX` component(s) on the issue and do an initial check-in regarding the priority.
+  - Put one of the following labels on it and set the status to "Available":
+  - `Hotlist-DevTools-ProductReview` if it's controversial or clear that consensus needs to be built first.
+  - `Hotlist-DevTools-BrowserAutomation-Backlog` if it's an issue related to ChromeDriver or puppeteer.
+  - `Hotlist-DevTools-Debugging-Backlog` if it's a debugging issue.
+  - `Hotlist-DevTools-DesignAccessibility-Backlog` if it's a design or accessibility issue.
+  - `Hotlist-DevTools-Performance-Backlog` if the issue is related to our performance tooling (i.e. Performance panel, Lighthouse).
+  - `Hotlist-DevTools-Backlog` if it's a general DevTools issue that is not specific to one of the core areas.
+- Also remember to put the Needs-UX label on it, if help from a designer is likely to be required.
 
 ### Setting Assigned or Available
 
 Set issues to Available if they don’t need immediate action and nobody right now and in the short-term future (an iteration) needs to work on it.
 
-If you think they should be addressed in the short-term please add the label “Hotlist-DevTools-CurrentSprint”.
-
-If you think they should be addressed mid-term or the next iteration, please add the label “Hotlist-DevTools-Backlog”
-
 Issues that are handled by Microsoft have the label “Hotlist-DevTools-MS-Backlog” and “Hotlist-DevTools-MS-CurrentSprint” respectively and can be considered triaged.
 
 If you think they are super urgent, please assign them to yangguo@chromium.org and cc bmeurer@chromium.org and hablich@chromium.org.

package/front_end/Tests.js

@@ -1290,6 +1290,7 @@
 
   TestSuite.prototype.testInspectedElementIs = async function(nodeName) {
     this.takeControl();
+    await self.runtime.loadLegacyModule('panels/elements/elements-legacy.js');
     if (!Elements.ElementsPanel.firstInspectElementNodeNameForTest) {
       await new Promise(f => this.addSniffer(Elements.ElementsPanel, 'firstInspectElementCompletedForTest', f));
     }
@@ -1331,8 +1332,8 @@
     const browserContextIds = [];
     const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
 
-    const target1 = await createIsolatedTarget(url);
-    const target2 = await createIsolatedTarget(url);
+    const target1 = await createIsolatedTarget(url, browserContextIds);
+    const target2 = await createIsolatedTarget(url, browserContextIds);
 
     const response = await targetAgent.invoke_getBrowserContexts();
     this.assertEquals(response.browserContextIds.length, 2);
@@ -1356,34 +1357,37 @@
     this.assertEquals(removedTargets.indexOf(target2) !== -1, true);
 
     this.releaseControl();
+  };
 
-    /**
-     * @param {string} url
-     * @return {!Promise<!SDK.Target>}
-     */
-    async function createIsolatedTarget(url) {
-      const {browserContextId} = await targetAgent.invoke_createBrowserContext();
-      browserContextIds.push(browserContextId);
+  /**
+   * @param {string} url
+   * @return {!Promise<!SDK.Target>}
+   */
+  async function createIsolatedTarget(url, opt_browserContextIds) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    const {browserContextId} = await targetAgent.invoke_createBrowserContext();
+    if (opt_browserContextIds) {
+      opt_browserContextIds.push(browserContextId);
+    }
 
-      const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
-      await targetAgent.invoke_attachToTarget({targetId, flatten: true});
+    const {targetId} = await targetAgent.invoke_createTarget({url: 'about:blank', browserContextId});
+    await targetAgent.invoke_attachToTarget({targetId, flatten: true});
 
-      const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
-      const pageAgent = target.pageAgent();
-      await pageAgent.invoke_enable();
-      await pageAgent.invoke_navigate({url});
-      return target;
-    }
+    const target = self.SDK.targetManager.targets().find(target => target.id() === targetId);
+    const pageAgent = target.pageAgent();
+    await pageAgent.invoke_enable();
+    await pageAgent.invoke_navigate({url});
+    return target;
+  }
 
-    async function disposeBrowserContext(browserContextId) {
-      const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
-      await targetAgent.invoke_disposeBrowserContext({browserContextId});
-    }
+  async function disposeBrowserContext(browserContextId) {
+    const targetAgent = self.SDK.targetManager.mainTarget().targetAgent();
+    await targetAgent.invoke_disposeBrowserContext({browserContextId});
+  }
 
-    async function evalCode(target, code) {
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
-    }
-  };
+  async function evalCode(target, code) {
+    return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+  }
 
   TestSuite.prototype.testInputDispatchEventsToOOPIF = async function() {
     this.takeControl();
@@ -1391,14 +1395,12 @@
     await new Promise(callback => this._waitForTargets(2, callback));
 
     async function takeLogs(target) {
-      const code = `
+      return await evalCode(target, `
         (function() {
           var result = window.logs.join(' ');
           window.logs = [];
           return result;
-        })()
-      `;
-      return (await target.runtimeAgent().invoke_evaluate({expression: code})).result.value;
+        })()`);
     }
 
     let parentFrameOutput;
@@ -1437,6 +1439,38 @@
     this.releaseControl();
   };
 
+  TestSuite.prototype.testInputDispatchEventsToCorrectTarget = async function() {
+    this.takeControl();
+
+    const mainTarget = self.SDK.targetManager.mainTarget();
+    const otherTarget = await createIsolatedTarget('about:blank');
+
+    const setupLogging = `
+      window.logs = [];
+      ['dragenter', 'keydown', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup',
+       'click', 'touchcancel', 'touchend', 'touchmove', 'touchstart',
+      ].forEach((event) => window.addEventListener(event, (e) => logs.push(e.type)));`;
+    await evalCode(mainTarget, setupLogging);
+    await evalCode(otherTarget, setupLogging);
+
+    const inputAgent = mainTarget.inputAgent();
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mousePressed', button: 'left', clickCount: 1, x: 100, y: 250});
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mouseMoved', button: 'left', clickCount: 1, x: 110, y: 270});
+    await inputAgent.invoke_dispatchMouseEvent({type: 'mouseReleased', button: 'left', clickCount: 1, x: 110, y: 270});
+    await inputAgent.invoke_dispatchDragEvent(
+        {type: 'dragEnter', x: 100, y: 250, data: {items: [], dragOperationsMask: 1}});
+    await inputAgent.invoke_synthesizeTapGesture({x: 100, y: 250});
+    await inputAgent.invoke_dispatchKeyEvent({type: 'keyDown', key: 'a'});
+
+    const mainTargetEvents = await evalCode(mainTarget, ' logs.join(\' \')');
+    const otherTargetEvents = await evalCode(otherTarget, 'logs.join(\' \')');
+    this.assertEquals(
+        'mainTargetEvents: mouseover mousedown mousemove mouseup click dragenter keydown; otherTargetEvents: ',
+        `mainTargetEvents: ${mainTargetEvents}; otherTargetEvents: ${otherTargetEvents}`);
+
+    this.releaseControl();
+  };
+
   TestSuite.prototype.testLoadResourceForFrontend = async function(baseURL, fileURL) {
     const test = this;
     const loggedHeaders = new Set(['cache-control', 'pragma']);

package/front_end/core/host/InspectorFrontendHost.ts

@@ -364,13 +364,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
 export let InspectorFrontendHostInstance: InspectorFrontendHostStub = window.InspectorFrontendHost;
 
 class InspectorFrontendAPIImpl {
-  readonly #debugFrontend: boolean;
-
   constructor() {
-    this.#debugFrontend = (Boolean(Root.Runtime.Runtime.queryParam('debugFrontend'))) ||
-        // @ts-ignore Compatibility hacks
-        (window['InspectorTest'] && window['InspectorTest']['debugTest']);
-
     for (const descriptor of EventDescriptors) {
       // @ts-ignore Dispatcher magic
       this[descriptor[1]] = this.dispatch.bind(this, descriptor[0], descriptor[2], descriptor[3]);
@@ -378,35 +372,27 @@ class InspectorFrontendAPIImpl {
   }
 
   private dispatch(name: symbol, signature: string[], runOnceLoaded: boolean, ...params: string[]): void {
-    if (this.#debugFrontend) {
-      setTimeout(() => innerDispatch(), 0);
-    } else {
-      innerDispatch();
-    }
-
-    function innerDispatch(): void {
-      // Single argument methods get dispatched with the param.
-      if (signature.length < 2) {
-        try {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
-        } catch (error) {
-          console.error(error + ' ' + error.stack);
-        }
-        return;
-      }
-      const data: {
-        [x: string]: string,
-      } = {};
-      for (let i = 0; i < signature.length; ++i) {
-        data[signature[i]] = params[i];
-      }
+    // Single argument methods get dispatched with the param.
+    if (signature.length < 2) {
       try {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
       } catch (error) {
         console.error(error + ' ' + error.stack);
       }
+      return;
+    }
+    const data: {
+      [x: string]: string,
+    } = {};
+    for (let i = 0; i < signature.length; ++i) {
+      data[signature[i]] = params[i];
+    }
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
+    } catch (error) {
+      console.error(error + ' ' + error.stack);
     }
   }
 

package/front_end/core/host/UserMetrics.ts

@@ -378,6 +378,7 @@ export const PanelCodes: {
   'issues-pane': 37,
   'settings-keybinds': 38,
   'cssoverview': 39,
+  'chrome_recorder': 40,
 };
 
 export const SidebarPaneCodes: {

package/front_end/core/i18n/locales/en-US.json

@@ -401,6 +401,21 @@
   "core/sdk/DOMDebuggerModel.ts | xhr": {
     "message": "XHR"
   },
+  "core/sdk/EventBreakpointsModel.ts | auctionWorklet": {
+    "message": "Ad Auction Worklet"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletBiddingStart": {
+    "message": "Bidder Bidding Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletReportingStart": {
+    "message": "Bidder Reporting Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletReportingStart": {
+    "message": "Seller Reporting Phase Start"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletScoringStart": {
+    "message": "Seller Scoring Phase Start"
+  },
   "core/sdk/NetworkManager.ts | crossoriginReadBlockingCorb": {
     "message": "Cross-Origin Read Blocking (CORB) blocked cross-origin response {PH1} with MIME type {PH2}. See https://www.chromestatus.com/feature/5629709824032768 for more details."
   },
@@ -935,6 +950,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "Forces CSS color-gamut media feature"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "Forces CSS forced-colors media feature"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "Forces CSS prefers-color-scheme media feature"
   },
@@ -9147,7 +9165,7 @@
     "message": "Coverage: n/a"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Coverage: {PH1} %"
+    "message": "Coverage: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Show Details"

package/front_end/core/i18n/locales/en-XL.json

@@ -401,6 +401,21 @@
   "core/sdk/DOMDebuggerModel.ts | xhr": {
     "message": "X̂H́R̂"
   },
+  "core/sdk/EventBreakpointsModel.ts | auctionWorklet": {
+    "message": "Âd́ Âúĉt́îón̂ Ẃôŕk̂ĺêt́"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletBiddingStart": {
+    "message": "B̂íd̂d́êŕ B̂íd̂d́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeBidderWorkletReportingStart": {
+    "message": "B̂íd̂d́êŕ R̂ép̂ór̂t́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletReportingStart": {
+    "message": "Ŝél̂ĺêŕ R̂ép̂ór̂t́îńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
+  "core/sdk/EventBreakpointsModel.ts | beforeSellerWorkletScoringStart": {
+    "message": "Ŝél̂ĺêŕ Ŝćôŕîńĝ Ṕĥáŝé Ŝt́âŕt̂"
+  },
   "core/sdk/NetworkManager.ts | crossoriginReadBlockingCorb": {
     "message": "Ĉŕôśŝ-Ór̂íĝín̂ Ŕêád̂ B́l̂óĉḱîńĝ (ĆÔŔB̂) b́l̂óĉḱêd́ ĉŕôśŝ-ór̂íĝín̂ ŕêśp̂ón̂śê {PH1} ẃît́ĥ ḾÎḾÊ t́ŷṕê {PH2}. Śêé ĥt́t̂ṕŝ://ẃŵẃ.ĉh́r̂óm̂éŝt́ât́ûś.ĉóm̂/f́êát̂úr̂é/5629709824032768 f̂ór̂ ḿôŕê d́êt́âíl̂ś."
   },
@@ -935,6 +950,9 @@
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssColorgamutMediaFeature": {
     "message": "F̂ór̂ćêś ĈŚŜ color-gamut ḿêd́îá f̂éât́ûŕê"
   },
+  "entrypoints/inspector_main/RenderingOptions.ts | forcesCssForcedColors": {
+    "message": "F̂ór̂ćêś ĈŚŜ f́ôŕĉéd̂-ćôĺôŕŝ ḿêd́îá f̂éât́ûŕê"
+  },
   "entrypoints/inspector_main/RenderingOptions.ts | forcesCssPreferscolorschemeMedia": {
     "message": "F̂ór̂ćêś ĈŚŜ prefers-color-scheme ḿêd́îá f̂éât́ûŕê"
   },
@@ -9147,7 +9165,7 @@
     "message": "Ĉóv̂ér̂áĝé: n̂/á"
   },
   "panels/sources/CoveragePlugin.ts | coverageS": {
-    "message": "Ĉóv̂ér̂áĝé: {PH1} %"
+    "message": "Ĉóv̂ér̂áĝé: {PH1}"
   },
   "panels/sources/CoveragePlugin.ts | showDetails": {
     "message": "Ŝh́ôẃ D̂ét̂áîĺŝ"

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -644,6 +644,10 @@ export class TargetBase {
     return this.getAgent('Emulation');
   }
 
+  eventBreakpointsAgent(): ProtocolProxyApi.EventBreakpointsApi {
+    return this.getAgent('EventBreakpoints');
+  }
+
   heapProfilerAgent(): ProtocolProxyApi.HeapProfilerApi {
     return this.getAgent('HeapProfiler');
   }

package/front_end/core/root/Runtime.ts

@@ -232,6 +232,10 @@ export class Runtime {
   getModulesMap(): {[x: string]: Module} {
     return this.modulesMap;
   }
+
+  loadLegacyModule(modulePath: string): Promise<void> {
+    return import(`../../${modulePath}`);
+  }
 }
 
 export class ModuleDescriptor {