chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -5,9 +5,6 @@
 export const enum FormatterActions {
   FORMAT = 'format',
   PARSE_CSS = 'parseCSS',
-  HTML_OUTLINE = 'htmlOutline',
-  JAVASCRIPT_OUTLINE = 'javaScriptOutline',
-  JAVASCRIPT_IDENTIFIERS = 'javaScriptIdentifiers',
   JAVASCRIPT_SUBSTITUTE = 'javaScriptSubstitute',
   JAVASCRIPT_SCOPE_TREE = 'javaScriptScopeTree',
   EVALUATE_JAVASCRIPT_SUBSTRING = 'evaluatableJavaScriptSubstring',

package/front_end/entrypoints/formatter_worker/FormatterWorker.ts

@@ -39,7 +39,6 @@ import type * as CodeMirrorModule from '../../third_party/codemirror/codemirror-
 
 import {AcornTokenizer, ECMA_VERSION} from './AcornTokenizer.js';
 import {CSSFormatter} from './CSSFormatter.js';
-import {ESTreeWalker} from './ESTreeWalker.js';
 import {FormattedContentBuilder} from './FormattedContentBuilder.js';
 import {type FormatResult} from './FormatterActions.js';
 import {HTMLFormatter} from './HTMLFormatter.js';
@@ -141,58 +140,6 @@ export function evaluatableJavaScriptSubstring(content: string): string {
   }
 }
 
-export function javaScriptIdentifiers(content: string): {
-  name: (string|undefined),
-  offset: number,
-}[] {
-  let root: Acorn.ESTree.Node|null = null;
-  try {
-    root = Acorn.parse(content, {ecmaVersion: ECMA_VERSION, ranges: false}) as Acorn.ESTree.Node | null;
-  } catch (e) {
-  }
-
-  const identifiers: Acorn.ESTree.Node[] = [];
-  const walker = new ESTreeWalker(beforeVisit);
-
-  function isFunction(node: Acorn.ESTree.Node): boolean {
-    return node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' ||
-        node.type === 'ArrowFunctionExpression';
-  }
-
-  function beforeVisit(node: Acorn.ESTree.Node): Object|undefined {
-    if (isFunction(node)) {
-      if (node.id) {
-        identifiers.push(node.id);
-      }
-      return ESTreeWalker.SkipSubtree;
-    }
-
-    if (node.type !== 'Identifier') {
-      return;
-    }
-
-    if (node.parent && node.parent.type === 'MemberExpression') {
-      const parent = (node.parent as Acorn.ESTree.MemberExpression);
-      if (parent.property === node && !parent.computed) {
-        return;
-      }
-    }
-    identifiers.push(node);
-    return;
-  }
-
-  if (!root || root.type !== 'Program' || root.body.length !== 1 || !isFunction(root.body[0])) {
-    return [];
-  }
-
-  const functionNode = (root.body[0] as Acorn.ESTree.FunctionDeclaration);
-  for (const param of functionNode.params) {
-    walker.walk(param);
-  }
-  walker.walk(functionNode.body);
-  return identifiers.map(id => ({name: 'name' in id && id.name || undefined, offset: id.start}));
-}
-
 export function format(mimeType: string, text: string, indentString?: string): FormatResult {
   // Default to a 4-space indent.
   indentString = indentString || '    ';
@@ -219,6 +166,7 @@ export function format(mimeType: string, text: string, indentString?: string): F
         formatter.format(text, lineEndings, 0, text.length);
         break;
       }
+      case 'application/manifest+json':
       case 'application/json': {
         const formatter = new JSONFormatter(builder);
         formatter.format(text, lineEndings, 0, text.length);

package/front_end/entrypoints/formatter_worker/JavaScriptFormatter.ts

@@ -54,6 +54,7 @@ export class JavaScriptFormatter {
     const ast = Acorn.parse(this.#content, {
       ranges: false,
       preserveParens: true,
+      allowAwaitOutsideFunction: true,
       allowImportExportEverywhere: true,
       ecmaVersion: ECMA_VERSION,
       allowHashBang: true,

package/front_end/entrypoints/formatter_worker/formatter_worker-entrypoint.ts

@@ -23,15 +23,6 @@ self.onmessage = function(event: MessageEvent): void {
     case FormatterActions.PARSE_CSS:
       FormatterWorker.CSSRuleParser.parseCSS(params.content, self.postMessage);
       break;
-    case FormatterActions.HTML_OUTLINE:
-      FormatterWorker.HTMLOutline.htmlOutline(params.content, self.postMessage);
-      break;
-    case FormatterActions.JAVASCRIPT_OUTLINE:
-      FormatterWorker.JavaScriptOutline.javaScriptOutline(params.content, self.postMessage);
-      break;
-    case FormatterActions.JAVASCRIPT_IDENTIFIERS:
-      self.postMessage(FormatterWorker.FormatterWorker.javaScriptIdentifiers(params.content));
-      break;
     case FormatterActions.JAVASCRIPT_SUBSTITUTE: {
       const mapping = new Map<string, string>(params.mapping);
       self.postMessage(FormatterWorker.Substitute.substituteExpression(params.content, mapping));

package/front_end/entrypoints/formatter_worker/formatter_worker.ts

@@ -12,9 +12,7 @@ import * as CSSRuleParser from './CSSRuleParser.js';
 import * as FormattedContentBuilder from './FormattedContentBuilder.js';
 import * as FormatterWorker from './FormatterWorker.js';
 import * as HTMLFormatter from './HTMLFormatter.js';
-import * as HTMLOutline from './HTMLOutline.js';
 import * as JavaScriptFormatter from './JavaScriptFormatter.js';
-import * as JavaScriptOutline from './JavaScriptOutline.js';
 import * as JSONFormatter from './JSONFormatter.js';
 import * as ScopeParser from './ScopeParser.js';
 import * as Substitute from './Substitute.js';
@@ -25,9 +23,7 @@ export {
   FormattedContentBuilder,
   FormatterWorker,
   HTMLFormatter,
-  HTMLOutline,
   JavaScriptFormatter,
-  JavaScriptOutline,
   JSONFormatter,
   ScopeParser,
   Substitute,

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -79,7 +79,9 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
         }
       }
 
-      void target.runtimeAgent().invoke_runIfWaitingForDebugger();
+      if (type === SDK.Target.Type.Frame) {
+        void target.runtimeAgent().invoke_runIfWaitingForDebugger();
+      }
     }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
 
     new SourcesPanelIndicator();
@@ -136,7 +138,7 @@ export class FocusDebuggeeActionDelegate implements UI.ActionRegistration.Action
     return focusDebuggeeActionDelegateInstance;
   }
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
     if (!mainTarget) {
       return false;
     }
@@ -227,7 +229,7 @@ export class BackendSettingsSync implements SDK.TargetManager.Observer {
   }
 
   #updateTarget(target: SDK.Target.Target): void {
-    if (target.type() !== SDK.Target.Type.Frame || target.parentTarget()) {
+    if (target.type() !== SDK.Target.Type.Frame || target.parentTarget()?.type() === SDK.Target.Type.Frame) {
       return;
     }
     void target.pageAgent().invoke_setAdBlockingEnabled({enabled: this.#adBlockEnabledSetting.get()});

package/front_end/entrypoints/js_app/js_app.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import '../shell/shell.js';
+import '../../panels/mobile_throttling/mobile_throttling-meta.js';
 import '../../panels/js_profiler/js_profiler-meta.js';
 
 import * as Common from '../../core/common/common.js';

package/front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as Root from '../../core/root/root.js';
-import * as Puppeteer from '../../services/puppeteer/puppeteer.js';
+import * as PuppeteerService from '../../services/puppeteer/puppeteer.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 
 function disableLoggingForTest(): void {
@@ -97,8 +97,8 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
     notifyFrontendViaWorkerMessage('statusUpdate', {message: message[1]});
   });
 
-  let puppeteerConnection: Awaited<ReturnType<typeof Puppeteer.PuppeteerConnection['getPuppeteerConnection']>>|
-      undefined;
+  let puppeteerHandle: Awaited<ReturnType<
+      typeof PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper['connectPuppeteerToConnection']>>|undefined;
 
   try {
     // For timespan we only need to perform setup on startTimespan.
@@ -125,7 +125,7 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
     }
 
     // @ts-expect-error https://github.com/GoogleChrome/lighthouse/issues/11628
-    const config = args.config || self.createConfig(args.categoryIDs, flags.emulatedFormFactor);
+    const config = args.config || self.createConfig(args.categoryIDs, flags.formFactor);
     const url = args.url;
 
     // Handle legacy Lighthouse runner path.
@@ -136,11 +136,19 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
       return await self.runLighthouse(url, flags, config, connection);
     }
 
-    const {mainTargetId, mainFrameId, mainSessionId} = args.target;
+    const {mainFrameId, mainSessionId, targetInfos} = args;
     cdpConnection = new ConnectionProxy(mainSessionId);
-    puppeteerConnection =
-        await Puppeteer.PuppeteerConnection.getPuppeteerConnection(cdpConnection, mainFrameId, mainTargetId);
-    const {page} = puppeteerConnection;
+    puppeteerHandle = await PuppeteerService.PuppeteerConnection.PuppeteerConnectionHelper.connectPuppeteerToConnection({
+      connection: cdpConnection,
+      mainFrameId,
+      targetInfos,
+      // For the most part, defer to Lighthouse for which targets are important.
+      // Excluding devtools targets is required for e2e tests to work, and LH doesn't support auditing DT targets anyway.
+      targetFilterCallback: targetInfo => !targetInfo.url.match(/^https:\/\/i0.devtools-frontend/),
+      // Lighthouse can only audit normal pages.
+      isPageTargetCallback: targetInfo => targetInfo.type === 'page',
+    });
+    const {page} = puppeteerHandle;
     const configContext = {
       logLevel: flags.logLevel,
       settingsOverrides: flags,
@@ -172,7 +180,7 @@ async function invokeLH(action: string, args: any): Promise<unknown> {
   } finally {
     // endTimespan will need to use the same connection as startTimespan.
     if (action !== 'startTimespan') {
-      puppeteerConnection?.browser.disconnect();
+      puppeteerHandle?.browser.disconnect();
     }
   }
 }

package/front_end/entrypoints/main/ExecutionContextSelector.ts

@@ -110,7 +110,7 @@ export class ExecutionContextSelector implements SDK.TargetManager.SDKModelObser
     if (!executionContext.isDefault || !executionContext.frameId) {
       return false;
     }
-    if (executionContext.target().parentTarget()) {
+    if (executionContext.target().parentTarget()?.type() === SDK.Target.Type.Frame) {
       return false;
     }
     const resourceTreeModel = executionContext.target().model(SDK.ResourceTreeModel.ResourceTreeModel);

package/front_end/entrypoints/main/MainImpl.ts

@@ -105,6 +105,10 @@ const UIStrings = {
   *@description Text for the viewing the help options
   */
   help: 'Help',
+  /**
+  *@description Text describing how to navigate the dock side menu
+  */
+  dockSideNaviation: 'Use left and right arrow keys to navigate the options',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/main/MainImpl.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -148,10 +152,7 @@ export class MainImpl {
     this.createSettings(prefs);
     await this.requestAndRegisterLocaleData();
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.SYNC_SETTINGS)) {
-      Host.userMetrics.syncSetting(
-          Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
-    }
+    Host.userMetrics.syncSetting(Common.Settings.Settings.instance().moduleSetting<boolean>('sync_preferences').get());
 
     void this.#createAppUI();
   }
@@ -179,6 +180,10 @@ export class MainImpl {
     self.Host.userMetrics = self.Host.userMetrics || Host.userMetrics;
     // @ts-ignore e2e test global
     self.Host.UserMetrics = self.Host.UserMetrics || Host.UserMetrics;
+    // @ts-ignore e2e test global
+    self.ProtocolClient = self.ProtocolClient || {};
+    // @ts-ignore e2e test global
+    self.ProtocolClient.test = self.ProtocolClient.test || ProtocolClient.InspectorBackend.test;
   }
 
   async requestAndRegisterLocaleData(): Promise<void> {
@@ -311,8 +316,10 @@ export class MainImpl {
     Root.Runtime.experiments.register('timelineShowAllEvents', 'Timeline: show all events', true);
     Root.Runtime.experiments.register(
         'timelineV8RuntimeCallStats', 'Timeline: V8 Runtime Call Stats on Timeline', true);
-    Root.Runtime.experiments.register('timelineWebGL', 'Timeline: WebGL-based flamechart');
     Root.Runtime.experiments.register('timelineReplayEvent', 'Timeline: Replay input events', true);
+    Root.Runtime.experiments.register(
+        'timelineAsConsoleProfileResultPanel', 'View console.profile() results in the Performance panel for Node.js',
+        true);
 
     // Debugging
     Root.Runtime.experiments.register(
@@ -357,21 +364,9 @@ export class MainImpl {
     // New cookie features.
     Root.Runtime.experiments.register('experimentalCookieFeatures', 'Enable experimental cookie features');
 
-    // Hide Issues Feature.
-    Root.Runtime.experiments.register(
-        'hideIssuesFeature', 'Enable experimental hide issues menu', undefined,
-        'https://developer.chrome.com/blog/new-in-devtools-94/#hide-issues');
-
     // Hide Issues Feature.
     Root.Runtime.experiments.register('groupAndHideIssuesByKind', 'Allow grouping and hiding of issues by IssueKind');
 
-    // Checkbox in the Settings UI to enable Chrome Sync is behind this experiment.
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.SYNC_SETTINGS, 'Sync DevTools settings with Chrome Sync');
-
-    // Debugging of Reporting API
-    Root.Runtime.experiments.register('reportingApiDebugging', 'Enable Reporting API panel in the Application panel');
-
     // CSS <length> authoring tool.
     Root.Runtime.experiments.register(
         'cssTypeComponentLength', 'Enable CSS <length> authoring tool in the Styles pane', undefined,
@@ -394,13 +389,6 @@ export class MainImpl {
         Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS,
         'Enable CSS Authoring hints for inactive rules, deprecated properties, etc.');
 
-    // New Lighthouse panel with timespan and snapshot mode
-    Root.Runtime.experiments.register('lighthousePanelFR', 'Use Lighthouse panel with timespan and snapshot modes');
-
-    // Tooling for CSS layers in Styles sidebar pane.
-    Root.Runtime.experiments.register(
-        Root.Runtime.ExperimentName.CSS_LAYERS, 'Tooling for CSS layers in the Styles pane');
-
     // Enable color picking outside the browser window (using Eyedropper API)
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER, 'Enable color picking outside the browser window');
@@ -421,15 +409,12 @@ export class MainImpl {
 
     Root.Runtime.experiments.enableExperimentsByDefault([
       'sourceOrderViewer',
-      'hideIssuesFeature',
       'cssTypeComponentLength',
       Root.Runtime.ExperimentName.PRECISE_CHANGES,
-      'reportingApiDebugging',
-      Root.Runtime.ExperimentName.SYNC_SETTINGS,
-      Root.Runtime.ExperimentName.CSS_LAYERS,
       ...('EyeDropper' in window ? [Root.Runtime.ExperimentName.EYEDROPPER_COLOR_PICKER] : []),
-      'lighthousePanelFR',
       'keyboardShortcutEditor',
+      'groupAndHideIssuesByKind',
+      Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS,
     ]);
 
     Root.Runtime.experiments.setNonConfigurableExperiments([
@@ -492,7 +477,9 @@ export class MainImpl {
     // Equally if the user has set to match the system and the OS preference changes
     // we perform the same change.
     const darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const highContrastMediaQuery = window.matchMedia('(forced-colors: active)');
     darkThemeMediaQuery.addEventListener('change', onThemeChange);
+    highContrastMediaQuery.addEventListener('change', onThemeChange);
     themeSetting.addChangeListener(onThemeChange);
 
     UI.UIUtils.installComponentRootStyles((document.body as Element));
@@ -538,24 +525,24 @@ export class MainImpl {
 
     // @ts-ignore layout test global
     self.Bindings.networkProjectManager = Bindings.NetworkProject.NetworkProjectManager.instance();
+    const resourceMapping = new Bindings.ResourceMapping.ResourceMapping(
+        SDK.TargetManager.TargetManager.instance(),
+        Workspace.Workspace.WorkspaceImpl.instance(),
+    );
     // @ts-ignore layout test global
-    self.Bindings.resourceMapping = Bindings.ResourceMapping.ResourceMapping.instance({
-      forceNew: true,
-      targetManager: SDK.TargetManager.TargetManager.instance(),
-      workspace: Workspace.Workspace.WorkspaceImpl.instance(),
-    });
+    self.Bindings.resourceMapping = resourceMapping;
     new Bindings.PresentationConsoleMessageHelper.PresentationConsoleMessageManager();
     // @ts-ignore layout test global
     self.Bindings.cssWorkspaceBinding = Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance({
       forceNew: true,
+      resourceMapping,
       targetManager: SDK.TargetManager.TargetManager.instance(),
-      workspace: Workspace.Workspace.WorkspaceImpl.instance(),
     });
     // @ts-ignore layout test global
     self.Bindings.debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
+      resourceMapping,
       targetManager: SDK.TargetManager.TargetManager.instance(),
-      workspace: Workspace.Workspace.WorkspaceImpl.instance(),
     });
     // @ts-ignore layout test global
     self.Bindings.breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance({
@@ -642,6 +629,7 @@ export class MainImpl {
 
     // Initialize ARIAUtils.alert Element
     UI.ARIAUtils.alertElementInstance();
+    UI.DockController.DockController.instance().announceDockLocation();
 
     // Allow UI cycles to repaint prior to creating connection.
     window.setTimeout(this.#initializeTarget.bind(this), 0);
@@ -884,8 +872,9 @@ export class MainMenuItem implements UI.Toolbar.Provider {
       const dockItemElement = document.createElement('div');
       dockItemElement.classList.add('flex-centered');
       dockItemElement.classList.add('flex-auto');
+      dockItemElement.classList.add('location-menu');
       dockItemElement.tabIndex = -1;
-      UI.ARIAUtils.setAccessibleName(dockItemElement, UIStrings.dockSide);
+      UI.ARIAUtils.setAccessibleName(dockItemElement, UIStrings.dockSide + UIStrings.dockSideNaviation);
       const titleElement = dockItemElement.createChild('span', 'dockside-title');
       titleElement.textContent = i18nString(UIStrings.dockSide);
       const toggleDockSideShorcuts =
@@ -927,6 +916,10 @@ export class MainMenuItem implements UI.Toolbar.Provider {
           dir = -1;
         } else if (event.key === 'ArrowRight') {
           dir = 1;
+        } else if (event.key === 'ArrowDown') {
+          const contextMenuElement = dockItemElement.closest('.soft-context-menu');
+          contextMenuElement?.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown'}));
+          return;
         } else {
           return;
         }
@@ -952,7 +945,7 @@ export class MainMenuItem implements UI.Toolbar.Provider {
     }
 
     if (UI.DockController.DockController.instance().dockSide() === UI.DockController.DockState.UNDOCKED) {
-      const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+      const mainTarget = SDK.TargetManager.TargetManager.instance().mainFrameTarget();
       if (mainTarget && mainTarget.type() === SDK.Target.Type.Frame) {
         contextMenu.defaultSection().appendAction('inspector_main.focus-debuggee', i18nString(UIStrings.focusDebuggee));
       }

package/front_end/entrypoints/main/main-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -775,7 +774,6 @@ Common.Settings.registerSettingExtension({
   title: i18nLazyString(UIStrings.enableSync),
   defaultValue: false,
   reloadRequired: true,
-  experiment: Root.Runtime.ExperimentName.SYNC_SETTINGS,
 });
 
 Common.Settings.registerSettingExtension({

package/front_end/entrypoints/node_app/node_app.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import '../shell/shell.js';
+import '../../panels/mobile_throttling/mobile_throttling-meta.js';
 import '../../panels/js_profiler/js_profiler-meta.js';
 import type * as Sources from '../../panels/sources/sources.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -33,7 +34,7 @@ const UIStrings = {
   /**
    *@description Command for showing the 'Node' tool in the Network Navigator View, which is part of the Sources tool
   */
-  showNode: 'Node',
+  showNode: 'Show Node',
 };
 
 const str_ = i18n.i18n.registerUIStrings('entrypoints/node_app/node_app.ts', UIStrings);

package/front_end/entrypoints/shell/shell.ts

@@ -5,13 +5,11 @@
 import '../../Images/Images.js';
 import '../../core/root/root-legacy.js';
 import '../../core/dom_extension/dom_extension.js';
-
 import '../../panels/sources/sources-meta.js';
 import '../../panels/profiler/profiler-meta.js';
 import '../../panels/console/console-meta.js';
 import '../../panels/coverage/coverage-meta.js';
 import '../../panels/changes/changes-meta.js';
-import '../../panels/input/input-meta.js';
 import '../../ui/components/linear_memory_inspector/linear_memory_inspector-meta.js';
 import '../../panels/settings/settings-meta.js';
 import '../../panels/protocol_monitor/protocol_monitor-meta.js';
@@ -25,4 +23,5 @@ import '../../ui/legacy/components/source_frame/source_frame-meta.js';
 import '../../panels/console_counters/console_counters-meta.js';
 import '../../ui/legacy/components/object_ui/object_ui-meta.js';
 import '../main/main.js';
+
 // We generate the descriptors in this file, which depend on the runtime.

package/front_end/generated/ARIAProperties.js

@@ -24,6 +24,14 @@ export const config = {
    "name": "aria-autocomplete",
    "type": "token"
   },
+  {
+   "name": "aria-braillelabel",
+   "type": "string"
+  },
+  {
+   "name": "aria-brailleroledescription",
+   "type": "string"
+  },
   {
    "default": "false",
    "name": "aria-busy",