chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -43,18 +42,16 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/developer_resources/DeveloperResourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-let developerResourcesViewInstance: DeveloperResourcesView;
-
-export class DeveloperResourcesView extends UI.Widget.VBox {
+export class DeveloperResourcesView extends UI.ThrottledWidget.ThrottledWidget {
   private textFilterRegExp: RegExp|null;
   private readonly filterInput: UI.Toolbar.ToolbarInput;
   private readonly coverageResultsElement: HTMLElement;
   private listView: DeveloperResourcesListView;
   private readonly statusToolbarElement: HTMLElement;
   private statusMessageElement: HTMLElement;
-  private readonly throttler: Common.Throttler.Throttler;
   private readonly loader: SDK.PageResourceLoader.PageResourceLoader;
-  private constructor() {
+
+  constructor() {
     super(true);
 
     const toolbarContainer = this.contentElement.createChild('div', 'developer-resource-view-toolbar-container');
@@ -79,24 +76,11 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     this.statusToolbarElement = this.contentElement.createChild('div', 'developer-resource-view-toolbar-summary');
     this.statusMessageElement = this.statusToolbarElement.createChild('div', 'developer-resource-view-message');
 
-    this.throttler = new Common.Throttler.Throttler(100);
     this.loader = SDK.PageResourceLoader.PageResourceLoader.instance();
-    this.loader.addEventListener(SDK.PageResourceLoader.Events.Update, this.onUpdate, this);
-    this.onUpdate();
-  }
-
-  static instance(): DeveloperResourcesView {
-    if (!developerResourcesViewInstance) {
-      developerResourcesViewInstance = new DeveloperResourcesView();
-    }
-    return developerResourcesViewInstance;
+    this.loader.addEventListener(SDK.PageResourceLoader.Events.Update, this.update, this);
   }
 
-  private onUpdate(): void {
-    void this.throttler.schedule(this.update.bind(this));
-  }
-
-  private async update(): Promise<void> {
+  async doUpdate(): Promise<void> {
     this.listView.reset();
     this.listView.update(this.loader.getResourcesLoaded().values());
     this.updateStats();
@@ -117,9 +101,6 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
         this.textFilterRegExp.test(item.errorMessage || '');
   }
 
-  /**
-   *
-   */
   private onFilterChanged(): void {
     if (!this.listView) {
       return;
@@ -130,6 +111,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([developerResourcesViewStyles]);

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

@@ -40,6 +40,6 @@ UI.ViewManager.registerViewExtension({
   experiment: Root.Runtime.ExperimentName.DEVELOPER_RESOURCES_VIEW,
   async loadView() {
     const DeveloperResources = await loadDeveloperResourcesModule();
-    return DeveloperResources.DeveloperResourcesView.DeveloperResourcesView.instance();
+    return new DeveloperResources.DeveloperResourcesView.DeveloperResourcesView();
   },
 });

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -7,54 +7,50 @@ import * as i18n from '../../core/i18n/i18n.js';
 
 import {
   buildPropertyDefinitionText,
-  buildPropertyText,
+  buildPropertyName,
+  buildPropertyValue,
   isFlexContainer,
   isGridContainer,
+  isInlineElement,
   isMulticolContainer,
+  isPossiblyReplacedElement,
 } from './CSSRuleValidatorHelper.js';
 
 const UIStrings = {
-  /**
-    *@description The type of the CSS rule validation message shown in the Style pane. "Deprecated property" means that a property in the declaration is deprecated and should not be used.
-    */
-  deprecatedPropertyHintPrefix: 'Deprecated property',
-  /**
-    *@description The type of the CSS rule validation message shown in the Style pane. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
-    */
-  inactivePropertyHintPrefix: 'Inactive property',
   /**
     *@description The message shown in the Style pane when the user hovers over a property that has no effect due to some other property.
     *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedBySameElementRuleReason:
-      'The {REASON_PROPERTY_DECLARATION_CODE} property on the same element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to some other property.
-    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
+    *@example {flex-wrap} PROPERTY_NAME
+    @example {nowrap} PROPERTY_VALUE
     */
-  ruleViolatedBySameElementRuleFix: 'Try removing {REASON_PROPERTY_DECLARATION_CODE} or changing its value.',
+  ruleViolatedBySameElementRuleFix: 'Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the current property value.
     *@example {display: block} EXISTING_PROPERTY_DECLARATION
     *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
   ruleViolatedBySameElementRuleChangeSuggestion:
-      'Try changing the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
+      'Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to properties of the parent element.
     *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
     *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
   ruleViolatedByParentElementRuleReason:
-      'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element bypasses the effect of {AFFECTED_PROPERTY_DECLARATION_CODE}.',
+      'The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
     *@description The message shown in the Style pane when the user hovers over a property declaration that has no effect due to the properties of the parent element.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
   ruleViolatedByParentElementRuleFix:
-      'Try changing the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
+      'Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -65,27 +61,16 @@ export const enum HintType {
 }
 
 export class Hint {
-  readonly #hintType: HintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
   readonly #learnMoreLink: string|undefined;
 
-  constructor(hintType: HintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
-    this.#hintType = hintType;
+  constructor(hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
     this.#learnMoreLink = learnMoreLink;
   }
 
-  getPrefix(): string {
-    switch (this.#hintType) {
-      case HintType.INACTIVE_PROPERTY:
-        return i18nString(UIStrings.inactivePropertyHintPrefix);
-      case HintType.DEPRECATED_PROPERTY:
-        return i18nString(UIStrings.deprecatedPropertyHintPrefix);
-    }
-  }
-
   getMessage(): string {
     return this.#hintMessage;
   }
@@ -115,8 +100,8 @@ export abstract class CSSRuleValidator {
   }
 
   abstract getHint(
-      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
-      |undefined;
+      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>,
+      nodeName?: string): Hint|undefined;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -143,16 +128,16 @@ export class AlignContentValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('flex-wrap', 'nowrap');
-    const affectedPropertyDeclarationCode = buildPropertyText('align-content');
+    const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('flex-wrap'),
+          PROPERTY_VALUE: buildPropertyValue('nowrap'),
         }),
     );
   }
@@ -180,18 +165,17 @@ export class FlexItemValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
-    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+    const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
           'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
-          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
         }),
     );
   }
@@ -199,7 +183,7 @@ export class FlexItemValidator extends CSSRuleValidator {
 
 export class FlexContainerValidator extends CSSRuleValidator {
   constructor() {
-    super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
+    super(['flex-direction', 'flex-flow', 'flex-wrap']);
   }
 
   getMetricType(): Host.UserMetrics.CSSHintType {
@@ -219,10 +203,9 @@ export class FlexContainerValidator extends CSSRuleValidator {
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
     const targetRuleCode = buildPropertyDefinitionText('display', 'flex');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -263,10 +246,9 @@ export class GridContainerValidator extends CSSRuleValidator {
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
     const targetRuleCode = buildPropertyDefinitionText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -287,6 +269,11 @@ export class GridItemValidator extends CSSRuleValidator {
       'grid-row',
       'grid-row-end',
       'grid-row-start',
+      // At the time of writing (November 2022), `justify-self` is only in effect in grid layout.
+      // There are no other browsers that support `justify-self` in other layouts.
+      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+      // TODO: move `justify-self` to other validator or change pop-over text if Chrome supports CSS Align in other layouts.
+      'justify-self',
     ]);
   }
 
@@ -307,18 +294,59 @@ export class GridItemValidator extends CSSRuleValidator {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
-    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const targetParentPropertyDeclaration = buildPropertyDefinitionText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+
+    return new Hint(
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class FlexOrGridItemValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'place-self',
+      'align-self',
+    ]);
+  }
+
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.FlexOrGridItem;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
+    if (!parentComputedStyles) {
+      return true;
+    }
+    return isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles);
+  }
+
+  getHint(propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined {
+    if (this.#isRuleValid(computedStyles, parentComputedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
+    const targetParentPropertyDeclaration =
+        `${buildPropertyDefinitionText('display', 'flex')} or ${buildPropertyDefinitionText('display', 'grid')}`;
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
           'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
-          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targetParentPropertyDeclaration,
         }),
     );
   }
@@ -328,9 +356,10 @@ export class FlexGridValidator extends CSSRuleValidator {
   constructor() {
     super([
       'order',
+      'justify-content',
       'align-content',
+      'place-content',  // Shorthand	<'align-content'> <'justify-content'>?
       'align-items',
-      'align-self',
     ]);
   }
 
@@ -351,16 +380,16 @@ export class FlexGridValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -396,16 +425,16 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -428,12 +457,12 @@ export class PaddingValidator extends CSSRuleValidator {
 
   #isRuleValid(computedStyles?: Map<string, string>): boolean {
     const display = computedStyles?.get('display');
-    if (display === null || display === undefined) {
+    if (!display) {
       return true;
     }
     return !['table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group',
              'table-column']
-                .includes(display as string);
+                .includes(display);
   }
 
   getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
@@ -442,16 +471,16 @@ export class PaddingValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -485,16 +514,16 @@ export class PositionValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          PROPERTY_NAME: buildPropertyName('position'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
         }),
     );
   }
@@ -513,7 +542,7 @@ export class ZIndexValidator extends CSSRuleValidator {
 
   #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
     const position = computedStyles?.get('position');
-    if (position === null || position === undefined) {
+    if (!position) {
       return true;
     }
     return ['absolute', 'relative', 'fixed', 'sticky'].includes(position) || isFlexContainer(parentComputedStyles);
@@ -526,16 +555,67 @@ export class ZIndexValidator extends CSSRuleValidator {
     }
 
     const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
 
     return new Hint(
-        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
         }),
         i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          PROPERTY_NAME: buildPropertyName('position'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('position') as string),
+        }),
+    );
+  }
+}
+
+/**
+ * Validates if CSS width/height are having an effect on an element.
+ * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-width.
+ * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-height.
+ */
+export class SizingValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'width',
+      'height',
+    ]);
+  }
+
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.Sizing;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, nodeName?: string): boolean {
+    if (!computedStyles || !nodeName) {
+      return true;
+    }
+    if (!isInlineElement(computedStyles)) {
+      return true;
+    }
+    // See https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements.
+    return isPossiblyReplacedElement(nodeName);
+  }
+
+  getHint(
+      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>,
+      nodeName?: string): Hint|undefined {
+    if (this.#isRuleValid(computedStyles, nodeName)) {
+      return;
+    }
+
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyName(propertyName);
+
+    return new Hint(
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          PROPERTY_NAME: buildPropertyName('display'),
+          PROPERTY_VALUE: buildPropertyValue(computedStyles?.get('display') as string),
         }),
     );
   }
@@ -543,11 +623,13 @@ export class ZIndexValidator extends CSSRuleValidator {
 
 const CSS_RULE_VALIDATORS = [
   AlignContentValidator,
-  FlexItemValidator,
   FlexContainerValidator,
+  FlexGridValidator,
+  FlexItemValidator,
   GridContainerValidator,
   GridItemValidator,
-  FlexGridValidator,
+  FlexOrGridItemValidator,
+  SizingValidator,
   MulticolFlexGridValidator,
   PaddingValidator,
   PositionValidator,

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -4,15 +4,19 @@
 
 export const buildPropertyDefinitionText = (property: string, value?: string): string => {
   if (value === undefined) {
-    return buildPropertyText(property);
+    return buildPropertyName(property);
   }
   return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
 };
 
-export const buildPropertyText = (property: string): string => {
+export const buildPropertyName = (property: string): string => {
   return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
 };
 
+export const buildPropertyValue = (property: string): string => {
+  return '<code class="unbreakable-text">' + property + '</code>';
+};
+
 export const isFlexContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;
@@ -21,6 +25,32 @@ export const isFlexContainer = (computedStyles?: Map<string, string>): boolean =
   return display === 'flex' || display === 'inline-flex';
 };
 
+export const isInlineElement = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
+    return false;
+  }
+  return computedStyles.get('display') === 'inline';
+};
+
+// See https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements
+const possiblyReplacedElements = new Set([
+  'audio',
+  'canvas',
+  'embed',
+  'iframe',
+  'img',
+  'input',
+  'object',
+  'video',
+]);
+
+export const isPossiblyReplacedElement = (nodeName?: string): boolean => {
+  if (!nodeName) {
+    return false;
+  }
+  return possiblyReplacedElements.has(nodeName);
+};
+
 export const isGridContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -75,7 +75,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   }
 
   private onKeyDown(event: KeyboardEvent): void {
-    if (!(event.key === 'Enter') && !isEscKey(event)) {
+    if (!(event.key === 'Enter') && !Platform.KeyboardUtilities.isEscKey(event)) {
       return;
     }
 
@@ -88,7 +88,7 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
 
     const eventTarget = (event.target as HTMLElement);
     let text: ''|string = (eventTarget.textContent as string);
-    if (isEscKey(event)) {
+    if (Platform.KeyboardUtilities.isEscKey(event)) {
       if (!Platform.StringUtilities.isWhitespace(text)) {
         event.consume(true);
       }

package/front_end/panels/elements/ElementsPanel.ts

@@ -811,6 +811,18 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
+  selectAndShowSidebarTab(tabId: SidebarPaneTabId): void {
+    if (!this.sidebarPaneView) {
+      return;
+    }
+
+    this.sidebarPaneView.tabbedPane().selectTab(tabId);
+
+    if (!this.isShowing()) {
+      void UI.ViewManager.ViewManager.instance().showView('elements');
+    }
+  }
+
   private updateBreadcrumbIfNeeded(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>): void {
     const nodes = event.data;
     /* If we don't have a selected node then we can tell the breadcrumbs that & bail. */
@@ -936,7 +948,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       stylePaneWrapperElement.style.setProperty('left', `${- 1 * largeLength}px`);
       stylePaneWrapperElement.style.setProperty('padding-left', `${largeLength}px`);
       stylePaneWrapperElement.style.setProperty('width', `calc(100% + ${largeLength}px)`);
-      stylePaneWrapperElement.style.setProperty('position', 'absolute');
+      stylePaneWrapperElement.style.setProperty('position', 'fixed');
 
       stylePaneWrapperElement.window().addEventListener('blur', uninstallHackBound);
       stylePaneWrapperElement.window().addEventListener('contextmenu', uninstallHackBound, true);
@@ -1425,6 +1437,12 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         void SDK.DOMModel.DOMModelUndoStack.instance().redo();
         ElementsPanel.instance().stylesWidget.forceUpdate();
         return true;
+      case 'elements.show-styles':
+        ElementsPanel.instance().selectAndShowSidebarTab(SidebarPaneTabId.Styles);
+        return true;
+      case 'elements.show-computed':
+        ElementsPanel.instance().selectAndShowSidebarTab(SidebarPaneTabId.Computed);
+        return true;
     }
     return false;
   }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -34,8 +34,10 @@
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+
 import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -230,7 +232,7 @@ export class StylePropertiesSection {
         this.onFontEditorButtonClicked();
       }, this);
       this.fontEditorButton.element.addEventListener('keydown', event => {
-        if (isEnterOrSpaceKey(event)) {
+        if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
           event.consume(true);
           this.onFontEditorButtonClicked();
         }