chrome-devtools-frontend 1.0.1018569 → 1.0.1019968

package/config/gni/devtools_grd_files.gni

@@ -605,6 +605,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSPropertyParser.js",
   "front_end/core/sdk/CSSQuery.js",
   "front_end/core/sdk/CSSRule.js",
+  "front_end/core/sdk/CSSScope.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
   "front_end/core/sdk/CSSSupports.js",
@@ -933,6 +934,7 @@ grd_files_debug_sources = [
   "front_end/panels/developer_resources/developerResourcesView.css.js",
   "front_end/panels/elements/AccessibilityTreeUtils.js",
   "front_end/panels/elements/AccessibilityTreeView.js",
+  "front_end/panels/elements/CSSRuleValidator.js",
   "front_end/panels/elements/ClassesPaneWidget.js",
   "front_end/panels/elements/ColorSwatchPopoverIcon.js",
   "front_end/panels/elements/ComputedStyleModel.js",
@@ -1460,6 +1462,7 @@ grd_files_debug_sources = [
   "front_end/ui/components/linear_memory_inspector/LinearMemoryNavigator.js",
   "front_end/ui/components/linear_memory_inspector/LinearMemoryValueInterpreter.js",
   "front_end/ui/components/linear_memory_inspector/LinearMemoryViewer.js",
+  "front_end/ui/components/linear_memory_inspector/LinearMemoryViewerUtils.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplay.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterDisplayUtils.js",
   "front_end/ui/components/linear_memory_inspector/ValueInterpreterSettings.js",

package/front_end/core/i18n/locales/en-US.json

@@ -903,7 +903,7 @@
     "message": "Show Rendering"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
-    "message": "Toggle forces CSS prefers-color-scheme color"
+    "message": "Toggle CSS media feature prefers-color-scheme"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "vision deficiency"
@@ -4688,6 +4688,12 @@
   "panels/elements/ComputedStyleWidget.ts | showAll": {
     "message": "Show all"
   },
+  "panels/elements/CSSRuleValidator.ts | alignContentRuleOnNoWrapFlex": {
+    "message": "This element has flex-wrap: nowrap rule, therefore 'align-content' has no effect."
+  },
+  "panels/elements/CSSRuleValidator.ts | notFlexItemHint": {
+    "message": "Parent of this element is not flex container, therefore {PH1} property has no effect."
+  },
   "panels/elements/DOMLinkifier.ts | node": {
     "message": "<node>"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -903,7 +903,7 @@
     "message": "Ŝh́ôẃ R̂én̂d́êŕîńĝ"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | toggleCssPrefersColorSchemeMedia": {
-    "message": "T̂óĝǵl̂é f̂ór̂ćêś ĈŚŜ ṕr̂éf̂ér̂ś-ĉól̂ór̂-śĉh́êḿê ćôĺôŕ"
+    "message": "T̂óĝǵl̂é ĈŚŜ ḿêd́îá f̂éât́ûŕê ṕr̂éf̂ér̂ś-ĉól̂ór̂-śĉh́êḿê"
   },
   "entrypoints/inspector_main/inspector_main-meta.ts | visionDeficiency": {
     "message": "v̂íŝíôń d̂éf̂íĉíêńĉý"
@@ -4688,6 +4688,12 @@
   "panels/elements/ComputedStyleWidget.ts | showAll": {
     "message": "Ŝh́ôẃ âĺl̂"
   },
+  "panels/elements/CSSRuleValidator.ts | alignContentRuleOnNoWrapFlex": {
+    "message": "T̂h́îś êĺêḿêńt̂ h́âś f̂ĺêx́-ŵŕâṕ: n̂óŵŕâṕ r̂úl̂é, t̂h́êŕêf́ôŕê 'ál̂íĝń-ĉón̂t́êńt̂' h́âś n̂ó êf́f̂éĉt́."
+  },
+  "panels/elements/CSSRuleValidator.ts | notFlexItemHint": {
+    "message": "P̂ár̂én̂t́ ôf́ t̂h́îś êĺêḿêńt̂ íŝ ńôt́ f̂ĺêx́ ĉón̂t́âín̂ér̂, t́ĥér̂éf̂ór̂é {PH1} p̂ŕôṕêŕt̂ý ĥáŝ ńô éf̂f́êćt̂."
+  },
   "panels/elements/DOMLinkifier.ts | node": {
     "message": "<n̂ód̂é>"
   },

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -491,7 +491,7 @@ export class CSSMatchedStyles {
       return true;
     }
     const parentRule = style.parentRule as CSSStyleRule;
-    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports];
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports, ...parentRule.scopes];
     for (const query of queries) {
       if (!query.active()) {
         return false;

package/front_end/core/sdk/CSSModel.ts

@@ -461,6 +461,28 @@ export class CSSModel extends SDKModel<EventTypes> {
     }
   }
 
+  async setScopeText(
+      styleSheetId: Protocol.CSS.StyleSheetId, range: TextUtils.TextRange.TextRange,
+      newScopeText: string): Promise<boolean> {
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.StyleRuleEdited);
+
+    try {
+      await this.ensureOriginalStyleSheetText(styleSheetId);
+      const {scope} = await this.agent.invoke_setScopeText({styleSheetId, range, text: newScopeText});
+
+      if (!scope) {
+        return false;
+      }
+      this.#domModel.markUndoableState();
+      const edit = new Edit(styleSheetId, range, newScopeText, scope);
+      this.fireStyleSheetChanged(styleSheetId, edit);
+      return true;
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
+  }
+
   async addRule(styleSheetId: Protocol.CSS.StyleSheetId, ruleText: string, ruleLocation: TextUtils.TextRange.TextRange):
       Promise<CSSStyleRule|null> {
     try {

package/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,8 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
+type CSSQueryPayload =
+    Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports|Protocol.CSS.CSSScope;
 
 export abstract class CSSQuery {
   text = '';

package/front_end/core/sdk/CSSRule.ts

@@ -9,6 +9,7 @@ import * as Platform from '../platform/platform.js';
 import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSLayer} from './CSSLayer.js';
 import {CSSMedia} from './CSSMedia.js';
+import {CSSScope} from './CSSScope.js';
 import {CSSSupports} from './CSSSupports.js';
 
 import type {CSSModel, Edit} from './CSSModel.js';
@@ -103,6 +104,7 @@ export class CSSStyleRule extends CSSRule {
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
   supports: CSSSupports[];
+  scopes: CSSScope[];
   layers: CSSLayer[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
@@ -113,6 +115,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries = payload.containerQueries ?
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
+    this.scopes = payload.scopes ? CSSScope.parseScopesPayload(cssModel, payload.scopes) : [];
     this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
     this.layers = payload.layers ? CSSLayer.parseLayerPayload(cssModel, payload.layers) : [];
     this.wasUsed = wasUsed || false;
@@ -200,6 +203,7 @@ export class CSSStyleRule extends CSSRule {
     }
     this.media.forEach(media => media.rebase(edit));
     this.containerQueries.forEach(cq => cq.rebase(edit));
+    this.scopes.forEach(scope => scope.rebase(edit));
     this.supports.forEach(supports => supports.rebase(edit));
 
     super.rebase(edit);

package/front_end/core/sdk/CSSScope.ts

@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSScope extends CSSQuery {
+  static parseScopesPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSScope[]): CSSScope[] {
+    return payload.map(scope => new CSSScope(cssModel, scope));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSScope) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSScope): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

package/front_end/core/sdk/sdk.ts

@@ -33,6 +33,7 @@ import * as CSSProperty from './CSSProperty.js';
 import * as CSSPropertyParser from './CSSPropertyParser.js';
 import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
+import * as CSSScope from './CSSScope.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
 import * as CSSSupports from './CSSSupports.js';
@@ -103,6 +104,7 @@ export {
   CSSPropertyParser,
   CSSQuery,
   CSSRule,
+  CSSScope,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
   CSSSupports,

package/front_end/entrypoints/inspector_main/RenderingOptions.ts

@@ -366,13 +366,14 @@ export class ReloadActionDelegate implements UI.ActionRegistration.ActionDelegat
         Common.Settings.Settings.instance().moduleSetting('emulatedCSSMediaFeaturePrefersColorScheme');
 
     switch (actionId) {
-      case 'rendering.toggle-prefers-color-scheme':
-        if (emulatedCSSMediaFeaturePrefersColorSchemeSetting.get() === 'light') {
-          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('dark');
-        } else {
-          emulatedCSSMediaFeaturePrefersColorSchemeSetting.set('light');
-        }
+      case 'rendering.toggle-prefers-color-scheme': {
+        // Cycle between no emulation, light, dark
+        const options = ['', 'light', 'dark'];
+        const current = options.findIndex(x => x === emulatedCSSMediaFeaturePrefersColorSchemeSetting.get() || '');
+        emulatedCSSMediaFeaturePrefersColorSchemeSetting.set(options[(current + 1) % 3]);
+
         return true;
+      }
     }
     return false;
   }

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

@@ -103,7 +103,7 @@ const UIStrings = {
   * @description Title of an action that toggle
   * "forces CSS prefers-color-scheme" color
   */
-  toggleCssPrefersColorSchemeMedia: 'Toggle forces CSS prefers-color-scheme color',
+  toggleCssPrefersColorSchemeMedia: 'Toggle CSS media feature prefers-color-scheme',
 };
 const str_ = i18n.i18n.registerUIStrings('entrypoints/inspector_main/inspector_main-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);

package/front_end/generated/InspectorBackendCommands.js

@@ -615,6 +615,13 @@ export function registerCommands(inspectorBackend) {
         {'name': 'range', 'type': 'object', 'optional': false}, {'name': 'text', 'type': 'string', 'optional': false}
       ],
       ['supports']);
+  inspectorBackend.registerCommand(
+      'CSS.setScopeText',
+      [
+        {'name': 'styleSheetId', 'type': 'string', 'optional': false},
+        {'name': 'range', 'type': 'object', 'optional': false}, {'name': 'text', 'type': 'string', 'optional': false}
+      ],
+      ['scope']);
   inspectorBackend.registerCommand(
       'CSS.setRuleSelector',
       [
@@ -2149,9 +2156,12 @@ export function registerCommands(inspectorBackend) {
     WindowPlacement: 'window-placement',
     XrSpatialTracking: 'xr-spatial-tracking'
   });
-  inspectorBackend.registerEnum(
-      'Page.PermissionsPolicyBlockReason',
-      {Header: 'Header', IframeAttribute: 'IframeAttribute', InFencedFrameTree: 'InFencedFrameTree'});
+  inspectorBackend.registerEnum('Page.PermissionsPolicyBlockReason', {
+    Header: 'Header',
+    IframeAttribute: 'IframeAttribute',
+    InFencedFrameTree: 'InFencedFrameTree',
+    InIsolatedApp: 'InIsolatedApp'
+  });
   inspectorBackend.registerEnum('Page.OriginTrialTokenStatus', {
     Success: 'Success',
     NotSupported: 'NotSupported',

package/front_end/generated/SupportedCSSProperties.js

@@ -333,7 +333,7 @@ export const generatedProperties = [
   {'name': 'contain-intrinsic-width', 'keywords': ['auto', 'none']},
   {'longhands': ['container-name', 'container-type'], 'name': 'container'},
   {'name': 'container-name', 'keywords': ['none']},
-  {'name': 'container-type', 'keywords': ['none', 'inline-size', 'size']},
+  {'name': 'container-type', 'keywords': ['none', 'inline-size', 'size', 'style']},
   {'name': 'content'},
   {'name': 'content-visibility', 'keywords': ['visible', 'auto', 'hidden', 'hidden-matchable']},
   {'name': 'counter-increment', 'keywords': ['none']},
@@ -952,7 +952,7 @@ export const generatedPropertyValues = {
   'contain-intrinsic-height': {'values': ['auto', 'none']},
   'contain-intrinsic-width': {'values': ['auto', 'none']},
   'container-name': {'values': ['none']},
-  'container-type': {'values': ['none', 'inline-size', 'size']},
+  'container-type': {'values': ['none', 'inline-size', 'size', 'style']},
   'content-visibility': {'values': ['visible', 'auto', 'hidden', 'hidden-matchable']},
   'counter-increment': {'values': ['none']},
   'counter-reset': {'values': ['none']},

package/front_end/generated/protocol-mapping.d.ts

@@ -1032,6 +1032,11 @@ export namespace ProtocolMapping {
      */
     'CSS.setSupportsText':
         {paramsType: [Protocol.CSS.SetSupportsTextRequest]; returnType: Protocol.CSS.SetSupportsTextResponse;};
+    /**
+     * Modifies the expression of a scope at-rule.
+     */
+    'CSS.setScopeText':
+        {paramsType: [Protocol.CSS.SetScopeTextRequest]; returnType: Protocol.CSS.SetScopeTextResponse;};
     /**
      * Modifies the rule selector.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -645,6 +645,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_setSupportsText(params: Protocol.CSS.SetSupportsTextRequest): Promise<Protocol.CSS.SetSupportsTextResponse>;
 
+    /**
+     * Modifies the expression of a scope at-rule.
+     */
+    invoke_setScopeText(params: Protocol.CSS.SetScopeTextRequest): Promise<Protocol.CSS.SetScopeTextResponse>;
+
     /**
      * Modifies the rule selector.
      */

package/front_end/generated/protocol.ts

@@ -1985,6 +1985,11 @@ export namespace CSS {
      * with the innermost layer and going outwards.
      */
     layers?: CSSLayer[];
+    /**
+     * @scope CSS at-rule array.
+     * The array enumerates @scope at-rules starting with the innermost one, going outwards.
+     */
+    scopes?: CSSScope[];
   }
 
   /**
@@ -2250,6 +2255,25 @@ export namespace CSS {
     styleSheetId?: StyleSheetId;
   }
 
+  /**
+   * CSS Scope at-rule descriptor.
+   */
+  export interface CSSScope {
+    /**
+     * Scope rule text.
+     */
+    text: string;
+    /**
+     * The associated rule header range in the enclosing stylesheet (if
+     * available).
+     */
+    range?: SourceRange;
+    /**
+     * Identifier of the stylesheet containing this object (if exists).
+     */
+    styleSheetId?: StyleSheetId;
+  }
+
   /**
    * CSS Layer at-rule descriptor.
    */
@@ -2686,6 +2710,19 @@ export namespace CSS {
     supports: CSSSupports;
   }
 
+  export interface SetScopeTextRequest {
+    styleSheetId: StyleSheetId;
+    range: SourceRange;
+    text: string;
+  }
+
+  export interface SetScopeTextResponse extends ProtocolResponseWithError {
+    /**
+     * The resulting CSS Scope rule after modification.
+     */
+    scope: CSSScope;
+  }
+
   export interface SetRuleSelectorRequest {
     styleSheetId: StyleSheetId;
     range: SourceRange;
@@ -10291,6 +10328,7 @@ export namespace Page {
     Header = 'Header',
     IframeAttribute = 'IframeAttribute',
     InFencedFrameTree = 'InFencedFrameTree',
+    InIsolatedApp = 'InIsolatedApp',
   }
 
   export interface PermissionsPolicyBlockLocator {
@@ -13640,6 +13678,11 @@ export namespace Tracing {
      * Controls how the trace buffer stores data.
      */
     recordMode?: TraceConfigRecordMode;
+    /**
+     * Size of the trace buffer in kilobytes. If not specified or zero is passed, a default value
+     * of 200 MB would be used.
+     */
+    traceBufferSizeInKb?: number;
     /**
      * Turns on JavaScript stack sampling.
      */

package/front_end/models/bindings/BreakpointManager.ts

@@ -409,13 +409,18 @@ export type EventTypes = {
   [Events.BreakpointRemoved]: BreakpointLocation,
 };
 
-const enum DebuggerUpdateResult {
+export const enum DebuggerUpdateResult {
   OK = 'OK',
-  ERROR = 'ERROR',
+  ERROR_BREAKPOINT_CLASH = 'ERROR_BREAKPOINT_CLASH',
+  ERROR_BACKEND = 'ERROR_BACKEND',
+
   // PENDING implies that the current update requires another re-run.
   PENDING = 'PENDING',
 }
 
+export type ScheduleUpdateResult =
+    DebuggerUpdateResult.OK|DebuggerUpdateResult.ERROR_BACKEND|DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH;
+
 const enum ResolveLocationResult {
   OK = 'OK',
   ERROR = 'ERROR',
@@ -430,7 +435,7 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   uiSourceCodes: Set<Workspace.UISourceCode.UISourceCode>;
   #conditionInternal!: string;
   #enabledInternal!: boolean;
-  isRemoved!: boolean;
+  isRemoved = false;
   currentState: Breakpoint.State|null;
   readonly #modelBreakpoints: Map<SDK.DebuggerModel.DebuggerModel, ModelBreakpoint>;
 
@@ -629,6 +634,9 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   }
 
   async remove(keepInStorage: boolean): Promise<void> {
+    if (this.getIsRemoved()) {
+      return;
+    }
     this.isRemoved = true;
     const removeFromStorage = !keepInStorage;
 
@@ -676,9 +684,11 @@ export class Breakpoint implements SDK.TargetManager.SDKModelObserver<SDK.Debugg
   }
 
   async #updateModel(model: ModelBreakpoint): Promise<void> {
-    const success = await model.scheduleUpdateInDebugger();
-    if (!success) {
-      await this.remove(false);
+    const result = await model.scheduleUpdateInDebugger();
+    if (result === DebuggerUpdateResult.ERROR_BACKEND) {
+      await this.remove(true /* keepInStorage */);
+    } else if (result === DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH) {
+      await this.remove(false /* keepInStorage */);
     }
   }
 }
@@ -722,11 +732,9 @@ export class ModelBreakpoint {
     this.#liveLocations.disposeAll();
   }
 
-  // Returns true, if scheduling ran as expected.
-  // Returns false, if an error occurred.
-  async scheduleUpdateInDebugger(): Promise<boolean> {
+  async scheduleUpdateInDebugger(): Promise<ScheduleUpdateResult> {
     if (!this.#debuggerModel.debuggerEnabled()) {
-      return true;
+      return DebuggerUpdateResult.OK;
     }
 
     const release = await this.#updateMutex.acquire();
@@ -735,7 +743,7 @@ export class ModelBreakpoint {
       result = await this.#updateInDebugger();
     }
     release();
-    return result === DebuggerUpdateResult.OK;
+    return result;
   }
 
   private scriptDiverged(): boolean {
@@ -849,7 +857,7 @@ export class ModelBreakpoint {
     // Something went wrong: we expect to have a non-null state, but have not received any
     // breakpointIds from the back-end.
     if (!breakpointIds.length) {
-      return DebuggerUpdateResult.ERROR;
+      return DebuggerUpdateResult.ERROR_BACKEND;
     }
 
     this.#breakpointIds = breakpointIds;
@@ -859,7 +867,7 @@ export class ModelBreakpoint {
 
     // Breakpoint clash: the resolved location resolves to a different breakpoint, report an error.
     if (resolvedResults.includes(ResolveLocationResult.ERROR)) {
-      return DebuggerUpdateResult.ERROR;
+      return DebuggerUpdateResult.ERROR_BREAKPOINT_CLASH;
     }
     return DebuggerUpdateResult.OK;
   }
@@ -917,7 +925,7 @@ export class ModelBreakpoint {
       Promise<void> {
     const result = await this.addResolvedLocation(location);
     if (result === ResolveLocationResult.ERROR) {
-      await this.#breakpoint.remove(false);
+      await this.#breakpoint.remove(false /* keepInStorage */);
     }
   }
 

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -981,11 +981,6 @@ export const NativeFunctions = [
     signatures: [['?returnValue']],
     receivers: ['HTMLDialogElement']
   },
-  {
-    name: 'close',
-    signatures: [['?options']],
-    receivers: ['TCPSocket','UDPSocket']
-  },
   {
     name: 'close',
     signatures: [['?closeInfo']],
@@ -6780,20 +6775,6 @@ export const NativeFunctions = [
     name: 'FederatedCredential',
     signatures: [['data']]
   },
-  {
-    name: 'login',
-    signatures: [['?request']]
-  },
-  {
-    name: 'revoke',
-    signatures: [['hint']],
-    receivers: ['FederatedCredential']
-  },
-  {
-    name: 'revoke',
-    signatures: [['permission']],
-    receivers: ['Permissions']
-  },
   {
     name: 'logoutRps',
     signatures: [['?logout_requests']]
@@ -7384,6 +7365,10 @@ export const NativeFunctions = [
     name: 'RTCSessionDescription',
     signatures: [['?descriptionInitDict']]
   },
+  {
+    name: 'revoke',
+    signatures: [['permission']]
+  },
   {
     name: 'requestAll',
     signatures: [['permissions']]

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -0,0 +1,100 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+    *@description Hint for Align-content rule where element also has flex-wrap nowrap rule.
+    */
+  alignContentRuleOnNoWrapFlex: 'This element has flex-wrap: nowrap rule, therefore \'align-content\' has no effect.',
+  /**
+    *@description Hint for element that does not have effect if parent container is not flex.
+    *@example {flex} PH1
+    */
+  notFlexItemHint: 'Parent of this element is not flex container, therefore {PH1} property has no effect.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export abstract class CSSRuleValidator {
+  readonly #affectedProperties: string[];
+
+  constructor(affectedProperties: string[]) {
+    this.#affectedProperties = affectedProperties;
+  }
+
+  abstract isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles?: Map<String, String>|null):
+      boolean;
+
+  getAffectedProperties(): string[] {
+    return this.#affectedProperties;
+  }
+
+  abstract getHintMessage(propertyName: string): string;
+}
+
+export class AlignContentValidator extends CSSRuleValidator {
+  constructor() {
+    super(['align-content']);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null || computedStyles === undefined) {
+      return true;
+    }
+    const display = computedStyles.get('display');
+    if (display !== 'flex' && display !== 'inline-flex') {
+      return true;
+    }
+    return computedStyles.get('flex-wrap') !== 'nowrap';
+  }
+
+  getHintMessage(): string {
+    return i18nString(UIStrings.alignContentRuleOnNoWrapFlex);
+  }
+}
+
+export class FlexItemValidator extends CSSRuleValidator {
+  constructor() {
+    super(['flex', 'flex-basis', 'flex-grow', 'flex-shrink']);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null || computedStyles === undefined || parentsComputedStyles === null ||
+        parentsComputedStyles === undefined) {
+      return true;
+    }
+    const parentDisplay = parentsComputedStyles.get('display');
+    return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
+  }
+
+  getHintMessage(property: string): string {
+    return i18nString(UIStrings.notFlexItemHint, {
+      'PH1': property,
+    });
+  }
+}
+
+const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
+  const validators = [new AlignContentValidator(), new FlexItemValidator()];
+
+  const validatorsMap = new Map<String, CSSRuleValidator[]>();
+  for (const validator of validators) {
+    const affectedProperties = validator.getAffectedProperties();
+
+    for (const affectedProperty of affectedProperties) {
+      let propertyValidators = validatorsMap.get(affectedProperty);
+      if (propertyValidators === undefined) {
+        propertyValidators = [];
+      }
+      propertyValidators.push(validator);
+
+      validatorsMap.set(affectedProperty, propertyValidators);
+    }
+  }
+  return validatorsMap;
+};
+
+export const cssRuleValidatorsMap: Map<String, CSSRuleValidator[]> = setupCSSRulesValidators();