chrome-devtools-frontend 1.0.1675430 → 1.0.1678416

package/front_end/panels/common/PersistenceUtils.ts

@@ -14,12 +14,12 @@ import {html, type LitTemplate} from '../../ui/lit/lit.js';
 
 const UIStrings = {
   /**
-   * @description Text in Persistence Utils of the Workspace settings in Settings
+   * @description Tooltip text indicating that a file is linked to a source map.
    * @example {example.url} PH1
    */
   linkedToSourceMapS: 'Linked to source map: {PH1}',
   /**
-   * @description Text to show something is linked to another
+   * @description Tooltip text indicating that a file is linked to another file.
    * @example {example.url} PH1
    */
   linkedToS: 'Linked to {PH1}',

package/front_end/panels/common/common.ts

@@ -2,105 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Platform from '../../core/platform/platform.js';
-import * as Geometry from '../../models/geometry/geometry.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import commonStyles from './common.css.js';
-
-const UIStrings = {
-  /**
-   * @description Text for the cancel button in the dialog.
-   */
-  cancel: 'Cancel',
-  /**
-   * @description Text for the allow button in the "type to allow" dialog.
-   */
-  allow: 'Allow',
-} as const;
-
-const str_ = i18n.i18n.registerUIStrings('panels/common/common.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class TypeToAllowDialog {
-  static async show(options: {
-    jslogContext: {
-      dialog: string,
-      input: string,
-    },
-    header: Platform.UIString.LocalizedString,
-    message: Platform.UIString.LocalizedString,
-    typePhrase: Platform.UIString.LocalizedString,
-    inputPlaceholder: Platform.UIString.LocalizedString,
-  }): Promise<boolean> {
-    const dialog = new UI.Dialog.Dialog(options.jslogContext.dialog);
-    dialog.setMaxContentSize(new Geometry.Size(504, 340));
-    dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
-    dialog.setDimmed(true);
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(dialog.contentElement, {cssFile: commonStyles});
-    const content = shadowRoot.createChild('div', 'type-to-allow-dialog');
-
-    const result = await new Promise<boolean>(resolve => {
-      const header = content.createChild('div', 'header');
-      header.createChild('div', 'title').textContent = options.header;
-
-      const closeButton = header.createChild('dt-close-button', 'dialog-close-button');
-      closeButton.setTabbable(true);
-      self.onInvokeElement(closeButton, event => {
-        dialog.hide();
-        event.consume(true);
-        resolve(false);
-      });
-      closeButton.setSize(Buttons.Button.Size.SMALL);
-
-      content.createChild('div', 'message').textContent = options.message;
-
-      const input = UI.UIUtils.createInput('text-input', 'text', options.jslogContext.input);
-      input.placeholder = options.inputPlaceholder;
-      content.appendChild(input);
-
-      const buttonsBar = content.createChild('div', 'button');
-      const cancelButton =
-          UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), () => resolve(false), {jslogContext: 'cancel'});
-
-      const allowButton = UI.UIUtils.createTextButton(i18nString(UIStrings.allow), () => {
-        resolve(input.value === options.typePhrase || input.value === `'${options.typePhrase}'`);
-      }, {jslogContext: 'confirm', variant: Buttons.Button.Variant.PRIMARY});
-      allowButton.disabled = true;
-
-      buttonsBar.appendChild(allowButton);
-      buttonsBar.appendChild(cancelButton);
-
-      input.addEventListener('input', () => {
-        allowButton.disabled = !Boolean(input.value);
-      }, false);
-      input.addEventListener('paste', e => e.preventDefault());
-      input.addEventListener('drop', e => e.preventDefault());
-
-      dialog.setOutsideClickCallback(event => {
-        event.consume();
-        resolve(false);
-      });
-      dialog.show();
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.SelfXssWarningDialogShown);
-    });
-    dialog.hide();
-    return result;
-  }
-}
-
-export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
-export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
-export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
-export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
-export {AiCodeCompletionDisclaimer, type DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
 export * as CPUThrottlingOption from './CPUThrottlingOption.js';

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -12,11 +12,11 @@ import * as Root from '../../core/root/root.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import type * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as PanelCommon from '../common/common.js';
 
 import consoleInsightTeaserStyles from './consoleInsightTeaser.css.js';
 import {ConsoleViewMessage} from './ConsoleViewMessage.js';
@@ -500,7 +500,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
     const iconName = AiAssistanceModel.AiUtils.getIconName();
-    const result = await PanelCommon.FreDialog.show({
+    const result = await Dialogs.FreDialog.FreDialog.show({
       header: {iconName, text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: [
         {

package/front_end/panels/console/ConsolePanel.ts

@@ -131,6 +131,10 @@ export class WrapperView extends UI.Widget.VBox {
   showViewInWrapper(): void {
     this.view.show(this.element);
   }
+
+  insertIntoPrompt(text: string): void {
+    this.view.insertIntoPrompt(text);
+  }
 }
 
 export class ConsoleRevealer implements Common.Revealer.Revealer<Common.Console.Console> {

package/front_end/panels/console/ConsolePinPane.ts

@@ -10,6 +10,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -17,7 +18,6 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as PanelCommon from '../common/common.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
 
@@ -437,7 +437,7 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
   }
 
   async #showSelfXssWarning(): Promise<void> {
-    const allowPasting = await PanelCommon.TypeToAllowDialog.show({
+    const allowPasting = await Dialogs.TypeToAllowDialog.TypeToAllowDialog.show({
       jslogContext: {
         dialog: 'self-xss-warning',
         input: 'allow-pasting',

package/front_end/panels/console/ConsolePrompt.ts

@@ -276,6 +276,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     });
   }
 
+  /**
+   * Replaces the full prompt content with the given text, places the caret
+   * at the end, and scrolls the editor into view.
+   */
+  insertText(text: string): void {
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length, insert: text},
+      selection: {anchor: text.length},
+      scrollIntoView: true,
+    });
+  }
+
   text(): string {
     return this.editor.state.doc.toString();
   }

package/front_end/panels/console/ConsoleView.ts

@@ -58,6 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as SettingUIRegistration from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {AiCodeCompletionSummaryToolbar} from '../common/common.js';
 
@@ -498,30 +499,30 @@ export class ConsoleView extends UI.Widget.VBox implements
     settingsPane.append(
         SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.networkMessages), this.filter.networkMessagesSetting,
-            this.filter.networkMessagesSetting.title()),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.logXMLHttpRequests),
+                                                    monitoringXHREnabledSetting),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
+                                                    i18nString(UIStrings.doNotClearLogOnPageReload)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.logXMLHttpRequests), monitoringXHREnabledSetting),
+            SettingUIRegistration.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title,
+            consoleEagerEvalSetting, i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.selectedContextOnly),
+                                                    this.filter.filterByExecutionContextSetting,
+                                                    i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
-            i18nString(UIStrings.doNotClearLogOnPageReload)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor())
+                .title,
+            this.consoleHistoryAutocompleteSetting, i18nString(UIStrings.autocompleteFromHistory)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            consoleEagerEvalSetting.title(), consoleEagerEvalSetting,
-            i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
+            this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            i18nString(UIStrings.selectedContextOnly), this.filter.filterByExecutionContextSetting,
-            i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
+            SettingUIRegistration.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
+            userActivationEvalSetting, i18nString(UIStrings.treatEvaluationAsUserActivation)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            this.consoleHistoryAutocompleteSetting.title(), this.consoleHistoryAutocompleteSetting,
-            i18nString(UIStrings.autocompleteFromHistory)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            this.groupSimilarSetting.title(), this.groupSimilarSetting,
-            i18nString(UIStrings.groupSimilarMessagesInConsole)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            userActivationEvalSetting.title(), userActivationEvalSetting,
-            i18nString(UIStrings.treatEvaluationAsUserActivation)),
-        SettingsUI.SettingsUI.createSettingCheckbox(
-            this.showCorsErrorsSetting.title(), this.showCorsErrorsSetting,
-            i18nString(UIStrings.showCorsErrorsInConsole)),
+            SettingUIRegistration.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
+            this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole)),
     );
 
     if (!this.showSettingsPaneSetting.get()) {
@@ -919,6 +920,16 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
   }
 
+  /**
+   * Inserts text into the console prompt (replacing any existing content)
+   * and focuses the prompt. Used by cross-panel features such as
+   * "Edit and resend as fetch".
+   */
+  insertIntoPrompt(text: string): void {
+    this.prompt.insertText(text);
+    this.focusPrompt();
+  }
+
   override restoreScrollPositions(): void {
     if (this.viewport.stickToBottom()) {
       this.immediatelyScrollToBottom();
@@ -1340,7 +1351,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     if (consoleMessage) {
       const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(consoleMessage);
-      if (request && SDK.NetworkManager.NetworkManager.canResendRequest(request)) {
+      if (request && SDK.NetworkManager.NetworkManager.canResendRequest(request, true)) {
         contextMenu.debugSection().appendItem(i18nString(UIStrings.resend),
                                               SDK.NetworkManager.NetworkManager.replayRequest.bind(null, request),
                                               {jslogContext: 'resend'});

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -59,6 +59,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as Elements from '../elements/elements.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
@@ -627,6 +628,19 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       UI.UIUtils.createTextChild(anchorWrapperElement, ' ');
       return anchorWrapperElement;
     }
+
+    // No source location anchor exists, but there may still be affected resource links to display.
+    const affectedResourceElements = this.createAffectedResourceLinks();
+    if (affectedResourceElements.length) {
+      const anchorWrapperElement = document.createElement('span');
+      anchorWrapperElement.classList.add('console-message-anchor');
+      for (const element of affectedResourceElements) {
+        anchorWrapperElement.append(element);
+      }
+      UI.UIUtils.createTextChild(anchorWrapperElement, ' ');
+      return anchorWrapperElement;
+    }
+
     return null;
   }
 
@@ -970,23 +984,33 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (!domModel) {
       return result;
     }
-    void domModel.pushObjectAsNodeToFrontend(remoteObject).then(async (node: SDK.DOMModel.DOMNode|null) => {
+    void domModel.pushObjectAsNodeToFrontend(remoteObject).then((node: SDK.DOMModel.DOMNode|null) => {
       if (!node) {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
         return;
       }
-      const renderResult = await UI.UIUtils.Renderer.render(node);
-      if (renderResult) {
-        this.selectableChildren.push(renderResult);
-        // FIXME: this should not be needed once ConsoleViewMessage is rendering
-        // declaratively and the tree outline auto-resizes itself.
-        renderResult.element.addEventListener('dimensionschanged', () => {
-          this.messageResized({data: renderResult.element});
-        });
-        result.appendChild(renderResult.element);
-      } else {
-        result.appendChild(this.formatParameterAsObject(remoteObject, false));
-      }
+      const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(
+          /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true);
+      treeOutline.rootDOMNode = node;
+      treeOutline.deindentSingleNode();
+      treeOutline.setVisible(true);
+      // @ts-expect-error used in console_test_runner
+      treeOutline.element.treeElementForTest = treeOutline.firstChild();
+      treeOutline.setShowSelectionOnKeyboardFocus(/* show: */ true, /* preventTabOrder: */ true);
+
+      this.selectableChildren.push({
+        element: treeOutline.element,
+        forceSelect: treeOutline.forceSelect.bind(treeOutline),
+      });
+      // FIXME: this should not be needed once ConsoleViewMessage is rendering
+      // declaratively and the tree outline auto-resizes itself.
+      const dispatchDimensionChange = (): void => {
+        this.messageResized({data: treeOutline.element});
+      };
+      treeOutline.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+      treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+      treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
+      result.appendChild(treeOutline.element);
       this.formattedParameterAsNodeForTest();
     });
 

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -482,7 +482,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const color = (minContrastIssue.textColor.asString(Common.Color.Format.HEXA));
   const backgroundColor = (minContrastIssue.backgroundColor.asString(Common.Color.Format.HEXA));
 
-  const showAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
+  const showAPCA = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get();
 
   const title = i18nString(UIStrings.textColorSOverSBackgroundResults, {
     PH1: color,
@@ -1040,7 +1040,7 @@ function renderContrastRatio(data: PopulateNodesEventNodeTypes): TemplateResult
   if (!('contrastRatio' in data)) {
     throw new Error('Contrast ratio entry is missing a contrast ratio.');
   }
-  const showAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
+  const showAPCA = Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get();
   const contrastRatio = Platform.NumberUtilities.floor(data.contrastRatio, 2);
   const contrastRatioString = showAPCA ? contrastRatio + '%' : contrastRatio;
   const border = getBorderString(data.backgroundColor);

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -266,7 +266,7 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
           const formattedTextColor = formatColor(blendedTextColor);
           const formattedBackgroundColor = formatColor(blendedBackgroundColor.asLegacyColor());
           const key = `${formattedTextColor}_${formattedBackgroundColor}`;
-          if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
+          if (Common.Settings.Settings.instance().resolve(SDK.SDKSettings.apcaSettingDescriptor).get()) {
             const contrastRatio = contrastInfo.contrastRatioAPCA();
             const threshold = contrastInfo.contrastRatioAPCAThreshold();
             const passes = contrastRatio && threshold ? Math.abs(contrastRatio) >= threshold : false;

package/front_end/panels/elements/ElementStatePaneWidget.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 * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -106,7 +107,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         jslog=${VisualLogging.pane('element-states')}>
       <div class="page-state-checkbox">
         <devtools-checkbox class="small" title=${i18nString(UIStrings.emulatesAFocusedPage)}
-            ${bindToSetting('emulate-page-focus')}>${
+            ${bindToSetting(Common.Settings.Settings.instance().resolve(SDK.SDKSettings.emulatePageFocusSettingDescriptor))}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
             @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}