chrome-devtools-frontend 1.0.1679060 → 1.0.1679704

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

@@ -10,13 +10,22 @@ import type {MultitargetNetworkManager} from './NetworkManager.js';
 import {Events, OverlayModel} from './OverlayModel.js';
 import {SDKModel} from './SDKModel.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';
@@ -111,16 +120,16 @@ export class EmulationModel extends SDKModel<EmulationModelEventTypes> implement
     });
 
     const mediaTypeSetting = settings.resolve(emulatedCSSMediaSettingDescriptor);
-    const mediaFeatureColorGamutSetting = settings.moduleSetting<string>('emulated-css-media-feature-color-gamut');
+    const mediaFeatureColorGamutSetting = settings.resolve(emulatedCSSMediaFeatureColorGamutSettingDescriptor);
     const mediaFeaturePrefersColorSchemeSetting =
         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.resolve(emulatedCSSMediaFeaturePrefersReducedMotionSettingDescriptor);
     // Note: this uses a different format than what the CDP API expects,
@@ -182,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);
     });
@@ -196,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> = {
@@ -199,3 +200,68 @@ export const emulatedCSSMediaFeaturePrefersReducedMotionSettingDescriptor: Commo
   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,
+};