chrome-devtools-frontend 1.0.1678416 → 1.0.1679704

package/front_end/Images/src/comment-mode.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 3.25C6.272 3.25 3.25 6.272 3.25 10V16.75H10C13.728 16.75 16.75 13.728 16.75 10C16.75 6.272 13.728 3.25 10 3.25Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+  <path d="M6 7.5H14V9H6V7.5Z" fill="black"/>
+  <path d="M6 11H11.5V12.5H6V11Z" fill="black"/>
+</svg>

package/front_end/core/root/Runtime.ts

@@ -544,6 +544,10 @@ interface DevToolsAriaLiveRecording {
   enabled: boolean;
 }
 
+interface DevToolsMobileSafeAreaEmulation {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -601,6 +605,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsPlusButton: DevToolsPlusButton,
   devToolsAriaLiveRecording: DevToolsAriaLiveRecording,
   devToolsInstrumentationBreakpoints: DevToolsInstrumentationBreakpoints,
+  devToolsMobileSafeAreaEmulation: DevToolsMobileSafeAreaEmulation,
   extensionsOnChromeUrls: ExtensionsOnChromeUrls,
   devToolsComments: HostConfigDevToolsComments,
 }>;

package/front_end/core/sdk/CSSMetadata.ts

@@ -160,7 +160,7 @@ export class CSSMetadata {
                            if (partialValueKeywordsNoPresets.get(name)?.has(value)) {
                              return false;
                            }
-                           return CSS.supports(name, value);
+                           return true;
                          })
                          .sort(CSSMetadata.sortPrefixesAndCSSWideKeywordsToEnd);
       const presets = values.map(value => `${name}: ${value}`);
@@ -340,11 +340,6 @@ export class CSSMetadata {
     let keywords: (string[]|undefined) = propertyValues.get(propertyName) || propertyValues.get(unprefixedName);
     if (!keywords) {
       keywords = [];
-      for (const commonKeyword of CommonKeywords) {
-        if (CSS.supports(propertyName, commonKeyword)) {
-          keywords.push(commonKeyword);
-        }
-      }
       propertyValues.set(propertyName, keywords);
     }
     return keywords;

package/front_end/core/sdk/DOMModel.ts

@@ -140,6 +140,47 @@ export interface DOMNodeEventTypes {
   [DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED]: {enabled: boolean};
 }
 
+export function cssEscape(value: string): string {
+  const length = value.length;
+  let index = -1;
+  let codeUnit: number;
+  let result = '';
+  const firstCodeUnit = value.charCodeAt(0);
+
+  if (length === 0) {
+    return '';
+  }
+
+  if (length === 1 && firstCodeUnit === 0x002D) {
+    return '\\' + value;
+  }
+
+  while (++index < length) {
+    codeUnit = value.charCodeAt(index);
+    if (codeUnit === 0x0000) {
+      result += '\uFFFD';
+      continue;
+    }
+
+    if ((codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit === 0x007F ||
+        (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+        (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002D)) {
+      result += '\\' + codeUnit.toString(16) + ' ';
+      continue;
+    }
+
+    if (codeUnit >= 0x0080 || codeUnit === 0x002D || codeUnit === 0x005F ||
+        (codeUnit >= 0x0030 && codeUnit <= 0x0039) || (codeUnit >= 0x0041 && codeUnit <= 0x005A) ||
+        (codeUnit >= 0x0061 && codeUnit <= 0x007A)) {
+      result += value.charAt(index);
+      continue;
+    }
+
+    result += '\\' + value.charAt(index);
+  }
+  return result;
+}
+
 export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventTypes> {
   #domModel: DOMModel;
   readonly #frameManager: FrameManager;
@@ -1243,14 +1284,14 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
     const classes = this.getAttribute('class');
 
     if (lowerCaseName === 'input' && type && !id && !classes) {
-      return lowerCaseName + '[type="' + CSS.escape(type) + '"]';
+      return lowerCaseName + '[type="' + cssEscape(type) + '"]';
     }
     if (id) {
-      return lowerCaseName + '#' + CSS.escape(id);
+      return lowerCaseName + '#' + cssEscape(id);
     }
     if (classes) {
       const classList = classes.trim().split(/\s+/g);
-      return (lowerCaseName === 'div' ? '' : lowerCaseName) + '.' + classList.map(cls => CSS.escape(cls)).join('.');
+      return (lowerCaseName === 'div' ? '' : lowerCaseName) + '.' + classList.map(cls => cssEscape(cls)).join('.');
     }
     if (this.pseudoIdentifier()) {
       return `${lowerCaseName}(${this.pseudoIdentifier()})`;

package/front_end/core/sdk/EmulationModel.ts

@@ -9,7 +9,25 @@ import {CSSModel} from './CSSModel.js';
 import type {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
 import {SDKModel} from './SDKModel.js';
-import {javaScriptDisabledSettingDescriptor} from './SDKSettings.js';
+import {
+  avifFormatDisabledSettingDescriptor,
+  cpuPressureSettingDescriptor,
+  emulatedCSSMediaFeatureColorGamutSettingDescriptor,
+  emulatedCSSMediaFeatureForcedColorsSettingDescriptor,
+  emulatedCSSMediaFeaturePrefersColorSchemeSettingDescriptor,
+  emulatedCSSMediaFeaturePrefersContrastSettingDescriptor,
+  emulatedCSSMediaFeaturePrefersReducedDataSettingDescriptor,
+  emulatedCSSMediaFeaturePrefersReducedMotionSettingDescriptor,
+  emulatedCSSMediaFeaturePrefersReducedTransparencySettingDescriptor,
+  emulatedCSSMediaSettingDescriptor,
+  emulatedOSTextScaleSettingDescriptor,
+  emulatedVisionDeficiencySettingDescriptor,
+  idleDetectionSettingDescriptor,
+  javaScriptDisabledSettingDescriptor,
+  jpegXlFormatDisabledSettingDescriptor,
+  localFontsDisabledSettingDescriptor,
+  touchSettingDescriptor,
+} from './SDKSettings.js';
 import {Capability, type Target} from './Target.js';
 
 export const enum DataSaverOverride {
@@ -61,14 +79,14 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       void this.#emulationAgent.invoke_setScriptExecutionDisabled({value: true});
     }
 
-    const touchSetting = settings.moduleSetting('emulation.touch');
+    const touchSetting = settings.resolve(touchSettingDescriptor);
     touchSetting.addChangeListener(() => {
       const settingValue = touchSetting.get();
 
       void this.overrideEmulateTouch(settingValue === 'force');
     });
 
-    const idleDetectionSetting = settings.moduleSetting('emulation.idle-detection');
+    const idleDetectionSetting = settings.resolve(idleDetectionSettingDescriptor);
     idleDetectionSetting.addChangeListener(async () => {
       const settingValue = idleDetectionSetting.get();
       if (settingValue === 'none') {
@@ -83,7 +101,7 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       await this.setIdleOverride(emulationParams);
     });
 
-    const cpuPressureDetectionSetting = settings.moduleSetting('emulation.cpu-pressure');
+    const cpuPressureDetectionSetting = settings.resolve(cpuPressureSettingDescriptor);
     cpuPressureDetectionSetting.addChangeListener(async () => {
       const settingValue = cpuPressureDetectionSetting.get();
 
@@ -101,19 +119,19 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       await this.setPressureStateOverride(settingValue);
     });
 
-    const mediaTypeSetting = settings.moduleSetting<string>('emulated-css-media');
-    const mediaFeatureColorGamutSetting = settings.moduleSetting<string>('emulated-css-media-feature-color-gamut');
+    const mediaTypeSetting = settings.resolve(emulatedCSSMediaSettingDescriptor);
+    const mediaFeatureColorGamutSetting = settings.resolve(emulatedCSSMediaFeatureColorGamutSettingDescriptor);
     const mediaFeaturePrefersColorSchemeSetting =
-        settings.moduleSetting<string>('emulated-css-media-feature-prefers-color-scheme');
-    const mediaFeatureForcedColorsSetting = settings.moduleSetting('emulated-css-media-feature-forced-colors');
+        settings.resolve(emulatedCSSMediaFeaturePrefersColorSchemeSettingDescriptor);
+    const mediaFeatureForcedColorsSetting = settings.resolve(emulatedCSSMediaFeatureForcedColorsSettingDescriptor);
     const mediaFeaturePrefersContrastSetting =
-        settings.moduleSetting<string>('emulated-css-media-feature-prefers-contrast');
+        settings.resolve(emulatedCSSMediaFeaturePrefersContrastSettingDescriptor);
     const mediaFeaturePrefersReducedDataSetting =
-        settings.moduleSetting<string>('emulated-css-media-feature-prefers-reduced-data');
+        settings.resolve(emulatedCSSMediaFeaturePrefersReducedDataSettingDescriptor);
     const mediaFeaturePrefersReducedTransparencySetting =
-        settings.moduleSetting<string>('emulated-css-media-feature-prefers-reduced-transparency');
+        settings.resolve(emulatedCSSMediaFeaturePrefersReducedTransparencySettingDescriptor);
     const mediaFeaturePrefersReducedMotionSetting =
-        settings.moduleSetting<string>('emulated-css-media-feature-prefers-reduced-motion');
+        settings.resolve(emulatedCSSMediaFeaturePrefersReducedMotionSettingDescriptor);
     // Note: this uses a different format than what the CDP API expects,
     // because we want to update these values per media type/feature
     // without having to search the `features` array (inefficient) or
@@ -173,13 +191,13 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       void this.emulateAutoDarkMode(true);
     }
 
-    const visionDeficiencySetting = settings.moduleSetting('emulated-vision-deficiency');
+    const visionDeficiencySetting = settings.resolve(emulatedVisionDeficiencySettingDescriptor);
     visionDeficiencySetting.addChangeListener(() => this.emulateVisionDeficiency(visionDeficiencySetting.get()));
     if (visionDeficiencySetting.get()) {
       void this.emulateVisionDeficiency(visionDeficiencySetting.get());
     }
 
-    const osTextScaleSetting = settings.moduleSetting('emulated-os-text-scale');
+    const osTextScaleSetting = settings.resolve(emulatedOSTextScaleSettingDescriptor);
     osTextScaleSetting.addChangeListener(() => {
       void this.emulateOSTextScale(parseFloat(osTextScaleSetting.get()) || undefined);
     });
@@ -187,14 +205,14 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
       void this.emulateOSTextScale(parseFloat(osTextScaleSetting.get()) || undefined);
     }
 
-    const localFontsDisabledSetting = settings.moduleSetting('local-fonts-disabled');
+    const localFontsDisabledSetting = settings.resolve(localFontsDisabledSettingDescriptor);
     localFontsDisabledSetting.addChangeListener(() => this.setLocalFontsDisabled(localFontsDisabledSetting.get()));
     if (localFontsDisabledSetting.get()) {
       this.setLocalFontsDisabled(localFontsDisabledSetting.get());
     }
 
-    const avifFormatDisabledSetting = settings.moduleSetting('avif-format-disabled');
-    const jpegXlFormatDisabledSetting = settings.moduleSetting('jpeg-xl-format-disabled');
+    const avifFormatDisabledSetting = settings.resolve(avifFormatDisabledSettingDescriptor);
+    const jpegXlFormatDisabledSetting = settings.resolve(jpegXlFormatDisabledSettingDescriptor);
     const webpFormatDisabledSetting = settings.moduleSetting('webp-format-disabled');
 
     const updateDisabledImageFormats = (): void => {

package/front_end/core/sdk/SDKSettings.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 type * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 
 export const jsSourceMapsEnabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
@@ -153,3 +154,114 @@ export const emulatePageFocusSettingDescriptor: Common.Settings.SettingDescripto
   defaultValue: false,
   storageType: Common.Settings.SettingStorageType.LOCAL,
 };
+
+export const emulatedCSSMediaSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const cpuPressureSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulation.cpu-pressure',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+};
+
+export const touchSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulation.touch',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+};
+
+export const idleDetectionSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulation.idle-detection',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none',
+};
+
+export const emulatedCSSMediaFeaturePrefersColorSchemeSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-prefers-color-scheme',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeatureForcedColorsSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-forced-colors',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeaturePrefersReducedMotionSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-prefers-reduced-motion',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeaturePrefersContrastSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-prefers-contrast',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeaturePrefersReducedDataSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-prefers-reduced-data',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeaturePrefersReducedTransparencySettingDescriptor:
+    Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-prefers-reduced-transparency',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedCSSMediaFeatureColorGamutSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-css-media-feature-color-gamut',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedVisionDeficiencySettingDescriptor:
+    Common.Settings.SettingDescriptor<Protocol.Emulation.SetEmulatedVisionDeficiencyRequestType> = {
+  name: 'emulated-vision-deficiency',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: 'none' as Protocol.Emulation.SetEmulatedVisionDeficiencyRequestType,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const emulatedOSTextScaleSettingDescriptor: Common.Settings.SettingDescriptor<string> = {
+  name: 'emulated-os-text-scale',
+  type: Common.Settings.SettingType.ENUM,
+  defaultValue: '',
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const localFontsDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'local-fonts-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const avifFormatDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'avif-format-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};
+
+export const jpegXlFormatDisabledSettingDescriptor: Common.Settings.SettingDescriptor<boolean> = {
+  name: 'jpeg-xl-format-disabled',
+  type: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: false,
+  storageType: Common.Settings.SettingStorageType.SESSION,
+};