chrome-devtools-frontend 1.0.1625854 → 1.0.1626840

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -140,6 +140,10 @@ const UIStrings = {
    * @example {color: blue;} PH1
    */
   aiSuggestionAccepted: '{PH1} Suggestion accepted.',
+  /**
+   * @description Title of the general at-rule section
+   */
+  atRuleSection: 'Other @rules',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
@@ -154,8 +158,6 @@ const MIN_FOLDED_SECTIONS_COUNT = 5;
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
 /** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
-/** Title of the general at-rule section */
-export const AT_RULE_SECTION_NAME = '@font-*';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific
 // highlighting mode on the current element.
@@ -347,7 +349,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   jumpToFontPaletteDefinition(paletteName: string): void {
-    this.jumpToSection(`@font-palette-values ${paletteName}`, AT_RULE_SECTION_NAME);
+    this.jumpToSection(`@font-palette-values ${paletteName}`, i18nString(UIStrings.atRuleSection));
+  }
+
+  jumpToCounterStyleDefinition(counterStyleName: string): void {
+    this.jumpToSection(`@counter-style ${counterStyleName}`, i18nString(UIStrings.atRuleSection));
   }
 
   forceUpdate(): void {
@@ -1710,7 +1716,7 @@ export class SectionBlock {
     const separatorElement = document.createElement('div');
     const block = new SectionBlock(separatorElement, true, expandedByDefault);
     separatorElement.className = 'sidebar-separator';
-    separatorElement.appendChild(document.createTextNode(AT_RULE_SECTION_NAME));
+    separatorElement.appendChild(document.createTextNode(i18nString(UIStrings.atRuleSection)));
     return block;
   }
 

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -248,6 +248,10 @@ export class DeviceModeToolbar {
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
 
     this.model.toolbarControlsEnabledSetting().addChangeListener(this.update, this);
+    this.model.scaleSetting().addChangeListener(this.update, this);
+    this.model.uaSetting().addChangeListener(this.update, this);
+    this.model.deviceScaleFactorSetting().addChangeListener(this.update, this);
+    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.update, this);
 
     this.update();
   }
@@ -449,11 +453,11 @@ export class DeviceModeToolbar {
 
       <div class="device-mode-empty-toolbar-element"></div>
       <devtools-button class="toolbar-button"
-                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation'} as Buttons.Button.ButtonData}
+                       .data=${{variant: Buttons.Button.Variant.TOOLBAR, iconName: 'screen-rotation',
+                                disabled: modeButtonDisabled} as Buttons.Button.ButtonData}
                        jslog=${VisualLogging.action('screen-rotation').track({click: true})}
                        @click=${this.modeMenuClicked.bind(this)}
-                       .title=${modeButtonTitle}
-                       .disabled=${modeButtonDisabled}>
+                       .title=${modeButtonTitle}>
       </devtools-button>
 
       <!-- Show dual screen toolbar -->

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -84,6 +84,15 @@ const UIStrings = {
    * @description Tooltip text of checkbox to include running the Search Engine Optimization audits in Lighthouse
    */
   isThisPageOptimizedForSearch: 'Is this page optimized for search engine results ranking',
+  /**
+   * @description Text of checkbox to include running the Agentic Browsing audits in Lighthouse
+   */
+  agenticBrowsing: 'Agentic browsing',
+  /**
+   * @description Tooltip text of checkbox to include running the Agentic Browsing audits in Lighthouse
+   */
+  agenticBrowsingDescription:
+      'These checks ensure high-quality, browsable websites for AI agents and validate the correctness of WebMCP integrations. This category is still under development and subject to change.',
   /**
    * @description ARIA label for a radio button input to emulate mobile device behavior when running audits in Lighthouse.
    */
@@ -749,6 +758,15 @@ export function getPresets(): LighthouseModel.RunTypes.Preset[] {
         supportedModes: ['navigation', 'snapshot'],
         userMetric: Host.UserMetrics.LighthouseCategoryUsed.SEO,
       },
+      {
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-agentic-browsing', false, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'agentic-browsing',
+        title: i18nLazyString(UIStrings.agenticBrowsing),
+        description: i18nLazyString(UIStrings.agenticBrowsingDescription),
+        supportedModes: ['navigation', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.AGENTIC_BROWSING,
+      },
     ];
   }
   return presets;

package/front_end/panels/profiler/profiler-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -16,22 +15,6 @@ const UIStrings = {
    * @description Title for the profiler tab
    */
   memory: 'Memory',
-  /**
-   * @description Title of the 'Live Heap Profile' tool in the bottom drawer
-   */
-  liveHeapProfile: 'Live Heap Profile',
-  /**
-   * @description Title of an action under the Performance category that can be invoked through the Command Menu
-   */
-  startRecordingHeapAllocations: 'Start recording heap allocations',
-  /**
-   * @description Title of an action under the Performance category that can be invoked through the Command Menu
-   */
-  stopRecordingHeapAllocations: 'Stop recording heap allocations',
-  /**
-   * @description Title of an action in the live heap profile tool to start with reload
-   */
-  startRecordingHeapAllocationsAndReload: 'Start recording heap allocations and reload the page',
   /**
    * @description Text in the Shortcuts page to explain a keyboard shortcut (start/stop recording performance)
    */
@@ -40,10 +23,6 @@ const UIStrings = {
    * @description Command for showing the profiler tab
    */
   showMemory: 'Show Memory',
-  /**
-   * @description Command for showing the 'Live Heap Profile' tool in the bottom drawer
-   */
-  showLiveHeapProfile: 'Show Live Heap Profile',
   /**
    * @description Tooltip text that appears when hovering over the largeicon clear button in the Profiles Panel of a profiler tool
    */
@@ -90,56 +69,6 @@ UI.ViewManager.registerViewExtension({
   },
 });
 
-UI.ViewManager.registerViewExtension({
-  location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
-  id: 'live-heap-profile',
-  commandPrompt: i18nLazyString(UIStrings.showLiveHeapProfile),
-  title: i18nLazyString(UIStrings.liveHeapProfile),
-  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
-  order: 100,
-  async loadView() {
-    const Profiler = await loadProfilerModule();
-    return Profiler.LiveHeapProfileView.LiveHeapProfileView.instance();
-  },
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-});
-
-UI.ActionRegistration.registerActionExtension({
-  actionId: 'live-heap-profile.toggle-recording',
-  iconClass: UI.ActionRegistration.IconClass.START_RECORDING,
-  toggleable: true,
-  toggledIconClass: UI.ActionRegistration.IconClass.STOP_RECORDING,
-  toggleWithRedColor: true,
-  async loadActionDelegate() {
-    const Profiler = await loadProfilerModule();
-    return new Profiler.LiveHeapProfileView.ActionDelegate();
-  },
-  category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.startRecordingHeapAllocations),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.stopRecordingHeapAllocations),
-    },
-  ],
-});
-
-UI.ActionRegistration.registerActionExtension({
-  actionId: 'live-heap-profile.start-with-reload',
-  iconClass: UI.ActionRegistration.IconClass.REFRESH,
-  async loadActionDelegate() {
-    const Profiler = await loadProfilerModule();
-    return new Profiler.LiveHeapProfileView.ActionDelegate();
-  },
-  category: UI.ActionRegistration.ActionCategory.MEMORY,
-  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
-  title: i18nLazyString(UIStrings.startRecordingHeapAllocationsAndReload),
-});
-
 UI.ActionRegistration.registerActionExtension({
   actionId: 'profiler.heap-toggle-recording',
   category: UI.ActionRegistration.ActionCategory.MEMORY,

package/front_end/panels/profiler/profiler.ts

@@ -10,7 +10,6 @@ import * as HeapSnapshotGridNodes from './HeapSnapshotGridNodes.js';
 import * as HeapSnapshotView from './HeapSnapshotView.js';
 import * as HeapTimelineOverview from './HeapTimelineOverview.js';
 import * as IsolateSelector from './IsolateSelector.js';
-import * as LiveHeapProfileView from './LiveHeapProfileView.js';
 import * as ProfileDataGrid from './ProfileDataGrid.js';
 import * as ProfileFlameChart from './ProfileFlameChartDataProvider.js';
 import * as ProfileHeader from './ProfileHeader.js';
@@ -30,7 +29,6 @@ export {
   HeapSnapshotView,
   HeapTimelineOverview,
   IsolateSelector,
-  LiveHeapProfileView,
   ProfileDataGrid,
   ProfileFlameChart,
   ProfileHeader,

package/front_end/panels/sources/ProfilePlugin.ts

@@ -20,58 +20,16 @@ const UIStrings = {
    * @description The milisecond unit
    */
   ms: 'ms',
-  /**
-   * @description Unit for data size in DevTools
-   */
-  mb: 'MB',
-  /**
-   * @description A unit
-   */
-  kb: 'kB',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/sources/ProfilePlugin.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-class MemoryMarker extends CodeMirror.GutterMarker {
-  constructor(readonly value: number) {
-    super();
-  }
-
-  override eq(other: MemoryMarker): boolean {
-    return this.value === other.value;
-  }
-
-  override toDOM(): HTMLElement {
-    const element = document.createElement('div');
-    element.className = 'cm-profileMarker';
-    let value = this.value;
-    const intensity = Platform.NumberUtilities.clamp(Math.log10(1 + 2e-3 * value) / 5, 0.02, 1);
-    element.style.backgroundColor = `hsla(217, 100%, 70%, ${intensity.toFixed(3)})`;
-    value /= 1e3;
-    let units;
-    let fractionDigits;
-    if (value >= 1e3) {
-      units = i18nString(UIStrings.mb);
-      value /= 1e3;
-      fractionDigits = value >= 20 ? 0 : 1;
-    } else {
-      units = i18nString(UIStrings.kb);
-      fractionDigits = 0;
-    }
-    element.textContent = value.toFixed(fractionDigits);
-    const unitElement = element.appendChild(document.createElement('span'));
-    unitElement.className = 'cm-units';
-    unitElement.textContent = units;
-    return element;
-  }
-}
-
 class PerformanceMarker extends CodeMirror.GutterMarker {
   constructor(readonly value: number) {
     super();
   }
 
-  override eq(other: MemoryMarker): boolean {
+  override eq(other: PerformanceMarker): boolean {
     return this.value === other.value;
   }
 
@@ -89,10 +47,8 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
   }
 }
 
-function markersFromProfileData(
-    map: Workspace.UISourceCode.LineColumnProfileMap, state: CodeMirror.EditorState,
-    type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
-  const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
+function markersFromProfileData(map: Workspace.UISourceCode.LineColumnProfileMap, state: CodeMirror.EditorState):
+    CodeMirror.RangeSet<CodeMirror.GutterMarker> {
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
   const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
@@ -104,13 +60,12 @@ function markersFromProfileData(
   }
   for (const [line, value] of aggregatedByLine) {
     const {from} = state.doc.line(line);
-    markers.push(new markerType(value).range(from));
+    markers.push(new PerformanceMarker(value).range(from));
   }
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin =>
-    class ProfilePlugin extends Plugin {
+export class PerformanceProfilePlugin extends Plugin {
   updateEffect = CodeMirror.StateEffect.define<Workspace.UISourceCode.LineColumnProfileMap>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
@@ -126,14 +81,14 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
       },
       update: (markers, tr) => {
         return tr.effects.reduce((markers, effect) => {
-          return effect.is(this.updateEffect) ? markersFromProfileData(effect.value, tr.state, type) : markers;
+          return effect.is(this.updateEffect) ? markersFromProfileData(effect.value, tr.state) : markers;
         }, markers.map(tr.changes));
       },
     });
 
     this.gutter = CodeMirror.gutter({
       markers: view => view.state.field(this.field),
-      class: `cm-${type}Gutter`,
+      class: `cm-${Workspace.UISourceCode.DecoratorType.PERFORMANCE}Gutter`,
     });
 
     this.#transformer = transformer;
@@ -144,7 +99,8 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
   }
 
   private getLineMap(): Workspace.UISourceCode.LineColumnProfileMap|undefined {
-    const uiSourceCodeProfileMap = this.uiSourceCode.getDecorationData(type);
+    const uiSourceCodeProfileMap =
+        this.uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE);
     if (!uiSourceCodeProfileMap) {
       return undefined;
     }
@@ -158,7 +114,7 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
   override editorExtension(): CodeMirror.Extension {
     const map = this.getLineMap();
     return this.compartment.of(
-        !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
+        !map ? [] : [this.field.init(state => markersFromProfileData(map, state)), this.gutter, theme]);
   }
 
   override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
@@ -172,13 +128,13 @@ const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType):
     } else if (!installed) {
       editor.dispatch({
         effects: this.compartment.reconfigure(
-            [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]),
+            [this.field.init(state => markersFromProfileData(map, state)), this.gutter, theme]),
       });
     } else {
       editor.dispatch({effects: this.updateEffect.of(map)});
     }
   }
-};
+}
 
 const theme = CodeMirror.EditorView.baseTheme({
   '.cm-line::selection': {
@@ -190,11 +146,6 @@ const theme = CodeMirror.EditorView.baseTheme({
     backgroundColor: 'var(--sys-color-cdt-base-container)',
     marginLeft: '3px',
   },
-  '.cm-memoryGutter': {
-    width: '48px',
-    backgroundColor: 'var(--sys-color-cdt-base-container)',
-    marginLeft: '3px',
-  },
   '.cm-profileMarker': {
     textAlign: 'right',
     paddingRight: '3px',
@@ -205,7 +156,3 @@ const theme = CodeMirror.EditorView.baseTheme({
     marginLeft: '3px',
   },
 });
-
-export const MemoryProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.MEMORY);
-
-export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.PERFORMANCE);

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -104,6 +104,10 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return scopeChainSidebarPaneInstance;
   }
 
+  treeOutlineForTest(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline {
+    return this.treeOutline;
+  }
+
   flavorChanged(callFrame: StackTrace.StackTrace.DebuggableFrameFlavor|null): void {
     this.#scopeChainModel?.dispose();
     this.#scopeChainModel = null;
@@ -210,6 +214,6 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return section;
   }
 
-  private sidebarPaneUpdatedForTest(): void {
+  sidebarPaneUpdatedForTest(): void {
   }
 }

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -25,7 +25,7 @@ import {CoveragePlugin} from './CoveragePlugin.js';
 import {CSSPlugin} from './CSSPlugin.js';
 import {DebuggerPlugin} from './DebuggerPlugin.js';
 import type {Plugin} from './Plugin.js';
-import {MemoryProfilePlugin, PerformanceProfilePlugin} from './ProfilePlugin.js';
+import {PerformanceProfilePlugin} from './ProfilePlugin.js';
 import {ResourceOriginPlugin} from './ResourceOriginPlugin.js';
 import {SnippetsPlugin} from './SnippetsPlugin.js';
 import {SourcesPanel} from './SourcesPanel.js';
@@ -321,7 +321,6 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
       SnippetsPlugin,
       ResourceOriginPlugin,
       CoveragePlugin,
-      MemoryProfilePlugin,
       PerformanceProfilePlugin,
       AiWarningInfobarPlugin,
     ];