chrome-devtools-frontend 1.0.1018151 → 1.0.1019389

package/config/gni/devtools_grd_files.gni

@@ -933,6 +933,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",

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"
@@ -3209,6 +3209,9 @@
   "panels/application/components/PermissionsPolicySection.ts | showDetails": {
     "message": "Show details"
   },
+  "panels/application/components/ProtocolHandlersView.ts | dropdownLabel": {
+    "message": "Select protocol handler"
+  },
   "panels/application/components/ProtocolHandlersView.ts | manifest": {
     "message": "manifest"
   },
@@ -3227,6 +3230,9 @@
   "panels/application/components/ProtocolHandlersView.ts | testProtocol": {
     "message": "Test protocol"
   },
+  "panels/application/components/ProtocolHandlersView.ts | textboxLabel": {
+    "message": "Query parameter or endpoint for protocol handler"
+  },
   "panels/application/components/ReportsGrid.ts | destination": {
     "message": "Destination"
   },
@@ -4682,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̂íĉíêńĉý"
@@ -3209,6 +3209,9 @@
   "panels/application/components/PermissionsPolicySection.ts | showDetails": {
     "message": "Ŝh́ôẃ d̂ét̂áîĺŝ"
   },
+  "panels/application/components/ProtocolHandlersView.ts | dropdownLabel": {
+    "message": "Ŝél̂éĉt́ p̂ŕôt́ôćôĺ ĥán̂d́l̂ér̂"
+  },
   "panels/application/components/ProtocolHandlersView.ts | manifest": {
     "message": "m̂án̂íf̂éŝt́"
   },
@@ -3227,6 +3230,9 @@
   "panels/application/components/ProtocolHandlersView.ts | testProtocol": {
     "message": "T̂éŝt́ p̂ŕôt́ôćôĺ"
   },
+  "panels/application/components/ProtocolHandlersView.ts | textboxLabel": {
+    "message": "Q̂úêŕŷ ṕâŕâḿêt́êŕ ôŕ êńd̂ṕôín̂t́ f̂ór̂ ṕr̂ót̂óĉól̂ h́âńd̂ĺêŕ"
+  },
   "panels/application/components/ReportsGrid.ts | destination": {
     "message": "D̂éŝt́îńât́îón̂"
   },
@@ -4682,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/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/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/application/DOMStorageModel.ts

@@ -319,12 +319,16 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     }
   }
 
-  private storageKey(securityOrigin: string, storageKey: string, isLocalStorage: boolean): string {
+  private storageKey(securityOrigin: string|undefined, storageKey: string|undefined, isLocalStorage: boolean): string {
     // TODO(crbug.com/1313434) Prioritize storageKey once everything is ready
+    console.assert(Boolean(securityOrigin) || Boolean(storageKey));
     if (securityOrigin) {
       return JSON.stringify(DOMStorage.storageIdWithSecurityOrigin(securityOrigin, isLocalStorage));
     }
-    return JSON.stringify(DOMStorage.storageIdWithStorageKey(storageKey, isLocalStorage));
+    if (storageKey) {
+      return JSON.stringify(DOMStorage.storageIdWithStorageKey(storageKey, isLocalStorage));
+    }
+    throw new Error('Either securityOrigin or storageKey is required');
   }
 
   private keyForSecurityOrigin(securityOrigin: string, isLocalStorage: boolean): string {
@@ -375,7 +379,8 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   storageForId(storageId: Protocol.DOMStorage.StorageId): DOMStorage {
-    return this.storagesInternal[JSON.stringify(storageId)];
+    return this
+        .storagesInternal[this.storageKey(storageId.securityOrigin, storageId.storageKey, storageId.isLocalStorage)];
   }
 
   storages(): DOMStorage[] {

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -48,6 +48,14 @@ const UIStrings = {
  *@description Text for test protocol button
  */
   testProtocol: 'Test protocol',
+  /**
+  * @description Aria text for screen reader to announce they can select a protocol handler in the dropdown
+  */
+  dropdownLabel: 'Select protocol handler',
+  /**
+  * @description Aria text for screen reader to announce they can enter query parameters or endpoints into the textbox
+  */
+  textboxLabel: 'Query parameter or endpoint for protocol handler',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ProtocolHandlersView.ts', UIStrings);
@@ -121,11 +129,12 @@ export class ProtocolHandlersView extends HTMLElement {
                                 .map(p => LitHtml.html`<option value=${p.protocol}>${p.protocol}://</option>`);
     return LitHtml.html`
        <div class="protocol-handlers-row">
-        <select class="chrome-select protocol-select" @change=${this.#handleProtocolSelect}>
+        <select class="chrome-select protocol-select" @change=${this.#handleProtocolSelect} aria-label=${
+        i18nString(UIStrings.dropdownLabel)}>
            ${protocolOptions}
         </select>
         <input .value=${this.#queryInputState} class="devtools-text-input" type="text" @change=${
-        this.#handleQueryInputChange}/>
+        this.#handleQueryInputChange} aria-label=${i18nString(UIStrings.textboxLabel)}/>
         <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.PRIMARY} @click=${
         this.#handleTestProtocolClick}>
             ${i18nString(UIStrings.testProtocol)}

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();

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -121,6 +121,8 @@ export class StylePropertiesSection {
   protected parentPane: StylesSidebarPane;
   styleInternal: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
   readonly matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  private computedStyles: Map<string, string>|null;
+  private parentsComputedStyles: Map<string, string>|null;
   editable: boolean;
   private hoverTimer: number|null;
   private willCauseCancelEditing: boolean;
@@ -152,11 +154,14 @@ export class StylePropertiesSection {
 
   constructor(
       parentPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null) {
     this.parentPane = parentPane;
     this.sectionIdx = sectionIdx;
     this.styleInternal = style;
     this.matchedStyles = matchedStyles;
+    this.computedStyles = computedStyles;
+    this.parentsComputedStyles = parentsComputedStyles;
     this.editable = Boolean(style.styleSheetId && style.range);
     this.hoverTimer = null;
     this.willCauseCancelEditing = false;
@@ -932,6 +937,8 @@ export class StylePropertiesSection {
       }
       const item = new StylePropertyTreeElement(
           this.parentPane, this.matchedStyles, property, isShorthand, inherited, overloaded, false);
+      item.setComputedStyles(this.computedStyles);
+      item.setParentsComputedStyles(this.parentsComputedStyles);
       this.propertiesTreeOutline.appendChild(item);
     }
 
@@ -1449,7 +1456,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
       insertAfterStyle: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
     const cssModel = (stylesPane.cssModel() as SDK.CSSModel.CSSModel);
     const rule = SDK.CSSRule.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
-    super(stylesPane, matchedStyles, rule.style, sectionIdx);
+    super(stylesPane, matchedStyles, rule.style, sectionIdx, null, null);
     this.normal = false;
     this.ruleLocation = ruleLocation;
     this.styleSheetId = styleSheetId;
@@ -1553,7 +1560,7 @@ export class KeyframePropertiesSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
-    super(stylesPane, matchedStyles, style, sectionIdx);
+    super(stylesPane, matchedStyles, style, sectionIdx, null, null);
     this.selectorElement.className = 'keyframe-key';
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -21,6 +21,7 @@ import {StyleEditorWidget} from './StyleEditorWidget.js';
 import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
+import {cssRuleValidatorsMap} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
@@ -120,6 +121,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private hasBeenEditedIncrementally: boolean;
   private prompt: CSSPropertyPrompt|null;
   private lastComputedValue: string|null;
+  private computedStyles: Map<string, string>|null = null;
+  private parentsComputedStyles: Map<string, string>|null = null;
   private contextForTest!: Context|undefined;
   #propertyTextFromSource: string;
 
@@ -179,6 +182,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.updateState();
   }
 
+  setComputedStyles(computedStyles: Map<string, string>|null): void {
+    this.computedStyles = computedStyles;
+  }
+
+  setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
+    this.parentsComputedStyles = parentsComputedStyles;
+  }
+
   get name(): string {
     return this.property.name;
   }
@@ -568,6 +579,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       const item = new StylePropertyTreeElement(
           this.parentPaneInternal, this.matchedStylesInternal, longhandProperties[i], false, inherited, overloaded,
           false);
+      item.setComputedStyles(this.computedStyles);
+      item.setParentsComputedStyles(this.parentsComputedStyles);
       this.appendChild(item);
     }
   }
@@ -702,6 +715,17 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
+    const hintMessage = this.getHintMessage(this.computedStyles, this.parentsComputedStyles);
+    if (hintMessage !== null) {
+      const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
+      const hintPopover =
+          new UI.PopoverHelper.PopoverHelper(hintIcon, event => this.handleHintPopoverRequest(hintMessage, event));
+      hintPopover.setHasPadding(true);
+      hintPopover.setTimeout(0, 100);
+
+      this.listItemElement.append(hintIcon);
+    }
+
     if (!this.property.parsedOk) {
       // Avoid having longhands under an invalid shorthand.
       this.listItemElement.classList.add('not-parsed-ok');
@@ -793,6 +817,41 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         StylesSidebarPane.createExclamationMark(this.property, warnings.join(' ')), this.listItemElement.firstChild);
   }
 
+  private getHintMessage(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
+      string|null {
+    const propertyName = this.property.name;
+
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS) ||
+        !cssRuleValidatorsMap.has(propertyName)) {
+      return null;
+    }
+
+    for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
+      if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
+        return validator.getHintMessage(propertyName);
+      }
+    }
+
+    return null;
+  }
+
+  private handleHintPopoverRequest(hintMessageContent: string, event: Event): UI.PopoverHelper.PopoverRequest|null {
+    const link = event.composedPath()[0];
+    Platform.DCHECK(() => link instanceof Element, 'Link is not an instance of Element');
+
+    return {
+      box: (link as Element).boxInWindow(),
+      show: async(popover: UI.GlassPane.GlassPane): Promise<boolean> => {
+        const node = this.node();
+        if (!node) {
+          return false;
+        }
+        popover.contentElement.insertAdjacentHTML('beforeend', hintMessageContent);
+        return true;
+      },
+    };
+  }
+
   private mouseUp(event: MouseEvent): void {
     const activeTreeElement = parentMap.get(this.parentPaneInternal);
     parentMap.delete(this.parentPaneInternal);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -583,8 +583,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }, 200 /* only spin for loading time > 200ms to avoid unpleasant render flashes */);
     }
 
+    const node = this.node();
+    // TODO: Fetch the parent node id using CDP command
+    const parentNode = node ? node.parentNode : null;
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(node), this.fetchComputedStylesFor(parentNode)]);
+
     const matchedStyles = await this.fetchMatchedCascade();
-    await this.innerRebuildUpdate(matchedStyles);
+
+    await this.innerRebuildUpdate(matchedStyles, computedStyles, parentsComputedStyles);
     if (!this.initialUpdateCompleted) {
       this.initialUpdateCompleted = true;
       this.appendToolbarItem(this.createRenderingShortcuts());
@@ -599,6 +607,13 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.dispatchEventToListeners(Events.StylesUpdateCompleted, {hasMatchedStyles: this.hasMatchedStyles});
   }
 
+  private async fetchComputedStylesFor(node: SDK.DOMModel.DOMNode|null): Promise<Map<string, string>|null> {
+    if (!node) {
+      return null;
+    }
+    return await node.domModel().cssModel().getComputedStyle(node.id);
+  }
+
   onResize(): void {
     void this.resizeThrottler.schedule(this.innerResize.bind(this));
   }
@@ -718,7 +733,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  private async innerRebuildUpdate(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
+  private async innerRebuildUpdate(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null): Promise<void> {
     // ElementsSidebarPane's throttler schedules this method. Usually,
     // rebuild is suppressed while editing (see onCSSModelChanged()), but we need a
     // 'force' flag since the currently running throttler process cannot be canceled.
@@ -742,8 +759,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       return;
     }
 
-    this.sectionBlocks =
-        await this.rebuildSectionsForMatchedStyleRules((matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles));
+    this.sectionBlocks = await this.rebuildSectionsForMatchedStyleRules(
+        (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), computedStyles, parentsComputedStyles);
 
     // Style sections maybe re-created when flexbox editor is activated.
     // With the following code we re-bind the flexbox editor to the new
@@ -814,8 +831,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // For sniffing in tests.
   }
 
-  private async rebuildSectionsForMatchedStyleRules(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      Promise<SectionBlock[]> {
+  private async rebuildSectionsForMatchedStyleRules(
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null): Promise<SectionBlock[]> {
     if (this.idleCallbackManager) {
       this.idleCallbackManager.discard();
     }
@@ -872,7 +890,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       const lastBlock = blocks[blocks.length - 1];
       if (lastBlock) {
         this.idleCallbackManager.schedule(() => {
-          const section = new StylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          const section =
+              new StylePropertiesSection(this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
           sectionIdx++;
           lastBlock.sections.push(section);
         });
@@ -941,7 +960,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         addLayerSeparator(style);
         const lastBlock = blocks[blocks.length - 1];
         this.idleCallbackManager.schedule(() => {
-          const section = new HighlightPseudoStylePropertiesSection(this, matchedStyles, style, sectionIdx);
+          const section = new HighlightPseudoStylePropertiesSection(
+              this, matchedStyles, style, sectionIdx, computedStyles, parentsComputedStyles);
           sectionIdx++;
           lastBlock.sections.push(section);
         });

package/front_end/panels/elements/elements.ts

@@ -22,6 +22,7 @@ import './StylePropertyHighlighter.js';
 import './StylesSidebarPane.js';
 import './StylePropertyTreeElement.js';
 import './ComputedStyleWidget.js';
+import './CSSRuleValidator.js';
 import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
@@ -32,6 +33,7 @@ import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
 import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
+import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as DOMLinkifier from './DOMLinkifier.js';
 import * as DOMPath from './DOMPath.js';
 import * as ElementsPanel from './ElementsPanel.js';
@@ -62,6 +64,7 @@ export {
   ColorSwatchPopoverIcon,
   ComputedStyleModel,
   ComputedStyleWidget,
+  CSSRuleValidator,
   DOMLinkifier,
   DOMPath,
   ElementsPanel,

package/front_end/panels/elements/stylesSectionTree.css

@@ -155,6 +155,16 @@ ol.expanded {
   transform: scale(0.9);
 }
 
+.hint {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  cursor: pointer;
+  transform: scale(0.9);
+}
+
 .has-ignorable-error {
   color: var(--color-text-disabled);
 }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -415,6 +415,7 @@ export class DeviceModeToolbar {
     boundAppendScaleItem('100%', 1);
     boundAppendScaleItem('125%', 1.25);
     boundAppendScaleItem('150%', 1.5);
+    boundAppendScaleItem('200%', 2);
 
     function appendScaleItem(this: DeviceModeToolbar, title: string, value: number): void {
       contextMenu.defaultSection().appendCheckboxItem(

package/front_end/panels/media/eventDisplayTable.css

@@ -16,3 +16,7 @@
 .data-grid .event-display-table-basic-text-table-entry {
   line-height: 26px;
 }
+
+.event-display-table-contents-json-wrapper > .json-view {
+  overflow: visible;
+}

package/front_end/panels/network/components/RequestHeadersView.ts

@@ -20,23 +20,23 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromMemoryCache: '(from memory cache)',
+  fromDiskCache: '(from disk cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromServiceWorker: '(from `service worker`)',
+  fromMemoryCache: '(from memory cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromSignedexchange: '(from signed-exchange)',
+  fromPrefetchCache: '(from prefetch cache)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromPrefetchCache: '(from prefetch cache)',
+  fromServiceWorker: '(from `service worker`)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  fromDiskCache: '(from disk cache)',
+  fromSignedexchange: '(from signed-exchange)',
   /**
   *@description Text in Request Headers View of the Network panel
   */
@@ -52,16 +52,24 @@ const UIStrings = {
   /**
   *@description Text in Request Headers View of the Network panel
   */
-  requestHeaders: 'Request Headers',
+  referrerPolicy: 'Referrer Policy',
   /**
-  *@description The URL of a request
+  *@description Text in Network Log View Columns of the Network panel
   */
-  requestUrl: 'Request URL',
+  remoteAddress: 'Remote Address',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  requestHeaders: 'Request Headers',
   /**
   *@description The HTTP method of a request
   */
   requestMethod: 'Request Method',
   /**
+  *@description The URL of a request
+  */
+  requestUrl: 'Request URL',
+  /**
   *@description A context menu item in the Network Log View Columns of the Network panel
   */
   responseHeaders: 'Response Headers',
@@ -73,14 +81,6 @@ const UIStrings = {
   *@description HTTP response code
   */
   statusCode: 'Status Code',
-  /**
-  *@description Text in Network Log View Columns of the Network panel
-  */
-  remoteAddress: 'Remote Address',
-  /**
-  *@description Text in Request Headers View of the Network panel
-  */
-  referrerPolicy: 'Referrer Policy',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestHeadersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/ui/components/node_text/nodeText.css

@@ -7,21 +7,21 @@
 /* See: https://crbug.com/1227651 for details on changing these to --override pattern. */
 
 .node-label-name {
-  color: var(--override-node-text-label-color, --color-token-tag);
+  color: var(--override-node-text-label-color, var(--color-token-tag));
 }
 
 .node-label-class {
-  color: var(--override-node-text-class-color, --color-token-attribute);
+  color: var(--override-node-text-class-color, var(--color-token-attribute));
 }
 
 .node-label-id {
-  color: var(--override-node-text-id-color);
+  color: var(--override-node-text-id-color, var(--color-token-attribute));
 }
 
 .node-label-class.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-class, var(--override-node-text-class-color, var(--color-token-attribute)));
 }
 
 .node-label-id.node-multiple-descriptors {
-  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, --color-token-attribute));
+  color: var(--override-node-text-multiple-descriptors-id, var(--override-node-text-id-color, var(--color-token-attribute)));
 }

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -38,6 +38,7 @@ li {
   height: 12px;
   width: 13px;
   overflow: hidden;
+  flex: none;
 }
 
 ul {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1018151"
+  "version": "1.0.1019389"
 }